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

package/src/app/site/layout.tsx

@@ -0,0 +1,92 @@
+import { PmDrawer, PmIcon, PmIconButton, PmPopover, PmPresenterPanels, PmToolbar, useAppearance, useMessages, useStore } from '@lincyaw/host'
+import { isChapterTitle, isRecord } from '@lincyaw/kernel'
+import { listViews, OverlayViewOutlet, PageViewOutlet, useViewer } from '@lincyaw/viewer'
+import { useEffect, useState } from 'react'
+import { sitePageLayout, WEB_MESSAGES } from '../../domain/index.ts'
+import type { AppConfig, NavItem, SiteLocale } from '../../domain/index.ts'
+import type { PageRouter } from '../router.ts'
+import { SearchDialog } from './search.tsx'
+
+export const APPEARANCE_KEY = 'presmium-appearance'
+/** The same attributes drive site layouts and the design system's theme token mappings. */
+export function siteThemeAttributes(config: AppConfig) {
+  const theme = config.site.shell.theme
+  return {
+    'data-pm-site-theme': theme?.id ?? 'docs',
+    'data-pm-site-accent': theme?.params.accent,
+    'data-pm-site-typography': theme?.params.typography,
+    'data-pm-site-width': theme?.params.contentWidth,
+  }
+}
+export function ViewMenu({ place = 'bar' }: { place?: 'bar' | 'screen' }) { const viewer = useViewer(), t = useMessages(WEB_MESSAGES), view = useStore(viewer.view); return <select className={`pm-view-menu pm-ui-select pm-view-menu--${place}`} aria-label={t.viewMenu} value={view} onChange={event => viewer.setView(event.target.value)}>{listViews().filter(v => !v.hidden || v.id === view).map(v => <option key={v.id} value={v.id}>{v.label}</option>)}</select> }
+function AppearanceToggle() { const t = useMessages(WEB_MESSAGES), { dark, setDark } = useAppearance(); return <PmIconButton className="pm-site-appearance" icon={dark ? 'sun' : 'moon'} label={dark ? t.toLight : t.toDark} onClick={() => { setDark(!dark); try { localStorage.setItem(APPEARANCE_KEY, dark ? 'light' : 'dark') } catch {} }} /> }
+export function NavLinks({ items, vertical = false, onNavigate }: { items: NavItem[], vertical?: boolean, onNavigate?(): void }) {
+  const [open, setOpen] = useState<string>()
+  return <ul className={`pm-site-nav${vertical ? ' pm-site-nav--vertical' : ''}`}>{items.map((item, index) => {
+    if (!item.items?.length) { const external = item.link !== undefined && /^[a-z][a-z\d+.-]*:/i.test(item.link); return <li key={`${item.text}-${index}`} className="pm-site-nav__item"><a className="pm-site-nav__link" href={item.link} onClick={onNavigate} {...external ? { target: '_blank', rel: 'noopener' } : {}}>{item.text}{external && <PmIcon name="external" />}</a></li> }
+    return <li key={`${item.text}-${index}`} className="pm-site-nav__group">{vertical ? <><p className="pm-site-nav__heading">{item.text}</p><NavLinks items={item.items} vertical onNavigate={onNavigate} /></> : <PmPopover open={open === item.text} label={item.text} placement="below-start" name="pm-site-nav" onOpenChange={next => setOpen(next ? item.text : undefined)} trigger={<button type="button" className="pm-site-nav__link">{item.text}<PmIcon name="chevron-down" /></button>}><NavLinks items={item.items} vertical onNavigate={onNavigate} /></PmPopover>}</li>
+  })}</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> }
+/**
+ * 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">{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>
+}
+/** 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 }) {
+  const t = useMessages(WEB_MESSAGES), nav = config.site.nav ?? config.site.shell.nav ?? [], brand = config.site.brandTitle ?? config.site.title, logo = config.site.shell.theme?.params.logo
+  return <header className="pm-site-header"><div className="pm-site-header__start"><PmIconButton className="pm-site-header__menu" icon="menu" label={t.mobileNav} onClick={onMenu} /><a className="pm-site-header__title" href={config.site.root ?? titleHref}>{logo && <img className="pm-site-header__logo" src={logo} alt={config.site.shell.theme?.params.logoAlt ?? ''} />}<span>{brand}</span></a></div>{nav.length > 0 && <nav className="pm-site-header__nav" aria-label={t.extraNav}><NavLinks items={nav} /></nav>}<div className="pm-site-header__tools">{isDocument && config.search && <button type="button" className="pm-site-search-button pm-ui-search" aria-label={t.search} onClick={onSearch}><PmIcon name="search" /><span className="pm-site-search-button__text">{t.search}</span><kbd className="pm-ui-kbd">{t.searchShortcut}</kbd></button>}{config.site.home && <a className="pm-site-link" href={config.site.home}><PmIcon name="arrow-left" />{t.documents}</a>}{config.site.locales.length > 1 && <LanguageMenu locales={config.site.locales} lang={config.lang} hrefIn={hrefIn} />}{isDocument && <ViewMenu place="bar" />}<PmToolbar className="pm-toolbar--bar" /><AppearanceToggle /></div></header>
+}
+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'
+  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 && <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 && <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 && 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 config={config} router={router} course={course} />}
+    </PmDrawer>
+  </div>
+}

package/src/app/site/search.tsx

@@ -0,0 +1,22 @@
+import { PmDialog, PmIcon, useMessages } from '@lincyaw/host'
+import { tokenize } from '@lincyaw/kernel/reading'
+import type MiniSearch from 'minisearch'
+import type { SearchResult } from 'minisearch'
+import { useEffect, useRef, useState } from 'react'
+import { SEARCH_FIELDS, WEB_MESSAGES } from '../../domain/index.ts'
+const QUERY = { prefix: true, fuzzy: 0.2, boost: { title: 4, text: 2, titles: 1 } }
+const indexes = new Map<string, Promise<MiniSearch>>()
+function loadIndex(url: string): Promise<MiniSearch> {
+  let index = indexes.get(url)
+  if (!index) { index = Promise.all([import('minisearch'), fetch(url).then(response => { if (!response.ok) throw new Error(`search index HTTP ${response.status}`); return response.text() })]).then(([{ default: Search }, json]) => Search.loadJSON(json, { ...SEARCH_FIELDS, tokenize })); index.catch(() => indexes.delete(url)); indexes.set(url, index) }
+  return index
+}
+export function forgetIndex(url: string) { indexes.delete(url) }
+export function SearchDialog({ open, index, onOpenChange }: { open: boolean, index: string, onOpenChange?(open: boolean): void }) {
+  const t = useMessages(WEB_MESSAGES), [query, setQuery] = useState(''), [results, setResults] = useState<SearchResult[]>([]), [active, setActive] = useState(0), [failed, setFailed] = useState(false)
+  const input = useRef<HTMLInputElement>(null), list = useRef<HTMLUListElement>(null)
+  useEffect(() => { let current = true; if (!query.trim()) { setResults([]); return } void loadIndex(index).then(search => { if (current) { setResults(search.search(query.trim(), QUERY).slice(0, 30)); setActive(0); setFailed(false) } }).catch(error => { if (current) { console.warn('[presmium] search unavailable', error); setFailed(true) } }); return () => { current = false } }, [query, index])
+  useEffect(() => { if (open) { const frame = requestAnimationFrame(() => { input.current?.focus(); input.current?.select() }); return () => cancelAnimationFrame(frame) } }, [open])
+  useEffect(() => { list.current?.querySelector('[aria-selected="true"]')?.scrollIntoView({ block: 'nearest' }) }, [active])
+  return <PmDialog open={open} label={t.search} closeLabel={t.close} name="pm-site-search" onOpenChange={onOpenChange}><label className="pm-ui-search pm-site-search__field"><PmIcon name="search" /><input ref={input} className="pm-site-search__input" type="search" aria-controls="pm-site-search-results" aria-label={t.search} placeholder={t.searchPlaceholder} value={query} onChange={event => setQuery(event.target.value)} onKeyDown={event => { if (event.key === 'ArrowDown' || event.key === 'ArrowUp') { event.preventDefault(); if (results.length) setActive((active + (event.key === 'ArrowDown' ? 1 : -1) + results.length) % results.length) } else if (event.key === 'Enter') { const link = list.current?.querySelector<HTMLAnchorElement>('[aria-selected="true"] a'); if (link) { event.preventDefault(); onOpenChange?.(false); link.click() } } }} /></label><ul id="pm-site-search-results" ref={list} className="pm-site-search__results" role="listbox" aria-label={t.search}>{results.map((result, i) => <li key={String(result.id)} role="option" aria-selected={i === active} className="pm-site-search__result" onMouseEnter={() => setActive(i)}><a className="pm-site-search__link" href={String(result.id)} aria-label={[...(result.titles as string[] | undefined) ?? [], String(result.title)].join(' > ')} onClick={() => onOpenChange?.(false)}>{(result.titles as string[] | undefined)?.length ? <span className="pm-site-search__path">{(result.titles as string[]).join(' › ')}</span> : null}<span className="pm-site-search__title">{String(result.title)}</span></a></li>)}</ul>{((query.trim() && !results.length) || failed) && <p className="pm-site-search__empty">{t.noResults(query.trim())}</p>}<p className="pm-site-search__keys"><span><kbd className="pm-ui-kbd" aria-label={t.keyEnter}>↵</kbd> {t.searchSelect}</span><span><kbd className="pm-ui-kbd" aria-label={t.keyUp}>↑</kbd><kbd className="pm-ui-kbd" aria-label={t.keyDown}>↓</kbd> {t.searchNavigate}</span><span><kbd className="pm-ui-kbd" aria-label={t.keyEscape}>Esc</kbd> {t.searchClose}</span></p></PmDialog>
+}