diff --git a/about.html b/about.html new file mode 100644 index 0000000..e784b2f --- /dev/null +++ b/about.html @@ -0,0 +1,80 @@ + + + + + + + Astrolabe - your Vega-Lite IDE/Snippet manager + + + + + + + + + +
+
+ + Astrolabe logo +

Astrolabe

+
+
+ +
+
+

About Astrolabe

+

Astrolabe is a simple web application that allows you to create, edit, and save Vega & Vega-Lite snippets. + You can + create a new snippet, edit it, and save it to your browser's local storage. You can also export your + snippets to a JSON file and import them back into the application.

+

How to use Astrolabe

+

When you first open Astrolabe, you will see two panels: the Snippets panel and the Editor panel. The + Snippets panel displays a list of all your snippets, and the Editor panel allows you to edit the + selected + snippet. You can create a new snippet by clicking the "New Snippet" button in the Snippets panel. + You can + also search for snippets using the search bar at the top of the Snippets panel.

+

Managing Snippets

+

+

    +
  • You can create a new snippet by clicking the "New Snippet" button in the Snippets panel.
  • +
  • You can search for snippets using the search bar at the top of the Snippets panel.
  • +
  • You can rename a snippet's name by clicking the "Rename ✏️" button in the Snippets panel.
  • +
  • You can edit a snippet by selecting it in the Snippets panel.
  • +
  • You can delete a snippet by clicking the "Delete" button in the Snippets panel.
  • +
  • You can add or edit the comment for a snippet by clicking the "Comment 💬" icon.
  • +
+

+

When you select a snippet in the Snippets panel, the Editor panel will display the snippet's code in + an editor. You can edit the code and save it by clicking the "Save" button. You can also switch + between the editor and the saved version of the snippet by clicking the "View Saved" button.

+

Exporting and importing snippets

+

You can export your snippets to a JSON file by clicking the "Export" button in the header. You can + import + snippets from a JSON file by clicking the "Import" button in the header and selecting the file you + want to + import.

+

Privacy

+

+ Astrolabe does not collect any personal data. All your snippets are stored locally in your browser's + local storage. If you clear your browser's local storage, all your snippets will be deleted. + The only data that is collected is anonymous usage data, which is used to better understand + how users interact with the application. It is publicly available on the Plausible Analytics website. +

+

Feedback

+

If you have any feedback or suggestions for Astrolabe, please feel free to reach out to me on Twitter + @olehomelchenko. +

+
+
+
+ + + + \ No newline at end of file diff --git a/index.html b/index.html index 7598fce..295bd3f 100644 --- a/index.html +++ b/index.html @@ -23,14 +23,17 @@
- - Astrolabe logo -

Astrolabe

-
+
+ About
diff --git a/src/styles.css b/src/styles.css index 94b5cdc..0d6ba84 100644 --- a/src/styles.css +++ b/src/styles.css @@ -352,4 +352,84 @@ width: 100%; height: calc(100% - 2rem); margin-bottom: 1rem; +} + +.header-left { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.about-link { + font-family: var(--ui-font); + font-size: 1rem; + color: #607D8B; + text-decoration: none; + transition: color 0.2s; + padding-left: 1rem; +} + +.about-link:hover { + color: #546E7A; +} + +.content { + max-width: 66%; + margin: 0 auto; + padding: 2rem 0; + font-family: var(--ui-font); + font-size: 1rem; + line-height: 1.5; + color: #333; +} + +.content h2 { + font-size: 1.5rem; + font-weight: 600; + margin-top: 1.5rem; +} + +.content p { + margin-bottom: 1rem; +} + +.content a { + color: #2196F3; + text-decoration: none; +} + +.content a:hover { + text-decoration: underline; +} + +.content ul { + padding-left: 1.5rem; + margin-bottom: 1rem; +} + +.content li { + margin-bottom: 0.5rem; +} + +.footer { + text-align: center; + font-size: 0.875rem; + padding: 1rem 0; + background: #f5f5f5; + border-top: 1px solid #e0e0e0; + font-family: var(--ui-font); +} + +.footer p { + margin: 0; + color: #333; +} + +.footer a { + color: #2196F3; + text-decoration: none; +} + +.footer a:hover { + text-decoration: underline; } \ No newline at end of file