@kamod-ch/preactpress 1.0.0

package/src/client/app.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useState } from 'preact/hooks'
+import Layout from 'virtual:preactpress-layout'
+import { pagesMeta, routes } from 'virtual:preactpress-pages'
+import { i18n, mpa, site, themeConfig } from 'virtual:preactpress-site'
+import type { PageView } from './types.js'
+import type { ResolvedLocale } from '../node/siteConfig.js'
+import { usePageHead } from './usePageHead.js'
+import { normalizeRoute, routeFromPathname } from '../shared/route.js'
+import { loadPage, prefetchPage, seedPage } from './loadPage.js'
+import { setupViewportPrefetch } from './prefetchLinks.js'
+import {
+  localeFromRoute,
+  localizedRouteForLocale,
+  siteForRoute,
+  themeConfigForRoute
+} from '../shared/locale.js'
+
+function routeFromLocation(): string {
+  return routeFromPathname(window.location.pathname, site.base)
+}
+
+function routeFromHref(href: string): string | undefined {
+  const url = new URL(href, window.location.href)
+  if (url.origin !== window.location.origin) return undefined
+  const base = site.base === '/' ? '' : site.base.replace(/\/$/, '')
+  if (base && url.pathname !== base && !url.pathname.startsWith(`${base}/`)) {
+    return undefined
+  }
+  const path = base ? url.pathname.slice(base.length) || '/' : url.pathname
+  return normalizeRoute(path)
+}
+
+function anchorFromEvent(event: MouseEvent): HTMLAnchorElement | null {
+  const target = event.target
+  const element =
+    target instanceof Element
+      ? target
+      : target instanceof Text
+        ? target.parentElement
+        : null
+  return element?.closest('a[href]') ?? null
+}
+
+function loadingPage(route: string): PageView {
+  const meta = pagesMeta[route]
+  return {
+    kind: 'markdown',
+    html: '<p>Loading...</p>',
+    title: meta?.title,
+    description: meta?.description,
+    tags: meta?.tags,
+    image: meta?.image,
+    pageType: meta?.pageType,
+    meta: meta?.meta ?? {},
+    headings: meta?.headings ?? []
+  }
+}
+
+export function App({ routePath, initialPage }: { routePath: string; initialPage?: PageView }) {
+  const [currentRoute, setCurrentRoute] = useState(() => normalizeRoute(routePath))
+  const [page, setPage] = useState<PageView>(() => initialPage ?? loadingPage(routePath))
+  const availableRoutes = new Set(routes)
+  const activeLocale = localeFromRoute(currentRoute, i18n)
+  const activeSite = siteForRoute(site, currentRoute, i18n)
+  const activeThemeConfig = themeConfigForRoute(themeConfig, currentRoute, i18n)
+
+  useEffect(() => {
+    if (initialPage) seedPage(normalizeRoute(routePath), initialPage)
+  }, [initialPage, routePath])
+
+  useEffect(() => {
+    let cancelled = false
+    setPage(loadingPage(currentRoute))
+    void loadPage(currentRoute, site.base)
+      .then((loaded) => {
+        if (!cancelled) setPage(loaded)
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setPage({
+            kind: 'markdown',
+            html: '<p>Page not found.</p>',
+            title: '404',
+            description: activeSite.description,
+            meta: {},
+            headings: []
+          })
+        }
+      })
+    return () => {
+      cancelled = true
+    }
+  }, [activeSite.description, currentRoute])
+
+  useEffect(() => {
+    const prefetch = (route: string) => prefetchPage(route, site.base)
+    const stopViewportPrefetch = setupViewportPrefetch(routeFromHref, prefetch)
+    if (mpa) {
+      return () => stopViewportPrefetch()
+    }
+
+    const onPopState = () => setCurrentRoute(routeFromLocation())
+    const onClick = (event: MouseEvent) => {
+      if (
+        event.defaultPrevented ||
+        event.button !== 0 ||
+        event.metaKey ||
+        event.altKey ||
+        event.ctrlKey ||
+        event.shiftKey
+      ) {
+        return
+      }
+      const link = anchorFromEvent(event)
+      if (!link || link.target || link.hasAttribute('download')) return
+      const route = routeFromHref(link.href)
+      if (!route) return
+      const url = new URL(link.href)
+      if (url.hash && route === currentRoute) {
+        document.getElementById(url.hash.slice(1))?.scrollIntoView()
+        return
+      }
+      event.preventDefault()
+      window.history.pushState({}, '', url)
+      setCurrentRoute(route)
+      window.scrollTo({ top: 0 })
+    }
+    const onMouseEnter = (event: MouseEvent) => {
+      const link = anchorFromEvent(event)
+      if (!link) return
+      const route = routeFromHref(link.href)
+      if (route) prefetch(route)
+    }
+    window.addEventListener('popstate', onPopState)
+    document.addEventListener('click', onClick)
+    document.addEventListener('mouseenter', onMouseEnter, true)
+    return () => {
+      stopViewportPrefetch()
+      window.removeEventListener('popstate', onPopState)
+      document.removeEventListener('click', onClick)
+      document.removeEventListener('mouseenter', onMouseEnter, true)
+    }
+  }, [currentRoute, mpa])
+
+  useEffect(() => {
+    if (currentRoute !== normalizeRoute(routePath)) {
+      document.getElementById('content')?.focus()
+    }
+  }, [currentRoute, routePath])
+
+  usePageHead({
+    site,
+    i18n,
+    routes: availableRoutes,
+    route: currentRoute,
+    page:
+      page?.kind === 'markdown'
+        ? {
+            meta: page.meta,
+            title: page.title,
+            description: page.description,
+            tags: page.tags,
+            image: page.image,
+            pageType: page.pageType,
+            kind: 'markdown',
+            html: page.html
+          }
+        : page
+          ? {
+              meta: page.meta,
+              title: page.title,
+              description: page.description,
+              tags: page.tags,
+              image: page.image,
+              pageType: page.pageType,
+              kind: 'mdx'
+            }
+          : undefined
+  })
+
+  return (
+    <Layout
+      site={activeSite}
+      themeConfig={activeThemeConfig}
+      routePath={currentRoute}
+      page={page}
+      i18n={i18n}
+      locale={activeLocale}
+      locales={i18n?.locales}
+      localizeRoute={(locale: ResolvedLocale) =>
+        localizedRouteForLocale(currentRoute, locale, i18n, availableRoutes)}
+    />
+  )
+}

