@jaamd/jaad 0.11.0 → 1.0.0-rc.1

package/src/components/ScrollToTop.astro

@@ -1,43 +0,0 @@
----
-import { ui } from '../docs-config.ts'
-
-const t = ui(Astro.props.locale)
----
-
-<jaad-scroll-top>
-    <button class="jaad-scroll-top-button" aria-label={t('scrollTop')}>
-        <svg class="jaad-scroll-top-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
-        </svg>
-    </button>
-</jaad-scroll-top>
-
-<script>
-    const SHOW_AFTER = 300
-
-    class JaadScrollTop extends HTMLElement {
-        #button: HTMLButtonElement | null = null
-        #onScroll = () => {
-            const shown = window.scrollY > SHOW_AFTER
-            this.#button?.toggleAttribute('data-visible', shown)
-        }
-
-        connectedCallback() {
-            this.#button = this.querySelector('button')
-            this.#button?.addEventListener('click', () => {
-                const reduced = matchMedia('(prefers-reduced-motion: reduce)').matches
-                window.scrollTo({ top: 0, behavior: reduced ? 'auto' : 'smooth' })
-            })
-            window.addEventListener('scroll', this.#onScroll, { passive: true })
-            this.#onScroll()
-        }
-
-        disconnectedCallback() {
-            window.removeEventListener('scroll', this.#onScroll)
-        }
-    }
-
-    if (!customElements.get('jaad-scroll-top')) {
-        customElements.define('jaad-scroll-top', JaadScrollTop)
-    }
-</script>

package/src/components/docs/Breadcrumbs.astro

@@ -1,36 +0,0 @@
----
-import config from 'virtual:jaad/config'
-import { docsUrls, ui } from '../../docs-config.ts'
-import { docsPageHref } from '../../urls.ts'
-import { formatChapterTitle } from '../../utils/docs.ts'
-
-interface Props {
-    chapter?: string
-    title: string
-    locale?: string
-}
-
-const { chapter, title, locale } = Astro.props
-const t = ui(locale)
-const chapterTitle = formatChapterTitle(chapter)
-
-const rootSegment = config.docsBase.split('/').filter(Boolean).at(-1)
-const rootLabel = formatChapterTitle(rootSegment) ?? t('breadcrumb.root')
-const rootHref = docsPageHref('', docsUrls(locale))
----
-
-<nav aria-label={t('breadcrumb.label')} class="docs-breadcrumbs">
-    <a href={rootHref} class="docs-breadcrumbs-link">
-        {rootLabel}
-    </a>
-    {chapterTitle && (
-        <>
-            <span aria-hidden="true">/</span>
-            <span>{chapterTitle}</span>
-        </>
-    )}
-    <span aria-hidden="true">/</span>
-    <span class="docs-breadcrumbs-current" aria-current="page">
-        {title}
-    </span>
-</nav>

package/src/components/docs/DocsMobileNav.astro

