About: acknowledge the projects Astrolabe is built on and shaped by

This commit is contained in:
2026-06-25 01:08:24 +03:00
parent d76a7a5014
commit 2dce270ac7
2 changed files with 115 additions and 3 deletions
+20 -1
View File
@@ -94,7 +94,26 @@
vertical-align: top;
}
/* Privacy list */
/* Acknowledgements — a labelled group above each credit list. */
.ackGroup {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.ackLabel {
margin: 0;
font-size: 13px;
font-weight: 600;
color: var(--text);
}
/* Trailing "— what it's for" gloss after the project links. */
.ackNote {
color: var(--text-secondary);
}
/* Privacy + acknowledgement lists */
.list {
margin: 0;
padding-left: var(--space-5);
+95 -2
View File
@@ -3,10 +3,12 @@
*
* Rendered inside ModalShell — no backdrop, close button, or focus trap here;
* the shell owns all of that (docs/architecture/03 → Layer 3). This component
* is pure content: app identity, keyboard shortcuts (§01D), and privacy posture
* (SOUL.md — local-only, no accounts, no telemetry).
* is pure content: app identity, keyboard shortcuts (§01D), privacy posture
* (SOUL.md — local-only, no accounts, no telemetry), and acknowledgements of
* the projects Astrolabe is built on and shaped by.
*/
import type { ReactNode } from 'react';
import { FEEDBACK_EMAIL, feedbackMailtoHref } from '../feedback';
import styles from './AboutModal.module.css';
@@ -23,6 +25,18 @@ const SHORTCUTS: readonly { keys: string; action: string }[] = [
{ keys: 'Esc', action: 'Close the active modal' },
];
/**
* External acknowledgement link. Opens in a new tab so following a credit never
* unloads the workspace mid-edit; `rel` isolates the opened context.
*/
function Ack({ href, children }: { href: string; children: ReactNode }) {
return (
<a className={styles.link} href={href} target="_blank" rel="noopener noreferrer">
{children}
</a>
);
}
export function AboutModal() {
return (
<div className={styles.about}>
@@ -88,6 +102,85 @@ export function AboutModal() {
.
</p>
</section>
{/* Acknowledgements */}
<section className={styles.section}>
<h3 className={styles.heading}>Acknowledgements</h3>
<p className={styles.body}>Astrolabe stands on the work of many open projects.</p>
<div className={styles.ackGroup}>
<h4 className={styles.ackLabel}>Built on</h4>
<ul className={styles.list}>
<li>
<Ack href="https://vega.github.io/vega-lite/">Vega-Lite</Ack>,{' '}
<Ack href="https://vega.github.io/vega/">Vega</Ack>,{' '}
<Ack href="https://github.com/vega/vega-embed">vega-embed</Ack>
<span className={styles.ackNote}> render every chart</span>
</li>
<li>
<Ack href="https://microsoft.github.io/monaco-editor/">Monaco</Ack>
<span className={styles.ackNote}> the JSON editor</span>
</li>
<li>
<Ack href="https://react.dev/">React</Ack>,{' '}
<Ack href="https://github.com/pmndrs/zustand">Zustand</Ack>,{' '}
<Ack href="https://vite.dev/">Vite</Ack>
</li>
</ul>
</div>
<div className={styles.ackGroup}>
<h4 className={styles.ackLabel}>Chart guidance shaped by</h4>
<ul className={styles.list}>
<li>
<Ack href="https://github.com/uwdata/draco">Draco</Ack>,{' '}
<Ack href="https://github.com/vega/voyager">Voyager</Ack>
<span className={styles.ackNote}> encoding rules</span>
</li>
<li>
<Ack href="https://github.com/Financial-Times/chart-doctor">FT Visual Vocabulary</Ack>
, <Ack href="https://www.datawrapper.de/">Datawrapper</Ack>
</li>
<li>
<Ack href="https://github.com/vega/lyra">Lyra</Ack>
<span className={styles.ackNote}> authoring interactions</span>
</li>
</ul>
</div>
<div className={styles.ackGroup}>
<h4 className={styles.ackLabel}>Design informed by</h4>
<ul className={styles.list}>
<li>
<Ack href="https://carbondesignsystem.com/">IBM Carbon</Ack>,{' '}
<Ack href="https://design-system.service.gov.uk/">GOV.UK</Ack>
</li>
<li>
<Ack href="https://www.w3.org/WAI/ARIA/apg/">WAI-ARIA APG</Ack>,{' '}
<Ack href="https://www.nngroup.com/">Nielsen Norman</Ack>
</li>
</ul>
</div>
<div className={styles.ackGroup}>
<h4 className={styles.ackLabel}>Typography</h4>
<ul className={styles.list}>
<li>
<Ack href="https://github.com/IBM/plex">IBM Plex</Ack> and other open typefaces,
self-hosted via <Ack href="https://fontsource.org/">Fontsource</Ack>
</li>
</ul>
</div>
</section>
{/* Sibling project */}
<section className={styles.section}>
<h3 className={styles.heading}>Also from the maker</h3>
<p className={styles.body}>
Astrolabe has a sibling: <Ack href="https://syto.app">Syto</Ack>, a workspace for cleaning
and reshaping data before you chart it. Go take a look.
</p>
</section>
</div>
);
}