package/src/client/entry-client.tsx

@@ -0,0 +1,27 @@
+import { hydrate } from 'preact'
+import { App } from './app.js'
+import type { PageView } from './types.js'
+import { loadPage, seedPage } from './loadPage.js'
+
+function currentRoute(): string {
+  const base = (import.meta.env.BASE_URL || '/').replace(/\/$/, '') || ''
+  let p = window.location.pathname
+  if (base && p.startsWith(base)) p = p.slice(base.length) || '/'
+  if (!p.startsWith('/')) p = `/${p}`
+  return (p.replace(/\/$/, '') || '/') as string
+}
+
+const el = document.getElementById('app')
+if (el) {
+  void (async () => {
+    const initial =
+      el.getAttribute('data-preactpress-route') ??
+      currentRoute()
+    const dataEl = document.getElementById('__PREACTPRESS_PAGE_DATA__')
+    const initialPage = dataEl?.textContent
+      ? JSON.parse(dataEl.textContent) as PageView
+      : await loadPage(initial, import.meta.env.BASE_URL || '/')
+    seedPage(initial, initialPage)
+    hydrate(<App routePath={initial} initialPage={initialPage} />, el)
+  })()
+}

package/src/client/entry-ssr.tsx

@@ -0,0 +1,77 @@
+import { renderToString } from 'preact-render-to-string'
+import { App } from './app.js'
+import { pages } from 'virtual:preactpress-pages'
+import { i18n, site } from 'virtual:preactpress-site'
+import { resolvePageHeadMeta, titleTemplateFromMeta } from '../shared/pageMeta.js'
+import type { PageView } from './types.js'
+import { siteForRoute } from '../shared/locale.js'
+
+export interface RenderResult {
+  body: string
+  title: string
+  description: string
+  tags: string[]
+  image?: string
+  pageType: 'website' | 'article'
+  page: PageView
+}
+
+export function resolveRoutePage(routePath: string): PageView {
+  const activeSite = siteForRoute(site, routePath, i18n)
+  return (
+    pages[routePath] ??
+    pages['/404'] ?? {
+      kind: 'markdown' as const,
+      html: '',
+      title: 'Not found',
+      description: activeSite.description,
+      meta: {},
+      headings: []
+    }
+  )
+}
+
+function renderResult(routePath: string, page: PageView): RenderResult {
+  const body = renderToString(<App routePath={routePath} initialPage={page} />)
+  const activeSite = siteForRoute(site, routePath, i18n)
+  const head = resolvePageHeadMeta(
+    page.kind === 'markdown'
+      ? {
+          title: page.title,
+          titleTemplate: titleTemplateFromMeta(page.meta),
+          description: page.description,
+          tags: page.tags,
+          image: page.image,
+          pageType: page.pageType,
+          kind: 'markdown',
+          html: page.html
+        }
+      : {
+          title: page.title,
+          titleTemplate: titleTemplateFromMeta(page.meta),
+          description: page.description,
+          tags: page.tags,
+          image: page.image,
+          pageType: page.pageType,
+          kind: 'mdx'
+        },
+    activeSite
+  )
+  return {
+    body,
+    title: head.title,
+    description: head.description,
+    tags: head.tags,
+    image: head.image,
+    pageType: head.pageType,
+    page
+  }
+}
+
+export function renderFromPage(routePath: string, page: PageView): RenderResult {
+  return renderResult(routePath, page)
+}
+
+export function render(routePath: string): RenderResult {
+  return renderFromPage(routePath, resolveRoutePage(routePath))
+}