@@ -1,93 +0,0 @@
----
-import type { DocsHeadings } from '../../@types/docs.ts'
-import type { NavSection } from '../../navigation.ts'
-import { ui } from '../../docs-config.ts'
-import { formatChapterTitle } from '../../utils/docs.ts'
-import ScrollToTop from '../ScrollToTop.astro'
-
-interface Props {
-    locale?: string
-    sections: NavSection[]
-    headings: DocsHeadings[]
-}
-
-const { sections, headings, locale } = Astro.props
-const t = ui(locale)
----
-
-<div class="docs-mobile-nav">
-    <div class="docs-select">
-        <label for="page-select" class="jaad-sr-only">
-            {t('nav.selectPage')}
-        </label>
-        <select id="page-select" class="docs-select-field">
-            {sections.map((section) =>
-                section.type === 'page' ? (
-                    <option value={section.item.href} selected={section.item.isActive}>
-                        {section.item.title}
-                    </option>
-                ) : (
-                    <optgroup label={formatChapterTitle(section.chapter) || section.chapter}>
-                        {section.items.map((page) => (
-                            <option value={page.href} selected={page.isActive}>
-                                {page.title}
-                            </option>
-                        ))}
-                    </optgroup>
-                ),
-            )}
-        </select>
-    </div>
-
-    {headings.length > 0 && (
-        <div id="section-select-wrapper" class="docs-select">
-            <label for="section-select" class="jaad-sr-only">
-                Jump to section
-            </label>
-            <select id="section-select" class="docs-select-field">
-                <option value="">{t('nav.jumpToSection')}</option>
-                {headings.map((heading) => {
-                    const prefix = heading.depth === 3 ? '\u00A0\u00A0\u00A0\u00A0' : ''
-                    return (
-                        <option value={`#${heading.slug}`}>
-                            {prefix}
-                            {heading.text}
-                        </option>
-                    )
-                })}
-            </select>
-        </div>
-    )}
-</div>
-
-<ScrollToTop {locale} />
-
-<script>
-    import { navigate } from 'astro:transitions/client'
-
-    function initMobileNav(): void {
-        const pageSelect = document.querySelector<HTMLSelectElement>('#page-select')
-        const sectionSelect = document.querySelector<HTMLSelectElement>('#section-select')
-
-        if (pageSelect && !pageSelect.dataset.navInit) {
-            pageSelect.dataset.navInit = '1'
-            pageSelect.addEventListener('change', () => {
-                if (pageSelect.value) navigate(pageSelect.value)
-            })
-        }
-
-        if (sectionSelect && !sectionSelect.dataset.navInit) {
-            sectionSelect.dataset.navInit = '1'
-            sectionSelect.addEventListener('change', () => {
-                const target = sectionSelect.value
-                if (!target) return
-                document.querySelector(target)?.scrollIntoView({ behavior: 'smooth', block: 'start' })
-                // Reset so picking the same section twice in a row fires again.
-                setTimeout(() => (sectionSelect.value = ''), 500)
-            })
-        }
-    }
-
-    initMobileNav()
-    document.addEventListener('astro:page-load', initMobileNav)
-</script>

package/src/components/docs/DocsPage.astro

@@ -1,68 +0,0 @@
----
-import type { DocsEntry } from '../../@types/docs.ts'
-import MarkdownContent from '@jaamd/jaamd/components'
-import config from 'virtual:jaad/config'
-import { DEFAULT_LOCALE, LOCALES, docsUrls, ui } from '../../docs-config.ts'
-import DocsLayout from '../../layouts/Docs.astro'
-import { buildDocsNavigation } from '../../navigation.ts'
-import {
-    getCleanSlug,
-    parseDocCollectionId,
-    docTitle,
-    extractHeadingsFromMarkdown,
-    routedId,
-} from '../../utils/docs.ts'
-import Breadcrumbs from './Breadcrumbs.astro'
-import DocsMobileNav from './DocsMobileNav.astro'
-import DocsPageNav from './DocsPageNav.astro'
-import PageActions from './PageActions.astro'
-
-interface Props {
-    entry: DocsEntry
-    sortedPages: DocsEntry[]
-    /** Left out on the opening page, whose title is the site name alone. */
-    headTitle?: string
-}
-
-const { entry, sortedPages, headTitle } = Astro.props
-
-const cleanSlug = getCleanSlug(routedId(entry))
-const { chapter } = parseDocCollectionId(routedId(entry))
-const title = docTitle(entry)
-const headings = extractHeadingsFromMarkdown(entry.body || '')
-const urls = docsUrls(entry.locale)
-const t = ui(entry.locale)
-const language = LOCALES.find((known) => known.code === (entry.locale ?? DEFAULT_LOCALE))?.tag ?? config.lang
-const updated = entry.data.lastUpdated
-const navigation = buildDocsNavigation(sortedPages, entry.id, urls)
-const contentAttrs = { id: 'content' }
----
-
-<DocsLayout title={headTitle} chapter={chapter} entry={entry} headings={headings} {navigation}>
-    <DocsMobileNav slot="mobile-navigation" sections={navigation.sections} headings={headings} locale={entry.locale} />
-
-    <Breadcrumbs slot="breadcrumbs" chapter={chapter} title={title} locale={entry.locale} />
-    <PageActions slot="page-actions" id={entry.id} cleanSlug={cleanSlug} locale={entry.locale} />
-
-    <Fragment slot="content">
-        <MarkdownContent {...contentAttrs} class="docs-content">
-            <slot />
-        </MarkdownContent>
-
-        {updated && (
-            <p class="docs-updated">
-                {t('page.lastUpdated')}{' '}
-                <time datetime={updated.toISOString()}>
-                    {new Intl.DateTimeFormat(language, { dateStyle: 'long' }).format(updated)}
-                </time>
-            </p>
-        )}
-    </Fragment>
-
-    <DocsPageNav
-        slot="page-navigation"
-        previousPage={navigation.previousPage}
-        nextPage={navigation.nextPage}
-        locale={entry.locale}
-    />
-</DocsLayout>

