diff --git a/docs/plans/2026-05-20-praxis-visual-parity.md b/docs/plans/2026-05-20-praxis-visual-parity.md new file mode 100644 index 0000000..2b065a4 --- /dev/null +++ b/docs/plans/2026-05-20-praxis-visual-parity.md @@ -0,0 +1,1064 @@ +# Praxis Visual Parity Pass — Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Make the Zola staging site visually match the live Grav site by restoring the markup contracts the theme CSS expects (footer, section-title pattern, single-page-title banner, navbar logo, service-card/team-preview markup). + +**Architecture:** Add two Tera macros (`section_title`, `page_title`) for patterns used on home and subpages, one partial (`footer.html`) reading from `config.extra`, one new page template (`contact.html`). Modify five existing templates and two content files. No SCSS changes — markup conforms to the existing theme. + +**Tech Stack:** Zola 0.22.x, Tera templates, TOML config, Bootstrap 3 grid (verbatim from theme). + +**Spec reference:** `docs/specs/2026-05-20-praxis-visual-parity-design.md` + +--- + +## File Structure + +**New files:** +- `static/images/logo.png` — copied from `orig/user/themes/praxis/img/Logo_Praxis_white_H110.png` +- `templates/macros/section_title.html` — `section_title(title, anchor="")` macro +- `templates/macros/page_title.html` — `page_title(title)` macro +- `templates/partials/footer.html` — three-column footer + copyright bar +- `templates/contact.html` — page template reading address/hours from `config.extra` + +**Modified files:** +- `config.toml` — add `[extra]` keys: `email`, `address_street`, `address_zip_city`, `keywords`, `[[extra.opening_hours]]` array +- `templates/base.html` — include footer partial +- `templates/partials/head.html` — title format + keywords meta +- `templates/partials/navbar.html` — logo image + Home link + active-state check +- `templates/section.html` — use page_title and section_title macros (with anchor) +- `templates/page.html` — use page_title macro +- `templates/index.html` — section_title macros, gray-bg class, service-card thumbnail markup, team-preview figure markup, news section wrapper +- `content/news.md` — fix `...` table tag mismatch +- `content/contact.md` — strip hardcoded address/phone/email (moves to config), switch template + +**Validation per task:** +- `zola build` must succeed (no template errors) +- `grep` the rendered output for expected class names / structure where applicable + +--- + +## Task 1: Copy logo image asset + +**Files:** +- Create: `static/images/logo.png` (binary, copied from `orig/`) + +- [ ] **Step 1: Copy the logo PNG into static assets** + +```bash +cp orig/user/themes/praxis/img/Logo_Praxis_white_H110.png static/images/logo.png +``` + +- [ ] **Step 2: Verify the file exists and is non-zero** + +```bash +ls -l static/images/logo.png +``` +Expected: a non-zero PNG file. + +- [ ] **Step 3: Build to confirm asset is picked up** + +```bash +zola build +test -f public/images/logo.png && echo OK +``` +Expected: `OK`. + +- [ ] **Step 4: Commit** + +```bash +git add static/images/logo.png +git commit -m "feat: add practice logo asset" +``` + +--- + +## Task 2: Extend config.toml with footer/contact data + +**Files:** +- Modify: `config.toml` (add to existing `[extra]` block) + +- [ ] **Step 1: Append new extra keys** + +After the existing `fax = "0202-730017"` line in `[extra]`, append: + +```toml +email = "info@praxis-am-lienhardplatz.de" +phone_e164 = "+49202730738" +address_street = "Kaiserstraße 23" +address_zip_city = "42329 Wuppertal" +keywords = "Arzt, Hausarzt, Allgemeinmedizin, Innere Medizin, Internist, Kardiologie, Praxis, Gemeinschaftspraxis, Vohwinkel, Lienhardplatz, Krey, Riemann, Malyga, Corona, COVID-19, Corona-Test" + +[[extra.opening_hours]] +label = "Montag-Freitag" +time = "08:00-12:00" + +[[extra.opening_hours]] +label = "Montag, Dienstag, Donnerstag" +time = "15:00-18:00" +``` + +- [ ] **Step 2: Verify build still succeeds** + +```bash +zola build +``` +Expected: `Done in ...ms.` (no errors). + +- [ ] **Step 3: Commit** + +```bash +git add config.toml +git commit -m "feat: add footer/contact data to config extra" +``` + +--- + +## Task 3: Create section_title macro + +**Files:** +- Create: `templates/macros/section_title.html` + +- [ ] **Step 1: Write the macro** + +```html +{% macro section_title(title, anchor="") %} +
+
+ {%- if anchor %} +
+

{{ title }}

+
+ {%- else %} +

{{ title }}

