@jaamd/jaad 0.11.0 → 1.0.0-rc.1

package/src/config.ts

@@ -1,98 +1,12 @@
 import type { AstroUserConfig, FontProvider, Locales, SessionDriverConfig } from 'astro'
-import { existsSync } from 'node:fs'
-import { createRequire } from 'node:module'
-import { join } from 'node:path'
-import { fileURLToPath } from 'node:url'
 import { z } from 'astro/zod'
-import { inferRepo, inferDescription, editBaseFrom, type RepoInfo } from './infer.ts'
-import { detectLocales, validateLocaleTree } from './locale-tree.ts'
-import { describeLocale, isLocale, type Locale } from './locales.ts'
-import { PRESETS, PRESET_NAMES, isPreset } from './themes/index.ts'
-import { normaliseBasePath } from './urls.ts'
+import { docsConfigShape, resolveDocsConfig, type DocsResolvedConfig } from './docs/config.ts'
+import { resolveSiteConfig, siteConfigShape, type SiteResolvedConfig } from './site/config.ts'
+import { inferRepo } from './site/infer.ts'
+import { describeLocale } from './site/locales.ts'
 
-export const jaadConfigSchema = z.object({
-    title: z.string(),
-    description: z.string().optional(),
-    lang: z.string().default('en'),
-    logo: z
-        .string()
-        .refine((v) => v.startsWith('/') || /^https?:\/\//.test(v), {
-            message: 'logo must be a public url, such as "/logo.svg"',
-        })
-        .optional(),
-
-    docsDir: z.string().default('./docs'),
-    routeBase: z.string().default('/'),
-
-    social: z
-        .record(
-            z.string(),
-            z.union([
-                z.string(),
-                z.object({
-                    href: z.string(),
-                    label: z.string().optional(),
-                    svg: z.string().optional(),
-                }),
-            ]),
-        )
-        .default({}),
-    nav: z.array(z.object({ label: z.string(), href: z.string() })).default([]),
-    footer: z
-        .union([z.string(), z.literal(false)], {
-            error:
-                'footer is one line of text, or false to remove it. ' +
-                'The message/copyright pair is gone: write them as a single string, ' +
-                'e.g. "MIT Licensed · © 2026 Me · :credit".',
-        })
-        .optional(),
-
-    editLink: z.union([z.boolean(), z.string()]).default(true),
-
-    head: z
-        .array(
-            z.object({
-                tag: z.string(),
-                attrs: z.record(z.string(), z.union([z.string(), z.boolean()])).optional(),
-                content: z.string().optional(),
-            }),
-        )
-        .default([]),
-    ogImage: z
-        .union([
-            z.string().refine((v) => v.startsWith('/') || /^https?:\/\//.test(v), {
-                message: 'ogImage must be a public url, such as "/og-image.png"',
-            }),
-            z.literal(false),
-        ])
-        .optional(),
-
-    theme: z
-        .union([
-            z.string().refine(isPreset, {
-                message: `unknown theme; available: ${PRESET_NAMES.join(', ')}`,
-            }),
-            z.object({ light: z.string(), dark: z.string() }),
-        ])
-        .default('default'),
-
-    appearance: z
-        .enum(['auto', 'light', 'dark'], {
-            error: 'unknown appearance; available: auto, light, dark',
-        })
-        .default('auto'),
-
-    /** Registers Tailwind (the site's own install) and exposes JAAD's tokens to it. */
-    tailwind: z.boolean().default(false),
-
-    /** Per-locale overrides for JAAD's bundled interface strings. */
-    ui: z.record(z.string(), z.record(z.string(), z.string())).default({}),
-
-    /** Only when detection guesses wrong: pin the set, or false to switch it off. */
-    locales: z
-        .union([z.array(z.string().refine(isLocale, { message: 'not a locale code' })), z.literal(false)])
-        .optional(),
-})
+/** Site options, then docs options: the order the error for an unknown one lists them. */
+export const jaadConfigSchema = z.object({ ...siteConfigShape, ...docsConfigShape })
 
 export type JaadConfig = z.output<typeof jaadConfigSchema>
 
@@ -106,39 +20,9 @@ export type JaadUserConfig = z.input<typeof jaadConfigSchema> & {
     astro?: AstroPassthroughConfig
 }
 
