@kamod-ch/preactpress 1.0.0 → 1.0.2

package/templates/magazine/.preactpress/theme/Layout.tsx

@@ -1,178 +1,75 @@
-import type { ComponentChildren, ComponentType, FunctionalComponent, JSX } from 'preact'
-import { useEffect, useMemo, useState } from 'preact/hooks'
-import type { ArticlePost } from '@kamod-ch/preactpress/shared'
-import ThemeToggle from './ThemeToggle.js'
-import TeaserGrid, { articlesToTeasers } from './TeaserGrid.js'
-import './magazine.css'
-
-/** Mirrors `preactpress` `LayoutProps` so this example stays self-contained. */
-export interface LayoutProps {
-  site: {
-    title: string
-    description: string
-    base: string
-    lang: string
-    url?: string
-  }
-  themeConfig: {
-    nav?: { text: string; link: string }[]
-    sidebar?: { text?: string; items: { text: string; link: string }[] }[]
-    outline?: boolean
-    search?: boolean
-    tags?: boolean
-    footer?: string
-    editLink?: { pattern: string; text?: string }
-    lastUpdated?: boolean
-  }
-  routePath: string
-  page?:
-    | {
-        kind: 'markdown'
-        title?: string
-        description?: string
-        tags?: string[]
-        meta: Record<string, unknown>
-        headings: { id: string; text: string; level: number }[]
-        relativePath?: string
-        lastUpdated?: string
-        html: string
-      }
-    | {
-        kind: 'mdx'
-        title?: string
-        description?: string
-        tags?: string[]
-        meta: Record<string, unknown>
-        headings: { id: string; text: string; level: number }[]
-        relativePath?: string
-        lastUpdated?: string
-        Component: ComponentType<{
-          components?: Record<string, ComponentType<Record<string, unknown>>>
-        }>
-      }
-}
-
-function withBase(base: string, link: string): string {
-  if (/^https?:\/\//.test(link)) return link
-  const b = base === '/' ? '' : base.replace(/\/$/, '')
-  const l = link.startsWith('/') ? link : `/${link}`
-  return `${b}${l}`
-}
-
-function normalizeLink(link: string): string {
-  const clean = link.split(/[?#]/, 1)[0] || '/'
-  const prefixed = clean.startsWith('/') ? clean : `/${clean}`
-  return prefixed.replace(/\/$/, '') || '/'
-}
-
-function isActive(routePath: string, link: string): boolean {
-  const route = normalizeLink(routePath)
-  const target = normalizeLink(link)
-  return route === target || (target !== '/' && route.startsWith(`${target}/`))
-}
-
-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 ''
-}
-
-function slugify(text: string): string {
-  const slug = text
-    .toLowerCase()
-    .trim()
-    .replace(/<[^>]+>/g, '')
-    .replace(/&[a-z0-9#]+;/gi, '')
-    .replace(/[^a-z0-9]+/g, '-')
-    .replace(/^-+|-+$/g, '')
-  return slug || 'section'
-}
+import type { FunctionalComponent } from "preact";
+import { useEffect, useMemo, useState } from "preact/hooks";
+import {
+  createMdxHeadingComponents,
+  isActive,
+  normalizeLink,
+  slugifyHeading,
+  withBase,
+  type LayoutProps,
+} from "@kamod-ch/preactpress/client";
+import type { ArticlePost } from "@kamod-ch/preactpress/shared";
+import ThemeToggle from "./ThemeToggle.js";
+import TeaserGrid, { articlesToTeasers } from "./TeaserGrid.js";
+import "./magazine.css";
 
 function tagRoute(tag: string): string {
-  return `/tags/${slugify(tag)}`
-}
-
-function createMdxHeadingComponents() {
-  const used = new Map<string, number>()
-  const heading =
-    (Tag: 'h2' | 'h3') =>
-    ({ children, ...props }: JSX.HTMLAttributes<HTMLHeadingElement>) => {
-      const base = slugify(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={`mag-heading ${props.class ?? ''}`.trim()}>
-          {children}
-          <a class="mag-heading-anchor" href={`#${id}`} aria-label="Abschnitt verlinken">
-            #
-          </a>
-        </Tag>
-      )
-    }
-
-  return {
-    h2: heading('h2'),
-    h3: heading('h3')
-  }
+  return `/tags/${slugifyHeading(tag)}`;
 }
 
 const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath, page }) => {
-  const title = page?.title ? `${page.title} | ${site.title}` : site.title
-  const [query, setQuery] = useState('')
-  const sidebarItems = (themeConfig.sidebar ?? []).flatMap((group) => group.items)
-  const normalizedQuery = query.trim().toLowerCase()
+  const title = page?.title ? `${page.title} | ${site.title}` : site.title;
+  const [query, setQuery] = useState("");
+  const sidebarItems = (themeConfig.sidebar ?? []).flatMap((group) => group.items);
+  const normalizedQuery = query.trim().toLowerCase();
   const visibleSidebar = useMemo(() => {
-    if (!normalizedQuery) return themeConfig.sidebar ?? []
+    if (!normalizedQuery) return themeConfig.sidebar ?? [];
     return (themeConfig.sidebar ?? [])
       .map((group) => ({
         ...group,
-        items: group.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery))
+        items: group.items.filter((item) => item.text.toLowerCase().includes(normalizedQuery)),
       }))
-      .filter((group) => group.items.length > 0)
-  }, [normalizedQuery, themeConfig.sidebar])
-  const activeIndex = sidebarItems.findIndex((item) => isActive(routePath, item.link))
-  const previous = activeIndex > 0 ? sidebarItems[activeIndex - 1] : undefined
+      .filter((group) => group.items.length > 0);
+  }, [normalizedQuery, themeConfig.sidebar]);
+  const activeIndex = sidebarItems.findIndex((item) => isActive(routePath, item.link));
+  const previous = activeIndex > 0 ? sidebarItems[activeIndex - 1] : undefined;
   const next =
     activeIndex >= 0 && activeIndex < sidebarItems.length - 1
       ? sidebarItems[activeIndex + 1]
