docs(site): organize guides by audience and simplify onboarding

apps/web/app/docs/[...slug]/page.tsx

@@ -65,7 +65,7 @@ export default async function DocumentPage({ params }: PageProps) {
 
           <div className="mt-5 flex flex-wrap items-center gap-x-5 gap-y-2 font-mono text-micro text-fg-subtle">
             <a className="textlink" href={sourceUrl}>
-              {sourcePath}
+              Edit this page
             </a>
             {entry.generated ? <span className="chip">generated from the code</span> : null}
           </div>

apps/web/app/docs/page.tsx

@@ -2,20 +2,20 @@ import type { Metadata } from 'next'
 import Link from 'next/link'
 
 import { site } from '../../src/content/site'
-import { docHref, documentsInSection, internalDocuments, sections } from '../../src/docs/registry'
+import { docHref, documentsInSection, sections } from '../../src/docs/registry'
 import { ogImage } from '../../src/og/card'
 
 export const metadata: Metadata = {
   title: 'Documentation',
   description:
-    'Get a board running, configure it in code, operate it, build themes and plugins, and read the generated references.',
+    'Set up a board, get started with Meith, and find guides for operating, using, and developing it.',
   alternates: { canonical: '/docs' },
   openGraph: {
     type: 'website',
     siteName: site.name,
     title: `${site.name} documentation`,
     description:
-      'Get a board running, configure it in code, operate it, build themes and plugins, and read the generated references.',
+      'Set up a board, get started with Meith, and find guides for operating, using, and developing it.',
     url: '/docs',
     images: ogImage('/docs/og/index', `${site.name} documentation`),
   },
@@ -25,15 +25,23 @@ export default function DocsIndexPage() {
   return (
     <div className="max-w-[46rem]">
       <p className="eyebrow">Documentation</p>
-      <h1 className="display mt-3 text-huge leading-[1.05]">What do you want to do?</h1>
+      <h1 className="display mt-3 text-huge leading-[1.05]">Meith documentation</h1>
       <p className="mt-5 text-mid leading-[1.45] text-fg-muted text-pretty">
-        Choose a task below. Start with the primary guide in that section, then use the shorter
-        references when you need a specific detail.
+        Installing a board, running a community, or taking part? Start with the section for your
+        task.
       </p>
 
+      <nav aria-label="Documentation sections" className="mt-8 flex flex-wrap gap-3">
+        {sections.map((section) => (
+          <a key={section.id} href={`#${section.id}`} className="textlink text-micro">
+            {section.title}
+          </a>
+        ))}
+      </nav>
+
       <div className="mt-14 flex flex-col gap-14">
         {sections.map((section) => (
-          <section key={section.id} id={section.id}>
+          <section key={section.id} id={section.id} className="scroll-mt-24">
             <h2 className="text-large font-semibold tracking-[-0.025em] text-fg">
               {section.title}
             </h2>
@@ -50,7 +58,7 @@ export default function DocsIndexPage() {
                       <span className="text-mid text-fg transition-colors group-hover:text-accent">
                         {doc.title}
                       </span>
-                      {doc.generated ? <span className="chip">generated</span> : null}
+                      {doc.primary ? <span className="chip">Start here</span> : null}
                     </span>
                     <span
                       aria-hidden
@@ -66,38 +74,6 @@ export default function DocsIndexPage() {
           </section>
         ))}
       </div>
-
-      <section className="card mt-16 bg-surface p-6">
-        <h2 className="text-mid font-semibold tracking-[-0.02em] text-fg">
-          Kept in the repository
-        </h2>
-        <p className="mt-1 text-micro text-fg-muted">
-          These are working records rather than documentation, and they are only meaningful beside
-          the plan they are written against.
-        </p>
-        <ul className="mt-4 flex flex-col gap-2">
-          {internalDocuments.map((doc) => (
-            <li key={doc.file} className="text-micro text-fg-muted">
-              <a
-                className="textlink font-mono"
-                href={`${site.repository}/blob/main/docs/${doc.file}`}
-              >
-                docs/{doc.file}
-              </a>{' '}
-              — {doc.reason}
-            </li>
-          ))}
-        </ul>
-      </section>
-
-      <p className="mt-10 text-micro text-fg-subtle">
-        Every page here is rendered from the Markdown in{' '}
-        <a className="textlink font-mono" href={`${site.repository}/tree/main/docs`}>
-          docs/
-        </a>{' '}
-        at build time. There is no second copy to fall behind, and a document is corrected by
-        editing that file.
-      </p>
     </div>
   )
 }