@kamod-ch/preactpress 1.0.0 → 1.0.3

package/src/client/prefetchLinks.ts

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

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

@@ -1,40 +1,40 @@
-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 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'
+  validateAlgoliaCredentials,
+} from "../../shared/search.js";
+import "@docsearch/css";
 
 export interface AlgoliaSearchProps {
-  options: AlgoliaSearchOptions
-  base: string
-  cleanUrls?: boolean
-  containerId?: string
+  options: AlgoliaSearchOptions;
+  base: string;
+  cleanUrls?: boolean;
+  containerId?: string;
 }
 
 const AlgoliaSearch: FunctionalComponent<AlgoliaSearchProps> = ({
   options,
   base,
   cleanUrls = true,
-  containerId = 'pp-docsearch'
+  containerId = "pp-docsearch",
 }) => {
-  const initKey = useRef(0)
+  const initKey = useRef(0);
 
   useEffect(() => {
-    const credentials = validateAlgoliaCredentials(options)
-    if (!credentials.valid) return
+    const credentials = validateAlgoliaCredentials(options);
+    if (!credentials.valid) return;
 
-    const currentInit = ++initKey.current
-    let destroy: (() => void) | undefined
-    let cancelled = false
+    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
+    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!,
@@ -50,40 +50,40 @@ const AlgoliaSearch: FunctionalComponent<AlgoliaSearchProps> = ({
         searchParameters: options.searchParameters,
         navigator: {
           navigate({ itemUrl }: { itemUrl: string }) {
-            navigateDocSearchResult(itemUrl, base)
-          }
+            navigateDocSearchResult(itemUrl, base);
+          },
         },
         transformItems: (items) =>
           items.map((item) => ({
             ...item,
-            url: getRelativeDocSearchUrl(item.url, base, cleanUrls)
+            url: getRelativeDocSearchUrl(item.url, base, cleanUrls),
           })),
         keyboardShortcuts: {
-          '/': false,
-          'Ctrl/Cmd+K': false
-        }
-      })
-      destroy = () => instance.destroy()
-    })
+          "/": false,
+          "Ctrl/Cmd+K": false,
+        },
+      });
+      destroy = () => instance.destroy();
+    });
 
     return () => {
-      cancelled = true
-      destroy?.()
-    }
-  }, [base, cleanUrls, containerId, options])
+      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])
+    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" />
-}
+  return <div id={containerId} class="pp-docsearch" />;
+};
 
-export default AlgoliaSearch
+export default AlgoliaSearch;

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

@@ -1,44 +1,48 @@
-import type { FunctionalComponent } from 'preact'
-import type { Feature, FeatureIcon } from '../../shared/pageChrome.js'
+import type { FunctionalComponent } from "preact";
+import type { Feature, FeatureIcon } from "../../shared/pageChrome.js";
 
 interface FeaturesProps {
-  features: Feature[]
-  base: string
+  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
+  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}`
+  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) {
+  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 ?? ''}
+        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 ?? ''}
+        alt={icon.alt ?? ""}
         width={icon.width}
         height={icon.height}
       />
     </picture>
-  )
+  );
 }
 
 const Features: FunctionalComponent<FeaturesProps> = ({ features, base }) => (
@@ -46,12 +50,14 @@ const Features: FunctionalComponent<FeaturesProps> = ({ features, base }) => (
     {features.map((feature) => {
       const content = (
         <>
-          {feature.icon ? <div class="pp-home-feature-icon">{renderIcon(feature.icon, base)}</div> : null}
+          {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
@@ -67,9 +73,9 @@ const Features: FunctionalComponent<FeaturesProps> = ({ features, base }) => (
         <div key={feature.title} class="pp-home-feature">
           {content}
         </div>
-      )
+      );
     })}
   </section>
-)
+);
 
-export default Features
+export default Features;

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

@@ -1,34 +1,38 @@
-import type { FunctionalComponent } from 'preact'
-import type { Hero as HeroConfig, ThemeableImage } from '../../shared/pageChrome.js'
+import type { FunctionalComponent } from "preact";
+import type { Hero as HeroConfig, ThemeableImage } from "../../shared/pageChrome.js";
 
 interface HeroProps {
-  hero: HeroConfig
-  base: string
+  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
+  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}`
+  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 (!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 ?? ''} />
+  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 ?? ''} />
+      <img src={withBase(base, image.light)} alt={image.alt ?? ""} />
     </picture>
-  )
+  );
 }
 
 const Hero: FunctionalComponent<HeroProps> = ({ hero, base }) => (
@@ -55,6 +59,6 @@ const Hero: FunctionalComponent<HeroProps> = ({ hero, base }) => (
     </div>
     {hero.image ? <div class="pp-home-hero-image">{renderImage(hero.image, base)}</div> : null}
   </section>
-)
+);
 
-export default Hero
+export default Hero;