@jaamd/jaad 0.0.0-stage → 1.0.0-rc.1

package/src/site/components/NavMobile.astro

@@ -0,0 +1,105 @@
+---
+import config from 'virtual:jaad/config'
+import { ui } from '../runtime.ts'
+import { withDeploymentBase } from '../urls.ts'
+
+const links = config.nav
+const t = ui(Astro.props.locale)
+---
+
+{links.length > 0 && (
+    <jaad-nav-mobile class="jaad-nav-mobile">
+        <button
+            class="jaad-icon-button"
+            aria-label={t('nav.mobile')}
+            aria-expanded="false"
+            aria-haspopup="true"
+            aria-controls="jaad-nav-menu"
+        >
+            <svg class="jaad-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path
+                    data-icon-open
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M4 6h16M4 12h16M4 18h16"
+                />
+                <path
+                    data-icon-close
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                    stroke-width="2"
+                    d="M6 18L18 6M6 6l12 12"
+                />
+            </svg>
+        </button>
+
+        <div id="jaad-nav-menu" data-menu hidden class="jaad-menu">
+            <nav class="jaad-nav-mobile-links">
+                <ul class="jaad-nav-mobile-list">
+                    {links.map((link) => (
+                        <li>
+                            <a
+                                href={withDeploymentBase(link.href, import.meta.env.BASE_URL)}
+                                class="jaad-menu-item"
+                                {...(link.href.startsWith('http')
+                                    ? { target: '_blank', rel: 'noopener noreferrer' }
+                                    : {})}
+                            >
+                                {link.label}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </div>
+    </jaad-nav-mobile>
+)}
+
+<script>
+    class JaadNavMobile extends HTMLElement {
+        #button!: HTMLButtonElement
+        #menu!: HTMLElement
+
+        #onPointer = (e: PointerEvent) => {
+            if (!this.contains(e.target as Node)) this.#setOpen(false)
+        }
+        #onKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') this.#setOpen(false)
+        }
+
+        #setOpen(open: boolean) {
+            this.#menu.hidden = !open
+            this.#button.setAttribute('aria-expanded', String(open))
+
+            if (open) {
+                document.addEventListener('pointerdown', this.#onPointer)
+                document.addEventListener('keydown', this.#onKey)
+            } else {
+                document.removeEventListener('pointerdown', this.#onPointer)
+                document.removeEventListener('keydown', this.#onKey)
+            }
+        }
+
+        connectedCallback() {
+            this.#button = this.querySelector('button')!
+            this.#menu = this.querySelector('[data-menu]')!
+
+            this.#button.addEventListener('click', () => {
+                this.#setOpen(Boolean(this.#menu.hidden))
+            })
+            this.#menu.addEventListener('click', (e) => {
+                if ((e.target as HTMLElement).closest('a')) this.#setOpen(false)
+            })
+        }
+
+        disconnectedCallback() {
+            document.removeEventListener('pointerdown', this.#onPointer)
+            document.removeEventListener('keydown', this.#onKey)
+        }
+    }
+
+    if (!customElements.get('jaad-nav-mobile')) {
+        customElements.define('jaad-nav-mobile', JaadNavMobile)
+    }
+</script>

package/src/site/components/SearchPalette.astro

@@ -0,0 +1,409 @@
+---
+import { DEFAULT_LOCALE, ui } from '../runtime.ts'
+
+interface Props {
+    /** The search index, of the reader's locale. */
+    indexUrl: string
+    /** The full field on wide screens. Otherwise the palette keeps its icon
+     *  trigger and its shortcut. */
+    prominent?: boolean
+    locale?: string
+}
+
+const { indexUrl, prominent = false, locale = DEFAULT_LOCALE } = Astro.props
+const t = ui(locale)
+
+const MAGNIFIER = 'M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'
+---
+
+<jaad-search
+    data-prominent={prominent ? '' : null}
+    data-index-url={indexUrl}
+    data-loading={t('search.loading')}
+    data-empty={t('search.empty')}
+>
+    <button data-trigger-desktop hidden={!prominent} class="jaad-search-trigger" aria-label={t('search.label')}>
+        <svg class="jaad-search-trigger-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={MAGNIFIER}></path>
+        </svg>
+        <span class="jaad-search-trigger-label">{t('search.trigger')}</span>
+        <kbd data-shortcut class="jaad-search-shortcut">
+            Ctrl K
+        </kbd>
+    </button>
+
+    <button
+        data-trigger-icon
+        class:list={['jaad-icon-button', prominent && 'jaad-search-trigger-compact']}
+        aria-label={t('search.label')}
+    >
+        <svg class="jaad-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={MAGNIFIER}></path>
+        </svg>
+    </button>
+
+    <div data-overlay hidden class="jaad-search-overlay" role="dialog" aria-modal="true" aria-label={t('search.label')}>
+        <div data-backdrop class="jaad-search-backdrop"></div>
+
+        <div class="jaad-search-panel">
+            <div class="jaad-search-bar">
+                <svg
+                    class="jaad-search-bar-icon"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                    aria-hidden="true"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d={MAGNIFIER}></path>
+                </svg>
+                <input
+                    data-input
+                    type="text"
+                    placeholder={t('search.placeholder')}
+                    class="jaad-search-input"
+                    autocomplete="off"
+                    spellcheck="false"
+                    role="combobox"
+                    aria-expanded="true"
+                    aria-controls="search-results"
+                    aria-autocomplete="list"
+                    aria-label={t('search.label')}
+                />
+                <kbd data-close class="jaad-search-close">
+                    ESC
+                </kbd>
+            </div>
+
+            <div data-filters hidden class="jaad-search-filters" role="group" aria-label={t('search.sections')}>
+                <button type="button" data-filter="" aria-pressed="true" class="jaad-search-filter">
+                    {t('search.all')}
+                </button>
+            </div>
+
+            <ul
+                data-results
+                id="search-results"
+                class="jaad-search-results"
+                role="listbox"
+                aria-label={t('search.results')}
+            ></ul>
+
+            <div class="jaad-search-footer">
+                <span>
+                    <kbd class="jaad-search-key">↑↓</kbd>
+                    {t('search.navigate')}
+                </span>
+                <span>
+                    <kbd class="jaad-search-key">↵</kbd>
+                    {t('search.open')}
+                </span>
+                <span>
+                    <kbd class="jaad-search-key">esc</kbd>
+                    {t('search.close')}
+                </span>
+            </div>
+        </div>
+    </div>
+</jaad-search>
+
+<script>
+    import { navigate } from 'astro:transitions/client'
+    import {
+        getSnippet,
+        markWords,
+        openingPages,
+        queryTerms,
+        search,
+        type SearchIndex,
+        type SearchPage,
+    } from '../search.ts'
+
+    const EMPTY_INDEX: SearchIndex = { sections: [], pages: [], entries: [] }
+
+    class JaadSearch extends HTMLElement {
+        #overlay!: HTMLElement
+        #input!: HTMLInputElement
+        #filters!: HTMLElement
+        #list!: HTMLUListElement
+        #index: SearchIndex | null = null
+        #request: Promise<SearchIndex> | null = null
+        /** The selectable rows, in display order. */
+        #options: { li: HTMLLIElement; href: string }[] = []
+        #selected = 0
+        /** The section key results are limited to; empty for all. */
+        #section = ''
+        #restoreFocus: HTMLElement | null = null
+        #previousOverflow = ''
+
+        get #open() {
+            return !this.#overlay.hidden
+        }
+
+        connectedCallback() {
+            this.#overlay = this.querySelector('[data-overlay]')!
+            this.#input = this.querySelector('[data-input]')!
+            this.#filters = this.querySelector('[data-filters]')!
+            this.#list = this.querySelector('[data-results]')!
+
+            if (/Mac|iPod|iPhone|iPad/.test(navigator.userAgent)) {
+                this.querySelector('[data-shortcut]')!.textContent = '⌘K'
+            }
+
+            for (const sel of ['[data-trigger-desktop]', '[data-trigger-icon]']) {
+                const trigger = this.querySelector<HTMLElement>(sel)!
+                trigger.addEventListener('click', () => this.#setOpen(true))
+                trigger.addEventListener('mouseenter', () => void this.#loadIndex())
+                trigger.addEventListener('focus', () => void this.#loadIndex())
+            }
+
+            this.querySelector('[data-backdrop]')!.addEventListener('click', () => this.#setOpen(false))
+            this.querySelector('[data-close]')!.addEventListener('click', () => this.#setOpen(false))
+            this.#filters.addEventListener('click', (e) => {
+                const button = (e.target as Element).closest<HTMLButtonElement>('[data-filter]')
+                if (button) this.#filter(button.dataset.filter ?? '')
+            })
+
+            this.#input.addEventListener('input', () => this.#render())
+            this.#input.addEventListener('keydown', (e) => this.#onInputKey(e))
+
+            document.addEventListener('keydown', this.#onGlobalKey)
+            document.addEventListener('astro:before-swap', this.#syncLocale)
+        }
+
+        disconnectedCallback() {
+            document.removeEventListener('keydown', this.#onGlobalKey)
+            document.removeEventListener('astro:before-swap', this.#syncLocale)
+        }
+
+        /** Each locale has its own index, so a language switch drops the cache. */
+        #syncLocale = (event: Event) => {
+            const next = (event as Event & { newDocument: Document }).newDocument.querySelector<HTMLElement>(
+                'jaad-search',
+            )
+            const indexUrl = next?.dataset.indexUrl
+            if (indexUrl && indexUrl !== this.dataset.indexUrl) {
+                this.dataset.indexUrl = indexUrl
+                this.#index = null
+                this.#request = null
+                this.#section = ''
+            }
+        }
+
+        #onGlobalKey = (e: KeyboardEvent) => {
+            if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
+                e.preventDefault()
+                this.#setOpen(!this.#open)
+            } else if (e.key === 'Escape' && this.#open) {
+                e.preventDefault()
+                this.#setOpen(false)
+            }
+        }
+
+        #onInputKey(e: KeyboardEvent) {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault()
+                this.#select(Math.min(this.#selected + 1, this.#options.length - 1))
+            } else if (e.key === 'ArrowUp') {
+                e.preventDefault()
+                this.#select(Math.max(this.#selected - 1, 0))
+            } else if (e.key === 'Enter' && this.#options[this.#selected]) {
+                this.#go(this.#options[this.#selected].href)
+            }
+        }
+
+        #loadIndex(): Promise<SearchIndex> {
+            if (this.#index) return Promise.resolve(this.#index)
+            if (!this.#request) {
+                const url = this.dataset.indexUrl ?? '/search-index.json'
+                this.#request = fetch(url)
+                    .then((res) => (res.ok ? res.json() : EMPTY_INDEX))
+                    .then((data: SearchIndex) => {
+                        this.#index = data
+                        this.#renderFilters(data)
+                        return data
+                    })
+                    .catch(() => {
+                        // Drop the failed promise so a later attempt can retry.
+                        this.#request = null
+                        return EMPTY_INDEX
+                    })
+            }
+            return this.#request
+        }
+
+        #setOpen(open: boolean) {
+            if (open === this.#open) return
+            this.#overlay.hidden = !open
+
+            if (open) {
+                this.#restoreFocus = document.activeElement as HTMLElement | null
+                this.#previousOverflow = document.body.style.overflow
+                document.body.style.overflow = 'hidden'
+                requestAnimationFrame(() => this.#input.focus())
+                void this.#loadIndex().then(() => this.#render())
+                this.#render()
+            } else {
+                document.body.style.overflow = this.#previousOverflow
+                this.#input.value = ''
+                this.#restoreFocus?.focus?.()
+            }
+        }
+
+        #go(href: string) {
+            this.#setOpen(false)
+            navigate(href)
+        }
+
+        /** One button per section, after "All"; none with fewer than two. */
+        #renderFilters(index: SearchIndex) {
+            const [all] = this.#filters.querySelectorAll('[data-filter]')
+            this.#filters.replaceChildren(all)
+            this.#filters.hidden = index.sections.length < 2
+            for (const { key, label } of index.sections) {
+                const button = document.createElement('button')
+                button.type = 'button'
+                button.dataset.filter = key
+                button.className = 'jaad-search-filter'
+                button.textContent = label
+                this.#filters.append(button)
+            }
+            this.#filter(this.#section)
+        }
+
+        #filter(section: string) {
+            this.#section = section
+            for (const button of this.#filters.querySelectorAll<HTMLElement>('[data-filter]')) {
+                button.setAttribute('aria-pressed', String(button.dataset.filter === section))
+            }
+            this.#render()
+            this.#input.focus()
+        }
+
+        #select(i: number) {
+            this.#selected = i
+            const option = this.#options[i]
+            if (option) this.#input.setAttribute('aria-activedescendant', option.li.id)
+            this.#options.forEach(({ li }, n) => li.setAttribute('aria-selected', String(n === i)))
+            option?.li.scrollIntoView({ block: 'nearest' })
+        }
+
+        #marked(text: string, terms: string[]): DocumentFragment {
+            const frag = document.createDocumentFragment()
+            for (const part of markWords(text, terms)) {
+                if (part.match) {
+                    const mark = document.createElement('mark')
+                    mark.className = 'jaad-search-mark'
+                    mark.textContent = part.text
+                    frag.append(mark)
+                } else {
+                    frag.append(document.createTextNode(part.text))
+                }
+            }
+            return frag
+        }
+
+        #render() {
+            this.#list.replaceChildren()
+            this.#options = []
+            this.#input.removeAttribute('aria-activedescendant')
+
+            if (!this.#index) {
+                this.#list.append(this.#message(this.dataset.loading ?? 'Loading...'))
+                return
+            }
+
+            const query = this.#input.value
+            const terms = queryTerms(query)
+            const section = this.#section || undefined
+
+            if (terms.length === 0) {
+                for (const group of openingPages(this.#index, section)) {
+                    if (group.label) this.#list.append(this.#label(group.label))
+                    for (const page of group.pages) this.#option(page.href, this.#pageRow(page, [], ''))
+                }
+            } else {
+                for (const group of search(this.#index, query, section)) {
+                    const snippet = group.intro ? getSnippet(group.intro.text, terms) : ''
+                    this.#option(group.page.href, this.#pageRow(group.page, terms, snippet))
+                    for (const hit of group.hits) {
+                        const li = this.#option(hit.href, this.#row(hit.entry.heading ?? '', terms))
+                        li.classList.add('jaad-search-result-heading')
+                        this.#snippet(li, getSnippet(hit.entry.text, terms), terms)
+                    }
+                }
+            }
+
+            if (this.#options.length === 0) {
+                this.#list.append(this.#message(`${this.dataset.empty ?? 'No results for'} “${query}”`))
+                return
+            }
+            this.#select(0)
+        }
+
+        /** A selectable row: the list item, given its content. */
+        #option(href: string, content: HTMLElement): HTMLLIElement {
+            const i = this.#options.length
+            const li = document.createElement('li')
+            li.id = `search-option-${i}`
+            li.setAttribute('role', 'option')
+            li.className = 'jaad-search-result'
+            li.addEventListener('click', () => this.#go(href))
+            li.addEventListener('mouseenter', () => this.#select(i))
+            li.append(content)
+            this.#list.append(li)
+            this.#options.push({ li, href })
+            return li
+        }
+
+        #row(title: string, terms: string[]): HTMLElement {
+            const head = document.createElement('div')
+            head.className = 'jaad-search-result-head'
+            const span = document.createElement('span')
+            span.className = 'jaad-search-result-title'
+            span.append(this.#marked(title, terms))
+            head.append(span)
+            return head
+        }
+
+        #pageRow(page: SearchPage, terms: string[], snippet: string): HTMLElement {
+            const fragment = document.createElement('div')
+            const head = this.#row(page.title, terms)
+            if (page.chapter) {
+                const badge = document.createElement('span')
+                badge.className = 'jaad-search-result-badge'
+                badge.textContent = page.chapter
+                head.append(badge)
+            }
+            fragment.append(head)
+            this.#snippet(fragment, snippet, terms)
+            return fragment
+        }
+
+        #snippet(parent: HTMLElement, text: string, terms: string[]) {
+            if (!text) return
+            const p = document.createElement('p')
+            p.className = 'jaad-search-result-snippet'
+            p.append(this.#marked(text, terms))
+            parent.append(p)
+        }
+
+        #label(text: string): HTMLLIElement {
+            const li = document.createElement('li')
+            li.setAttribute('role', 'presentation')
+            li.className = 'jaad-search-group'
+            li.textContent = text
+            return li
+        }
+
+        #message(text: string): HTMLLIElement {
+            const li = document.createElement('li')
+            li.className = 'jaad-search-message'
+            li.textContent = text
+            return li
+        }
+    }
+
+    if (!customElements.get('jaad-search')) {
+        customElements.define('jaad-search', JaadSearch)
+    }
+</script>

