The navbar has Getting started, Sheets, Formulas, Files, Nushell, Agents and Terminal, and Reference as a menu of its pages, sized to fit down to the width Docusaurus collapses it at. The landing page's control panel lists the same sections, so the navbar leaves them to it there. The hero heading says what 012 is rather than repeating the name the logomark shows, the title's cursor is gone so the control panel's is the only one, and A1 at rest holds a link to the guides.
- commit
- 39424e0d51b05a4c836e0a6e6fdbc789dddfd37d
- parent
- fbbdcb816f326eeece8066c3bceda554cc664400
- author
- Dami <dami.etoile@gmail.com>
- kind
- feat risk score 1.7 of 3, Jev's estimate
| M | docs/ | 4 | +++ |
| M | website/ | 38 | +++++++++++++++++++++++++++--- |
| M | website/ | 36 | ++++++++++++++++++++++++++++ |
| M | website/ | 28 | ++++------------------ |
| M | website/ | 20 | +++++++++------- |
@@ -114,6 +114,10 @@ The landing page (`website/src/pages/index.tsx`) is drawn as a 012
114114 screen: a control panel with the mode indicator, the recording in an115115 overlay frame, the features as cells of a sheet (the one under the116116 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 bar119+lists the same sections, so on the landing page the navbar leaves them120+to it. The117121 colors in `website/src/css/custom.css` are the reference palettes of the118122 golden screens, given the roles the app gives them: cyan where you are,119123 bright black header bands, blue links and selection. Code, headings and@@ -12,6 +12,17 @@ const repo = 'https://github.com/FelineStateMachine/012';
1212 const repoDir = path.resolve(__dirname, '..');1313 const docsDir = path.join(repoDir, 'docs');1414 15+// The navbar's sections: a label and the docs folder it opens.16+const sections: [string, string][] = [17+ ['Getting started', 'getting-started'],18+ ['Sheets', 'sheets'],19+ ['Formulas', 'formulas'],20+ ['Files', 'files'],21+ ['Nushell', 'nushell'],22+ ['Agents', 'agents'],23+ ['Terminal', 'terminal'],24+];25+1526 // The site is served at the root of its own host; SITE_URL names that1627 // host for canonical links and the sitemap.1728 const url = process.env.SITE_URL || 'https://012.dev.site';@@ -89,11 +100,30 @@ const config: Config = {
89100 navbar: {90101 // The logomark alone: it already reads 012, so no title beside it.91102 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.92105 items: [93- {type: 'docSidebar', sidebarId: 'docs', position: 'left', label: 'Docs'},94- {to: '/docs/reference/keys/', label: 'Keys', position: 'left'},95- {to: '/docs/reference/functions/', label: 'Functions', position: 'left'},96- {href: `${repo}/blob/main/ROADMAP.md`, label: 'Roadmap', position: 'right'},106+ ...sections.map(([label, dir]) => ({107+ to: `/docs/${dir}/`,108+ activeBasePath: `/docs/${dir}/`,109+ label,110+ position: 'left' as const,111+ })),112+ {113+ type: 'dropdown',114+ label: 'Reference',115+ 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+ ],126+ },97127 {href: repo, label: 'GitHub', position: 'right'},98128 // The mode indicator, as at the right end of 012's first line.99129 {type: 'html', position: 'right', value: '<span class="mode-chip" aria-hidden="true">READY</span>'},@@ -287,6 +287,42 @@ html:has([data-control-panel]) .navbar .mode-chip {
287287 display: none;288288 }289289 290+/* The sections fit beside the search box down to the width the navbar291+ collapses at: links a little tighter, and the indicator only where292+ there's room for it too. */293+.navbar__items .navbar__item {294+ padding-left: 0.5rem;295+ padding-right: 0.5rem;296+ white-space: nowrap;297+}298+299+@media (max-width: 1279px) {300+ .navbar .mode-chip {301+ display: none;302+ }303+304+ .navbar__items .navbar__item {305+ padding-left: 0.35rem;306+ padding-right: 0.35rem;307+ }308+309+ .navbar__link {310+ font-size: 0.82rem;311+ }312+313+ .navbar__search-input {314+ width: 10rem;315+ }316+}317+318+/* The landing page's control panel lists the sections in its menu bar,319+ so the navbar leaves them to it wherever both would show. */320+@media (min-width: 997px) {321+ html:has([data-control-panel]) .navbar__items:not(.navbar__items--right) > .navbar__item {322+ display: none;323+ }324+}325+290326 .mode-chip {291327 font-family: var(--font-mono);292328 font-weight: 600;@@ -117,28 +117,11 @@
117117 118118 .title {119119 font-family: var(--font-mono);120- font-size: clamp(4.5rem, 11vw, 8.5rem);120+ font-size: clamp(2.2rem, 4.4vw, 3.4rem);121121 font-weight: 600;122- line-height: 0.9;123- letter-spacing: -0.04em;124- margin: 0 0 1.4rem;125-}126-127-.titleCursor {128- display: inline-block;129- width: 0.4em;130- height: 0.7em;131- margin-left: 0.08em;132- background: var(--role-accent-bg);133- animation: blink 1.1s steps(1) infinite;134-}135-136-.lede {137- font-family: var(--font-mono);138- font-size: 1.5rem;139- font-weight: 500;140- line-height: 1.3;141- margin: 0 0 1rem;122+ line-height: 1.1;123+ letter-spacing: -0.03em;124+ margin: 0 0 1.2rem;142125 }143126 144127 .sub {@@ -431,8 +414,7 @@
431414 animation: none;432415 }433416 434- .cursor,435- .titleCursor {417+ .cursor {436418 animation: none;437419 }438420 }@@ -16,9 +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.1921 const home: Cell = {2022 addr: 'A1',21- entry: "'012",23+ entry: '=HYPERLINK("/docs/getting-started/", "Get started")',2224 hint: 'Hover a cell, or Tab through them. F1 opens the guides.',2325 title: '',2426 body: '',@@ -76,14 +78,17 @@ const cells: Cell[] = [
7678 },7779 ];7880 81+// The menu bar lists the navbar's sections, in its order: on this page82+// it stands in for them (custom.css hides the navbar's at widths where83+// both would show).7984 const menu: {label: string; to: string}[] = [80- {label: 'Docs', to: '/docs/'},81- {label: 'Install', to: '/docs/getting-started/install/'},82- {label: 'Formulas', to: '/docs/formulas/'},85+ {label: 'Getting started', to: '/docs/getting-started/'},8386 {label: 'Sheets', to: '/docs/sheets/'},87+ {label: 'Formulas', to: '/docs/formulas/'},8488 {label: 'Files', to: '/docs/files/'},85- {label: 'Terminal', to: '/docs/terminal/'},8689 {label: 'Nushell', to: '/docs/nushell/'},90+ {label: 'Agents', to: '/docs/agents/'},91+ {label: 'Terminal', to: '/docs/terminal/'},8792 {label: 'Reference', to: '/docs/reference/'},8893 ];8994 @@ -121,10 +126,7 @@ function Hero() {
121126 return (122127 <section className={styles.hero}>123128 <div className={styles.heroText}>124- <h1 className={styles.title}>125- 012<span className={styles.titleCursor} aria-hidden="true" />126- </h1>127- <p className={styles.lede}>A spreadsheet for the terminal.</p>129+ <h1 className={styles.title}>A spreadsheet for the terminal.</h1>128130 <p className={styles.sub}>129131 The control panel, the mode indicator and the character grid of Lotus 1-2-3. Inside the grid, Google130132 Sheets: typing replaces a cell, <code>=</code> starts a formula, Enter and Tab move you on, and Sheets'