165 lines
6.6 KiB
Plaintext
165 lines
6.6 KiB
Plaintext
<%= render HeaderComponent.new(title: "Storage") %>
|
|
|
|
<%= render MainSimpleComponent.new do %>
|
|
<section>
|
|
<p class="mb-6">
|
|
Store and synchronize your app data across different devices.
|
|
</p>
|
|
</section>
|
|
|
|
<%= render partial: "shared/tabnav_remotestorage" %>
|
|
|
|
<section>
|
|
<h3>Your Storage Address</h3>
|
|
<p class="mb-6">
|
|
In order to connect an app to your storage account, give it your address:
|
|
</p>
|
|
<p data-controller="clipboard" class="flex gap-1 sm:w-2/5">
|
|
<img src="/img/logos/icon_remotestorage.svg"
|
|
class="inline-block h-6 w-6 mr-1 self-center">
|
|
<input type="text" id="user_address" class="grow"
|
|
value=<%= current_user.address %> disabled="disabled"
|
|
data-clipboard-target="source" />
|
|
<button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
|
|
data-clipboard-target="trigger" data-action="clipboard#copy"
|
|
title="Copy to clipboard">
|
|
<span class="content-initial">
|
|
<%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
|
</span>
|
|
<span class="content-active hidden">
|
|
<%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
|
|
</span>
|
|
</button>
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Compatible Apps</h3>
|
|
<p>
|
|
Your Storage account is based on a new open standard called
|
|
<a href="https://remotestorage.io" target="_blank">
|
|
<img src="/img/logos/icon_remotestorage.svg" class="h-4 w-4 inline">
|
|
<strong>remoteStorage</strong>
|
|
</a>, which is not yet widely supported. Look
|
|
for the remoteStorage icon, or check the Sync settings in apps.
|
|
</p>
|
|
<p>
|
|
If you want your favorite apps to support syncing data with your own
|
|
Storage account, let the developers know! All relevant information is
|
|
available on the
|
|
<a href="https://remotestorage.io" target="_blank">remoteStorage website</a>.
|
|
</p>
|
|
</section>
|
|
|
|
<section>
|
|
<h3>Recommended Apps</h3>
|
|
<div data-controller="tabs"
|
|
data-tabs-active-tab-class="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
|
|
data-tabs-inactive-tab-class="text-gray-500 hover:text-gray-700"
|
|
class="mb-12">
|
|
<select data-action="tabs#change" data-tabs-target="select"
|
|
class="block w-full mb-8 sm:hidden">
|
|
<option>Productivity</option>
|
|
<option>Bookmarks</option>
|
|
<option>Reading</option>
|
|
<option>File sharing</option>
|
|
<option>Learning</option>
|
|
</select>
|
|
<ul class="hidden sm:flex list-reset mb-8 border-gray-200 border-b">
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline hover:no-underline text-inherit active:text-inherit">
|
|
Productivity
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline hover:no-underline text-inherit active:text-inherit">
|
|
Bookmarks
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline hover:no-underline text-inherit active:text-inherit">
|
|
Reading
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline hover:no-underline text-inherit active:text-inherit">
|
|
File sharing
|
|
</a>
|
|
</li>
|
|
<li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
|
|
<a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline hover:no-underline text-inherit active:text-inherit">
|
|
Learning
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
|
|
<%= render AppInfoComponent.new(
|
|
name: "Hyperdraft",
|
|
description: "Create text notes and (optionally) turn them into a website",
|
|
icon_path: "/img/app_icons/hyperdraft.png",
|
|
links: [
|
|
["Website", "https://hyperdraft.rosano.ca"],
|
|
]
|
|
) %>
|
|
<%= render AppInfoComponent.new(
|
|
name: "Notes Together",
|
|
description: "A powerful note-taking app, with support for attaching images and other files",
|
|
icon_path: "/img/app_icons/notes-together.png",
|
|
links: [
|
|
["Web App", "https://notestogether.hominidsoftware.com"],
|
|
]
|
|
) %>
|
|
<%= render AppInfoComponent.new(
|
|
name: "Papiers",
|
|
description: "A simple note-taking app",
|
|
icon_path: "/img/app_icons/papiers.png",
|
|
links: [
|
|
["Web App", "https://papiers.gitlab.io"],
|
|
]
|
|
) %>
|
|
</div>
|
|
<div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
|
|
<%= render AppInfoComponent.new(
|
|
name: "Webmarks",
|
|
description: "Archive your bookmarks in your remote storage",
|
|
icon_path: "/img/app_icons/webmarks.png",
|
|
links: [
|
|
["Web App", "https://webmarks.5apps.com"],
|
|
]
|
|
) %>
|
|
</div>
|
|
<div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
|
|
<%= render AppInfoComponent.new(
|
|
name: "Pétrolette",
|
|
description: "A news aggregator that syncs with your remote storage",
|
|
icon_path: "/img/app_icons/petrolette.png",
|
|
links: [
|
|
["Web App", "https://petrolette.space"],
|
|
]
|
|
) %>
|
|
</div>
|
|
<div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
|
|
<%= render AppInfoComponent.new(
|
|
name: "Sharesome",
|
|
description: "Quickly and easily share files from your remote storage",
|
|
icon_path: "/img/app_icons/sharesome.png",
|
|
links: [
|
|
["Web App", "https://sharesome.5apps.com"],
|
|
]
|
|
) %>
|
|
</div>
|
|
<div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
|
|
<%= render AppInfoComponent.new(
|
|
name: "Kommit",
|
|
description: "Create flashcards and learn them with spaced-repetition",
|
|
icon_path: "/img/app_icons/kommit.png",
|
|
links: [
|
|
["Website", "https://kommit.rosano.ca"],
|
|
]
|
|
) %>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<% end %>
|