oleh/astrolabe
1
0
Fork 0
mirror of https://github.com/olehomelchenko/astrolabe.git synced 2025-12-21 21:22:25 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add About page with usage instructions and privacy information

Browse Source
This commit is contained in:
Oleh Omelchenko
2025-01-28 18:40:53 +02:00
parent 10896146cf
commit 499e0b265d
3 changed files with 167 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
about.html Normal file
View File

@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Astrolabe - your Vega-Lite IDE/Snippet manager</title>
<script defer data-domain="olehomelchenko.github.com"
src="https://plausible.io/js/script.outbound-links.tagged-events.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
<link rel="icon" href="src/astrolabe.svg" type="image/svg+xml">
<link rel="stylesheet" href="src/styles.css">
</head>
<body>
<div class="about-container">
<header class="app-header">
<a href="/">
<img src="src/astrolabe.svg" alt="Astrolabe logo">
<h1>Astrolabe</h1>
</a>
</header>
<div class="panel">
<div class="about content">
<h2>About Astrolabe</h2>
<p>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.</p>
<h2>How to use Astrolabe</h2>
<p>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.</p>
<h3>Managing Snippets</h3>
<p>
<ul>
<li>You can create a new snippet by clicking the "New Snippet" button in the Snippets panel.</li>
<li>You can search for snippets using the search bar at the top of the Snippets panel.</li>
<li>You can rename a snippet's name by clicking the "Rename ✏️" button in the Snippets panel.</li>
<li>You can edit a snippet by selecting it in the Snippets panel.</li>
<li>You can delete a snippet by clicking the "Delete" button in the Snippets panel.</li>
<li>You can add or edit the comment for a snippet by clicking the "Comment 💬" icon.</li>
</ul>
</p>
<p>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.</p>
<h2>Exporting and importing snippets</h2>
<p>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.</p>
<h2>Privacy</h2>
<p>
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 <a
href="https://plausible.io/olehomelchenko.github.com">Plausible Analytics</a> website.
</p>
<h2>Feedback</h2>
<p>If you have any feedback or suggestions for Astrolabe, please feel free to reach out to me on Twitter
<a href="https://twitter.com/olehomelchenko">@olehomelchenko</a>.
</p>
</div>
</div>
</div>
<footer class="footer">
<p>2025 Oleh Omelchenko <a href="https://olehomelchenko.com">olehomelchenko.com</a></p>
</footer>
</body>
</html>

3
index.html
View File

@@ -23,14 +23,17 @@
<body> <body>
<div class="container"> <div class="container">
<header class="app-header"> <header class="app-header">
<div class="header-left">
<a href="/"> <a href="/">
<img src="src/astrolabe.svg" alt="Astrolabe logo"> <img src="src/astrolabe.svg" alt="Astrolabe logo">
<h1>Astrolabe</h1> <h1>Astrolabe</h1>
</a> </a>
</div>
<div class="header-controls"> <div class="header-controls">
<button class="button mini" id="export-snippets">Export</button> <button class="button mini" id="export-snippets">Export</button>
<button class="button mini" id="import-snippets">Import</button> <button class="button mini" id="import-snippets">Import</button>
<input type="file" id="import-file" accept=".json" style="display: none"> <input type="file" id="import-file" accept=".json" style="display: none">
<a href="/about.html" class="about-link">About</a>
</div> </div>
</header> </header>
<div class="panel"> <div class="panel">

80
src/styles.css
View File

@@ -353,3 +353,83 @@
height: calc(100% - 2rem); height: calc(100% - 2rem);
margin-bottom: 1rem; 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;
}