From 123dd321df330b7961a0c06fa047857aa6f4eb0a Mon Sep 17 00:00:00 2001 From: Dorian Date: Wed, 24 Jun 2026 10:33:49 +0100 Subject: [PATCH] feat: clean extensionless doc URLs + dev specs in simple-doc MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - nginx: try_files adds $uri.html so /dev-doc, /simple-doc, /review-doc resolve to the flat .html files before the SPA fallback (prod). - vite: dev-only middleware mirrors the same rewrite so the clean URLs work under `vite dev` too (no SPA-fallback / router warning). - simple-doc: add hex values inline + a "Quick reference (for the developer)" swatch grid (full palette + category colours) and type/ button/divider specs — kept layman. Cross-links now use /dev-doc. dist/ rebuilt. Co-Authored-By: Claude Opus 4.8 (1M context) --- dist/simple-doc.html | 64 ++++++++++++++++++++++++++++++++++++------ nginx.conf | 5 +++- public/simple-doc.html | 64 ++++++++++++++++++++++++++++++++++++------ vite.config.js | 22 ++++++++++++++- 4 files changed, 135 insertions(+), 20 deletions(-) diff --git a/dist/simple-doc.html b/dist/simple-doc.html index 7ad2bf3..b1299bd 100644 --- a/dist/simple-doc.html +++ b/dist/simple-doc.html @@ -112,6 +112,30 @@ .cat { display: flex; align-items: center; gap: 12px; font-size: 14px; } .cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); } + code { + font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; + font-size: 0.86em; + background: var(--cream); + border: 1px solid var(--line); + border-radius: 5px; + padding: 1px 6px; + color: var(--brand); + white-space: nowrap; + } + + /* Developer reference — swatch cards + spec rows */ + .refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } + .refcard { + display: flex; align-items: center; gap: 12px; + background: var(--paper); border: 1px solid var(--line); + border-radius: 10px; padding: 10px 12px; + } + .refcard .chip { width: 34px; height: 34px; border-radius: 7px; flex: none; border: 1px solid rgba(0,0,0,.08); } + .refcard .role { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); } + .refcard .hex { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); } + .specs { margin: 14px 0 0; font-size: 14px; color: var(--ink); } + .specs li { margin-bottom: 6px; } + /* "Waiting on you" — crimson accent */ .group.waiting > h2 { border-bottom-color: var(--crimson); } .group.waiting ul.items li { border-left-color: var(--crimson); } @@ -138,7 +162,7 @@

Plain-Language Guide

Kaiser-Natron® —
what changed, in plain words

-

A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc.html — this is the same story without the code.

+

A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc — this is the same story without the code.

Updated 24 June 2026 · Branch feat/shop-category-sections

@@ -152,9 +176,9 @@

Look & feel

    -
  • Colours. The site now uses the official brand palette: the deep brand green, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.
    • -
  • Backgrounds are white. Pages sit on clean white instead of the old tinted panels, so products and text stand out.
    • -
  • Brand typeface. Headlines and text use the brand's own "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.
    • +
  • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
    • +
  • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
    • +
  • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
  • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
  • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
  • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
    • @@ -189,10 +213,10 @@
  • Four colour-coded sections. The shop is now organised by what you're doing, each with its own brand colour:
    -
    Küche / Kitchen — lime green (baking, cooking, digestion)
    -
    Reinigung / Clean — grapefruit red (household cleaning)
    -
    Wäsche / Wash — plum (laundry & textile care)
    -
    Pflege / Care — orange (bath, body)
    +
    Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
    +
    Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
    +
    Wäsche / Wash — plum #c15a7e (laundry & textile care)
    +
    Pflege / Care — orange #f1864c (bath, body)
  • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
    • @@ -210,6 +234,28 @@
+
+

Quick reference (for the developer)

+

The exact values, in case they're handy — nothing you need to act on.

