@kamod-ch/preactpress 1.0.0 → 1.0.2

package/src/client/theme-utils.tsx

@@ -0,0 +1,184 @@
+import type { ComponentChildren, FunctionalComponent, JSX } from "preact";
+import { useEffect } from "preact/hooks";
+import {
+  PREACTPRESS_THEME_STORAGE_KEY,
+  applyTheme,
+  readStoredTheme,
+  type PreactpressStoredTheme,
+} from "../shared/theme.js";
+import { slugifySegment } from "../shared/slug.js";
+
+export 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}`;
+}
+
+export function normalizeLink(link: string): string {
+  const clean = link.split(/[?#]/, 1)[0] || "/";
+  const prefixed = clean.startsWith("/") ? clean : `/${clean}`;
+  return prefixed.replace(/\/$/, "") || "/";
+}
+
+export function isActive(routePath: string, link: string | undefined): boolean {
+  if (!link || /^(?:[a-z]+:)?\/\//i.test(link)) return false;
+  const route = normalizeLink(routePath);
+  const target = normalizeLink(link);
+  return route === target || (target !== "/" && route.startsWith(`${target}/`));
+}
+
+export function classNames(...values: Array<string | undefined | false>): string {
+  return values.filter(Boolean).join(" ");
+}
+
+export function childText(children: ComponentChildren): string {
+  if (children == null || typeof children === "boolean") return "";
+  if (typeof children === "string" || typeof children === "number") return String(children);
+  if (Array.isArray(children)) return children.map(childText).join("");
+  if (typeof children === "object" && "props" in children) {
+    return childText(children.props.children as ComponentChildren);
+  }
+  return "";
+}
+
+export function slugifyHeading(text: string): string {
+  return slugifySegment(text);
+}
+
+export interface MdxHeadingOptions {
+  headingClass: string;
+  anchorClass: string;
+  anchorLabel: string;
+}
+
+export function createMdxHeadingComponents({
+  headingClass,
+  anchorClass,
+  anchorLabel,
+}: MdxHeadingOptions) {
+  const used = new Map<string, number>();
+  const heading =
+    (Tag: "h2" | "h3") =>
+    ({ children, ...props }: JSX.HTMLAttributes<HTMLHeadingElement>) => {
+      const base = slugifyHeading(childText(children));
+      const count = used.get(base) ?? 0;
+      used.set(base, count + 1);
+      const id = count === 0 ? base : `${base}-${count + 1}`;
+      return (
+        <Tag {...props} id={id} class={`${headingClass} ${props.class ?? ""}`.trim()}>
+          {children}
+          <a class={anchorClass} href={`#${id}`} aria-label={anchorLabel}>
+            #
+          </a>
+        </Tag>
+      );
+    };
+
+  return {
+    h2: heading("h2"),
+    h3: heading("h3"),
+  };
+}
+
+export function toggleStoredTheme(): void {
+  const stored = readStoredTheme();
+  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+  const isDark = stored === "dark" || (stored === null && prefersDark);
+  const next: PreactpressStoredTheme = isDark ? "light" : "dark";
+  applyTheme(next);
+  try {
+    localStorage.setItem(PREACTPRESS_THEME_STORAGE_KEY, next);
+  } catch {
+    /* ignore quota / private mode */
+  }
+}
+
+export function useStoredThemeSync(): void {
+  useEffect(() => {
+    function syncTheme(event?: StorageEvent): void {
+      if (event && event.key !== PREACTPRESS_THEME_STORAGE_KEY) return;
+      const value =
+        event?.newValue ??
+        (() => {
+          try {
+            return localStorage.getItem(PREACTPRESS_THEME_STORAGE_KEY);
+          } catch {
+            return null;
+          }
+        })();
+      applyTheme(value === "light" || value === "dark" ? value : null);
+    }
+
+    function onSystemThemeChange(): void {
+      if (readStoredTheme() !== null) return;
+      applyTheme(null);
+    }
+
+    syncTheme();
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    media.addEventListener("change", onSystemThemeChange);
+    window.addEventListener("storage", syncTheme);
+    return () => {
+      media.removeEventListener("change", onSystemThemeChange);
+      window.removeEventListener("storage", syncTheme);
+    };
+  }, []);
+}
+
+export interface ThemeToggleProps {
+  className?: string;
+  ariaLabel?: string;
+}
+
+export const ThemeToggle: FunctionalComponent<ThemeToggleProps> = ({
+  className = "pp-theme-toggle",
+  ariaLabel = "Toggle light and dark theme",
+}) => {
+  useStoredThemeSync();
+
+  return (
+    <button type="button" class={className} onClick={toggleStoredTheme} aria-label={ariaLabel}>
+      <span class={`${className}-moon`} aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z"
+          />
+        </svg>
+      </span>
+      <span class={`${className}-sun`} aria-hidden="true">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="18"
+          height="18"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          viewBox="0 0 24 24"
+        >
+          <path
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z"
+          />
+        </svg>
+      </span>
+    </button>
+  );
+};