package/src/client/index.ts

@@ -0,0 +1,2 @@
+export type { HtmlPageView, LayoutProps, MdxPageView, PageView } from './types.js'
+export { usePageHead } from './usePageHead.js'

package/src/client/loadPage.ts

@@ -0,0 +1,68 @@
+import { mdxLoaders, pagesMeta } from 'virtual:preactpress-pages'
+import type { HtmlPageView, PageView } from './types.js'
+import { contentChunkPath } from '../shared/contentChunk.js'
+import { publicUrl } from '../shared/url.js'
+
+const cache = new Map<string, PageView>()
+
+function fallbackPage(): PageView {
+  return (
+    cache.get('/404') ??
+    ({
+      kind: 'markdown',
+      html: '<p>Page not found.</p>',
+      title: '404',
+      description: undefined,
+      meta: {},
+      headings: []
+    } satisfies HtmlPageView)
+  )
+}
+
+export function seedPage(route: string, page: PageView | undefined): void {
+  if (page) cache.set(route, page)
+}
+
+async function loadMarkdownPage(route: string, base: string): Promise<PageView> {
+  const meta = pagesMeta[route]
+  const url =
+    import.meta.env.DEV
+      ? publicUrl(base, `/__preactpress/page.json?route=${encodeURIComponent(route)}`)
+      : publicUrl(base, contentChunkPath(route))
+  const res = await fetch(url, { credentials: 'same-origin' })
+  if (!res.ok) throw new Error(`Failed to load page ${route}`)
+  const data = (await res.json()) as HtmlPageView
+  return {
+    ...meta,
+    ...data,
+    kind: 'markdown'
+  }
+}
+
+export async function loadPage(route: string, base: string): Promise<PageView> {
+  const cached = cache.get(route)
+  if (cached) return cached
+
+  const meta = pagesMeta[route]
+  if (!meta) return fallbackPage()
+
+  if (meta.kind === 'mdx') {
+    const loader = mdxLoaders[route]
+    if (!loader) return fallbackPage()
+    const mod = await loader()
+    const page = { ...meta, kind: 'mdx' as const, Component: mod.default }
+    cache.set(route, page)
+    return page
+  }
+
+  const page = await loadMarkdownPage(route, base)
+  cache.set(route, page)
+  return page
+}
+
+export function prefetchPage(route: string, base: string): void {
+  if (cache.has(route)) return
+  void loadPage(route, base).catch(() => {
+    /* Prefetch failures should not affect navigation. */
+  })
+}

package/src/client/prefetchLinks.ts