-      : undefined
-  const MdxComponent = page?.kind === 'mdx' ? page.Component : undefined
-  const mdxComponents = createMdxHeadingComponents()
+      : undefined;
+  const MdxComponent = page?.kind === "mdx" ? page.Component : undefined;
+  const mdxComponents = createMdxHeadingComponents({
+    headingClass: "mag-heading",
+    anchorClass: "mag-heading-anchor",
+    anchorLabel: "Abschnitt verlinken",
+  });
   const editHref =
     themeConfig.editLink && page?.relativePath
       ? themeConfig.editLink.pattern.replace(/:path/g, page.relativePath)
-      : undefined
+      : undefined;
   const lastUpdated = page?.lastUpdated
-    ? new Date(page.lastUpdated).toLocaleDateString(site.lang || 'de', {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric'
+    ? new Date(page.lastUpdated).toLocaleDateString(site.lang || "de", {
+        year: "numeric",
+        month: "short",
+        day: "numeric",
       })
-    : undefined
-  const hasRail = (themeConfig.sidebar?.length ?? 0) > 0
-  const isHome = normalizeLink(routePath) === '/'
-  const homeArticles = isHome
-    ? (page?.meta.contentData as ArticlePost[] | undefined)
-    : undefined
-  const homeTeasers = homeArticles?.length ? articlesToTeasers(homeArticles) : undefined
-  const pageTags = page?.tags ?? []
-  const showTags =
-    themeConfig.tags !== false && pageTags.length > 0 && !Boolean(page?.meta.tagIndex)
-  const today = new Intl.DateTimeFormat(site.lang || 'de', {
-    weekday: 'long',
-    day: 'numeric',
-    month: 'long',
-    year: 'numeric'
-  }).format(new Date())
+    : undefined;
+  const hasRail = (themeConfig.sidebar?.length ?? 0) > 0;
+  const isHome = normalizeLink(routePath) === "/";
+  const homeArticles = isHome ? (page?.meta.contentData as ArticlePost[] | undefined) : undefined;
+  const homeTeasers = homeArticles?.length ? articlesToTeasers(homeArticles) : undefined;
+  const pageTags = page?.tags ?? [];
+  const showTags = themeConfig.tags !== false && pageTags.length > 0 && !page?.meta.tagIndex;
+  const today = new Intl.DateTimeFormat(site.lang || "de", {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+  }).format(new Date());
 
   useEffect(() => {
-    setQuery('')
-  }, [routePath])
+    setQuery("");
+  }, [routePath]);
 
   return (
     <div class="mag-layout">
@@ -187,7 +84,7 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
       </div>
       <header class="mag-masthead">
         <div class="mag-masthead-inner">
-          <a class="mag-logo" href={withBase(site.base, '/')}>
+          <a class="mag-logo" href={withBase(site.base, "/")}>
             <span class="mag-logo-mark">Wochenausgabe</span>
             <span class="mag-logo-title">{site.title}</span>
           </a>
@@ -199,23 +96,23 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
       <div class="mag-nav-wrap">
         <nav class="mag-nav" aria-label="Hauptnavigation">
           {(themeConfig.nav ?? []).map((item) => {
-            const active = isActive(routePath, item.link)
+            const active = isActive(routePath, item.link);
             return (
               <a
                 key={item.link}
-                class={active ? 'active' : ''}
+                class={active ? "active" : ""}
                 href={withBase(site.base, item.link)}
-                aria-current={active ? 'page' : undefined}
+                aria-current={active ? "page" : undefined}
               >
                 {item.text}
               </a>
-            )
+            );
           })}
         </nav>
       </div>