package/src/site/components/SocialLinks.astro

@@ -0,0 +1,27 @@
+---
+import config from 'virtual:jaad/config'
+import { buildSocialLinks } from '../social.ts'
+
+const links = buildSocialLinks(config)
+---
+
+{links.map((link) => (
+    <a
+        href={link.href}
+        target="_blank"
+        rel="noopener noreferrer"
+        title={link.label}
+        aria-label={link.label}
+        class="jaad-icon-button"
+    >
+        {link.svg ? (
+            <span class="jaad-social-icon" set:html={link.svg} />
+        ) : link.path ? (
+            <svg class="jaad-icon" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+                <path d={link.path} />
+            </svg>
+        ) : (
+            <span class="jaad-social-label">{link.label}</span>
+        )}
+    </a>
+))}

package/src/site/components/ThemeSwitcher.astro

@@ -0,0 +1,55 @@
+---
+// The theme class and the icon are already set in <head>; only the click is JS.
+import { ui } from '../runtime.ts'
+
+const t = ui(Astro.props.locale)
+---
+
+<jaad-theme-toggle>
+    <button class="jaad-icon-button" aria-label={t('theme.toggle')} title={t('theme.toggle')}>
+        <svg
+            class="jaad-theme-icon-to-dark jaad-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"
+            ></path>
+        </svg>
+
+        <svg
+            class="jaad-theme-icon-to-light jaad-icon"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+            aria-hidden="true"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"
+            ></path>
+        </svg>
+    </button>
+</jaad-theme-toggle>
+
+<script>
+    class JaadThemeToggle extends HTMLElement {
+        connectedCallback() {
+            this.querySelector('button')?.addEventListener('click', () => {
+                const isDark = document.documentElement.classList.toggle('dark')
+                localStorage.setItem('theme', isDark ? 'dark' : 'light')
+            })
+        }
+    }
+
+    if (!customElements.get('jaad-theme-toggle')) {
+        customElements.define('jaad-theme-toggle', JaadThemeToggle)
+    }
+</script>

package/src/site/components/locale-switcher.ts

@@ -0,0 +1,6 @@
+/** The markup the persisted switcher should adopt from an incoming document,
+ *  or null when there is nothing to adopt. */
+export function nextSwitcherMarkup(incoming: Document): string | null {
+    const next = incoming.querySelector('jaad-locale-switcher')
+    return next ? next.innerHTML : null
+}