package/src/components/docs/DocsSidebarLeft.astro

@@ -1,82 +0,0 @@
----
-import type { NavSection } from '../../navigation.ts'
-import { ui } from '../../docs-config.ts'
-import { formatChapterTitle } from '../../utils/docs.ts'
-
-interface Props {
-    sections: NavSection[]
-    locale?: string
-}
-
-const { sections, locale } = Astro.props
-const t = ui(locale)
----
-
-<aside class="docs-sidebar-left jaad-sidebar">
-    <nav aria-label={t('nav.documentation')}>
-        {sections.map((section) =>
-            section.type === 'page' ? (
-                <div class="docs-sidebar-page">
-                    <a
-                        href={section.item.href}
-                        class="docs-sidebar-link"
-                        aria-current={section.item.isActive ? 'page' : undefined}
-                    >
-                        {section.item.title}
-                    </a>
-                </div>
-            ) : (
-                <div class="docs-sidebar-chapter">
-                    <h3 class="docs-sidebar-chapter-title">{formatChapterTitle(section.chapter)}</h3>
-                    <ul class="docs-sidebar-chapter-list">
-                        {section.items.map((item) => (
-                            <li>
-                                <a
-                                    href={item.href}
-                                    class="docs-sidebar-sublink"
-                                    aria-current={item.isActive ? 'page' : undefined}
-                                >
-                                    {item.title}
-                                </a>
-                            </li>
-                        ))}
-                    </ul>
-                </div>
-            ),
-        )}
-    </nav>
-</aside>
-
-<script>
-    const SELECTOR = '.docs-sidebar-left'
-    let scrollTop = 0
-
-    const sidebar = () => document.querySelector<HTMLElement>(SELECTOR)
-
-    /** Scrolls the sidebar only, never the document, and only when needed. */
-    function revealCurrent() {
-        const el = sidebar()
-        const current = el?.querySelector('[aria-current="page"]')
-        if (!el || !current) return
-
-        const box = el.getBoundingClientRect()
-        const item = current.getBoundingClientRect()
-        if (item.top >= box.top && item.bottom <= box.bottom) return
-
-        el.scrollTop += item.top - box.top - (box.height - item.height) / 2
-    }
-
-    document.addEventListener('astro:before-swap', () => {
-        scrollTop = sidebar()?.scrollTop ?? 0
-    })
-
-    document.addEventListener('astro:after-swap', () => {
-        const el = sidebar()
-        if (!el) return
-        el.scrollTop = scrollTop
-        // A deep link, or a page whose entry sits outside the restored window.
-        revealCurrent()
-    })
-
-    revealCurrent()
-</script>

package/src/content.ts

