mirror of
https://github.com/olehomelchenko/astrolabe.git
synced 2026-08-08 02:02:33 +00:00
About: acknowledge the projects Astrolabe is built on and shaped by
This commit is contained in:
@@ -94,7 +94,26 @@
|
|||||||
vertical-align: top;
|
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 {
|
.list {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-left: var(--space-5);
|
padding-left: var(--space-5);
|
||||||
|
|||||||
@@ -3,10 +3,12 @@
|
|||||||
*
|
*
|
||||||
* Rendered inside ModalShell — no backdrop, close button, or focus trap here;
|
* Rendered inside ModalShell — no backdrop, close button, or focus trap here;
|
||||||
* the shell owns all of that (docs/architecture/03 → Layer 3). This component
|
* the shell owns all of that (docs/architecture/03 → Layer 3). This component
|
||||||
* is pure content: app identity, keyboard shortcuts (§01D), and privacy posture
|
* is pure content: app identity, keyboard shortcuts (§01D), privacy posture
|
||||||
* (SOUL.md — local-only, no accounts, no telemetry).
|
* (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 { FEEDBACK_EMAIL, feedbackMailtoHref } from '../feedback';
|
||||||
import styles from './AboutModal.module.css';
|
import styles from './AboutModal.module.css';
|
||||||
|
|
||||||
@@ -23,6 +25,18 @@ const SHORTCUTS: readonly { keys: string; action: string }[] = [
|
|||||||
{ keys: 'Esc', action: 'Close the active modal' },
|
{ 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() {
|
export function AboutModal() {
|
||||||
return (
|
return (
|
||||||
<div className={styles.about}>
|
<div className={styles.about}>
|
||||||
@@ -88,6 +102,85 @@ export function AboutModal() {
|
|||||||
.
|
.
|
||||||
</p>
|
</p>
|
||||||
</section>
|
</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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user