@@ -0,0 +1,60 @@
+const PREFETCH_MARGIN = '200px'
+
+function scheduleIdle(task: () => void): void {
+  if (typeof requestIdleCallback === 'function') {
+    requestIdleCallback(() => task(), { timeout: 2000 })
+    return
+  }
+  setTimeout(task, 1)
+}
+
+export function setupViewportPrefetch(
+  routeFromHref: (href: string) => string | undefined,
+  prefetch: (route: string) => void
+): () => void {
+  if (typeof IntersectionObserver === 'undefined') return () => {}
+
+  const seen = new WeakSet<HTMLAnchorElement>()
+  const observer = new IntersectionObserver(
+    (entries) => {
+      for (const entry of entries) {
+        if (!entry.isIntersecting) continue
+        const link = entry.target
+        if (!(link instanceof HTMLAnchorElement) || seen.has(link)) continue
+        const route = routeFromHref(link.href)
+        if (!route) continue
+        seen.add(link)
+        scheduleIdle(() => prefetch(route))
+        observer.unobserve(link)
+      }
+    },
+    { rootMargin: PREFETCH_MARGIN }
+  )
+
+  const observe = (root: ParentNode): void => {
+    for (const link of Array.from(root.querySelectorAll('a[href]'))) {
+      if (link instanceof HTMLAnchorElement && !seen.has(link)) {
+        observer.observe(link)
+      }
+    }
+  }
+
+  observe(document)
+  const mutation = new MutationObserver((records) => {
+    for (const record of records) {
+      for (const node of Array.from(record.addedNodes)) {
+        if (node instanceof HTMLAnchorElement) {
+          if (!seen.has(node)) observer.observe(node)
+          continue
+        }
+        if (node instanceof Element) observe(node)
+      }
+    }
+  })
+  mutation.observe(document.body, { childList: true, subtree: true })
+
+  return () => {
+    observer.disconnect()
+    mutation.disconnect()
+  }
+}

package/src/client/theme-default/AlgoliaSearch.tsx

@@ -0,0 +1,89 @@
+import type { DocSearchInstance, DocSearchProps } from '@docsearch/js'
+import type { FunctionalComponent } from 'preact'
+import { useEffect, useRef } from 'preact/hooks'
+import type { AlgoliaSearchOptions } from '../../shared/search.js'
+import {
+  getRelativeDocSearchUrl,
+  navigateDocSearchResult,
+  validateAlgoliaCredentials
+} from '../../shared/search.js'
+import '@docsearch/css'
+
+export interface AlgoliaSearchProps {
+  options: AlgoliaSearchOptions
+  base: string
+  cleanUrls?: boolean
+  containerId?: string
+}
+
+const AlgoliaSearch: FunctionalComponent<AlgoliaSearchProps> = ({
+  options,
+  base,
+  cleanUrls = true,
+  containerId = 'pp-docsearch'
+}) => {
+  const initKey = useRef(0)
+
+  useEffect(() => {
+    const credentials = validateAlgoliaCredentials(options)
+    if (!credentials.valid) return
+
+    const currentInit = ++initKey.current
+    let destroy: (() => void) | undefined
+    let cancelled = false
+
+    void import('@docsearch/js').then((mod) => {
+      if (cancelled || currentInit !== initKey.current) return
+      const docsearch = mod.default as unknown as (props: DocSearchProps) => DocSearchInstance
+      const instance = docsearch({
+        container: `#${containerId}`,
+        appId: credentials.appId!,
+        apiKey: credentials.apiKey!,
+        indexName: credentials.indexName!,
+        placeholder: options.placeholder,
+        maxResultsPerGroup: options.maxResultsPerGroup,
+        disableUserPersonalization: options.disableUserPersonalization,
+        initialQuery: options.initialQuery,
+        recentSearchesLimit: options.recentSearchesLimit,
+        recentSearchesWithFavoritesLimit: options.recentSearchesWithFavoritesLimit,
+        insights: options.insights,
+        searchParameters: options.searchParameters,
+        navigator: {
+          navigate({ itemUrl }: { itemUrl: string }) {
+            navigateDocSearchResult(itemUrl, base)
+          }
+        },
+        transformItems: (items) =>
+          items.map((item) => ({
+            ...item,
+            url: getRelativeDocSearchUrl(item.url, base, cleanUrls)
+          })),
+        keyboardShortcuts: {
+          '/': false,
+          'Ctrl/Cmd+K': false
+        }
+      })
+      destroy = () => instance.destroy()
+    })
+
+    return () => {
+      cancelled = true
+      destroy?.()
+    }
+  }, [base, cleanUrls, containerId, options])
+
+  useEffect(() => {
+    const appId = options.appId?.trim()
+    if (!appId || document.getElementById('pp-docsearch-preconnect')) return
+    const link = document.createElement('link')
+    link.id = 'pp-docsearch-preconnect'
+    link.rel = 'preconnect'
+    link.href = `https://${appId}-dsn.algolia.net`
+    link.crossOrigin = ''
+    document.head.appendChild(link)
+  }, [options.appId])
+
+  return <div id={containerId} class="pp-docsearch" />
+}
+
+export default AlgoliaSearch

package/src/client/theme-default/Features.tsx

