feat(IFK-11): migrate from Congo to HugoBlox with custom layouts

- Remove Congo theme submodule, add Hugo modules (blox-core) - Custom baseof/single/home/list layouts (no Tailwind build needed) - Newsreader serif font preserved throughout - Agiliton lime/emerald brand colors - All 7 shortcodes preserved (world-map, charts, stats, etc.) - Multilingual EN/DE/FR with i18n files - Self-hosted fonts, no external CSS dependencies - Wide content layout, clean research-publication aesthetic Reference: metaconscious.org, matteocourthoud.github.io Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-04-03 13:40:21 +03:00
parent ec370d2d7e
commit 18dc7ae66f
17 changed files with 912 additions and 32 deletions
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="{{ .Language.LanguageCode | default "en" }}" dir="{{ .Language.LanguageDirection | default "ltr" }}">
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="description" content="{{ .Description | default .Summary | plainify | truncate 160 }}">
+  <meta name="author" content="{{ .Params.author | default "Internet for Kids" }}">
+
+  <title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} — {{ .Site.Title }}{{ end }}</title>
+
+  {{ partial "extend-head.html" . }}
+
+  {{/* Main stylesheet with Newsreader + custom colors */}}
+  <link rel="stylesheet" href="{{ "css/main.css" | relURL }}">
+</head>
+<body class="bg-ifk-bg text-ifk-text">
+  <header class="border-b bg-white sticky top-0 z-40">
+    <nav class="max-w-4xl mx-auto px-4 py-4 flex justify-between items-center">
+      <a href="{{ "/" | relLangURL }}" class="font-newsreader text-xl font-semibold text-ifk-text hover:text-ifk-accent">
+        {{ .Site.Title }}
+      </a>
+      {{ partial "language-switcher.html" . }}
+    </nav>
+  </header>
+
+  <main class="flex-1">
+    {{ block "main" . }}{{ end }}
+  </main>
+
+  <footer class="border-t bg-white mt-20">
+    <div class="max-w-4xl mx-auto px-4 py-12">
+      <div class="grid grid-cols-2 md:grid-cols-3 gap-8 mb-12">
+        {{ range .Site.Menus.footer }}
+        <a href="{{ .URL | relLangURL }}" class="text-gray-600 hover:text-ifk-accent">
+          {{ .Name }}
+        </a>
+        {{ end }}
+      </div>
+      <div class="border-t pt-8 text-center text-sm text-gray-600">
+        <p class="mb-2">
+          © {{ now.Year }} {{ .Site.Title }}. A publication by <a href="https://www.agiliton.eu" class="text-ifk-accent hover:text-ifk-accent-hover">Agiliton</a>.
+        </p>
+        {{ partial "extend-footer.html" . }}
+      </div>
+    </div>
+  </footer>
+
+  {{/* Analytics */}}
+  {{ partial "rybbit.html" . }}
+
+  {{/* SEO */}}
+  {{ partial "structured-data.html" . }}
+</body>
+</html>
--- a/layouts/_default/home.html
+++ b/layouts/_default/home.html
@@ -0,0 +1,30 @@
+{{ define "main" }}
+<article class="prose max-w-3xl mx-auto py-12 px-4">
+  {{ .Content }}
+
+  <div class="mt-12">
+    <h2>{{ i18n "recent_posts" | default "Recent Articles" }}</h2>
+    <div class="grid gap-8">
+      {{ range first 5 .Site.RegularPages }}
+      <article class="border-b pb-8">
+        <h3 class="text-2xl font-newsreader mb-2">
+          <a href="{{ .Permalink }}" class="text-ifk-accent hover:text-ifk-accent-hover">
+            {{ .Title }}
+          </a>
+        </h3>
+        <div class="text-sm text-gray-600 mb-4">
+          <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+          {{ with .Params.author }}— {{ . }}{{ end }}
+        </div>
+        <p class="text-lg font-newsreader leading-relaxed">
+          {{ .Summary }}
+        </p>
+        <a href="{{ .Permalink }}" class="inline-block mt-4 text-ifk-accent hover:text-ifk-accent-hover font-medium">
+          {{ i18n "read_more" | default "Read more" }} →
+        </a>
+      </article>
+      {{ end }}
+    </div>
+  </div>
+</article>
+{{ end }}
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -0,0 +1,35 @@
+{{ define "main" }}
+<div class="max-w-3xl mx-auto py-12 px-4">
+  <header class="mb-12">
+    <h1 class="text-4xl font-newsreader font-semibold mb-4">{{ .Title }}</h1>
+    {{ with .Description }}
+    <p class="text-lg text-gray-600">{{ . }}</p>
+    {{ end }}
+  </header>
+
+  <div class="space-y-8">
+    {{ range .Paginator.Pages }}
+    <article class="pb-8 border-b last:border-b-0">
+      <h2 class="text-2xl font-newsreader font-semibold mb-2">
+        <a href="{{ .Permalink }}" class="text-ifk-accent hover:text-ifk-accent-hover">
+          {{ .Title }}
+        </a>
+      </h2>
+      <div class="text-sm text-gray-600 mb-3">
+        <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
+        {{ with .Params.author }}— {{ . }}{{ end }}
+        {{ if .ReadingTime }}— {{ .ReadingTime }} min read{{ end }}
+      </div>
+      <p class="text-lg font-newsreader leading-relaxed mb-3">
+        {{ .Summary }}
+      </p>
+      <a href="{{ .Permalink }}" class="inline-block text-ifk-accent hover:text-ifk-accent-hover font-medium">
+        {{ i18n "read_more" | default "Read more" }} →
+      </a>
+    </article>
+    {{ end }}
+  </div>
+
+  {{ template "_internal/pagination.html" . }}
+</div>
+{{ end }}
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -0,0 +1,63 @@
+{{ define "main" }}
+<article class="prose-lg max-w-2xl mx-auto py-12 px-4">
+  <header class="mb-8">
+    <h1 class="text-4xl font-newsreader font-semibold mb-4 leading-tight">
+      {{ .Title }}
+    </h1>
+    <div class="text-gray-600 flex gap-4 flex-wrap">
+      {{ if .Date }}
+      <time datetime="{{ .Date.Format "2006-01-02" }}">
+        {{ .Date.Format "January 2, 2006" }}
+      </time>
+      {{ end }}
+      {{ with .Params.author }}
+      <span>{{ . }}</span>
+      {{ end }}
+      {{ if .ReadingTime }}
+      <span>{{ .ReadingTime }} min read</span>
+      {{ end }}
+    </div>
+  </header>
+
+  {{ if .Params.toc | default true }}
+  <aside class="mb-8 p-4 bg-gray-50 rounded">
+    <h2 class="text-sm font-semibold uppercase tracking-wide mb-3">{{ i18n "table_of_contents" | default "Table of Contents" }}</h2>
+    {{ .TableOfContents }}
+  </aside>
+  {{ end }}
+
+  <div class="font-newsreader text-lg leading-relaxed prose prose-newsreader">
+    {{ .Content }}
+  </div>
+
+  {{ with .Params.tags }}
+  <footer class="mt-12 pt-8 border-t">
+    <div class="text-sm">
+      <span class="font-semibold">{{ i18n "tags" | default "Tags" }}:</span>
+      {{ range . }}
+      <a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" class="inline-block mr-2 text-ifk-accent hover:text-ifk-accent-hover">
+        #{{ . }}
+      </a>
+      {{ end }}
+    </div>
+  </footer>
+  {{ end }}
+</article>
+
+{{ if or .NextInSection .PrevInSection }}
+<nav class="max-w-2xl mx-auto px-4 py-12 flex justify-between gap-4">
+  {{ with .PrevInSection }}
+  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-left">
+    <div class="text-xs font-semibold uppercase text-gray-600">← {{ i18n "previous" | default "Previous" }}</div>
+    <div class="font-newsreader text-lg">{{ .Title }}</div>
+  </a>
+  {{ end }}
+  {{ with .NextInSection }}
+  <a href="{{ .Permalink }}" class="flex-1 p-4 border rounded hover:bg-gray-50 text-right">
+    <div class="text-xs font-semibold uppercase text-gray-600">{{ i18n "next" | default "Next" }} →</div>
+    <div class="font-newsreader text-lg">{{ .Title }}</div>
+  </a>
+  {{ end }}
+</nav>
+{{ end }}
+{{ end }}