@lincyaw/web 1.0.0-rc.1 → 1.0.0-rc.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lincyaw/web",
-  "version": "1.0.0-rc.1",
+  "version": "1.0.0-rc.2",
   "description": "Presmium's web renderer: one prebuilt viewer that shows the web form in the workbench, in a dev server and as a built site, with search and form switching",
   "license": "Apache-2.0",
   "repository": {
@@ -43,18 +43,18 @@
     "react-dom": "18.3.1"
   },
   "peerDependencies": {
-    "@lincyaw/host": "^1.0.0-rc.1",
-    "@lincyaw/kernel": "^1.0.0-rc.1",
-    "@lincyaw/viewer": "^1.0.0-rc.1"
+    "@lincyaw/host": "^1.0.0-rc.2",
+    "@lincyaw/kernel": "^1.0.0-rc.2",
+    "@lincyaw/viewer": "^1.0.0-rc.2"
   },
   "devDependencies": {
     "@types/escape-html": "1.0.4",
     "@types/send": "^1.2.1",
     "@types/react": "18.3.28",
     "@types/react-dom": "18.3.7",
-    "@lincyaw/host": "1.0.0-rc.1",
-    "@lincyaw/kernel": "1.0.0-rc.1",
-    "@lincyaw/cli": "1.0.0-rc.1",
-    "@lincyaw/viewer": "1.0.0-rc.1"
+    "@lincyaw/cli": "1.0.0-rc.2",
+    "@lincyaw/host": "1.0.0-rc.2",
+    "@lincyaw/kernel": "1.0.0-rc.2",
+    "@lincyaw/viewer": "1.0.0-rc.2"
   }
 }

package/src/app/site/layout.tsx

@@ -28,20 +28,35 @@ export function NavLinks({ items, vertical = false, onNavigate }: { items: NavIt
   })}</ul>
 }
 function LanguageMenu({ locales, lang, hrefIn }: { locales: SiteLocale[], lang: string, hrefIn(locale: SiteLocale): string }) { const t = useMessages(WEB_MESSAGES), [open, setOpen] = useState(false); return <PmPopover open={open} label={t.language} name="pm-site-languages" onOpenChange={setOpen} trigger={<PmIconButton icon="language" label={t.language} />}><ul className="pm-site-languages">{locales.map(locale => <li key={locale.lang}><a className="pm-site-languages__link" href={hrefIn(locale)} lang={locale.lang} aria-current={locale.lang === lang ? 'true' : undefined}>{locale.label}</a></li>)}</ul></PmPopover> }