+ {%- endif %} + +
+
+{% endmacro %} +``` + +- [ ] **Step 2: Verify the file syntax by referencing it from index.html temporarily (sanity check)** + +Add at top of `templates/index.html`: +```html +{% import "macros/section_title.html" as section_title %} +``` + +Then run `zola build`. Expected: succeeds. Revert the temporary edit before commit; final usage comes in later tasks. + +```bash +git checkout templates/index.html +``` + +- [ ] **Step 3: Commit** + +```bash +git add templates/macros/section_title.html +git commit -m "feat: add section_title macro with optional anchor" +``` + +--- + +## Task 4: Create page_title macro + +**Files:** +- Create: `templates/macros/page_title.html` + +- [ ] **Step 1: Write the macro** + +```html +{% macro page_title(title) %} +
+
+

{{ title }}

+
+
+{% endmacro %} +``` + +- [ ] **Step 2: Build to confirm no syntax error** + +```bash +zola build +``` +Expected: succeeds. + +- [ ] **Step 3: Commit** + +```bash +git add templates/macros/page_title.html +git commit -m "feat: add page_title macro for subpage banner" +``` + +--- + +## Task 5: Create footer partial + +**Files:** +- Create: `templates/partials/footer.html` + +- [ ] **Step 1: Write the partial** + +```html + +``` + +- [ ] **Step 2: Build (footer is not yet included anywhere, so this just checks isolated syntax — build should still succeed)** + +```bash +zola build +``` +Expected: succeeds. + +- [ ] **Step 3: Commit** + +```bash +git add templates/partials/footer.html +git commit -m "feat: add footer partial sourced from config.extra" +``` + +--- + +## Task 6: Include footer in base.html + +**Files:** +- Modify: `templates/base.html` + +- [ ] **Step 1: Insert the footer include before the script block** + +Before the line ``, add: + +```html + {% include "partials/footer.html" %} + +``` + +The final relevant block becomes: +```html + + + + {% include "partials/footer.html" %} + + +``` + +- [ ] **Step 2: Build and verify footer renders on home page** + +```bash +zola build +grep -c 'footer-widget-section' public/index.html +``` +Expected: `1` (one occurrence). + +- [ ] **Step 3: Verify footer renders on a subpage too** + +```bash +grep -c 'footer-widget-section' public/contact/index.html +``` +Expected: `1`. + +- [ ] **Step 4: Commit** + +```bash +git add templates/base.html +git commit -m "feat: include footer partial in base layout" +``` + +--- + +## Task 7: Update head.html — title format and keywords meta + +**Files:** +- Modify: `templates/partials/head.html` + +- [ ] **Step 1: Replace the title logic** + +Replace lines 1-6 of `templates/partials/head.html`: + +```html +{% if page %} + {% set page_title = page.title %} +{% elif section %} + {% set page_title = section.title %} +{% endif %} +{% if page_title %}{{ page_title | safe }} | {% endif %}{{ config.title | safe }} +``` + +with: + +```html +{%- set is_home = (section and section.path == '/_index.md') -%} +{%- if page %}{% set page_title = page.title %}{% elif not is_home %}{% set page_title = section.title %}{% endif -%} +{%- set site_title = config.title ~ " - " ~ config.extra.doctors -%} +{% if page_title %}{{ page_title | safe }} | {% endif %}{{ site_title | safe }} +``` + +- [ ] **Step 2: Add the keywords meta after the description** + +After the line ``, add: + +```html + +``` + +- [ ] **Step 3: Build and verify title on home is the brand line only (no leading prefix)** + +```bash +zola build +grep '' public/index.html +``` +Expected: +``` +<title>Praxis am Lienhardplatz - Dr. Oliver Riemann, Dr. Angela Krey, Christian Malyga +``` + +- [ ] **Step 4: Verify subpage title has page prefix** + +```bash +grep '' public/services/index.html +``` +Expected: +``` +<title>Leistungen | Praxis am Lienhardplatz - Dr. Oliver Riemann, Dr. Angela Krey, Christian Malyga +``` + +- [ ] **Step 5: Verify keywords meta present** + +```bash +grep 'name="keywords"' public/index.html +``` +Expected: one match containing "Arzt, Hausarzt, ...". + +- [ ] **Step 6: Commit** + +```bash +git add templates/partials/head.html +git commit -m "feat: home title brand line, subpage prefix, keywords meta" +``` + +--- + +## Task 8: Update navbar.html — logo image, Home link, active state + +**Files:** +- Modify: `templates/partials/navbar.html` + +- [ ] **Step 1: Replace the navbar-brand line** + +Replace line 11: +```html + {{ config.title }} +``` + +with: +```html + + {{ config.title }} + +``` + +- [ ] **Step 2: Add Home as the first menu item** + +Replace lines 14-16 (the opening of the nav list): +```html +