+
+
Brand green#006548
+
Crimson — buttons/CTAs#cc0230
+
Mint — link hover#6eceb2
+
Yellow — emphasis on green#e9c84b
+
White — backgrounds#ffffff
+
Kitchen — lime#c6d47d
+
Clean — grapefruit#eb5a61
+
Wash — plum#c15a7e
+
Care — orange#f1864c
+
+
    +
  • Typeface: Zeitung (self-hosted .woff2), one family for headlines and body.
    • +
  • Buttons: fully rounded "pill" shape; crimson fill with white text.
    • +
  • Dividers: straight diagonal edges between coloured bands (no waves).
    • +
  • Full technical detail: see /dev-doc.
    • +
+
+

Still waiting on a decision (content owner)

    @@ -222,7 +268,7 @@
    Kaiser-Natron® — plain-language change guide - Detailed version: /dev-doc.html + Detailed version: /dev-doc
    diff --git a/nginx.conf b/nginx.conf index 077d701..0edb744 100644 --- a/nginx.conf +++ b/nginx.conf @@ -55,7 +55,10 @@ server { } location / { - try_files $uri $uri/ /index.html; + # $uri.html lets the static handoff docs resolve at clean, + # extensionless URLs (/dev-doc → /dev-doc.html) before the SPA + # history fallback takes over for app routes. + try_files $uri $uri.html $uri/ /index.html; } # Don't serve dotfiles that somehow end up in the doc root. diff --git a/public/simple-doc.html b/public/simple-doc.html index 7ad2bf3..b1299bd 100644 --- a/public/simple-doc.html +++ b/public/simple-doc.html @@ -112,6 +112,30 @@ .cat { display: flex; align-items: center; gap: 12px; font-size: 14px; } .cat .sw { width: 26px; height: 18px; border-radius: 4px; flex: none; border: 1px solid rgba(0,0,0,.06); } + code { + font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; + font-size: 0.86em; + background: var(--cream); + border: 1px solid var(--line); + border-radius: 5px; + padding: 1px 6px; + color: var(--brand); + white-space: nowrap; + } + + /* Developer reference — swatch cards + spec rows */ + .refgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; } + .refcard { + display: flex; align-items: center; gap: 12px; + background: var(--paper); border: 1px solid var(--line); + border-radius: 10px; padding: 10px 12px; + } + .refcard .chip { width: 34px; height: 34px; border-radius: 7px; flex: none; border: 1px solid rgba(0,0,0,.08); } + .refcard .role { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink); } + .refcard .hex { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); } + .specs { margin: 14px 0 0; font-size: 14px; color: var(--ink); } + .specs li { margin-bottom: 6px; } + /* "Waiting on you" — crimson accent */ .group.waiting > h2 { border-bottom-color: var(--crimson); } .group.waiting ul.items li { border-left-color: var(--crimson); } @@ -138,7 +162,7 @@

    Plain-Language Guide

    Kaiser-Natron® —
    what changed, in plain words

    -

    A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc.html — this is the same story without the code.

    +

    A non-technical summary of the visual and content changes to the site. The detailed developer version lives at /dev-doc — this is the same story without the code.

    Updated 24 June 2026 · Branch feat/shop-category-sections

    @@ -152,9 +176,9 @@

    Look & feel

      -
    • Colours. The site now uses the official brand palette: the deep brand green, a crimson red for anything clickable (buttons, "add to cart"), and a soft mint that lights up links when you hover them.
      • -
    • Backgrounds are white. Pages sit on clean white instead of the old tinted panels, so products and text stand out.
      • -
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, loaded directly by the site (not borrowed from Google), so it always looks the same and loads fast.
      • +
    • Colours. The site now uses the official brand palette: the deep brand green #006548, a crimson red #cc0230 for anything clickable (buttons, "add to cart"), and a soft mint #6eceb2 that lights up links when you hover them. The warm yellow #e9c84b is now used only as emphasis text on green. (Full reference at the bottom.)
      • +
    • Backgrounds are white. Pages sit on clean white #ffffff instead of the old tinted panels, so products and text stand out.
      • +
    • Brand typeface. Headlines and text use the brand's own "Zeitung" font, self-hosted by the site (a local .woff2 file, not borrowed from Google), so it always looks the same and loads fast. One family for everything — headlines and body.
    • Section dividers are diagonal. The wavy lines between coloured bands were replaced with clean diagonal edges.
    • Buttons. All buttons share one consistent style — crimson with white text. The big "call to action" buttons on hero banners stand out clearly.
    • Removed the yellow highlight. Headlines no longer use the old yellow accent; they're cleaner now.
      • @@ -189,10 +213,10 @@
    • Four colour-coded sections. The shop is now organised by what you're doing, each with its own brand colour:
      -
      Küche / Kitchen — lime green (baking, cooking, digestion)
      -
      Reinigung / Clean — grapefruit red (household cleaning)
      -
      Wäsche / Wash — plum (laundry & textile care)
      -
      Pflege / Care — orange (bath, body)
      +
      Küche / Kitchen — lime green #c6d47d (baking, cooking, digestion)
      +
      Reinigung / Clean — grapefruit red #eb5a61 (household cleaning)
      +
      Wäsche / Wash — plum #c15a7e (laundry & textile care)
      +
      Pflege / Care — orange #f1864c (bath, body)
    • Banners. Each section opens with a full-width colour banner showing its star product, with an "add to cart" and a "learn more" button.
      • @@ -210,6 +234,28 @@
    +
    +

    Quick reference (for the developer)

    +

    The exact values, in case they're handy — nothing you need to act on.

    +
    +
    Brand green#006548
    +
    Crimson — buttons/CTAs#cc0230
    +
    Mint — link hover#6eceb2
    +
    Yellow — emphasis on green#e9c84b
    +
    White — backgrounds#ffffff
    +
    Kitchen — lime#c6d47d
    +
    Clean — grapefruit#eb5a61
    +
    Wash — plum#c15a7e
    +
    Care — orange#f1864c
    +
    +
      +
    • Typeface: Zeitung (self-hosted .woff2), one family for headlines and body.
      • +
    • Buttons: fully rounded "pill" shape; crimson fill with white text.
      • +
    • Dividers: straight diagonal edges between coloured bands (no waves).
      • +
    • Full technical detail: see /dev-doc.
      • +
    +
    +

    Still waiting on a decision (content owner)

      @@ -222,7 +268,7 @@
      Kaiser-Natron® — plain-language change guide - Detailed version: /dev-doc.html + Detailed version: /dev-doc
      diff --git a/vite.config.js b/vite.config.js index e75cdad..4c47cc3 100644 --- a/vite.config.js +++ b/vite.config.js @@ -3,8 +3,28 @@ import vue from '@vitejs/plugin-vue' import tailwindcss from '@tailwindcss/vite' import { fileURLToPath, URL } from 'node:url' +// Static handoff docs live as flat files in public/ (dev-doc.html etc.). +// In production nginx rewrites the extensionless path to .html +// (try_files $uri $uri.html …). This dev-only middleware mirrors that so +// the same clean URLs (/dev-doc, /simple-doc, /review-doc) work under +// `vite dev` instead of being swallowed by the SPA history fallback. +const DOC_SLUGS = ['dev-doc', 'simple-doc', 'review-doc'] +function cleanDocUrls() { + return { + name: 'clean-doc-urls', + configureServer(server) { + server.middlewares.use((req, _res, next) => { + const path = (req.url || '').split('?')[0].replace(/\/+$/, '') + const slug = path.replace(/^\/+/, '') + if (DOC_SLUGS.includes(slug)) req.url = `/${slug}.html` + next() + }) + }, + } +} + export default defineConfig({ - plugins: [vue(), tailwindcss()], + plugins: [cleanDocUrls(), vue(), tailwindcss()], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)),