@@ -1,42 +0,0 @@
-import { glob } from 'astro/loaders'
-import { z } from 'astro/zod'
-import { defineCollection } from 'astro:content'
-import config from 'virtual:jaad/config'
-import { getDocCollectionId } from './utils/docs.ts'
-
-const docsPages = defineCollection({
-    loader: glob({
-        pattern: '**/*.md',
-        base: config.docsDir,
-        // Keep URLs file-driven even if markdown contains an unrelated slug field.
-        generateId: ({ entry }) => getDocCollectionId(entry),
-    }),
-    // Every field is optional: markdown without frontmatter works as-is.
-    schema: z.object({
-        title: z.string().optional(),
-        description: z.string().optional(),
-        /** Shorter label, in navigation only. */
-        label: z.string().optional(),
-        /** Pairs this page with its translations when the slugs differ. */
-        translationKey: z.string().optional(),
-        /** Replaces the filename prefix number. */
-        order: z.number().int().optional(),
-        /** Left out of production builds. */
-        draft: z.boolean().default(false),
-        /** Metadata and search weight; never rendered. */
-        keywords: z.array(z.string()).default([]),
-        author: z.string().optional(),
-        /** Public path or URL; false drops the site's. */
-        ogImage: z
-            .union([
-                z.string().refine((v) => v.startsWith('/') || /^https?:\/\//.test(v), {
-                    message: 'ogImage must be a public url, such as "/og/page.png"',
-                }),
-                z.literal(false),
-            ])
-            .optional(),
-        lastUpdated: z.coerce.date().optional(),
-    }),
-})
-
-export const collections = { docsPages }

package/src/navigation.ts

@@ -1,97 +0,0 @@
-import type { DocsNavItem } from './@types/docs.ts'
-import { docsPageHref, type DocsUrlOptions } from './urls.ts'
-import { docLabel, getCanonicalDocSlug, parseDocCollectionId, routedId, type DocsPageLike } from './utils/docs.ts'
-
-export type NavSection =
-    | { type: 'page'; order: number; item: DocsNavItem }
-    | { type: 'chapter'; order: number; chapter: string; items: DocsNavItem[] }
-
-export interface DocsNavigation {
-    sections: NavSection[]
-    previousPage: DocsNavItem | null
-    nextPage: DocsNavItem | null
-}
-
-function groupByChapter(items: DocsNavItem[]): NavSection[] {
-    const chapters = new Map<string, Extract<NavSection, { type: 'chapter' }>>()
-    const sections: NavSection[] = []
-
-    for (const item of items) {
-        if (!item.chapter) {
-            sections.push({ type: 'page', order: item.primaryOrder, item })
-            continue
-        }
-
-        let chapter = chapters.get(item.chapter)
-        if (!chapter) {
-            chapter = {
-                type: 'chapter',
-                order: item.primaryOrder,
-                chapter: item.chapter,
-                items: [],
-            }
-            chapters.set(item.chapter, chapter)
-            sections.push(chapter)
-        }
-        chapter.items.push(item)
-    }
-
-    return sections.toSorted((a, b) => a.order - b.order)
-}
-
-/** Build every navigation view from one ordered collection traversal. */
-interface Model {
-    items: DocsNavItem[]
-    positions: Map<string, number>
-}
-
-// Only isActive and the neighbours vary between the pages of one locale. The
-// hrefs do not, as long as the url options are the same ones.
-const models = new WeakMap<object, Map<string, Model>>()
-
-function modelFor(sortedPages: DocsPageLike[], urls: DocsUrlOptions): Model {
-    const key = `${urls.docsBase}\u0000${urls.deploymentBase ?? ''}\u0000${urls.locale ?? ''}\u0000${urls.defaultLocale ?? ''}`
-    let byUrls = models.get(sortedPages)
-    if (!byUrls) {
-        byUrls = new Map()
-        models.set(sortedPages, byUrls)
-    }
-    const cached = byUrls.get(key)
-    if (cached) return cached
-
-    const model: Model = {
-        items: sortedPages.map((page, index): DocsNavItem => {
-            const parsed = parseDocCollectionId(routedId(page))
-            return {
-                title: docLabel(page),
-                chapter: parsed.chapter,
-                primaryOrder: parsed.orderChapter ?? page.data?.order ?? parsed.order,
-                href: docsPageHref(getCanonicalDocSlug(page, index), urls),
-                isActive: false,
-            }
-        }),
-        positions: new Map(sortedPages.map((page, index) => [page.id, index])),
-    }
-
-    byUrls.set(key, model)
-    return model
-}
-
-export function buildDocsNavigation(
-    sortedPages: DocsPageLike[],
-    currentId: string,
-    urls: DocsUrlOptions,
-): DocsNavigation {
-    const { items, positions } = modelFor(sortedPages, urls)
-    const currentIndex = positions.get(currentId) ?? -1
-    const marked = items.map((item, index) => ({
-        ...item,
-        isActive: index === currentIndex,
-    }))
-
-    return {
-        sections: groupByChapter(marked),
-        previousPage: currentIndex > 0 ? marked[currentIndex - 1] : null,
-        nextPage: currentIndex >= 0 && currentIndex < marked.length - 1 ? marked[currentIndex + 1] : null,
-    }
-}

