The navbar picks a section and the sidebar lists that section's pages, so the two no longer show the same list. The hero's headline and the page title's tagline go (the logomark names 012; a hidden h1 keeps the outline), and the install line is the install script.
- commit
- 4e51e8b033d23f9db13a8b6098f5f9c2a87f9695
- parent
- 74484903cfa991ae61b050e23f7d74247ce28c8b
- author
- Dami <dami.etoile@gmail.com>
- kind
- feat risk score 2.0 of 3, Jev's estimate
| M | docs/ | 10 | ++++++---- |
| M | website/ | 21 | ++++++--------------- |
| M | website/ | 24 | +++++++++++++++++++----- |
| M | website/ | 16 | +++++++++------- |
| M | website/ | 11 | +++++------ |
@@ -88,8 +88,9 @@ the site's first commit for every page there has been.
8888 `.md` files are CommonMark, so `<`, `{` and HTML comments are text and8989 markup rather than MDX. A page that needs components would be `.mdx`.9090 - Each folder's `README.md` is its category's page (`/docs/sheets/`),91- and the sidebar is generated from the tree: `_category_.json` for92- folders, `title` and `sidebar_position` for pages91+ and each section (top-level folder) has a sidebar of its own92+ (`website/sidebars.ts`), generated from its folder: `_category_.json`93+ for folders, `title` and `sidebar_position` for pages9394 ([Docs](testing.md#docs) has the rules the tree follows).9495 - Images in `docs/media/` are bundled from the pages that show them;9596 an image marked `#gh-dark-mode-only` or `#gh-light-mode-only` shows in@@ -114,8 +115,9 @@ The landing page (`website/src/pages/index.tsx`) is drawn as a 012
114115 screen: a control panel with the mode indicator, the recording in an115116 overlay frame, the features as cells of a sheet (the one under the116117 pointer shows its entry in the control panel), and a status line. The117-navbar lists the docs' sections by folder, with the reference pages in118-a menu (`website/docusaurus.config.ts`); the control panel's menu bar118+navbar lists the docs' sections by folder, each opening its section's119+sidebar, so the sidebar lists that section's pages rather than the120+sections again (`website/docusaurus.config.ts`); the control panel's menu bar119121 lists the same sections, so on the landing page the navbar leaves them120122 to it. The121123 colors in `website/src/css/custom.css` are the reference palettes of the@@ -100,29 +100,20 @@ const config: Config = {
100100 navbar: {101101 // The logomark alone: it already reads 012, so no title beside it.102102 logo: {alt: '012', src: 'img/logo.svg'},103- // The docs' sections, as their folders are, and the reference as a104- // menu; the landing page's control panel lists the same sections.103+ // The docs' sections, each opening its own sidebar (sidebars.ts);104+ // the landing page's control panel lists the same sections.105105 items: [106106 ...sections.map(([label, dir]) => ({107- to: `/docs/${dir}/`,108- activeBasePath: `/docs/${dir}/`,107+ type: 'docSidebar' as const,108+ sidebarId: dir,109109 label,110110 position: 'left' as const,111111 })),112112 {113- type: 'dropdown',113+ type: 'docSidebar',114+ sidebarId: 'reference',114115 label: 'Reference',115116 position: 'left',116- to: '/docs/reference/',117- activeBasePath: '/docs/reference/',118- items: [119- {to: '/docs/reference/keys/', label: 'Keys'},120- {to: '/docs/reference/functions/', label: 'Functions'},121- {to: '/docs/reference/config/', label: 'Configuration'},122- {to: '/docs/reference/command-line/', label: 'Command line'},123- {to: '/docs/reference/json/', label: 'JSON'},124- {to: '/docs/reference/macro-api/', label: 'Macro API'},125- ],126117 },127118 {href: repo, label: 'GitHub', position: 'right'},128119 // The mode indicator, as at the right end of 012's first line.@@ -1,9 +1,23 @@
11 import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';22 3-// One sidebar, generated from the docs tree: folders by their4-// _category_.json, pages by their front matter.5-const sidebars: SidebarsConfig = {6- docs: [{type: 'autogenerated', dirName: '.'}],7-};3+// A sidebar per section of the docs, each generated from its folder:4+// the navbar picks the section, the sidebar lists its pages, so the two5+// never show the same list. Folders order by their _category_.json, pages6+// by their front matter.7+const folders = [8+ 'getting-started',9+ 'sheets',10+ 'formulas',11+ 'files',12+ 'nushell',13+ 'agents',14+ 'terminal',15+ 'reference',16+ 'contributing',17+];18+19+const sidebars: SidebarsConfig = Object.fromEntries(20+ folders.map((dir) => [dir, [{type: 'autogenerated', dirName: dir}]]),21+);822 923 export default sidebars;@@ -115,13 +115,15 @@
115115 padding: 3.5rem 0 3.5rem;116116 }117117 118-.title {119- font-family: var(--font-mono);120- font-size: clamp(2.2rem, 4.4vw, 3.4rem);121- font-weight: 600;122- line-height: 1.1;123- letter-spacing: -0.03em;124- margin: 0 0 1.2rem;118+/* The page's heading, for screen readers and outlines: the logomark119+ already names 012 on screen. */120+.srOnly {121+ position: absolute;122+ width: 1px;123+ height: 1px;124+ overflow: hidden;125+ clip-path: inset(50%);126+ white-space: nowrap;125127 }126128 127129 .sub {@@ -16,11 +16,11 @@ type Cell = {
1616 to: string;1717 };1818 19-// The control panel at rest: the pointer on A1, whose entry is a link to20-// the guides, as a cell in 012 holds one.19+// The control panel at rest: the pointer on A1, holding a label, written20+// with the apostrophe 012 shows before text.2121 const home: Cell = {2222 addr: 'A1',23- entry: '=HYPERLINK("/docs/getting-started/", "Get started")',23+ entry: "'Start here",2424 hint: 'Hover a cell, or Tab through them. F1 opens the guides.',2525 title: '',2626 body: '',@@ -126,14 +126,14 @@ function Hero() {
126126 return (127127 <section className={styles.hero}>128128 <div className={styles.heroText}>129- <h1 className={styles.title}>A spreadsheet for the terminal.</h1>129+ <h1 className={styles.srOnly}>012</h1>130130 <p className={styles.sub}>131131 The control panel, the mode indicator and the character grid of Lotus 1-2-3. Inside the grid, Google132132 Sheets: typing replaces a cell, <code>=</code> starts a formula, Enter and Tab move you on, and Sheets'133133 shortcuts do what you expect. One pure-Go binary.134134 </p>135135 <pre className={styles.install} aria-label="Install">136- <span className={styles.prompt}>$ </span>go install github.com/FelineStateMachine/012/cmd/012@latest136+ <span className={styles.prompt}>$ </span>curl -fsSL https://012.dev.site/install.sh | sh137137 </pre>138138 <div className={styles.actions}>139139 <Link className={clsx(styles.action, styles.actionPrimary)} to="/docs/getting-started/">@@ -228,7 +228,6 @@ export default function Home(): ReactNode {
228228 const [cell, setCell] = useState<Cell | null>(null);229229 return (230230 <Layout231- title="A spreadsheet for the terminal"232231 description="012 is a terminal spreadsheet with the look of Lotus 1-2-3 and the behavior of Google Sheets.">233232 <main className={styles.page}>234233 <ControlPanel cell={cell ?? home} pointing={cell !== null} />