fix: nav menu, language dropdown, sidebar TOC + recent articles
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Christian Gick
@@ -1,63 +1,102 @@
|
||||
{{ 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>
|
||||
<div style="max-width:64rem;margin:0 auto;padding:3rem 1rem;display:grid;grid-template-columns:1fr 240px;gap:3rem">
|
||||
|
||||
{{/* Main article column */}}
|
||||
<article>
|
||||
<header style="margin-bottom:2rem">
|
||||
<h1 style="font-family:var(--ifk-font);font-size:2.75rem;font-weight:600;line-height:1.15;letter-spacing:-0.01em;margin-bottom:1rem">
|
||||
{{ .Title }}
|
||||
</h1>
|
||||
<div style="color:#6b7280;font-family:system-ui,-apple-system,sans-serif;font-size:0.95rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center">
|
||||
{{ 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>
|
||||
|
||||
{{ with .Params.tags }}
|
||||
<div style="margin-top:0.75rem;display:flex;gap:0.5rem;flex-wrap:wrap">
|
||||
{{ range . }}
|
||||
<a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}" style="font-family:system-ui,sans-serif;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.05em;color:var(--ifk-accent);text-decoration:none;border:1px solid #e5e7eb;padding:0.2rem 0.6rem;border-radius:4px">
|
||||
{{ . }}
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</header>
|
||||
|
||||
<div class="article-body" style="font-family:var(--ifk-font);font-size:1.375rem;line-height:1.65">
|
||||
{{ .Content }}
|
||||
</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">
|
||||
#{{ . }}
|
||||
{{ if or .NextInSection .PrevInSection }}
|
||||
<nav style="margin-top:3rem;padding-top:2rem;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;gap:1rem">
|
||||
{{ with .PrevInSection }}
|
||||
<a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text)">
|
||||
<div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">← {{ i18n "previous" | default "Previous" }}</div>
|
||||
<div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</div>
|
||||
</footer>
|
||||
{{ end }}
|
||||
</article>
|
||||
{{ with .NextInSection }}
|
||||
<a href="{{ .Permalink }}" style="flex:1;padding:1rem;border:1px solid #e5e7eb;border-radius:6px;text-decoration:none;color:var(--ifk-text);text-align:right">
|
||||
<div style="font-size:0.75rem;font-family:system-ui,sans-serif;text-transform:uppercase;color:#6b7280;margin-bottom:0.25rem">{{ i18n "next" | default "Next" }} →</div>
|
||||
<div style="font-family:var(--ifk-font);font-size:1.1rem">{{ .Title }}</div>
|
||||
</a>
|
||||
{{ end }}
|
||||
</nav>
|
||||
{{ 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 }}
|
||||
{{/* Sidebar */}}
|
||||
<aside style="font-family:system-ui,-apple-system,sans-serif">
|
||||
{{/* Table of Contents */}}
|
||||
{{ if .TableOfContents }}
|
||||
<div style="position:sticky;top:5rem">
|
||||
<h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-bottom:0.75rem">
|
||||
{{ i18n "table_of_contents" | default "Contents" }}
|
||||
</h3>
|
||||
<div style="font-size:0.85rem;line-height:1.7;border-left:2px solid #e5e7eb;padding-left:0.75rem">
|
||||
{{ .TableOfContents }}
|
||||
</div>
|
||||
|
||||
{{/* Recent articles */}}
|
||||
{{ $pages := where .Site.RegularPages "Section" .Section }}
|
||||
{{ $recent := first 5 $pages }}
|
||||
{{ if gt (len $recent) 1 }}
|
||||
<h3 style="font-size:0.75rem;text-transform:uppercase;letter-spacing:0.08em;color:#6b7280;font-weight:600;margin-top:2rem;margin-bottom:0.75rem">
|
||||
{{ i18n "recent_articles" | default "Recent" }}
|
||||
</h3>
|
||||
<div style="font-size:0.85rem;line-height:1.6">
|
||||
{{ range $recent }}
|
||||
{{ if ne .Permalink $.Permalink }}
|
||||
<a href="{{ .Permalink }}" style="display:block;color:var(--ifk-text);text-decoration:none;padding:0.4rem 0;border-bottom:1px solid #f3f4f6">
|
||||
{{ .Title }}
|
||||
</a>
|
||||
{{ end }}
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</div>
|
||||
{{ end }}
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@media (max-width: 768px) {
|
||||
div[style*="grid-template-columns:1fr 240px"] {
|
||||
display: block !important;
|
||||
}
|
||||
div[style*="grid-template-columns:1fr 240px"] > aside {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{{ end }}
|
||||
|
||||
Reference in New Issue
Block a user