package/src/routes/docs-index.astro

@@ -1,19 +0,0 @@
----
-import { render } from 'astro:content'
-import { getSortedDocsPages } from '../collection.ts'
-import DocsPage from '../components/docs/DocsPage.astro'
-import { withDeploymentBase } from '../urls.ts'
-
-const sortedPages = await getSortedDocsPages()
-
-const firstPage = sortedPages[0]
-if (!firstPage) {
-    return Astro.redirect(withDeploymentBase('/404', import.meta.env.BASE_URL))
-}
-
-const { Content } = await render(firstPage)
----
-
-<DocsPage entry={firstPage} {sortedPages}>
-    <Content />
-</DocsPage>

package/src/routes/docs-slug.astro

@@ -1,58 +0,0 @@
----
-import { render } from 'astro:content'
-import { getSortedDocsPages } from '../collection.ts'
-import DocsPage from '../components/docs/DocsPage.astro'
-import { buildLocales, docsUrls, localePrefix } from '../docs-config.ts'
-import { docsPageHref, withDeploymentBase } from '../urls.ts'
-import { getCanonicalDocSlug, getCleanSlug, docTitle, routedId } from '../utils/docs.ts'
-
-interface DocsPath {
-    params: { slug: string }
-    props: { id: string; locale?: string; isOpening: boolean }
-}
-
-export async function getStaticPaths() {
-    const paths: DocsPath[] = []
-
-    for (const locale of buildLocales()) {
-        const sortedPages = await getSortedDocsPages(locale)
-        const prefix = localePrefix(locale)
-
-        sortedPages.forEach((page, index) => {
-            const isOpening = getCanonicalDocSlug(page, index) === ''
-            paths.push({
-                params: { slug: `${prefix}${getCleanSlug(routedId(page))}` },
-                props: { id: page.id, locale, isOpening },
-            })
-
-            // A prefixed locale has no index route of its own: /it is this page.
-            if (isOpening && prefix) {
-                paths.push({
-                    params: { slug: locale! },
-                    props: { id: page.id, locale, isOpening: false },
-                })
-            }
-        })
-    }
-
-    return paths
-}
-
-const { id, locale, isOpening } = Astro.props
-
-if (isOpening) {
-    return Astro.redirect(docsPageHref('', docsUrls(locale)), 301)
-}
-
-const sortedPages = await getSortedDocsPages(locale)
-const docPage = sortedPages.find((page) => page.id === id)
-if (!docPage) {
-    return Astro.redirect(withDeploymentBase('/404', import.meta.env.BASE_URL))
-}
-
-const { Content } = await render(docPage)
----
-
-<DocsPage entry={docPage} {sortedPages} headTitle={docTitle(docPage)}>
-    <Content />
-</DocsPage>

package/src/styles/components/breadcrumbs.css

@@ -1,13 +0,0 @@
-@layer components {
-    .docs-breadcrumbs {
-        @apply text-foreground-muted mb-4 flex items-center gap-1.5 text-xs;
-    }
-
-    .docs-breadcrumbs-link {
-        @apply hover:text-foreground-bright no-underline;
-    }
-
-    .docs-breadcrumbs-current {
-        @apply text-foreground-bright font-medium;
-    }
-}

package/src/styles/components/docs-mobile-nav.css