-      <div class={`mag-shell${hasRail ? ' has-rail' : ''}`}>
+      <div class={`mag-shell${hasRail ? " has-rail" : ""}`}>
         <main id="content" class="mag-main">
-          <article class={`mag-article${isHome ? ' wide' : ''}`}>
+          <article class={`mag-article${isHome ? " wide" : ""}`}>
             {isHome ? <p class="mag-eyebrow">Schwerpunkte</p> : null}
             <h1 class="mag-doc-title">{page?.title ?? title}</h1>
             {page?.description ? <p class="mag-doc-lead">{page.description}</p> : null}
@@ -236,7 +133,7 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
             ) : (
               <div
                 class="mag-doc-content"
-                dangerouslySetInnerHTML={{ __html: page?.kind === 'markdown' ? page.html : '' }}
+                dangerouslySetInnerHTML={{ __html: page?.kind === "markdown" ? page.html : "" }}
               />
             )}
             {previous || next ? (
@@ -262,8 +159,8 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
                 {themeConfig.lastUpdated && lastUpdated ? <span>Stand: {lastUpdated}</span> : null}
                 {editHref ? (
                   <span>
-                    {themeConfig.lastUpdated && lastUpdated ? ' · ' : null}
-                    <a href={editHref}>{themeConfig.editLink?.text ?? 'Seite bearbeiten'}</a>
+                    {themeConfig.lastUpdated && lastUpdated ? " · " : null}
+                    <a href={editHref}>{themeConfig.editLink?.text ?? "Seite bearbeiten"}</a>
                   </span>
                 ) : null}
               </footer>
@@ -291,18 +188,18 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
                   {group.text ? <h2>{group.text}</h2> : null}
                   <ul>
                     {group.items.map((it) => {
-                      const active = isActive(routePath, it.link)
+                      const active = isActive(routePath, it.link);
                       return (
                         <li key={it.link}>
                           <a
-                            class={active ? 'active' : ''}
+                            class={active ? "active" : ""}
                             href={withBase(site.base, it.link)}
-                            aria-current={active ? 'page' : undefined}
+                            aria-current={active ? "page" : undefined}
                           >
                             {it.text}
                           </a>
                         </li>
-                      )
+                      );
                     })}
                   </ul>
                 </div>
@@ -313,7 +210,7 @@ const Layout: FunctionalComponent<LayoutProps> = ({ site, themeConfig, routePath
       </div>
       {themeConfig.footer ? <footer class="mag-footer">{themeConfig.footer}</footer> : null}
     </div>
-  )
-}
+  );
+};
 