package/src/client/types.ts

@@ -1,37 +1,43 @@
-import type { ComponentType } from 'preact'
-import type { OutlineItem, ResolvedI18n, ResolvedLocale, SiteData, ThemeConfig } from '../node/siteConfig.js'
+import type { ComponentType } from "preact";
+import type {
+  OutlineItem,
+  ResolvedI18n,
+  ResolvedLocale,
+  SiteData,
+  ThemeConfig,
+} from "../node/siteConfig.js";
 
 interface BasePageView {
-  title?: string
-  description?: string
-  tags?: string[]
-  image?: string
-  pageType?: 'website' | 'article'
-  meta: Record<string, unknown>
-  headings: OutlineItem[]
-  relativePath?: string
-  lastUpdated?: string
+  title?: string;
+  description?: string;
+  tags?: string[];
+  image?: string;
+  pageType?: "website" | "article";
+  meta: Record<string, unknown>;
+  headings: OutlineItem[];
+  relativePath?: string;
+  lastUpdated?: string;
 }
 
 export interface HtmlPageView extends BasePageView {
-  kind: 'markdown'
-  html: string
+  kind: "markdown";
+  html: string;
 }
 
 export interface MdxPageView extends BasePageView {
-  kind: 'mdx'
-  Component: ComponentType<{ components?: Record<string, ComponentType<Record<string, unknown>>> }>
+  kind: "mdx";
+  Component: ComponentType<{ components?: Record<string, ComponentType<Record<string, unknown>>> }>;
 }
 
-export type PageView = HtmlPageView | MdxPageView
+export type PageView = HtmlPageView | MdxPageView;
 
 export interface LayoutProps {
-  site: SiteData
-  themeConfig: ThemeConfig
-  routePath: string
-  page?: PageView
-  i18n?: ResolvedI18n
-  locale?: ResolvedLocale
-  locales?: ResolvedLocale[]
-  localizeRoute?: (locale: ResolvedLocale) => string
+  site: SiteData;
+  themeConfig: ThemeConfig;
+  routePath: string;
+  page?: PageView;
+  i18n?: ResolvedI18n;
+  locale?: ResolvedLocale;
+  locales?: ResolvedLocale[];
+  localizeRoute?: (locale: ResolvedLocale) => string;
 }

package/src/client/usePageHead.ts

@@ -1,151 +1,138 @@
-import { useEffect } from 'preact/hooks'
-import type { ResolvedI18n, SiteData } from '../node/siteConfig.js'
+import { useEffect } from "preact/hooks";
+import type { ResolvedI18n, SiteData } from "../node/siteConfig.js";
 import {
   resolvePageHeadMeta,
   titleTemplateFromMeta,
-  type PageMetaInput
-} from '../shared/pageMeta.js'
-import { headTagsFromMeta } from '../shared/pageHead.js'
-import type { HeadTag } from '../node/siteConfig.js'
-import { canonicalUrl, publicUrl } from '../shared/url.js'
-import { localizedRouteForLocale, siteForRoute } from '../shared/locale.js'
-
-function upsertMeta(
-  selector: 'name' | 'property',
-  key: string,
-  content: string
-): void {
-  if (!content) return
-  let el = document.head.querySelector(
-    `meta[${selector}="${key}"]`
-  ) as HTMLMetaElement | null
+  type PageMetaInput,
+} from "../shared/pageMeta.js";
+import { headTagsFromMeta } from "../shared/pageHead.js";
+import type { HeadTag } from "../node/siteConfig.js";
+import { canonicalUrl, publicUrl } from "../shared/url.js";
+import { localizedRouteForLocale, siteForRoute } from "../shared/locale.js";
+
+function upsertMeta(selector: "name" | "property", key: string, content: string): void {
+  if (!content) return;
+  let el = document.head.querySelector(`meta[${selector}="${key}"]`) as HTMLMetaElement | null;
   if (!el) {
-    el = document.createElement('meta')
-    el.setAttribute(selector, key)
-    document.head.appendChild(el)
+    el = document.createElement("meta");
+    el.setAttribute(selector, key);
+    document.head.appendChild(el);
   }
-  el.content = content
+  el.content = content;
 }
 
