@kamod-ch/preactpress 1.0.0

package/templates/hono/snippets/greet.ts

@@ -0,0 +1,3 @@
+export function greet(name: string) {
+  return `Hello, ${name}!`
+}

package/templates/magazine/.preactpress/config.ts

@@ -0,0 +1,36 @@
+import { defineConfig } from '@kamod-ch/preactpress/config'
+
+export default defineConfig({
+  site: {
+    title: 'Branchenjournal',
+    description: 'Static magazine-style starter for PreactPress',
+    lang: 'de'
+  },
+  theme: './theme/Layout.tsx',
+  markdown: {
+    html: false,
+    linkify: true,
+    typographer: true
+  },
+  themeConfig: {
+    outline: false,
+    search: true,
+    lastUpdated: true,
+    footer:
+      '© Demo — Layout nur als Vorlage. Inhalt fiktiv. Gebaut mit PreactPress.',
+    nav: [
+      { text: 'Start', link: '/' },
+      { text: 'Märkte', link: '/article-markets' },
+      { text: 'Tech', link: '/article-tech' }
+    ],
+    sidebar: [
+      {
+        text: 'In dieser Ausgabe',
+        items: [
+          { text: 'Handel und Margen', link: '/article-markets' },
+          { text: 'Tech & Logistik', link: '/article-tech' }
+        ]
+      }
+    ]
+  }
+})

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