-export default Layout
+export default Layout;

package/templates/magazine/.preactpress/theme/TeaserGrid.tsx

@@ -1,26 +1,26 @@
-import type { FunctionalComponent } from 'preact'
-import type { ArticlePost } from '@kamod-ch/preactpress/shared'
+import type { FunctionalComponent } from "preact";
+import type { ArticlePost } from "@kamod-ch/preactpress/shared";
 
 export interface TeaserItem {
-  href: string
-  kicker: string
-  title: string
-  dek: string
-  readTime?: string
+  href: string;
+  kicker: string;
+  title: string;
+  dek: string;
+  readTime?: string;
 }
 
 export interface TeaserGridProps {
-  items: TeaserItem[]
+  items: TeaserItem[];
 }
 
 export function articlesToTeasers(posts: ArticlePost[]): TeaserItem[] {
   return posts.map((post) => ({
     href: post.route,
-    kicker: post.category?.name ?? 'Artikel',
+    kicker: post.category?.name ?? "Artikel",
     title: post.title,
-    dek: post.description ?? '',
-    readTime: post.readTime
-  }))
+    dek: post.description ?? "",
+    readTime: post.readTime,
+  }));
 }
 
 const TeaserGrid: FunctionalComponent<TeaserGridProps> = ({ items }) => (
@@ -34,6 +34,6 @@ const TeaserGrid: FunctionalComponent<TeaserGridProps> = ({ items }) => (
       </a>
     ))}
   </div>
-)
+);
 
-export default TeaserGrid
+export default TeaserGrid;

package/templates/magazine/.preactpress/theme/ThemeToggle.tsx

@@ -1,73 +1,7 @@
-import type { FunctionalComponent } from 'preact'
-import { useEffect } from 'preact/hooks'
-
-const STORAGE_KEY = 'preactpress-theme' as const
-
-type Stored = 'light' | 'dark'
-
-function readStored(): Stored | null {
-  if (typeof localStorage === 'undefined') return null
-  try {
-    const v = localStorage.getItem(STORAGE_KEY)
-    return v === 'light' || v === 'dark' ? v : null
-  } catch {
-    return null
-  }
-}
-
-function apply(theme: Stored | null): void {
-  if (typeof document === 'undefined') return
-  const root = document.documentElement
-  if (theme === null) root.removeAttribute('data-theme')
-  else root.setAttribute('data-theme', theme)
-}
-
-function toggle(): void {
-  const stored = readStored()
-  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches
-  const isDark = stored === 'dark' || (stored === null && prefersDark)
-  const next: Stored = isDark ? 'light' : 'dark'
-  apply(next)
-  try {
-    localStorage.setItem(STORAGE_KEY, next)
-  } catch {
-    /* ignore */
-  }
-}
-
-const ThemeToggle: FunctionalComponent = () => {
-  useEffect(() => {
-    function onStorage(e: StorageEvent): void {
-      if (e.key !== STORAGE_KEY) return
-      const v = e.newValue
-      apply(v === 'light' || v === 'dark' ? v : null)
-    }
-    window.addEventListener('storage', onStorage)
-    return () => window.removeEventListener('storage', onStorage)
-  }, [])
+import { ThemeToggle as BaseThemeToggle } from "@kamod-ch/preactpress/client";
 
+export default function ThemeToggle() {
   return (
-    <button type="button" class="mag-theme-toggle" onClick={toggle} aria-label="Hell- und Dunkelmodus wechseln">
-      <span class="mag-theme-toggle-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="mag-theme-toggle-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>
-  )
+    <BaseThemeToggle className="mag-theme-toggle" ariaLabel="Hell- und Dunkelmodus wechseln" />
+  );
 }
-
-export default ThemeToggle

package/templates/magazine/.preactpress/theme/magazine.css

@@ -11,7 +11,7 @@
   --mag-shadow: 0 12px 40px rgba(20, 16, 12, 0.08);
 }
 