-function removeMeta(selector: 'name' | 'property', key: string): void {
-  document.head
-    .querySelectorAll(`meta[${selector}="${key}"]`)
-    .forEach((el) => el.remove())
+function removeMeta(selector: "name" | "property", key: string): void {
+  document.head.querySelectorAll(`meta[${selector}="${key}"]`).forEach((el) => el.remove());
 }
 
-function appendMeta(selector: 'name' | 'property', key: string, content: string): void {
-  if (!content) return
-  const el = document.createElement('meta')
-  el.setAttribute(selector, key)
-  el.content = content
-  document.head.appendChild(el)
+function appendMeta(selector: "name" | "property", key: string, content: string): void {
+  if (!content) return;
+  const el = document.createElement("meta");
+  el.setAttribute(selector, key);
+  el.content = content;
+  document.head.appendChild(el);
 }
 
 function upsertCanonical(href: string): void {
-  if (!href) return
-  let el = document.head.querySelector('link[rel="canonical"]') as HTMLLinkElement | null
+  if (!href) return;
+  let el = document.head.querySelector('link[rel="canonical"]') as HTMLLinkElement | null;
   if (!el) {
-    el = document.createElement('link')
-    el.rel = 'canonical'
-    document.head.appendChild(el)
+    el = document.createElement("link");
+    el.rel = "canonical";
+    document.head.appendChild(el);
   }
-  el.href = href
+  el.href = href;
 }
 
 function removeCanonical(): void {
-  document.head
-    .querySelectorAll('link[rel="canonical"]')
-    .forEach((el) => el.remove())
+  document.head.querySelectorAll('link[rel="canonical"]').forEach((el) => el.remove());
 }
 
 function replaceAlternates(opts: {
-  site: SiteData
-  i18n: ResolvedI18n | undefined
-  route: string
-  routes?: ReadonlySet<string>
+  site: SiteData;
+  i18n: ResolvedI18n | undefined;
+  route: string;
+  routes?: ReadonlySet<string>;
 }): void {
-  document.head
-    .querySelectorAll('link[rel="alternate"][hreflang]')
-    .forEach((el) => el.remove())
-  if (!opts.site.url || !opts.i18n) return
+  document.head.querySelectorAll('link[rel="alternate"][hreflang]').forEach((el) => el.remove());
+  if (!opts.site.url || !opts.i18n) return;
   for (const locale of opts.i18n.locales) {
-    const route = localizedRouteForLocale(opts.route, locale, opts.i18n, opts.routes)
-    if (opts.routes && !opts.routes.has(route)) continue
-    const el = document.createElement('link')
-    el.rel = 'alternate'
-    el.hreflang = locale.lang
-    el.href = canonicalUrl({ url: opts.site.url, base: opts.site.base, route })
-    document.head.appendChild(el)
+    const route = localizedRouteForLocale(opts.route, locale, opts.i18n, opts.routes);
+    if (opts.routes && !opts.routes.has(route)) continue;
+    const el = document.createElement("link");
+    el.rel = "alternate";
+    el.hreflang = locale.lang;
+    el.href = canonicalUrl({ url: opts.site.url, base: opts.site.base, route });
+    document.head.appendChild(el);
   }
 }
 
 function upsertHeadTag(tag: HeadTag): void {
-  const [name, attrs, content] = tag
-  if (name === 'meta') {
-    const key = 'name' in attrs && attrs.name ? 'name' : 'property' in attrs ? 'property' : undefined
-    if (key && typeof attrs[key] === 'string') {
-      upsertMeta(key as 'name' | 'property', String(attrs[key]), String(attrs.content ?? ''))
-      return
+  const [name, attrs, content] = tag;
+  if (name === "meta") {
+    const key =
+      "name" in attrs && attrs.name ? "name" : "property" in attrs ? "property" : undefined;
+    if (key && typeof attrs[key] === "string") {
+      upsertMeta(key as "name" | "property", String(attrs[key]), String(attrs.content ?? ""));
+      return;
     }
   }
-  if (name === 'link' && attrs.rel && typeof attrs.href === 'string') {
+  if (name === "link" && attrs.rel && typeof attrs.href === "string") {
     let el = document.head.querySelector(
-      `link[rel="${attrs.rel}"]${attrs.hreflang ? `[hreflang="${attrs.hreflang}"]` : ''}`
-    ) as HTMLLinkElement | null
+      `link[rel="${attrs.rel}"]${attrs.hreflang ? `[hreflang="${attrs.hreflang}"]` : ""}`,
+    ) as HTMLLinkElement | null;
     if (!el) {
-      el = document.createElement('link')
+      el = document.createElement("link");
       for (const [key, value] of Object.entries(attrs)) {
-        if (value != null && value !== false) el.setAttribute(key, String(value))
+        if (value != null && value !== false) el.setAttribute(key, String(value));
       }
-      document.head.appendChild(el)
+      document.head.appendChild(el);
     } else {
-      el.href = String(attrs.href)
+      el.href = String(attrs.href);
     }
-    return
+    return;
   }
-  if (name === 'script') {
-    const id = typeof attrs.id === 'string' ? attrs.id : undefined
-    let el = id ? (document.getElementById(id) as HTMLScriptElement | null) : null
+  if (name === "script") {
+    const id = typeof attrs.id === "string" ? attrs.id : undefined;
+    let el = id ? (document.getElementById(id) as HTMLScriptElement | null) : null;
     if (!el) {
-      el = document.createElement('script')
+      el = document.createElement("script");
       for (const [key, value] of Object.entries(attrs)) {
-        if (value != null && value !== false) el.setAttribute(key, String(value))
+        if (value != null && value !== false) el.setAttribute(key, String(value));
       }
-      el.textContent = content ?? ''
-      document.head.appendChild(el)
+      el.textContent = content ?? "";
+      document.head.appendChild(el);
     }
   }
 }
 
 function resolveMetaImage(site: SiteData, image: string | undefined): string | undefined {
-  if (!image) return undefined
-  if (/^(?:[a-z]+:)?\/\//i.test(image)) return image
-  return site.url
-    ? `${site.url}${publicUrl(site.base, image)}`
-    : publicUrl(site.base, image)
+  if (!image) return undefined;
+  if (/^(?:[a-z]+:)?\/\//i.test(image)) return image;
+  return site.url ? `${site.url}${publicUrl(site.base, image)}` : publicUrl(site.base, image);
 }
 
 export function usePageHead(opts: {
-  site: SiteData
-  i18n?: ResolvedI18n
-  routes?: ReadonlySet<string>
-  route: string
-  page: PageMetaInput | undefined
+  site: SiteData;
+  i18n?: ResolvedI18n;
+  routes?: ReadonlySet<string>;
+  route: string;
+  page: PageMetaInput | undefined;
 }): void {
-  const { site, i18n, routes, route, page } = opts
-  const activeSite = siteForRoute(site, route, i18n)
-  const pageTitle = page?.title
-  const pageDescription = page?.description
-  const pageTags = page?.tags
-  const pageImage = page?.image
-  const pageType = page?.pageType
-  const pageKind = page?.kind
-  const pageHtml = page?.kind === 'markdown' ? page.html : undefined
-  const pageMeta = page?.meta
+  const { site, i18n, routes, route, page } = opts;
+  const activeSite = siteForRoute(site, route, i18n);
+  const pageTitle = page?.title;
+  const pageDescription = page?.description;
+  const pageTags = page?.tags;
+  const pageImage = page?.image;
+  const pageType = page?.pageType;
+  const pageKind = page?.kind;
+  const pageHtml = page?.kind === "markdown" ? page.html : undefined;
+  const pageMeta = page?.meta;
 
   useEffect(() => {
     const head = resolvePageHeadMeta(
-      pageKind === 'markdown'
+      pageKind === "markdown"
         ? {
             title: pageTitle,
             titleTemplate: titleTemplateFromMeta(pageMeta),
@@ -153,8 +140,8 @@ export function usePageHead(opts: {
             tags: pageTags,
             image: pageImage,
             pageType,
-            kind: 'markdown',
-            html: pageHtml
+            kind: "markdown",
+            html: pageHtml,
           }
         : pageKind
           ? {
@@ -164,49 +151,62 @@ export function usePageHead(opts: {
               tags: pageTags,
               image: pageImage,
               pageType,
-              kind: pageKind
+              kind: pageKind,
             }
           : undefined,
-      activeSite
-    )
+      activeSite,
+    );
 
-    for (const tag of headTagsFromMeta(pageMeta)) upsertHeadTag(tag)
+    for (const tag of headTagsFromMeta(pageMeta)) upsertHeadTag(tag);
 
-    document.title = head.title
+    document.title = head.title;
 
-    upsertMeta('name', 'description', head.description)
-    upsertMeta('property', 'og:title', head.title)
-    upsertMeta('property', 'og:description', head.description)
-    upsertMeta('property', 'og:type', head.pageType)
-    upsertMeta('name', 'twitter:card', head.image ? 'summary_large_image' : 'summary')
-    upsertMeta('name', 'twitter:title', head.title)
-    upsertMeta('name', 'twitter:description', head.description)
-    removeMeta('name', 'keywords')
-    removeMeta('property', 'article:tag')
-    for (const tag of head.tags) appendMeta('property', 'article:tag', tag)
+    upsertMeta("name", "description", head.description);
+    upsertMeta("property", "og:title", head.title);
+    upsertMeta("property", "og:description", head.description);
+    upsertMeta("property", "og:type", head.pageType);
+    upsertMeta("name", "twitter:card", head.image ? "summary_large_image" : "summary");
+    upsertMeta("name", "twitter:title", head.title);
+    upsertMeta("name", "twitter:description", head.description);
+    removeMeta("name", "keywords");
+    removeMeta("property", "article:tag");
+    for (const tag of head.tags) appendMeta("property", "article:tag", tag);
 
-    const image = resolveMetaImage(activeSite, head.image)
+    const image = resolveMetaImage(activeSite, head.image);
     if (image) {
-      upsertMeta('property', 'og:image', image)
-      upsertMeta('name', 'twitter:image', image)
+      upsertMeta("property", "og:image", image);
+      upsertMeta("name", "twitter:image", image);
     } else {
-      removeMeta('property', 'og:image')
-      removeMeta('name', 'twitter:image')
+      removeMeta("property", "og:image");
+      removeMeta("name", "twitter:image");
     }
 
-    const canonical = canonicalUrl({ url: activeSite.url, base: activeSite.base, route })
+    const canonical = canonicalUrl({ url: activeSite.url, base: activeSite.base, route });
     if (canonical) {
-      upsertMeta('property', 'og:url', canonical)
-      upsertCanonical(canonical)
+      upsertMeta("property", "og:url", canonical);
+      upsertCanonical(canonical);
     } else {
-      removeMeta('property', 'og:url')
-      removeCanonical()
+      removeMeta("property", "og:url");
+      removeCanonical();
     }
 
-    replaceAlternates({ site: activeSite, i18n, route, routes })
+    replaceAlternates({ site: activeSite, i18n, route, routes });
 
     if (document.documentElement.lang !== activeSite.lang) {
-      document.documentElement.lang = activeSite.lang
+      document.documentElement.lang = activeSite.lang;
     }
-  }, [activeSite, i18n, route, routes, pageTitle, pageDescription, pageTags, pageImage, pageType, pageKind, pageHtml, pageMeta])
+  }, [
+    activeSite,
+    i18n,
+    route,
+    routes,
+    pageTitle,
+    pageDescription,
+    pageTags,
+    pageImage,
+    pageType,
+    pageKind,
+    pageHtml,
+    pageMeta,
+  ]);
 }