-function Sidebar({ router, course = false }: { router: PageRouter, course?: boolean }) {
-  const viewer = useViewer(), t = useMessages(WEB_MESSAGES), pages = useStore(router.pages), shown = useStore(router.shown), doc = useStore(viewer.doc)
+/**
+ * The site's documents, grouped by their first tag, with this document's chapters under it; a document on its own
+ * shows its chapters. A document has one page, so a chapter is a place on it.
+ */
+function Sidebar({ config, router, course = false }: { config: AppConfig, router: PageRouter, course?: boolean }) {
+  const viewer = useViewer(), t = useMessages(WEB_MESSAGES), doc = useStore(viewer.doc), pages = useStore(router.pages), position = useStore(viewer.position)
+  const top = doc.sections.filter(section => isChapterTitle(doc, section))
+  const own = router.href(pages[0] ?? { path: 'index', title: '', sections: [] })
+  const chapters = <ol className="pm-site-sidebar__sections">{(top.length > 1 ? top : doc.sections).map(section => <li key={section.id}><a className="pm-site-sidebar__section" href={router.sectionHref(section.id)} aria-current={position.section === section.id ? 'location' : undefined}>{section.title}</a></li>)}</ol>
+  const groups = new Map<string, { dir: string, title: string, href: string }[]>()
+  for (const item of config.site.documents ?? [{ dir: config.document, title: doc.meta.title, href: own }]) groups.set(item.group ?? '', [...groups.get(item.group ?? '') ?? [], item])
+  let number = 0
   return <nav className="pm-site-sidebar" aria-label={course ? t.courseContents : t.sidebarNav}>
-    {course && <div className="pm-site-sidebar__intro"><p className="pm-ui-heading">{t.courseContents}</p><p className="pm-site-sidebar__title">{doc.meta.title}</p></div>}
-    <ol className="pm-site-sidebar__chapters">{pages.map((page, index) => {
-      const current = page.path === shown?.path, sections = page.sections.slice(1).flatMap(id => viewer.section(id) ?? [])
-      return <li key={page.path} className={`pm-site-sidebar__chapter${current ? ' pm-current' : ''}`}>
-        <a className="pm-site-sidebar__link" href={router.href(page)} aria-current={current ? 'page' : undefined}>{course && <span className="pm-site-sidebar__number" aria-hidden="true">{String(index + 1).padStart(2, '0')}</span>}<span>{page.title}</span></a>
-        {sections.length > 0 && <ol className="pm-site-sidebar__sections">{sections.map(section => <li key={section.id}><a className="pm-site-sidebar__section" href={router.sectionHref(section.id)}>{section.title}</a></li>)}</ol>}
-      </li>
-    })}</ol>
+    {course && <div className="pm-site-sidebar__intro"><p className="pm-ui-heading">{t.courseContents}</p><p className="pm-site-sidebar__title">{config.site.brandTitle ?? doc.meta.title}</p></div>}
+    {[...groups].map(([group, items]) => <div key={group} className="pm-site-sidebar__group">
+      {group && <p className="pm-site-sidebar__heading">{group}</p>}
+      <ol className="pm-site-sidebar__chapters">{items.map((item) => {
+        const current = item.dir === config.document
+        number++
+        return <li key={item.dir} className={`pm-site-sidebar__chapter${current ? ' pm-current' : ''}`}>
+          <a className="pm-site-sidebar__link" href={current ? own : item.href} aria-current={current ? 'page' : undefined}>{course && <span className="pm-site-sidebar__number" aria-hidden="true">{String(number).padStart(2, '0')}</span>}<span>{item.title}</span></a>
+          {current && chapters}
+        </li>
+      })}</ol>
+    </div>)}
   </nav>
 }
-function Outline({ router, compact = false }: { router: PageRouter, compact?: boolean }) { const viewer = useViewer(), doc = useStore(viewer.doc), position = useStore(viewer.position), shown = useStore(router.shown), t = useMessages(WEB_MESSAGES); const sections = (shown?.sections ?? []).flatMap(id => viewer.section(id) ?? []).filter(section => !isChapterTitle(doc, section)); const title = compact ? 'pm-site-outline-title-compact' : 'pm-site-outline-title'; return sections.length ? <nav className="pm-site-outline" aria-labelledby={title}><p id={title} className={`pm-site-outline__title${compact ? ' pm-ui-sr-only' : ''}`}>{t.outline}</p><ol className="pm-site-outline__items">{sections.map(section => <li key={section.id}><a className="pm-site-outline__link" href={`#${encodeURIComponent(section.id)}`} aria-current={position.section === section.id ? 'location' : undefined}>{section.title}</a></li>)}</ol></nav> : null }
+/** Every section of the page; in a document of chapters, the sections within one are indented under it. */
+function Outline({ router, compact = false }: { router: PageRouter, compact?: boolean }) { const viewer = useViewer(), doc = useStore(viewer.doc), position = useStore(viewer.position), shown = useStore(router.shown), t = useMessages(WEB_MESSAGES); const sections = (shown?.sections ?? []).flatMap(id => viewer.section(id) ?? []); const nested = sections.some(section => isChapterTitle(doc, section)) && sections.some(section => !isChapterTitle(doc, section)); const title = compact ? 'pm-site-outline-title-compact' : 'pm-site-outline-title'; return sections.length > 1 ? <nav className="pm-site-outline" aria-labelledby={title}><p id={title} className={`pm-site-outline__title${compact ? ' pm-ui-sr-only' : ''}`}>{t.outline}</p><ol className="pm-site-outline__items">{sections.map(section => <li key={section.id}><a className={`pm-site-outline__link${nested && !isChapterTitle(doc, section) ? ' pm-site-outline__link--nested' : ''}`} href={`#${encodeURIComponent(section.id)}`} aria-current={position.section === section.id ? 'location' : undefined}>{section.title}</a></li>)}</ol></nav> : null }
 function Pager({ config, router }: { config: AppConfig, router: PageRouter }) { const t = useMessages(WEB_MESSAGES), pages = useStore(router.pages), shown = useStore(router.shown), index = pages.findIndex(page => page.path === shown?.path); const neighbour = (step: number) => { const page = pages[index + step]; return page ? { text: page.title, link: router.href(page) } : step < 0 ? config.site.neighbours?.prev : config.site.neighbours?.next }; const prev = neighbour(-1), next = neighbour(1); return prev || next ? <nav className="pm-site-pager" aria-label={t.pager}>{[[prev, t.prevChapter, 'prev'], [next, t.nextChapter, 'next']].map(([other, label, rel]) => { const link = other as { text: string, link: string } | undefined; return link ? <a key={String(rel)} className={`pm-site-pager__link pm-site-pager__link--${rel}`} href={link.link} rel={String(rel)}><span className="pm-site-pager__label">{String(label)}</span><span className="pm-site-pager__title">{link.text}</span></a> : <span key={String(rel)} /> })}</nav> : null }
 export function SiteFooter({ config }: { config: AppConfig }) { const { message, copyright } = config.site.shell.footer ?? {}; return message || copyright ? <footer className="pm-site-footer">{message && <p className="pm-site-footer__message" dangerouslySetInnerHTML={{ __html: message }} />}{copyright && <p className="pm-site-footer__copyright" dangerouslySetInnerHTML={{ __html: copyright }} />}</footer> : null }
 export function SiteHeader({ config, titleHref, hrefIn, document: isDocument, onMenu, onSearch }: { config: AppConfig, titleHref: string, hrefIn(locale: SiteLocale): string, document?: boolean, onMenu?(): void, onSearch?(): void }) {
@@ -51,28 +66,27 @@ export function SiteHeader({ config, titleHref, hrefIn, document: isDocument, on
 export function DocumentSite({ config, router }: { config: AppConfig, router: PageRouter }) {
   const viewer = useViewer(), t = useMessages(WEB_MESSAGES), doc = useStore(viewer.doc), page = useStore(router.page), shown = useStore(router.shown), pages = useStore(router.pages), view = useStore(viewer.view)
   const [drawer, setDrawer] = useState<'site' | 'chapters'>(), [outline, setOutline] = useState(false), [searching, setSearching] = useState(false)
-  const theme = config.site.shell.theme?.id ?? 'docs', layout = config.landing ? 'landing' : sitePageLayout(isRecord(doc.config.renderers.web) ? doc.config.renderers.web : {}, config.lang), landing = layout === 'landing', course = theme === 'course', showcase = theme === 'showcase' && !landing
+  const theme = config.site.shell.theme?.id ?? 'docs', layout = config.landing ? 'landing' : sitePageLayout(isRecord(doc.config.renderers.web) ? doc.config.renderers.web : {}, config.lang), landing = layout === 'landing', course = theme === 'course'
   useEffect(() => { setDrawer(undefined); setOutline(false) }, [page])
   useEffect(() => { const key = (event: KeyboardEvent) => { if ((event.ctrlKey || event.metaKey) && event.key.toLowerCase() === 'k' && config.search) { event.preventDefault(); setSearching(true) } }; window.addEventListener('keydown', key); return () => window.removeEventListener('keydown', key) }, [config.search])
   const hrefIn = (locale: SiteLocale) => { const own = locale.base.replace(/\/$/, ''); return shown && shown.path !== 'index' && (!locale.layout || locale.layout === layout) ? `${own}/${shown.path}.html` : `${own}/` }
   return <div className="pm-site" {...siteThemeAttributes(config)} data-pm-site-layout={layout}>
     <a className="pm-site__skip" href="#pm-site-main">{t.skipToContent}</a>
     <SiteHeader config={config} titleHref={config.site.home ?? router.href(pages[0] ?? { path: 'index', title: '', sections: [] })} hrefIn={hrefIn} document onMenu={() => setDrawer('site')} onSearch={() => setSearching(true)} />
-    {!landing && !showcase && <div className="pm-site-localnav"><button type="button" className="pm-site-localnav__button" onClick={() => setDrawer('chapters')}><PmIcon name="navigation" />{course ? t.courseContents : t.menu}</button>{layout !== 'wide' && (shown?.sections.length ?? 0) > 1 && <PmPopover open={outline} label={t.outline} placement="below-end" name="pm-site-outline-menu" onOpenChange={setOutline} trigger={<button type="button" className="pm-site-localnav__button">{t.outline}<PmIcon name="chevron-down" /></button>}><Outline router={router} compact /></PmPopover>}</div>}
-    {showcase && <nav className="pm-site-chapterbar" aria-label={t.menu}>{pages.map(item => <a key={item.path} className={`pm-ui-button pm-ui-button--${item.path === shown?.path ? 'accent' : 'ghost'}`} href={router.href(item)} aria-current={item.path === shown?.path ? 'page' : undefined}>{item.title}</a>)}</nav>}
+    {!landing && <div className="pm-site-localnav"><button type="button" className="pm-site-localnav__button" onClick={() => setDrawer('chapters')}><PmIcon name="navigation" />{course ? t.courseContents : t.menu}</button>{layout !== 'wide' && (shown?.sections.length ?? 0) > 1 && <PmPopover open={outline} label={t.outline} placement="below-end" name="pm-site-outline-menu" onOpenChange={setOutline} trigger={<button type="button" className="pm-site-localnav__button">{t.outline}<PmIcon name="chevron-down" /></button>}><Outline router={router} compact /></PmPopover>}</div>}
     <div className="pm-site__body">
-      {!landing && !showcase && <aside className="pm-site__sidebar"><Sidebar router={router} course={course} /></aside>}
+      {!landing && <aside className="pm-site__sidebar"><Sidebar config={config} router={router} course={course} /></aside>}
       <main id="pm-site-main" className="pm-site__main" tabIndex={-1}>
         <article className="pm-site__article"><PageViewOutlet key={shown?.path} sections={shown?.sections ?? []} /></article>
         {!landing && <Pager config={config} router={router} />}<SiteFooter config={config} />
       </main>
-      {!landing && !showcase && layout !== 'wide' && <aside className="pm-site__aside"><Outline router={router} /></aside>}
+      {!landing && layout !== 'wide' && <aside className="pm-site__aside"><Outline router={router} /></aside>}
     </div>
     <div className="pm-document pm-overlay-views"><OverlayViewOutlet /></div>
     {view === 'presenter' && <PmPresenterPanels to=".pm-presenter__side" docked />}
     {config.search && <SearchDialog open={searching} index={config.search} onOpenChange={setSearching} />}
     <PmDrawer open={drawer !== undefined} label={drawer === 'site' ? t.mobileNav : course ? t.courseContents : t.menu} closeLabel={t.close} name="pm-site-menu" onOpenChange={open => { if (!open) setDrawer(undefined) }}>
-      {drawer === 'site' ? <>{(config.site.nav ?? config.site.shell.nav)?.length ? <NavLinks items={config.site.nav ?? config.site.shell.nav!} vertical /> : null}{config.site.home && <a className="pm-site-link" href={config.site.home}><PmIcon name="arrow-left" />{t.documents}</a>}<div className="pm-site-menu__tools"><ViewMenu place="screen" /><PmToolbar className="pm-toolbar--screen" /></div></> : <Sidebar router={router} course={course} />}
+      {drawer === 'site' ? <>{(config.site.nav ?? config.site.shell.nav)?.length ? <NavLinks items={config.site.nav ?? config.site.shell.nav!} vertical /> : null}{config.site.home && <a className="pm-site-link" href={config.site.home}><PmIcon name="arrow-left" />{t.documents}</a>}<div className="pm-site-menu__tools"><ViewMenu place="screen" /><PmToolbar className="pm-toolbar--screen" /></div></> : <Sidebar config={config} router={router} course={course} />}
     </PmDrawer>
   </div>
 }

package/src/app/site.css

@@ -57,7 +57,8 @@
   background: var(--pm-color-product-bg);
 }
 
-.pm-site[data-pm-site-theme='showcase'] .pm-site-header {
+.pm-site[data-pm-site-theme='showcase'] .pm-site-header,
+.pm-site[data-pm-site-theme='showcase'] .pm-site-localnav {
   border-bottom-color: color-mix(in srgb, var(--pm-color-line) 70%, transparent);
   background: color-mix(in srgb, var(--pm-color-surface) 68%, transparent);
   backdrop-filter: blur(var(--pm-product-glass-blur));
@@ -350,6 +351,50 @@
   color: var(--pm-color-ink);
 }
 
+.pm-site-sidebar__section[aria-current] {
+  color: var(--pm-color-accent);
+}
+
+/* The site's documents, in groups by their first tag. */
+.pm-site-sidebar__group + .pm-site-sidebar__group {
+  margin-top: var(--pm-space-5);
+}
+
+.pm-site-sidebar__heading {
+  margin: 0 0 var(--pm-space-2);
+  padding-inline: var(--pm-space-2);
+  color: var(--pm-color-muted);
+  font-size: var(--pm-text-xs);
+  font-weight: var(--pm-weight-semibold);
+  letter-spacing: var(--pm-tracking-label);
+}
+
+/* A section's permalink: a mark beside its title, shown when the title is pointed at or the link focused. */
+.pm-site .pm-section__title {
+  position: relative;
+}
+
+.pm-site .header-anchor {
+  position: absolute;
+  left: 0;
+  padding-right: 0.3em;
+  transform: translateX(-100%);
+  color: var(--pm-color-accent);
+  font-weight: var(--pm-weight-medium);
+  text-decoration: none;
+  opacity: 0;
+  transition: opacity var(--pm-duration) var(--pm-ease);
+}
+
+.pm-site .header-anchor::before {
+  content: '#';
+}
+
+.pm-site .pm-section__title:hover .header-anchor,
+.pm-site .header-anchor:focus-visible {
+  opacity: 1;
+}
+
 .pm-site-outline__title {
   margin: 0 0 var(--pm-space-2);
   color: var(--pm-color-ink);
@@ -371,6 +416,10 @@
   line-height: var(--pm-leading-tight);
 }
 
+.pm-site-outline__link--nested {
+  padding-left: calc(2 * var(--pm-space-3));
+}
+
 .pm-site-outline__link:hover {
   color: var(--pm-color-ink);
 }
@@ -932,20 +981,6 @@ html.pm-presenting {
   font-size: var(--pm-text-xs);
 }
 
-.pm-site-chapterbar {
-  display: flex;
-  gap: var(--pm-space-2);
-  max-width: var(--pm-site-wide-width);
-  margin-inline: auto;
-  padding: var(--pm-space-4) var(--pm-space-6) 0;
-  overflow-x: auto;
-}
-
-/* The page buttons keep their width and the bar scrolls sideways on narrow screens. */
-.pm-site-chapterbar > * {
-  flex: none;
-}
-
 .pm-site[data-pm-site-layout='wide'] .pm-site__body {
   grid-template-columns: var(--pm-site-sidebar-width) minmax(0, 1fr);
   max-width: calc(var(--pm-site-sidebar-width) + var(--pm-site-wide-width) + 2 * var(--pm-space-8));
@@ -955,8 +990,7 @@ html.pm-presenting {
   max-width: var(--pm-site-wide-width);
 }
 
-.pm-site[data-pm-site-layout='landing'] .pm-site__body,
-.pm-site[data-pm-site-theme='showcase'] .pm-site__body {
+.pm-site[data-pm-site-layout='landing'] .pm-site__body {
   grid-template-columns: minmax(0, 1fr);
   max-width: var(--pm-site-wide-width);
 }

package/src/domain/app-config.ts

@@ -33,6 +33,8 @@ export interface SiteConfig {
   home?: string
   /** The document's languages, its own first; one when it has no translation. */
   locales: SiteLocale[]
+  /** The workspace's documents in its order, for the sidebar; a document's first tag is its group there. */
+  documents?: { dir: string, title: string, href: string, group?: string }[]
   /** The documents before and after this one in the workspace: the pager goes on to them. */
   neighbours?: { prev?: Neighbour, next?: Neighbour }
   links: CrossFormLinks

package/src/domain/index.ts

@@ -8,7 +8,7 @@ export type { AppConfig, SiteConfig, SiteLocale } from './app-config.ts'
 export { parsePositionQuery, parsePrintQuery, positionUrl, PRINTED_ATTRIBUTE, printQuery, SERVICE_WORKER, SLIDE_PARAM, urlPath, withPositionQuery } from './links.ts'
 export type { SlidesPrintQuery } from './links.ts'
 export type { PositionQuery } from './links.ts'
-export { pageLink, SEARCH_FIELDS, searchDocuments, sectionLinks, translationPages, webPages } from './pages.ts'
+export { chapterRedirects, pageLink, SEARCH_FIELDS, searchDocuments, sectionLinks, translationPages, webPages } from './pages.ts'
 export type { Neighbour, SearchDocument, WebPage } from './pages.ts'
 export type { HomeDocument } from './workspace-home.ts'
 export { SITE_THEME_IDS, SITE_THEMES, siteTheme, sitePageLayout } from './themes.ts'

package/src/domain/pages.ts

@@ -11,19 +11,28 @@ function baseName(file: string): string {
   return file.split(/[\\/]/).pop()!.replace(/\.[^.]+$/, '')
 }
 
+/** A document is one web page with every section, as a static site shows each source file on one page. */
 export function webPages(doc: IRDocument): WebPage[] {
+  return [{ path: 'index', title: doc.meta.title, sections: doc.sections.map(section => section.id) }]
+}
+
+/**
+ * The pages earlier sites split a document into, one per chapter: their addresses go on to the chapter's section on
+ * the document's one page, so links to them keep working.
+ */
+export function chapterRedirects(doc: IRDocument): { path: string, section: string }[] {
   const web = doc.config.renderers.web
-  if (isRecord(web) && web.layout === 'landing') return [{ path: 'index', title: doc.meta.title, sections: doc.sections.map(section => section.id) }]
+  if (isRecord(web) && web.layout === 'landing') return []
   const paths = new Set<string>()
   let file: string | undefined
-  return chapters(doc).map((chapter, i) => {
+  return chapters(doc).flatMap((chapter, i) => {
     const first = chapter.sections[0]!
     const name = i === 0 ? 'index' : urlSlug(first.source.file === file ? first.id : baseName(first.source.file)) || 'page'
     let path = name
     for (let n = 2; paths.has(path); n++) path = `${name}-${n}`
     paths.add(path)
     file = first.source.file
-    return { path, title: chapter.title, sections: chapter.sections.map(section => section.id) }
+    return i === 0 ? [] : [{ path, section: first.id }]
   })
 }
 

package/src/node/site-build.ts

@@ -6,7 +6,7 @@ import { ABSOLUTE_URL, errorMessage, isRecord } from '@lincyaw/kernel'
 import type { IRDocument, NodeVitePlugin, RenderContext, SiteSpec } from '@lincyaw/kernel'
 import { FONT_LICENSE, fontLicense } from '@lincyaw/kernel/node'
 import { SitemapStream, streamToPromise } from 'sitemap'
-import { offlineEnabled, pageLink, SERVICE_WORKER, searchDocuments, sitePageLayout, translationPages, webPages } from '../domain/index.ts'
+import { chapterRedirects, offlineEnabled, pageLink, SERVICE_WORKER, searchDocuments, sitePageLayout, translationPages, webPages } from '../domain/index.ts'
 import type { AppConfig, SiteConfig, SiteShell, WebPage } from '../domain/index.ts'
 import { BUNDLE_ENTRY, buildDocumentBundle, documentComponents } from './document-bundle.ts'
 import type { DocumentBundle } from './document-bundle.ts'
@@ -181,10 +181,17 @@ async function buildDocumentPages(site: SiteSpec, ctx: RenderContext, built: Bui
         await renderPage(built, join(ctx.outDir, locale.prefix, 'index.html'), landing, title, metaTags(shell, image, title), locale.doc, components)
       }
     }
+    for (const { path, section } of chapterRedirects(published)) writeFileSync(join(out, locale.prefix, `${path}.html`), chapterRedirect(section))
   }
   if (offline) writeServiceWorker(out, base, { dir: built.appDir, url: built.appUrl })
 }
 
+/** The page a chapter used to have: it goes on to the chapter's section on the document's page. */
+function chapterRedirect(section: string): string {
+  const target = `./#${encodeURIComponent(section)}`
+  return `<!doctype html><html><head><meta charset="utf-8"><meta http-equiv="refresh" content="0; url=${target}"><link rel="canonical" href="${target}"><meta name="robots" content="noindex"></head><body><a href="${target}">${target}</a></body></html>\n`
+}
+
 /** A page that shows no document (the home page, a missing page), below the site's path. */
 function pageConfig(kind: 'home' | 'missing', base: string, lang: string, site: SiteConfig, extra: Partial<AppConfig> = {}): AppConfig {
   return { kind, document: '', base, lang, site, origins: [], rendered: true, ...extra }

package/src/node/site-model.ts

@@ -299,7 +299,11 @@ export function documentSiteConfig(input: { site: SiteSpec, base: string, dir: s
     shell,
     locales,
     links: input.workspace ? { ...links, slides: Boolean(links.slidesUrl) } : links,
-    ...input.workspace ? { home: listLink(site, root), neighbours: siteNeighbours(site, base, dir, input.docs).neighbours } : {},
+    ...input.workspace ? {
+      home: listLink(site, root),
+      neighbours: siteNeighbours(site, base, dir, input.docs).neighbours,
+      documents: site.documents.filter(other => other.dir !== '').map(other => ({ dir: other.dir, title: other.title, href: documentBase(base, other.dir), ...other.tags?.[0] ? { group: other.tags[0] } : {} })),
+    } : {},
   }
 }
 

package/src/node/site-server.ts

@@ -14,7 +14,7 @@ import { isInside, spawnInteractiveNode } from '@lincyaw/kernel/node'
 import { diffDocuments } from '@lincyaw/viewer/domain'
 import { createProxyServer } from 'http-proxy-3'
 import send from 'send'
-import { searchDocuments, sitePageLayout, translationPages, UPDATE_EVENT, webPages } from '../domain/index.ts'
+import { chapterRedirects, searchDocuments, sitePageLayout, translationPages, UPDATE_EVENT, webPages } from '../domain/index.ts'
 import type { AppConfig, DevUpdateEvent, WebPage } from '../domain/index.ts'
 import { BUNDLE_ENTRY, documentComponents, findDocumentBundle } from './document-bundle.ts'
 import type { DocumentBundle, DocumentBundleInput } from './document-bundle.ts'
@@ -643,8 +643,13 @@ export async function startSiteServer(options: SiteServerOptions): Promise<SiteS
     if (formOf(url) === 'slides' && (rest === '' || rest === 'index.html')) return documentPageResponse(res, dir, '', undefined, 'slides', url.searchParams.get('presmium-block') ?? undefined)
     if (first && others.length > 0 && translationOf(dir, first)) return documentPageResponse(res, dir, first, others.join('/'), formOf(url), url.searchParams.get('presmium-block') ?? undefined)
     if (rest === '' || rest.endsWith('.html')) {
-      const pages = webPages(published(dir, doc).doc)
-      if (pageAt(pages, rest)) return documentPageResponse(res, dir, '', rest, formOf(url), url.searchParams.get('presmium-block') ?? undefined)
+      const shown = published(dir, doc).doc
+      if (pageAt(webPages(shown), rest)) return documentPageResponse(res, dir, '', rest, formOf(url), url.searchParams.get('presmium-block') ?? undefined)
+      const chapter = chapterRedirects(shown).find(redirect => `${redirect.path}.html` === rest)
+      if (chapter) {
+        res.writeHead(302, { Location: `./#${encodeURIComponent(chapter.section)}` })
+        return void res.end()
+      }
     }
     if (rest.startsWith('media/')) return serveFile(req, res, join(options.workDir, 'media', segment(dir)), `/${rest.split('/').map(encodeURIComponent).join('/')}`, false)
     const state = stateOf(dir)