-[data-theme='dark'] {
+[data-theme="dark"] {
   --mag-ink: #ece8e1;
   --mag-paper: #121110;
   --mag-muted: #a39e96;
@@ -36,7 +36,7 @@ html {
 
 body {
   margin: 0;
-  font-family: 'Newsreader', 'Georgia', 'Times New Roman', serif;
+  font-family: "Newsreader", "Georgia", "Times New Roman", serif;
   font-size: 1.05rem;
   line-height: 1.55;
   background: var(--mag-paper);
@@ -68,7 +68,10 @@ body {
 .mag-topbar {
   background: var(--mag-top);
   color: var(--mag-top-fg);
-  font-family: system-ui, -apple-system, sans-serif;
+  font-family:
+    system-ui,
+    -apple-system,
+    sans-serif;
   font-size: 0.78rem;
   letter-spacing: 0.02em;
 }
@@ -115,7 +118,7 @@ body {
 }
 
 .mag-logo-title {
-  font-family: 'Newsreader', Georgia, serif;
+  font-family: "Newsreader", Georgia, serif;
   font-weight: 700;
   font-size: clamp(1.85rem, 4vw, 2.75rem);
   line-height: 1.05;
@@ -354,7 +357,7 @@ body {
 }
 
 .mag-doc-content code {
-  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-family: "JetBrains Mono", ui-monospace, monospace;
   font-size: 0.9em;
 }
 
@@ -502,7 +505,9 @@ body {
   text-decoration: none;
   color: inherit;
   box-shadow: var(--mag-shadow);
-  transition: border-color 0.15s ease, transform 0.15s ease;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease;
 }
 
 .mag-teaser-card:hover {
@@ -578,10 +583,10 @@ body {
   }
 }
 
-:root[data-theme='light'] .mag-theme-toggle .mag-theme-toggle-moon {
+:root[data-theme="light"] .mag-theme-toggle .mag-theme-toggle-moon {
   display: inline-flex;
 }
 
-:root[data-theme='dark'] .mag-theme-toggle .mag-theme-toggle-sun {
+:root[data-theme="dark"] .mag-theme-toggle .mag-theme-toggle-sun {
   display: inline-flex;
 }

package/templates/magazine/README.md

@@ -0,0 +1,30 @@
+# PreactPress Magazine Starter
+
+An editorial starter for PreactPress with a custom magazine theme, article teasers, tags, and a content-loader driven home page.
+
+## Getting started
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open [http://localhost:5173](http://localhost:5173).
+
+## Scripts
+
+| Command        | Purpose                      |
+| -------------- | ---------------------------- |
+| `pnpm dev`     | Start the development server |
+| `pnpm check`   | Validate routes and links    |
+| `pnpm build`   | Generate static output       |
+| `pnpm preview` | Preview the static build     |
+
+## What to edit
+
+- `.preactpress/config.ts` configures the site title, theme, sidebar, and footer.
+- `.preactpress/theme/` contains the custom magazine layout and styles.
+- `index.data.ts` loads article frontmatter for the home page teaser grid.
+- `article-*.md(x)` files are example articles.
+
+Set `site.url` and `site.base` in `.preactpress/config.ts` before deploying to a production host.

package/templates/magazine/article-markets.md

@@ -1,6 +1,6 @@
 ---
 title: Handel und Margen im Frühjahr
-description: 'Zwischen Volumen und Warenwert: wie Händlerinnen und Händler ihre KPI-Sets überdenken.'
+description: "Zwischen Volumen und Warenwert: wie Händlerinnen und Händler ihre KPI-Sets überdenken."
 tags:
   - Handel
   - Margen
@@ -11,7 +11,7 @@ readTime: 6 Min.
 
 ## Einordnung
 
-Die Berichtssaison liefert wieder **Mischsignale**: Während einige Segmente von Volumenrückgängen sprechen, halten sich Warenwerte in ausgewählten Kategorien stabil. Entscheidend ist weniger die reine Fläche, sondern die *Rotation pro Quadratmeter* und die **Treue** am PoS.
+Die Berichtssaison liefert wieder **Mischsignale**: Während einige Segmente von Volumenrückgängen sprechen, halten sich Warenwerte in ausgewählten Kategorien stabil. Entscheidend ist weniger die reine Fläche, sondern die _Rotation pro Quadratmeter_ und die **Treue** am PoS.
 
 ### Was Analysen häufig übersehen
 

package/templates/magazine/article-tech.mdx

@@ -1,6 +1,6 @@
 ---
 title: Automatisierung in der letzten Meile
-description: 'Kleines MDX-Beispiel mit Code — passend zu Logistik- und Tech-Rubriken.'
+description: "Kleines MDX-Beispiel mit Code — passend zu Logistik- und Tech-Rubriken."
 tags:
   - Tech
   - Logistik
@@ -15,21 +15,21 @@ Viele Teams beginnen mit einem schlanken **Node**-Skript, das Sendungen gruppier
 
 ```js
 export function clusterByPostalCode(parcels) {
-  const map = new Map()
+  const map = new Map();
   for (const p of parcels) {
-    const k = p.postalCode.slice(0, 2)
-    const list = map.get(k) ?? []
-    list.push(p)
-    map.set(k, list)
+    const k = p.postalCode.slice(0, 2);
+    const list = map.get(k) ?? [];
+    list.push(p);
+    map.set(k, list);
   }
-  return map
+  return map;
 }
 ```
 
 ### Nächste Schritte
 
-1. Datenqualität an der Quelle absichern  
-2. Routing-Engine mit echten SLAs testen  
-3. Dashboards auf **Echtzeit**-Fehlerquoten trimmen  
+1. Datenqualität an der Quelle absichern
+2. Routing-Engine mit echten SLAs testen
+3. Dashboards auf **Echtzeit**-Fehlerquoten trimmen
 
 Interaktive Bausteine (Zähler, Charts) kannst du wie gewohnt als **Preact-Komponenten** importieren.

package/templates/magazine/index.data.ts

@@ -1,7 +1,7 @@
-import { createContentLoader } from '@kamod-ch/preactpress/config'
-import { articleFromFrontmatter, type ArticlePost } from '@kamod-ch/preactpress/shared'
+import { createContentLoader } from "@kamod-ch/preactpress/config";
+import { articleFromFrontmatter, type ArticlePost } from "@kamod-ch/preactpress/shared";
 
-export default createContentLoader<ArticlePost[]>(['article-*.md', 'article-*.mdx'], {
+export default createContentLoader<ArticlePost[]>(["article-*.md", "article-*.mdx"], {
   transform(items) {
     return items.map((item) =>
       articleFromFrontmatter({
@@ -10,10 +10,10 @@ export default createContentLoader<ArticlePost[]>(['article-*.md', 'article-*.md
         title: item.title,
         description: item.description,
         tags: Array.isArray(item.frontmatter.tags)
-          ? item.frontmatter.tags.filter((tag): tag is string => typeof tag === 'string')
+          ? item.frontmatter.tags.filter((tag): tag is string => typeof tag === "string")
           : undefined,
-        frontmatter: item.frontmatter
-      })
-    )
-  }
-})
+        frontmatter: item.frontmatter,
+      }),
+    );
+  },
+});

package/templates/magazine/index.html

@@ -4,11 +4,15 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Magazin</title>
+    <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
+    <link rel="icon" href="/favicon-32.png" type="image/png" sizes="32x32" />
+    <link rel="icon" href="/favicon.png" type="image/png" />
+    <link rel="apple-touch-icon" href="/favicon.png" />
   </head>
   <body>
     <div id="app"></div>
     <script type="module">
-      import 'preactpress/app'
+      import "preactpress/app";
     </script>
   </body>
 </html>

package/templates/magazine/index.mdx

@@ -1,6 +1,6 @@
 ---
 title: Startseite
-description: 'Kommentierte Marktlage, Filialisten und ein Blick auf Tech & Logistik — alles statisch aus Markdown und MDX.'
+description: "Kommentierte Marktlage, Filialisten und ein Blick auf Tech & Logistik — alles statisch aus Markdown und MDX."
 tags:
   - Magazin
   - Startseite