m/onepager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: i18n template infrastructure — render.sh reads _en vars, emits data-de/data-en

Browse Source 
Phase 1 of i18n rollout:
- render.sh: i18n_attrs helper, reads *_en fields from site.yaml, emits
  data-de/data-en attributes on title, description, role, tagline, cta,
  tags, section titles, card titles/descriptions, bio, content
- base.html: i18n.js auto-included, title/description get i18n attrs
- All 6 templates: translatable elements get i18n attr placeholders,
  footer toggle button with machine-translation disclaimer
- ichbinotto.de pilot: added machine-translation disclaimer per m's request

Templated sites can now be translated by adding _en fields to site.yaml.
This commit is contained in:
m
2026-04-01 12:49:34 +02:00
parent 883904318e
commit 846fc04444
9 changed files with 101 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
templates/base.html
View File

@@ -3,8 +3,8 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{title}}</title>
<meta name="description" content="{{description}}">
<title{{title_i18n}}>{{title}}</title>
<meta name="description" content="{{description}}"{{description_i18n}}>
<meta name="robots" content="index, follow">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>{{favicon}}</text></svg>">
{{fonts}}
@@ -18,5 +18,6 @@
</head>
<body class="noise-overlay">
{{body}}
<script src="/shared/i18n.js"></script>
</body>
</html>

9
templates/editorial.html
View File

@@ -70,14 +70,17 @@
{{template_body_start}}
<div class="container fade-in">
<div class="editorial-header">
<h1>{{title}}</h1>
<div class="subtitle">{{tagline}}</div>
<h1{{title_i18n}}>{{title}}</h1>
<div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
</div>
<div class="editorial-body">
<div class="editorial-body"{{content_i18n}}>
{{content_html}}
</div>
<div class="footer">
{{name}} &mdash; {{year}}
<br>
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}

8
templates/fun.html
View File

@@ -56,8 +56,12 @@
{{template_body_start}}
<div class="container fade-in">
<div class="emoji-big">{{emoji}}</div>
<h1>{{title}}</h1>
<div class="subtitle">{{tagline}}</div>
<h1{{title_i18n}}>{{title}}</h1>
<div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
{{sections_html}}
<div style="text-align:center;margin-top:2rem;">
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}

8
templates/minimal.html
View File

@@ -30,7 +30,11 @@
{{template_css_end}}
{{template_body_start}}
<div class="container fade-in">
<h1>{{title}}</h1>
<div class="subtitle">{{tagline}}</div>
<h1{{title_i18n}}>{{title}}</h1>
<div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
<div style="margin-top:2rem;">
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}

7
templates/person-dark.html
View File

@@ -139,8 +139,8 @@
<div class="hero fade-in">
<div class="initials">{{initials}}</div>
<h1>{{name}}</h1>
<div class="role">{{role}}</div>
<div class="tagline">{{tagline}}</div>
<div class="role"{{role_i18n}}>{{role}}</div>
<div class="tagline"{{tagline_i18n}}>{{tagline}}</div>
</div>
<div class="tags fade-in stagger-1">
@@ -151,6 +151,9 @@
<div class="footer fade-in stagger-5">
&copy; {{year}} {{name}}
<br>
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}

7
templates/person-light.html
View File

@@ -141,8 +141,8 @@
<div class="hero fade-in">
<div class="initials">{{initials}}</div>
<h1>{{name}}</h1>
<div class="role">{{role}}</div>
<div class="tagline">{{tagline}}</div>
<div class="role"{{role_i18n}}>{{role}}</div>
<div class="tagline"{{tagline_i18n}}>{{tagline}}</div>
</div>
<div class="tags fade-in stagger-1">
@@ -153,6 +153,9 @@
<div class="footer fade-in stagger-5">
&copy; {{year}} {{name}}
<br>
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}

9
templates/product-dark.html
View File

@@ -95,18 +95,21 @@
{{template_body_start}}
<div class="container">
<div class="hero fade-in">
<h1>{{title}}</h1>
<div class="subtitle">{{tagline}}</div>
<h1{{title_i18n}}>{{title}}</h1>
<div class="subtitle"{{tagline_i18n}}>{{tagline}}</div>
</div>
{{sections_html}}
<div class="cta-section fade-in stagger-4">
<a href="{{cta_href}}" class="cta">{{cta_text}}</a>
<a href="{{cta_href}}" class="cta"{{cta_i18n}}>{{cta_text}}</a>
</div>
<div class="footer fade-in stagger-5">
&copy; {{year}} {{name}}
<br>
<button data-i18n-toggle title="Maschinell übersetzt / Machine-translated — German is the original." style="background:none;border:1px solid currentColor;color:var(--text-dimmed,#888);font-size:0.65rem;letter-spacing:0.1em;padding:4px 12px;border-radius:4px;cursor:pointer;margin-top:12px;opacity:0.6;">EN</button>
<br><small data-de="Maschinell übersetzt" data-en="Machine-translated" style="color:var(--text-dimmed,#888);font-size:0.6rem;opacity:0.5;">Maschinell übersetzt</small>
</div>
</div>
{{template_body_end}}