@@ -1,9 +0,0 @@
-@layer components {
-    .docs-mobile-nav {
-        @apply mb-8 space-y-4 lg:hidden;
-    }
-
-    .docs-select-field {
-        @apply border-primary/20 bg-surface text-foreground focus:border-primary w-full appearance-none rounded-lg border py-3 pr-10 pl-4 transition-colors focus:outline-none;
-    }
-}

package/src/styles/components/docs-page-nav.css

@@ -1,31 +0,0 @@
-@layer components {
-    .docs-page-nav {
-        @apply py-8;
-    }
-
-    .docs-page-nav-row {
-        @apply flex items-center justify-between gap-4;
-    }
-
-    .docs-page-nav-link {
-        @apply border-border-dark bg-background-tertiary text-foreground-bright hover:border-primary hover:bg-border-dark hover:text-primary flex max-w-[calc(45%-1rem)] min-w-0 items-center gap-2 rounded-lg border px-4 py-3 no-underline transition-all duration-300;
-    }
-
-    .docs-page-nav-icon {
-        @apply h-4 w-4 shrink-0 transition-transform;
-    }
-
-    @media (hover: hover) {
-        .docs-page-nav-link:hover .docs-page-nav-icon-prev {
-            @apply -translate-x-1;
-        }
-
-        .docs-page-nav-link:hover .docs-page-nav-icon-next {
-            @apply translate-x-1;
-        }
-    }
-
-    .docs-page-nav-label {
-        @apply overflow-hidden font-medium text-ellipsis whitespace-nowrap;
-    }
-}

package/src/styles/components/docs-sidebar.css

@@ -1,42 +0,0 @@
-@layer components {
-    .docs-sidebar-page {
-        @apply mb-0.5;
-    }
-
-    .docs-sidebar-page:not(:first-child) {
-        @apply mt-0.5;
-    }
-
-    .docs-sidebar-link,
-    .docs-sidebar-sublink {
-        @apply text-foreground hover:bg-primary/10 hover:text-primary block px-3 py-1.5 text-sm no-underline transition-colors;
-    }
-
-    .docs-sidebar-link {
-        @apply rounded;
-    }
-
-    .docs-sidebar-sublink {
-        @apply rounded-r;
-    }
-
-    .docs-sidebar-link[aria-current='page'] {
-        @apply bg-primary/10 text-primary font-semibold;
-    }
-
-    .docs-sidebar-sublink[aria-current='page'] {
-        @apply border-primary bg-primary/10 text-primary -ml-px border-l-2 pl-2.75 font-semibold;
-    }
-
-    .docs-sidebar-chapter {
-        @apply mt-5 mb-5;
-    }
-
-    .docs-sidebar-chapter-title {
-        @apply text-primary/50 mb-1 px-3 text-[0.825rem] font-semibold tracking-widest uppercase;
-    }
-
-    .docs-sidebar-chapter-list {
-        @apply border-border/40 ml-3 space-y-0.5 border-l pl-0;
-    }
-}

package/src/styles/components/header.css

@@ -1,20 +0,0 @@
-@layer components {
-    .jaad-header-inner {
-        @apply container mx-auto p-4;
-    }
-    .jaad-header-row {
-        @apply flex items-center gap-4;
-    }
-    .jaad-brand {
-        @apply text-foreground-bright text-xl;
-    }
-    .jaad-brand-link {
-        @apply text-primary no-underline;
-    }
-    .jaad-logo {
-        @apply h-7;
-    }
-    .jaad-header-actions {
-        @apply ml-auto flex items-center gap-2;
-    }
-}

package/src/styles/components/page-actions.css

@@ -1,13 +0,0 @@
-@layer components {
-    .docs-page-actions {
-        @apply mb-4 flex items-center gap-2 text-xs;
-    }
-
-    .docs-page-action {
-        @apply border-border bg-surface hover:bg-surface-hover text-foreground-secondary hover:text-foreground-bright flex cursor-pointer items-center gap-1.5 rounded-lg border px-3 py-1.5 no-underline transition-colors;
-    }
-
-    .docs-page-action-icon {
-        @apply h-3.5 w-3.5 shrink-0;
-    }
-}