-/** What the components actually read: the user's options plus whatever the
- *  repository could tell us. Inferred fields are null when unavailable. */
-export interface JaadResolvedConfig extends JaadConfig {
-    /** Where the docs are mounted, without a trailing slash. Empty at the root. */
-    docsBase: string
-    /** What jaamd gets for code blocks. */
-    shiki: string | { light: string; dark: string }
-    repoUrl: string | null
-    editBase: string | null
-    favicon: string | null
-    /** Explicit, inferred from public/, or false when no valid image exists. */
-    ogImage: string | false
-    /** Empty when the docs are not localised. */
-    docsLocales: Locale[]
-    /** `lang` when the docs are not localised. */
-    defaultLocale: string
-}
-
-const FAVICONS = ['favicon.svg', 'favicon.ico', 'favicon.png']
-const OG_IMAGES = ['og-image.png', 'og-image.jpg', 'og-image.jpeg', 'og-image.webp']
-
-function findPublicAsset(cwd: string, candidates: string[]): string | null {
-    for (const name of candidates) {
-        if (existsSync(join(cwd, 'public', name))) return `/${name}`
-    }
-    return null
-}
-
-/** Empty at the root, otherwise one leading slash and no trailing one. */
-function resolveEditBase(editLink: JaadConfig['editLink'], repo: RepoInfo | null, docsDir: string): string | null {
-    if (typeof editLink === 'string') return editLink
-    if (!editLink || !repo) return null
-    return editBaseFrom(repo, docsDir)
+/** What the components read: the site's fields at the top, the docs' under `docs`. */
+export interface JaadResolvedConfig extends SiteResolvedConfig {
+    docs: DocsResolvedConfig
 }
 
 const OPTIONS = Object.keys(jaadConfigSchema.shape)
@@ -173,60 +57,22 @@ function parseConfig(options: JaadUserConfig): JaadConfig {
 export function resolveConfig(options: JaadUserConfig, cwd: string = process.cwd()): JaadResolvedConfig {
     const config = parseConfig(options)
     const repo = inferRepo(cwd)
-    const locales = resolveLocales(config, cwd)
+    const { docs, locales } = resolveDocsConfig(config, config.lang, options.docsDir !== undefined, repo, cwd)
+    const {
+        docsDir: _docsDir,
+        routeBase: _routeBase,
+        sections: _sections,
+        editLink: _editLink,
+        locales: _locales,
+        ...siteOptions
+    } = config
 
     return {
-        ...config,
-        description: config.description ?? inferDescription(cwd) ?? undefined,
-        repoUrl: repo?.url ?? null,
-        favicon: findPublicAsset(cwd, FAVICONS),
-        ogImage: config.ogImage ?? findPublicAsset(cwd, OG_IMAGES) ?? false,
-        docsBase: normaliseBasePath(config.routeBase),
-        shiki: typeof config.theme === 'string' ? PRESETS[config.theme].shiki : config.theme,
-        editBase: resolveEditBase(config.editLink, repo, config.docsDir),
-        docsLocales: locales.map(describeLocale),
+        ...siteOptions,
+        ...resolveSiteConfig(siteOptions, repo, cwd),
+        locales: locales.map(describeLocale),
         defaultLocale: locales.length > 0 ? config.lang.toLowerCase() : config.lang,
-    }
-}
-
-/** Directory names win; `locales` only overrides what detection found. */
-function resolveLocales(config: JaadConfig, cwd: string): string[] {
-    if (config.locales === false) return []
-
-    const docsDir = join(cwd, config.docsDir)
-    const locales = config.locales ?? detectLocales(docsDir, config.lang)
-    // A pinned list skips detection, and with it the missing-directory guard;
-    // the integration warns about that case with better words than readdir does.
-    if (locales.length === 0 || !existsSync(docsDir)) return []
-
-    validateLocaleTree(docsDir, locales, config.lang)
-    return locales.map((locale) => locale.toLowerCase()).toSorted()
-}
-
-const requireFrom = createRequire(import.meta.url)
-
-const styleInPackage = (name: string) => fileURLToPath(new URL(`./styles/${name}`, import.meta.url))
-
-/** Absolute paths, kept off the resolved config, which gets serialised. */
-export function resolveStylesheets(
-    config: JaadConfig,
-    cwd: string = process.cwd(),
-): {
-    user: string | null
-    theme: string | null
-    bridge: string
-    tailwind: string | null
-} {
-    const userCss = join(cwd, 'src', 'jaad.css')
-    const slug = typeof config.theme === 'string' ? PRESETS[config.theme].theme : null
-
-    return {
-        user: existsSync(userCss) ? userCss : null,
-        // Resolved through JAAMD's export map rather than by path.
-        theme: slug ? requireFrom.resolve(`@jaamd/jaamd/themes/${slug}.css`) : null,
-        // A preset supplies the palette, so the colours travel the other way.
-        bridge: styleInPackage(slug ? 'jaamd-reverse.css' : 'jaamd-forward.css'),
-        tailwind: config.tailwind ? styleInPackage('tailwind.css') : null,
+        docs,
     }
 }
 
@@ -234,3 +80,6 @@ export function resolveStylesheets(
 export function defineJaadConfig(config: JaadUserConfig): JaadUserConfig {
     return config
 }
+
+export type { DocsResolvedConfig, DocsRoot, DocsSection } from './docs/config.ts'
+export type { SiteResolvedConfig } from './site/config.ts'

package/src/{advanced.ts → docs/advanced.ts}

@@ -1,5 +1,5 @@
-import type { DocsHeadings, DocsPageData } from './@types/docs.ts'
 import type { DocsNavigation } from './navigation.ts'
+import type { DocsHeading, DocsPageData } from './types.ts'
 
 /** Data available to an advanced documentation frame. */
 export interface DocsFrameProps {
@@ -9,13 +9,15 @@ export interface DocsFrameProps {
         /** File-derived slug. The opening page keeps its named slug here. */
         slug: string
         title: string
+        /** Set when the docs are split into sections. */
+        section?: string
         chapter?: string
         /** Raw frontmatter. */
         data: DocsPageData
     }
-    headings: DocsHeadings[]
+    headings: DocsHeading[]
     navigation: DocsNavigation
 }
 
-export type { DocsHeadings, DocsNavItem, DocsEntry, DocsPageData } from './@types/docs.ts'
-export type { DocsNavigation, NavSection } from './navigation.ts'
+export type { DocsHeading, DocsNavItem, DocsPageData } from './types.ts'
+export type { DocsNavEntry, DocsNavGroup, DocsNavigation } from './navigation.ts'

package/src/docs/collection.ts

@@ -0,0 +1,109 @@
+import type { LocaleAlternate } from '../site/locales.ts'
+import type { DocsSource, DocsTree } from './model/tree.ts'
+import type { DocsEntry } from './types.ts'
+import { getCollection } from 'astro:content'
+import config from 'virtual:jaad/config'
+import { DEFAULT_LOCALE, LOCALES, prefixedCodes } from '../site/runtime.ts'
+import { collectionName, splitDocLocale } from './model/ids.ts'
+import { buildDocsTree } from './model/tree.ts'
+import { validateDocsStructure } from './model/validate.ts'
+import { SECTIONS, docsUrls } from './runtime.ts'
+import { docsPageHref } from './urls.ts'
+
+/** A collection entry, placed in its locale and section. */
+export type DocsSourceEntry = DocsEntry & DocsSource
+
+const cached = new Map<string, DocsTree<DocsSourceEntry>>()
+
+const CODES = LOCALES.map((locale) => locale.code)
+
+const KEYS = SECTIONS.map((section) => section.key)
+
+/** Attaches the locale, the section and the path, leaving `id` the collection id. */
+function place(entry: DocsEntry, section?: string): DocsSourceEntry {
+    const { locale, id } = splitDocLocale(entry.id, CODES)
+    return {
+        ...entry,
+        locale: locale ?? undefined,
+        section,
+        path: section ? id.slice(section.length + 1) : id,
+    }
+}
+
+/** The pages of one locale, or every page when the docs are not localised.
+ *  Cached in production only: in dev the module would go stale on edit. */
+export async function getDocsTree(locale: string = DEFAULT_LOCALE): Promise<DocsTree<DocsSourceEntry>> {
+    const key = CODES.length > 0 ? locale : ''
+    const hit = cached.get(key)
+    if (import.meta.env.PROD && hit) return hit
+
+    // `docsDir` when in use, then one collection per section.
+    const sections = [...(config.docs.dirInUse ? [undefined] : []), ...KEYS]
+    const collections = await Promise.all(
+        sections.map(async (section) => {
+            const entries = await getCollection(collectionName(section) as 'docsPages')
+            return (entries as unknown as DocsEntry[]).map((entry) => place(entry, section))
+        }),
+    )
+    const sources = collections.flat().filter((source) => key === '' || source.locale === key)
+
+    // Validated before drafts are dropped, so a draft's slug conflict is an error.
+    validateDocsStructure(sources, key || undefined)
+    const tree = buildDocsTree(import.meta.env.PROD ? sources.filter((source) => !source.data.draft) : sources, {
+        sections: KEYS,
+        urls: docsUrls(locale),
+    })
+    if (import.meta.env.PROD) cached.set(key, tree)
+    return tree
+}
+
+export interface SectionLink {
+    key: string
+    label: string
+    href: string
+}
+
+/** The sections with something to serve in a locale, each at the url of its
+ *  first page. */
+export async function getSectionLinks(locale: string = DEFAULT_LOCALE): Promise<SectionLink[]> {
+    const { pages } = await getDocsTree(locale)
+
+    return SECTIONS.flatMap(({ key, label }) => {
+        const first = pages.find((page) => page.section === key)
+        return first ? [{ key, label, href: first.href }] : []
+    })
+}
+
+/** Where a page lives in every locale, paired by `translationKey` or by slug.
+ *  An untranslated page falls back to that locale's opening page. Empty asks
+ *  for the opening pages themselves. */
+export async function getLocaleAlternates(key: string): Promise<LocaleAlternate[]> {
+    const alternates: LocaleAlternate[] = []
+
+    for (const locale of LOCALES) {
+        const tree = await getDocsTree(locale.code)
+        // Every page drafted leaves a locale with nothing to link to.
+        if (tree.pages.length === 0) continue
+
+        const match = key ? tree.byKey.get(key) : tree.pages[0]
+        alternates.push({
+            locale,
+            translated: Boolean(match),
+            href: match ? match.href : docsPageHref('', docsUrls(locale.code)),
+        })
+    }
+
+    return alternates
+}
+
+/** The prefixed locales that have something to serve. */
+export async function getServedLocales(): Promise<string[]> {
+    const served: string[] = []
+
+    for (const code of prefixedCodes()) {
+        const { pages } = await getDocsTree(code)
+        if (pages.length > 0) served.push(code)
+    }
+
+    return served
+}

package/src/docs/components/Breadcrumbs.astro

@@ -0,0 +1,29 @@
+---
+import { ui } from '../../site/runtime.ts'
+import { getSectionLinks } from '../collection.ts'
+import { formatChapterTitle } from '../model/ids.ts'
+
+interface Props {
+    /** The key of the section the page belongs to. */
+    section?: string
+    chapter?: string
+    locale?: string
+}
+
+const { section, chapter, locale } = Astro.props
+const t = ui(locale)
+const chapterTitle = formatChapterTitle(chapter)
+const sectionLink = section ? (await getSectionLinks(locale)).find((link) => link.key === section) : undefined
+---
+
+{(sectionLink || chapterTitle) && (
+    <nav aria-label={t('breadcrumb.label')} class="docs-breadcrumbs">
+        {sectionLink && (
+            <a href={sectionLink.href} class="docs-breadcrumbs-link">
+                {sectionLink.label}
+            </a>
+        )}
+        {sectionLink && chapterTitle && <span aria-hidden="true">·</span>}
+        {chapterTitle && <span>{chapterTitle}</span>}
+    </nav>
+)}

package/src/docs/components/DocsMobileNav.astro

@@ -0,0 +1,90 @@
+---
+import type { DocsNavGroup } from '../navigation.ts'
+import type { DocsHeading, DocsNavItem } from '../types.ts'
+import { ui } from '../../site/runtime.ts'
+import { formatChapterTitle } from '../model/ids.ts'
+import DocsNavTree from './DocsNavTree.astro'
+
+interface Props {
+    locale?: string
+    groups: DocsNavGroup[]
+    headings: DocsHeading[]
+}
+
+const { groups, headings, locale } = Astro.props
+const t = ui(locale)
+
+/** Section, chapter and page of the current page, as the menu's label. */
+function trail(): string[] {
+    for (const group of groups) {
+        const entries = group.type === 'section' ? group.entries : [group]
+        const section = group.type === 'section' ? [group.label] : []
+        for (const entry of entries) {
+            const items: DocsNavItem[] = entry.type === 'page' ? [entry.item] : entry.items
+            const current = items.find((item) => item.isActive)
+            if (!current) continue
+            const chapter = entry.type === 'chapter' ? [formatChapterTitle(entry.chapter) ?? entry.chapter] : []
+            return [...section, ...chapter, current.title]
+        }
+    }
+    return []
+}
+
+const path = trail()
+---
+
+<div class="docs-mobile-nav">
+    <details class="docs-mobile-menu">
+        <summary class="docs-mobile-summary">
+            <svg class="docs-mobile-icon" viewBox="0 0 256 256" fill="currentColor" aria-hidden="true">
+                <path d="M224,128a8,8,0,0,1-8,8H40a8,8,0,0,1,0-16H216A8,8,0,0,1,224,128ZM40,72H216a8,8,0,0,0,0-16H40a8,8,0,0,0,0,16ZM216,184H40a8,8,0,0,0,0,16H216a8,8,0,0,0,0-16Z" />
+            </svg>
+            <span class="jaad-sr-only">{t('nav.documentation')}:</span>
+            {path.map((part, index) => (
+                <>
+                    {index > 0 && <span aria-hidden="true">/</span>}
+                    <span class:list={[index === path.length - 1 && 'docs-mobile-current']}>{part}</span>
+                </>
+            ))}
+        </summary>
+        <nav aria-label={t('nav.documentation')} class="docs-mobile-tree">
+            <DocsNavTree {groups} />
+        </nav>
+    </details>
+
+    {headings.length > 0 && (
+        <details class="docs-mobile-menu">
+            <summary class="docs-mobile-summary">{t('toc.title')}</summary>
+            <nav aria-label={t('toc.label')} class="docs-mobile-tree">
+                <ul class="docs-toc-list">
+                    {headings.map((heading) => (
+                        <li>
+                            <a
+                                href={`#${heading.slug}`}
+                                class:list={['docs-toc-link', heading.depth === 3 && 'docs-toc-link-nested']}
+                            >
+                                {heading.text}
+                            </a>
+                        </li>
+                    ))}
+                </ul>
+            </nav>
+        </details>
+    )}
+</div>
+
+<script>
+    // A chosen entry closes its menu, so the page it opens is not covered.
+    function closeOnChoice(): void {
+        for (const menu of document.querySelectorAll<HTMLDetailsElement>('.docs-mobile-menu')) {
+            if (menu.dataset.navInit) continue
+            menu.dataset.navInit = '1'
+            menu.addEventListener('click', (event) => {
+                if ((event.target as Element).closest('a')) menu.open = false
+            })
+        }
+    }
+
+    closeOnChoice()
+    document.addEventListener('astro:page-load', closeOnChoice)
+</script>

package/src/docs/components/DocsNavTree.astro

@@ -0,0 +1,57 @@
+---
+import type { DocsNavEntry, DocsNavGroup } from '../navigation.ts'
+import { formatChapterTitle } from '../model/ids.ts'
+
+interface Props {
+    groups: DocsNavGroup[]
+}
+
+const { groups } = Astro.props
+
+/** The pages outside every section, then each section with all its pages. */
+const loose = groups.filter((group): group is DocsNavEntry => group.type !== 'section')
+const blocks = [
+    ...(loose.length > 0 ? [{ entries: loose, label: null }] : []),
+    ...groups.flatMap((group) => (group.type === 'section' ? [{ entries: group.entries, label: group.label }] : [])),
+]
+---
+
+{blocks.map(({ entries, label }) => (
+    <div class:list={[label && 'docs-sidebar-section']}>
+        {label && <p class="docs-sidebar-section-title">{label}</p>}
+        {entries.length > 0 && (
+            <ul class="docs-sidebar-list">
+                {entries.map((entry) =>
+                    entry.type === 'page' ? (
+                        <li>
+                            <a
+                                href={entry.item.href}
+                                class="docs-sidebar-link"
+                                aria-current={entry.item.isActive ? 'page' : undefined}
+                            >
+                                {entry.item.title}
+                            </a>
+                        </li>
+                    ) : (
+                        <li class="docs-sidebar-chapter">
+                            <p class="docs-sidebar-chapter-title">{formatChapterTitle(entry.chapter)}</p>
+                            <ul class="docs-sidebar-list">
+                                {entry.items.map((item) => (
+                                    <li>
+                                        <a
+                                            href={item.href}
+                                            class="docs-sidebar-link"
+                                            aria-current={item.isActive ? 'page' : undefined}
+                                        >
+                                            {item.title}
+                                        </a>
+                                    </li>
+                                ))}
+                            </ul>
+                        </li>
+                    ),
+                )}
+            </ul>
+        )}
+    </div>
+))}

package/src/docs/components/DocsPage.astro

@@ -0,0 +1,66 @@
+---
+import type { DocsSourceEntry } from '../collection.ts'
+import type { DocsPage, DocsTree } from '../model/tree.ts'
+import MarkdownContent from '@jaamd/astro/components'
+import config from 'virtual:jaad/config'
+import { DEFAULT_LOCALE, LOCALES, ui } from '../../site/runtime.ts'
+import DocsLayout from '../layouts/Docs.astro'
+import { pageHeadings } from '../model/rendered.ts'
+import { buildDocsNavigation } from '../navigation.ts'
+import { SECTIONS } from '../runtime.ts'
+import Breadcrumbs from './Breadcrumbs.astro'
+import DocsMobileNav from './DocsMobileNav.astro'
+import DocsPageNav from './DocsPageNav.astro'
+import PageActions from './PageActions.astro'
+
+interface Props {
+    page: DocsPage<DocsSourceEntry>
+    tree: DocsTree<DocsSourceEntry>
+    /** Left out on the opening page, whose title is the site name alone. */
+    headTitle?: string
+}
+
+const { page, tree, headTitle } = Astro.props
+
+const section = SECTIONS.find((known) => known.key === page.section)
+// With sections, the title names the section after the page.
+const title = headTitle && section ? `${headTitle} · ${section.label}` : headTitle
+// A section's files sit in its own directory.
+const editBase = section ? section.editBase : config.docs.editBase
+const editPath = [page.locale, page.path].filter(Boolean).join('/')
+const headings = pageHeadings(page.source.rendered)
+const t = ui(page.locale)
+const language = LOCALES.find((known) => known.code === (page.locale ?? DEFAULT_LOCALE))?.tag ?? config.lang
+const updated = page.data.lastUpdated
+const navigation = buildDocsNavigation(tree, page.id, SECTIONS)
+const contentAttrs = { id: 'content' }
+---
+
+<DocsLayout {title} {page} {headings} {navigation}>
+    <DocsMobileNav slot="mobile-navigation" groups={navigation.groups} headings={headings} locale={page.locale} />
+
+    <Breadcrumbs slot="breadcrumbs" section={page.section} chapter={page.chapter} locale={page.locale} />
+    <PageActions slot="page-actions" {editBase} {editPath} cleanSlug={page.slug} locale={page.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={page.locale}
+    />
+</DocsLayout>

package/src/{components/docs → docs/components}/DocsPageNav.astro

@@ -1,6 +1,6 @@
 ---
-import type { DocsNavItem } from '../../@types/docs.ts'
-import { ui } from '../../docs-config.ts'
+import type { DocsNavItem } from '../types.ts'
+import { ui } from '../../site/runtime.ts'
 
 interface Props {
     locale?: string
@@ -18,7 +18,7 @@ const t = ui(locale)
             {previousPage && previousPage.title ? (
                 <a href={previousPage.href} rel="prev" class="docs-page-nav-link">
                     <svg
-                        class="docs-page-nav-icon docs-page-nav-icon-prev"
+                        class="docs-page-nav-icon"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"
@@ -36,7 +36,7 @@ const t = ui(locale)
                 <a href={nextPage.href} rel="next" class="docs-page-nav-link">
                     <span class="docs-page-nav-label">{nextPage.title}</span>
                     <svg
-                        class="docs-page-nav-icon docs-page-nav-icon-next"
+                        class="docs-page-nav-icon"
                         fill="none"
                         stroke="currentColor"
                         viewBox="0 0 24 24"