@kamod-ch/preactpress 1.0.0

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

@@ -0,0 +1,587 @@
+:root {
+  --mag-ink: #141414;
+  --mag-paper: #f6f3ee;
+  --mag-muted: #5c5852;
+  --mag-line: #d4cec4;
+  --mag-accent: #8b1538;
+  --mag-accent-soft: #f3e4e9;
+  --mag-top: #1a1a1a;
+  --mag-top-fg: #f0ebe3;
+  --mag-card: #fffdf9;
+  --mag-shadow: 0 12px 40px rgba(20, 16, 12, 0.08);
+}
+
+[data-theme='dark'] {
+  --mag-ink: #ece8e1;
+  --mag-paper: #121110;
+  --mag-muted: #a39e96;
+  --mag-line: #2e2b27;
+  --mag-accent: #e07a96;
+  --mag-accent-soft: #2a181d;
+  --mag-top: #0c0c0c;
+  --mag-top-fg: #d8d2c8;
+  --mag-card: #1a1816;
+  --mag-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html {
+  color-scheme: light dark;
+}
+
+body {
+  margin: 0;
+  font-family: 'Newsreader', 'Georgia', 'Times New Roman', serif;
+  font-size: 1.05rem;
+  line-height: 1.55;
+  background: var(--mag-paper);
+  color: var(--mag-ink);
+}
+
+.mag-layout {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.mag-skip {
+  position: absolute;
+  left: -9999px;
+  z-index: 999;
+  padding: 0.5rem 1rem;
+  background: var(--mag-accent);
+  color: #fff;
+  font-family: system-ui, sans-serif;
+  font-size: 0.85rem;
+}
+
+.mag-skip:focus {
+  left: 0.75rem;
+  top: 0.5rem;
+}
+
+.mag-topbar {
+  background: var(--mag-top);
+  color: var(--mag-top-fg);
+  font-family: system-ui, -apple-system, sans-serif;
+  font-size: 0.78rem;
+  letter-spacing: 0.02em;
+}
+
+.mag-topbar-inner {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0.4rem 1.25rem;
+  display: flex;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.mag-masthead {
+  border-bottom: 1px solid var(--mag-line);
+  background: linear-gradient(180deg, var(--mag-card) 0%, var(--mag-paper) 100%);
+}
+
+.mag-masthead-inner {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 1.25rem 1.25rem 1rem;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.mag-logo {
+  text-decoration: none;
+  color: inherit;
+}
+
+.mag-logo-mark {
+  display: block;
+  font-family: system-ui, sans-serif;
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.28em;
+  color: var(--mag-muted);
+  margin-bottom: 0.2rem;
+}
+
+.mag-logo-title {
+  font-family: 'Newsreader', Georgia, serif;
+  font-weight: 700;
+  font-size: clamp(1.85rem, 4vw, 2.75rem);
+  line-height: 1.05;
+  letter-spacing: -0.02em;
+}
+
+.mag-masthead-tools {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mag-nav-wrap {
+  border-bottom: 3px solid var(--mag-ink);
+  background: var(--mag-paper);
+  position: sticky;
+  top: 0;
+  z-index: 40;
+}
+
+.mag-nav {
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.15rem;
+  font-family: system-ui, sans-serif;
+  font-size: 0.88rem;
+  font-weight: 600;
+}
+
+.mag-nav a {
+  color: var(--mag-muted);
+  text-decoration: none;
+  padding: 0.65rem 0.5rem;
+  margin-right: 0.35rem;
+  border-bottom: 3px solid transparent;
+  margin-bottom: -3px;
+}
+
+.mag-nav a:hover {
+  color: var(--mag-ink);
+}
+
+.mag-nav a.active {
+  color: var(--mag-accent);
+  border-bottom-color: var(--mag-accent);
+}
+
+.mag-shell {
+  flex: 1;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: 1.75rem 1.25rem 2.5rem;
+  width: 100%;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr);
+  gap: 2rem;
+}
+
+@media (min-width: 900px) {
+  .mag-shell.has-rail {
+    grid-template-columns: minmax(0, 1fr) 240px;
+    align-items: start;
+  }
+}
+
+.mag-main {
+  min-width: 0;
+}
+
+.mag-rail {
+  font-family: system-ui, sans-serif;
+  font-size: 0.82rem;
+}
+
+.mag-rail-panel {
+  border: 1px solid var(--mag-line);
+  background: var(--mag-card);
+  padding: 1rem 1.1rem;
+  border-radius: 2px;
+  box-shadow: var(--mag-shadow);
+}
+
+.mag-rail h2 {
+  margin: 0 0 0.75rem;
+  font-size: 0.68rem;
+  text-transform: uppercase;
+  letter-spacing: 0.16em;
+  color: var(--mag-muted);
+  font-weight: 700;
+}
+
+.mag-search label {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  margin-bottom: 1rem;
+  color: var(--mag-muted);
+  font-size: 0.72rem;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.mag-search input {
+  width: 100%;
+  padding: 0.45rem 0.5rem;
+  border: 1px solid var(--mag-line);
+  border-radius: 2px;
+  background: var(--mag-paper);
+  color: var(--mag-ink);
+  font: inherit;
+  font-size: 0.88rem;
+}
+
+.mag-rail ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.mag-rail li + li {
+  margin-top: 0.35rem;
+}
+
+.mag-rail a {
+  color: var(--mag-ink);
+  text-decoration: none;
+  display: block;
+  padding: 0.35rem 0;
+  border-bottom: 1px solid var(--mag-line);
+}
+
+.mag-rail a:hover {
+  color: var(--mag-accent);
+}
+
+.mag-rail a.active {
+  font-weight: 700;
+  color: var(--mag-accent);
+}
+
+.mag-article {
+  max-width: 42rem;
+}
+
+.mag-article.wide {
+  max-width: none;
+}
+
+.mag-eyebrow {
+  font-family: system-ui, sans-serif;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.14em;
+  color: var(--mag-accent);
+  margin: 0 0 0.35rem;
+}
+
+.mag-doc-title {
+  font-size: clamp(1.75rem, 3.5vw, 2.35rem);
+  line-height: 1.12;
+  font-weight: 700;
+  margin: 0 0 0.75rem;
+  letter-spacing: -0.02em;
+}
+
+.mag-doc-lead {
+  font-size: 1.15rem;
+  color: var(--mag-muted);
+  margin: 0 0 1.5rem;
+  line-height: 1.45;
+}
+
+.mag-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.45rem;
+  list-style: none;
+  margin: -0.65rem 0 1.5rem;
+  padding: 0;
+  font-family: system-ui, sans-serif;
+}
+
+.mag-tags a {
+  display: inline-flex;
+  align-items: center;
+  border: 1px solid var(--mag-line);
+  border-radius: 999px;
+  color: var(--mag-accent);
+  background: var(--mag-accent-soft);
+  font-size: 0.75rem;
+  font-weight: 650;
+  line-height: 1;
+  padding: 0.42rem 0.62rem;
+  text-decoration: none;
+}
+
+.mag-tags a:hover {
+  border-color: var(--mag-accent);
+  background: transparent;
+}
+
+.mag-doc-content {
+  font-size: 1.05rem;
+}
+
+.mag-doc-content p {
+  margin: 0 0 1rem;
+}
+
+.mag-doc-content h2 {
+  font-size: 1.25rem;
+  margin: 2rem 0 0.65rem;
+  font-family: system-ui, sans-serif;
+  font-weight: 700;
+}
+
+.mag-doc-content h3 {
+  font-size: 1.05rem;
+  margin: 1.5rem 0 0.5rem;
+  font-family: system-ui, sans-serif;
+  font-weight: 650;
+}
+
+.mag-doc-content pre {
+  background: var(--mag-top);
+  color: #f5f2ec;
+  padding: 1rem 1.1rem;
+  border-radius: 4px;
+  overflow-x: auto;
+  font-size: 0.88rem;
+  line-height: 1.45;
+}
+
+.mag-doc-content code {
+  font-family: 'JetBrains Mono', ui-monospace, monospace;
+  font-size: 0.9em;
+}
+
+.mag-doc-content :not(pre) > code {
+  background: var(--mag-accent-soft);
+  padding: 0.12em 0.35em;
+  border-radius: 3px;
+}
+
+.mag-doc-content blockquote {
+  margin: 1.25rem 0;
+  padding: 0.4rem 0 0.4rem 1rem;
+  border-left: 4px solid var(--mag-accent);
+  color: var(--mag-muted);
+  font-style: italic;
+}
+
+.mag-heading {
+  position: relative;
+}
+
+.mag-heading-anchor {
+  margin-left: 0.35rem;
+  opacity: 0;
+  font-size: 0.85em;
+  text-decoration: none;
+  color: var(--mag-muted);
+  font-weight: 400;
+}
+
+.mag-heading:hover .mag-heading-anchor {
+  opacity: 1;
+}
+
+.pp-tag-index-count {
+  color: var(--mag-muted);
+  font-family: system-ui, sans-serif;
+}
+
+.pp-tag-index-list {
+  list-style: none;
+  margin: 1.2rem 0 0;
+  padding: 0;
+  font-family: system-ui, sans-serif;
+}
+
+.pp-tag-index-list li + li {
+  margin-top: 0.65rem;
+}
+
+.pp-tag-index-list a {
+  display: block;
+  border: 1px solid var(--mag-line);
+  background: var(--mag-card);
+  box-shadow: var(--mag-shadow);
+  color: var(--mag-ink);
+  padding: 0.8rem 0.9rem;
+  text-decoration: none;
+}
+
+.pp-tag-index-list a:hover {
+  border-color: var(--mag-accent);
+  color: var(--mag-accent);
+}
+
+.mag-pager {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-top: 2.5rem;
+  padding-top: 1.5rem;
+  border-top: 1px solid var(--mag-line);
+  font-family: system-ui, sans-serif;
+  font-size: 0.88rem;
+}
+
+.mag-pager a {
+  color: var(--mag-accent);
+  text-decoration: none;
+  font-weight: 600;
+}
+
+.mag-pager a:hover {
+  text-decoration: underline;
+}
+
+.mag-pager span {
+  color: var(--mag-muted);
+  display: block;
+  font-size: 0.72rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  margin-bottom: 0.25rem;
+}
+
+.mag-pager .next {
+  text-align: right;
+}
+
+.mag-doc-meta {
+  margin-top: 2rem;
+  font-family: system-ui, sans-serif;
+  font-size: 0.8rem;
+  color: var(--mag-muted);
+}
+
+.mag-footer {
+  border-top: 1px solid var(--mag-line);
+  padding: 1.25rem;
+  text-align: center;
+  font-family: system-ui, sans-serif;
+  font-size: 0.78rem;
+  color: var(--mag-muted);
+  background: var(--mag-card);
+}
+
+/* Teaser grid (MDX) */
+.mag-teaser-grid {
+  display: grid;
+  gap: 1rem;
+  margin: 1.5rem 0 2rem;
+}
+
+@media (min-width: 640px) {
+  .mag-teaser-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 960px) {
+  .mag-teaser-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+.mag-teaser-card {
+  display: flex;
+  flex-direction: column;
+  gap: 0.35rem;
+  padding: 1rem 1.1rem;
+  background: var(--mag-card);
+  border: 1px solid var(--mag-line);
+  border-radius: 2px;
+  text-decoration: none;
+  color: inherit;
+  box-shadow: var(--mag-shadow);
+  transition: border-color 0.15s ease, transform 0.15s ease;
+}
+
+.mag-teaser-card:hover {
+  border-color: var(--mag-accent);
+  transform: translateY(-2px);
+}
+
+.mag-teaser-kicker {
+  font-family: system-ui, sans-serif;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--mag-accent);
+}
+
+.mag-teaser-title {
+  font-size: 1.12rem;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.mag-teaser-dek {
+  font-size: 0.92rem;
+  color: var(--mag-muted);
+  line-height: 1.4;
+}
+
+.mag-teaser-meta {
+  font-family: system-ui, sans-serif;
+  font-size: 0.72rem;
+  color: var(--mag-muted);
+  margin-top: 0.25rem;
+}
+
+/* Theme toggle */
+.mag-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  padding: 0;
+  border-radius: 999px;
+  border: 1px solid var(--mag-line);
+  background: var(--mag-card);
+  color: var(--mag-ink);
+  cursor: pointer;
+}
+
+.mag-theme-toggle:hover {
+  border-color: var(--mag-accent);
+  color: var(--mag-accent);
+}
+
+.mag-theme-toggle-moon,
+.mag-theme-toggle-sun {
+  display: none;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+
+@media (prefers-color-scheme: light) {
+  :root:not([data-theme]) .mag-theme-toggle .mag-theme-toggle-moon {
+    display: inline-flex;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme]) .mag-theme-toggle .mag-theme-toggle-sun {
+    display: inline-flex;
+  }
+}
+
+: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 {
+  display: inline-flex;
+}

package/templates/magazine/article-markets.md

@@ -0,0 +1,24 @@
+---
+title: Handel und Margen im Frühjahr
+description: 'Zwischen Volumen und Warenwert: wie Händlerinnen und Händler ihre KPI-Sets überdenken.'
+tags:
+  - Handel
+  - Margen
+author: Redaktion
+category: Märkte
+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.
+
+### Was Analysen häufig übersehen
+
+- Saisonale Verschiebungen durch frühe Osterumsätze
+- Unterschiedliche Währungseffekte im Filialgeschäft
+- Online-Retouren, die erst im Folgemonat durchschlagen
+
+## Fazit
+
+Wer Margen schützen will, sollte Sortiment, Preis und Kommunikation gemeinsam steuern — nicht nacheinander. Eine statische Publikationsseite wie diese kann solche Thesen gut strukturiert ausliefern; für Live-Kurse oder Paywalls bräuchte man zusätzliche Systeme.

package/templates/magazine/article-tech.mdx

@@ -0,0 +1,35 @@
+---
+title: Automatisierung in der letzten Meile
+description: 'Kleines MDX-Beispiel mit Code — passend zu Logistik- und Tech-Rubriken.'
+tags:
+  - Tech
+  - Logistik
+author: Redaktion
+category: Tech
+readTime: 4 Min.
+---
+
+## API-Schnipsel
+
+Viele Teams beginnen mit einem schlanken **Node**-Skript, das Sendungen gruppiert:
+
+```js
+export function clusterByPostalCode(parcels) {
+  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)
+  }
+  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  
+
+Interaktive Bausteine (Zähler, Charts) kannst du wie gewohnt als **Preact-Komponenten** importieren.

package/templates/magazine/index.data.ts

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

package/templates/magazine/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="de">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazin</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module">
+      import 'preactpress/app'
+    </script>
+  </body>
+</html>

package/templates/magazine/index.mdx

@@ -0,0 +1,13 @@
+---
+title: Startseite
+description: 'Kommentierte Marktlage, Filialisten und ein Blick auf Tech & Logistik — alles statisch aus Markdown und MDX.'
+tags:
+  - Magazin
+  - Startseite
+---
+
+## Kurz kommentiert
+
+Diese Seite ist eine **Demonstration**: Sie zeigt, wie ein Nachrichten- oder Branchenmagazin mit PreactPress als statische Site aussehen kann — inklusive typisierter Teaser aus `index.data.ts` und eigenem Layout unter `.preactpress/theme/`.
+
+> Das Layout orientiert sich lose an klassischen Fachmedien (Masthead, Sticky-Navigation, Spalte „In dieser Ausgabe“), ohne eine bestehende Marke nachzubilden.

package/templates/magazine/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "preactpress-magazine-starter",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "preactpress dev",
+    "check": "preactpress check",
+    "build": "preactpress build",
+    "preview": "preactpress preview"
+  },
+  "devDependencies": {
+    "@kamod-ch/preactpress": "file:../..",
+    "typescript": "^5.8.3"
+  }
+}