@@ -0,0 +1,319 @@
+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'
+}
+
+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')
+  }
+}
+
+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 visibleSidebar = useMemo(() => {
+    if (!normalizedQuery) return themeConfig.sidebar ?? []
+    return (themeConfig.sidebar ?? [])
+      .map((group) => ({
+        ...group,
+        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
+  const next =
+    activeIndex >= 0 && activeIndex < sidebarItems.length - 1
+      ? sidebarItems[activeIndex + 1]
+      : undefined
+  const MdxComponent = page?.kind === 'mdx' ? page.Component : undefined
+  const mdxComponents = createMdxHeadingComponents()
+  const editHref =
+    themeConfig.editLink && page?.relativePath
+      ? themeConfig.editLink.pattern.replace(/:path/g, page.relativePath)
+      : undefined
+  const lastUpdated = page?.lastUpdated
+    ? 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())
+
+  useEffect(() => {
+    setQuery('')
+  }, [routePath])
+
+  return (
+    <div class="mag-layout">
+      <a class="mag-skip" href="#content">
+        Zum Inhalt springen
+      </a>
+      <div class="mag-topbar">
+        <div class="mag-topbar-inner">
+          <span>{today}</span>
+          <span>{site.description}</span>
+        </div>
+      </div>
+      <header class="mag-masthead">
+        <div class="mag-masthead-inner">
+          <a class="mag-logo" href={withBase(site.base, '/')}>
+            <span class="mag-logo-mark">Wochenausgabe</span>
+            <span class="mag-logo-title">{site.title}</span>
+          </a>
+          <div class="mag-masthead-tools">
+            <ThemeToggle />
+          </div>
+        </div>
+      </header>
+      <div class="mag-nav-wrap">
+        <nav class="mag-nav" aria-label="Hauptnavigation">
+          {(themeConfig.nav ?? []).map((item) => {
+            const active = isActive(routePath, item.link)
+            return (
+              <a
+                key={item.link}
+                class={active ? 'active' : ''}
+                href={withBase(site.base, item.link)}
+                aria-current={active ? 'page' : undefined}
+              >
+                {item.text}
+              </a>
+            )
+          })}
+        </nav>
+      </div>
+      <div class={`mag-shell${hasRail ? ' has-rail' : ''}`}>
+        <main id="content" class="mag-main">
+          <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}
+            {showTags ? (
+              <ul class="mag-tags" aria-label="Tags">
+                {pageTags.map((tag) => (
+                  <li key={tag}>
+                    <a href={withBase(site.base, tagRoute(tag))}>{tag}</a>
+                  </li>
+                ))}
+              </ul>
+            ) : null}
+            {homeTeasers?.length ? <TeaserGrid items={homeTeasers} /> : null}
+            {MdxComponent ? (
+              <div class="mag-doc-content">
+                <MdxComponent components={mdxComponents} />
+              </div>
+            ) : (
+              <div
+                class="mag-doc-content"
+                dangerouslySetInnerHTML={{ __html: page?.kind === 'markdown' ? page.html : '' }}
+              />
+            )}
+            {previous || next ? (
+              <nav class="mag-pager" aria-label="Seitennavigation">
+                {previous ? (
+                  <a class="previous" href={withBase(site.base, previous.link)}>
+                    <span>Zurück</span>
+                    {previous.text}
+                  </a>
+                ) : (
+                  <span />
+                )}
+                {next ? (
+                  <a class="next" href={withBase(site.base, next.link)}>
+                    <span>Weiter</span>
+                    {next.text}
+                  </a>
+                ) : null}
+              </nav>
+            ) : null}
+            {themeConfig.lastUpdated || editHref ? (
+              <footer class="mag-doc-meta">
+                {themeConfig.lastUpdated && lastUpdated ? <span>Stand: {lastUpdated}</span> : null}
+                {editHref ? (
+                  <span>
+                    {themeConfig.lastUpdated && lastUpdated ? ' · ' : null}
+                    <a href={editHref}>{themeConfig.editLink?.text ?? 'Seite bearbeiten'}</a>
+                  </span>
+                ) : null}
+              </footer>
+            ) : null}
+          </article>
+        </main>
+        {hasRail ? (
+          <aside class="mag-rail" aria-label="Seitenleiste">
+            <div class="mag-rail-panel">
+              {themeConfig.search ? (
+                <div class="mag-search">
+                  <label>
+                    <span>Filter</span>
+                    <input
+                      type="search"
+                      value={query}
+                      placeholder="Artikel suchen…"
+                      onInput={(event) => setQuery((event.currentTarget as HTMLInputElement).value)}
+                    />
+                  </label>
+                </div>
+              ) : null}
+              {visibleSidebar.map((group, gi) => (
+                <div key={gi}>
+                  {group.text ? <h2>{group.text}</h2> : null}
+                  <ul>
+                    {group.items.map((it) => {
+                      const active = isActive(routePath, it.link)
+                      return (
+                        <li key={it.link}>
+                          <a
+                            class={active ? 'active' : ''}
+                            href={withBase(site.base, it.link)}
+                            aria-current={active ? 'page' : undefined}
+                          >
+                            {it.text}
+                          </a>
+                        </li>
+                      )
+                    })}
+                  </ul>
+                </div>
+              ))}
+            </div>
+          </aside>
+        ) : null}
+      </div>
+      {themeConfig.footer ? <footer class="mag-footer">{themeConfig.footer}</footer> : null}
+    </div>
+  )
+}
+
+export default Layout

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

@@ -0,0 +1,39 @@
+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
+}
+
+export interface TeaserGridProps {
+  items: TeaserItem[]
+}
+
+export function articlesToTeasers(posts: ArticlePost[]): TeaserItem[] {
+  return posts.map((post) => ({
+    href: post.route,
+    kicker: post.category?.name ?? 'Artikel',
+    title: post.title,
+    dek: post.description ?? '',
+    readTime: post.readTime
+  }))
+}
+
+const TeaserGrid: FunctionalComponent<TeaserGridProps> = ({ items }) => (
+  <div class="mag-teaser-grid">
+    {items.map((item) => (
+      <a key={item.href} class="mag-teaser-card" href={item.href}>
+        <span class="mag-teaser-kicker">{item.kicker}</span>
+        <span class="mag-teaser-title">{item.title}</span>
+        <span class="mag-teaser-dek">{item.dek}</span>
+        {item.readTime ? <span class="mag-teaser-meta">{item.readTime}</span> : null}
+      </a>
+    ))}
+  </div>
+)
+
+export default TeaserGrid

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

@@ -0,0 +1,73 @@
+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)
+  }, [])
+
+  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>
+  )
+}
+
+export default ThemeToggle