@@ -0,0 +1,75 @@
+import type { FunctionalComponent } from 'preact'
+import type { Feature, FeatureIcon } from '../../shared/pageChrome.js'
+
+interface FeaturesProps {
+  features: Feature[]
+  base: string
+}
+
+function withBase(base: string, link: string): string {
+  if (/^(?:[a-z]+:)?\/\//i.test(link) || /^(?:data|mailto|tel):/i.test(link) || link.startsWith('#')) {
+    return link
+  }
+  const b = base === '/' ? '' : base.replace(/\/$/, '')
+  const l = link.startsWith('/') ? link : `/${link}`
+  return `${b}${l}`
+}
+
+function renderIcon(icon: FeatureIcon | undefined, base: string) {
+  if (!icon) return null
+  if (typeof icon === 'string') return <span class="pp-home-feature-emoji">{icon}</span>
+  if ('src' in icon) {
+    return (
+      <img
+        src={withBase(base, icon.src)}
+        alt={icon.alt ?? ''}
+        width={icon.width}
+        height={icon.height}
+      />
+    )
+  }
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={withBase(base, icon.dark)} />
+      <img
+        src={withBase(base, icon.light)}
+        alt={icon.alt ?? ''}
+        width={icon.width}
+        height={icon.height}
+      />
+    </picture>
+  )
+}
+
+const Features: FunctionalComponent<FeaturesProps> = ({ features, base }) => (
+  <section class="pp-home-features">
+    {features.map((feature) => {
+      const content = (
+        <>
+          {feature.icon ? <div class="pp-home-feature-icon">{renderIcon(feature.icon, base)}</div> : null}
+          <h2>{feature.title}</h2>
+          <p>{feature.details}</p>
+          {feature.link && feature.linkText ? <span>{feature.linkText}</span> : null}
+        </>
+      )
+
+      return feature.link ? (
+        <a
+          key={`${feature.title}:${feature.link}`}
+          class="pp-home-feature"
+          href={withBase(base, feature.link)}
+          target={feature.target}
+          rel={feature.rel}
+        >
+          {content}
+        </a>
+      ) : (
+        <div key={feature.title} class="pp-home-feature">
+          {content}
+        </div>
+      )
+    })}
+  </section>
+)
+
+export default Features

package/src/client/theme-default/Hero.tsx

@@ -0,0 +1,60 @@
+import type { FunctionalComponent } from 'preact'
+import type { Hero as HeroConfig, ThemeableImage } from '../../shared/pageChrome.js'
+
+interface HeroProps {
+  hero: HeroConfig
+  base: string
+}
+
+function withBase(base: string, link: string): string {
+  if (/^(?:[a-z]+:)?\/\//i.test(link) || /^(?:data|mailto|tel):/i.test(link) || link.startsWith('#')) {
+    return link
+  }
+  const b = base === '/' ? '' : base.replace(/\/$/, '')
+  const l = link.startsWith('/') ? link : `/${link}`
+  return `${b}${l}`
+}
+
+function renderImage(image: ThemeableImage | undefined, base: string) {
+  if (!image) return null
+  if (typeof image === 'string') {
+    return <img src={withBase(base, image)} alt="" />
+  }
+  if ('src' in image) {
+    return <img src={withBase(base, image.src)} alt={image.alt ?? ''} />
+  }
+  return (
+    <picture>
+      <source media="(prefers-color-scheme: dark)" srcSet={withBase(base, image.dark)} />
+      <img src={withBase(base, image.light)} alt={image.alt ?? ''} />
+    </picture>
+  )
+}
+
+const Hero: FunctionalComponent<HeroProps> = ({ hero, base }) => (
+  <section class="pp-home-hero">
+    <div class="pp-home-hero-copy">
+      {hero.name ? <p class="pp-home-hero-name">{hero.name}</p> : null}
+      {hero.text ? <h1 class="pp-home-hero-text">{hero.text}</h1> : null}
+      {hero.tagline ? <p class="pp-home-hero-tagline">{hero.tagline}</p> : null}
+      {hero.actions.length > 0 ? (
+        <div class="pp-home-hero-actions">
+          {hero.actions.map((action) => (
+            <a
+              key={`${action.text}:${action.link}`}
+              class={`pp-home-action pp-home-action-${action.theme}`}
+              href={withBase(base, action.link)}
+              target={action.target}
+              rel={action.rel}
+            >
+              {action.text}
+            </a>
+          ))}
+        </div>
+      ) : null}
+    </div>
+    {hero.image ? <div class="pp-home-hero-image">{renderImage(hero.image, base)}</div> : null}
+  </section>
+)
+
+export default Hero