drop <main>, use <article role="main"> — bold landmark structure

body direct children: <nav>, <header>, <article role="main">, <footer>
- <nav>: site navigation (own landmark)
- <header>: page identity — title, author, date, metadata
- <article role="main">: content (screen reader gets landmark via role)
- <footer>: site footer

No <main> wrapper. Fewer tags, clearer signal.
Header block defined per-layout (prose gets eyebrow/date, docs gets hgroup).
Content block defined per-layout (docs adds sidebar <nav> + <aside> TOC).
This commit is contained in:
Vigilio Desto 2026-04-10 20:33:25 +02:00
parent 169374e2fd
commit c2261bfc9f
Signed by: vigilio
GPG key ID: 159D6AD58C8E55E9
7 changed files with 291 additions and 357 deletions

View file

@ -4,10 +4,9 @@
{{- partial "head.html" . -}} {{- partial "head.html" . -}}
</head> </head>
<body> <body>
<header> {{ partial "nav.html" . }}
{{ partial "nav.html" . }} {{ block "header" . }}{{ end }}
</header> {{ block "content" . }}{{ end }}
{{ block "main" . }}{{ end }}
<footer> <footer>
<small><a href="/">{{ .Site.Title }}</a> · {{ now.Format "2006" }}</small> <small><a href="/">{{ .Site.Title }}</a> · {{ now.Format "2006" }}</small>
</footer> </footer>

View file

@ -1,26 +1,24 @@
{{ define "main" }} {{ define "header" }}
<main> <header>
<article data-layout="prose"> <h1>{{ .Title }}</h1>
{{ with .Description }}<p>{{ . }}</p>{{ end }}
<header> </header>
<h1>{{ .Title }}</h1> {{ end }}
{{ with .Description }}<p>{{ . }}</p>{{ end }}
</header> {{ define "content" }}
<article role="main">
<section> <section>
{{ range .Pages }} {{ range .Pages }}
<article> <article>
<header> <header>
<h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2> <h2><a href="{{ .Permalink }}">{{ .Title }}</a></h2>
<p data-text="dim"> <p data-text="dim">
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2006" }}</time> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2006" }}</time>
</p> </p>
</header> </header>
{{ with .Summary }}<p>{{ . }}</p>{{ end }} {{ with .Summary }}<p>{{ . }}</p>{{ end }}
</article> </article>
{{ end }} {{ end }}
</section> </section>
</article>
</article>
</main>
{{ end }} {{ end }}

View file

@ -1,25 +1,24 @@
{{ define "main" }} {{ define "header" }}
<main> <header>
<article data-layout="prose"> <hgroup>
{{ with .Params.eyebrow }}<p data-text="eyebrow">{{ . }}</p>{{ end }}
<header> <h1>{{ .Title }}</h1>
<hgroup> {{ with .Description }}<p>{{ . }}</p>{{ end }}
{{ with .Params.eyebrow }}<p data-text="eyebrow">{{ . }}</p>{{ end }} </hgroup>
<h1>{{ .Title }}</h1> <p data-text="dim">
{{ with .Description }}<p>{{ . }}</p>{{ end }} <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2006" }}</time>
</hgroup> {{ with .Params.author }} · {{ . }}{{ end }}
<p data-text="dim"> </p>
<time datetime="{{ .Date.Format `2006-01-02` }}">{{ .Date.Format "January 2006" }}</time> </header>
{{ with .Params.author }} · {{ . }}{{ end }} {{ end }}
</p>
</header> {{ define "content" }}
<article role="main">
{{ .Content }} {{ .Content }}
{{ with .Params.footer }}
<footer> <footer>
<small>{{ with .Params.footer }}{{ . }}{{ else }}Published in the dorveille.{{ end }}</small> <small>{{ . }}</small>
</footer> </footer>
{{ end }}
</article> </article>
</main>
{{ end }} {{ end }}

View file

@ -1,107 +1,87 @@
{{ define "main" }} {{ define "header" }}
<main> <header>
<div data-layout="docs"> {{- if .Description -}}
<hgroup>
{{/* ── Left sidebar ─────────────────────────────────────────────── */}} <h1>{{ .Title }}</h1>
<p>{{ .Description }}</p>
<aside> </hgroup>
<nav aria-label="Documentation" data-nav="sidebar"> {{- else -}}
<h1>{{ .Title }}</h1>
{{- $menu := index .Site.Menus "docs" -}} {{- end }}
{{- if $menu -}} </header>
{{ end }}
{{- range $menu -}}
{{- if .HasChildren -}} {{ define "content" }}
<small>{{ .Name }}</small> {{/* Docs sidebar — this is navigation, not an aside */}}
<ul> <nav aria-label="Documentation" data-nav="sidebar">
{{- range .Children -}} {{- $menu := index .Site.Menus "docs" -}}
<li> {{- if $menu -}}
<a href="{{ .URL }}" {{- range $menu -}}
{{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}> {{- if .HasChildren -}}
{{- .Name -}} <small>{{ .Name }}</small>
</a> <ul>
</li> {{- range .Children -}}
{{- end -}} <li>
</ul> <a href="{{ .URL }}"
{{- else -}} {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
<ul> {{- .Name -}}
<li> </a>
<a href="{{ .URL }}" </li>
{{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}> {{- end -}}
{{- .Name -}} </ul>
</a> {{- else -}}
</li> <ul>
</ul> <li>
{{- end -}} <a href="{{ .URL }}"
{{- end -}} {{- if eq (relURL .URL) $.RelPermalink }} aria-current="page"{{ end -}}>
{{- .Name -}}
{{- else -}} </a>
</li>
{{/* Fallback: list sibling pages in the docs section */}} </ul>
{{- with .CurrentSection -}} {{- end -}}
<small>{{ .Title }}</small> {{- end -}}
<ul> {{- else -}}
{{- range .RegularPages -}} {{- with .CurrentSection -}}
<li> <small>{{ .Title }}</small>
<a href="{{ .RelPermalink }}" <ul>
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}> {{- range .RegularPages -}}
{{- .LinkTitle -}} <li>
</a> <a href="{{ .RelPermalink }}"
</li> {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
{{- end -}} {{- .LinkTitle -}}
</ul> </a>
{{- end -}} </li>
{{- end -}}
{{- end -}} </ul>
{{- end -}}
</nav> {{- end -}}
</aside> </nav>
<article role="main">
{{/* ── Main content ──────────────────────────────────────────────── */}} {{ .Content }}
<article> {{- if or .PrevInSection .NextInSection -}}
<footer data-role="prev-next">
{{- if .Description -}} {{- with .NextInSection -}}
<hgroup> <a href="{{ .RelPermalink }}" rel="prev">
<h1>{{ .Title }}</h1> <small>← Previous</small>
<p>{{ .Description }}</p> <span>{{ .LinkTitle }}</span>
</hgroup> </a>
{{- else -}} {{- end -}}
<h1>{{ .Title }}</h1> {{- with .PrevInSection -}}
{{- end }} <a href="{{ .RelPermalink }}" rel="next">
<small>Next →</small>
{{ .Content }} <span>{{ .LinkTitle }}</span>
</a>
{{- if or .PrevInSection .NextInSection -}} {{- end -}}
<div data-role="prev-next"> </footer>
{{- with .NextInSection -}} {{- end -}}
<a href="{{ .RelPermalink }}" rel="prev"> </article>
<small>← Previous</small>
<span>{{ .LinkTitle }}</span> {{- with .TableOfContents -}}
</a> <aside data-toc>
{{- end -}} <small>On this page</small>
{{- with .PrevInSection -}} {{ . }}
<a href="{{ .RelPermalink }}" rel="next"> </aside>
<small>Next →</small> {{- end -}}
<span>{{ .LinkTitle }}</span>
</a>
{{- end -}}
</div>
{{- end -}}
</article>
{{/* ── Right TOC ────────────────────────────────────────────────── */}}
{{- with .TableOfContents -}}
<aside data-toc>
<small>On this page</small>
{{ . }}
</aside>
{{- end -}}
</div>
</main>
{{ end }} {{ end }}

View file

@ -1,32 +1,30 @@
{{ define "title" }}{{ .Site.Title }}{{ end }} {{ define "title" }}{{ .Site.Title }}{{ end }}
{{ define "main" }} {{ define "header" }}
<main> <header>
<article data-layout="prose"> <hgroup>
<h1>{{ .Site.Title }}</h1>
<header> <p>{{ .Site.Params.description | default "An agent-first approach to web generation." }}</p>
<hgroup> </hgroup>
<h1>{{ .Site.Title }}</h1> </header>
<p>{{ .Site.Params.description | default "An agent-first approach to web generation." }}</p> {{ end }}
</hgroup>
</header> {{ define "content" }}
<article role="main">
<section> <section>
<h2>Recent</h2> <h2>Recent</h2>
{{ range first 10 .Site.RegularPages }} {{ range first 10 .Site.RegularPages }}
<article> <article>
<header> <header>
<h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3> <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
<p data-text="dim"> <p data-text="dim">
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2006" }}</time> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2006" }}</time>
{{ with .Params.eyebrow }} · {{ . }}{{ end }} {{ with .Params.eyebrow }} · {{ . }}{{ end }}
</p> </p>
</header> </header>
{{ with .Summary }}<p>{{ . }}</p>{{ end }} {{ with .Summary }}<p>{{ . }}</p>{{ end }}
</article> </article>
{{ end }} {{ end }}
</section> </section>
</article>
</article>
</main>
{{ end }} {{ end }}

View file

@ -1,59 +1,40 @@
{{ define "main" }} {{ define "header" }}
<main> <header>
<article data-paper> <h1>{{ .Title }}</h1>
{{ with .Description }}<p data-abstract>{{ . }}</p>{{ end }}
<header> {{- $hasDate := not .Date.IsZero -}}
{{- $hasAuthor := .Params.author -}}
<h1>{{ .Title }}</h1> {{- if or $hasDate $hasAuthor -}}
<p data-byline>
{{- with .Description -}} {{- if $hasDate -}}
<p data-abstract>{{ . }}</p> <time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
{{- end -}}
{{/* Byline: date and/or author */}}
{{- $hasDate := not .Date.IsZero -}}
{{- $hasAuthor := .Params.author -}}
{{- if or $hasDate $hasAuthor -}}
<p data-byline>
{{- if $hasDate -}}
<time datetime="{{ .Date.Format "2006-01-02" }}">{{ .Date.Format "January 2, 2006" }}</time>
{{- end -}}
{{- if and $hasDate $hasAuthor -}}
<span aria-hidden="true"> · </span>
{{- end -}}
{{- with .Params.author -}}
<span>{{ . }}</span>
{{- end -}}
</p>
{{- end -}}
{{/* Tags */}}
{{- with .GetTerms "tags" -}}
<nav data-role="tag-cloud" aria-label="Tags">
{{- range . -}}
<a href="{{ .Permalink }}" data-tag="{{ .Name }}">{{ .Name }}</a>
{{- end -}}
</nav>
{{- end -}}
</header>
{{ .Content }}
{{/* ── Prev / Next footer ──────────────────────────────────────── */}}
{{- if or .PrevInSection .NextInSection -}}
<footer>
{{- with .PrevInSection -}}
<a href="{{ .RelPermalink }}" rel="prev">← {{ .LinkTitle }}</a>
{{- end -}}
{{- with .NextInSection -}}
<a href="{{ .RelPermalink }}" rel="next">{{ .LinkTitle }} →</a>
{{- end -}}
</footer>
{{- end -}} {{- end -}}
{{- if and $hasDate $hasAuthor }} · {{ end -}}
</article> {{- with .Params.author }}{{ . }}{{ end -}}
</main> </p>
{{- end }}
{{- with .GetTerms "tags" }}
<nav data-role="tag-cloud" aria-label="Tags">
{{- range . }}
<a href="{{ .Permalink }}" data-tag="{{ .Name }}">{{ .Name }}</a>
{{- end }}
</nav>
{{- end }}
</header>
{{ end }}
{{ define "content" }}
<article role="main">
{{ .Content }}
{{- if or .PrevInSection .NextInSection }}
<footer>
{{- with .PrevInSection }}
<a href="{{ .RelPermalink }}" rel="prev">← {{ .LinkTitle }}</a>
{{- end }}
{{- with .NextInSection }}
<a href="{{ .RelPermalink }}" rel="next">{{ .LinkTitle }} →</a>
{{- end }}
</footer>
{{- end }}
</article>
{{ end }} {{ end }}

View file

@ -1,113 +1,92 @@
{{ define "main" }} {{ define "header" }}
<main> <header>
<div data-layout="docs"> {{- if .Description -}}
<hgroup>
{{/* ── Left sidebar ─────────────────────────────────────────────── */}} <h1>{{ .Title }}</h1>
<p>{{ .Description }}</p>
<aside> </hgroup>
{{- $menuName := .Site.Params.vault_menu | default "vault" -}} {{- else -}}
<nav aria-label="Vault documentation" data-nav="sidebar"> <h1>{{ .Title }}</h1>
{{- end }}
{{- $menu := index .Site.Menus $menuName -}} </header>
{{- if $menu -}} {{ end }}
{{- range $menu -}} {{ define "content" }}
{{- if .HasChildren -}} {{/* Vault sidebar navigation */}}
<small>{{ .Name }}</small> <nav aria-label="Vault" data-nav="sidebar">
<ul> {{- $menuName := .Site.Params.vault_menu | default "vault" -}}
{{- range .Children -}} {{- $menu := index .Site.Menus $menuName -}}
<li> {{- if $menu -}}
<a href="{{ .URL }}" {{- range $menu -}}
{{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}> {{- if .HasChildren -}}
{{- .Name -}} <small>{{ .Name }}</small>
</a> <ul>
</li> {{- range .Children -}}
{{- end -}} <li>
</ul> <a href="{{ .URL }}"
{{- else -}} {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
<ul> {{- .Name -}}
<li> </a>
<a href="{{ .URL }}" </li>
{{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}> {{- end -}}
{{- .Name -}} </ul>
</a> {{- else -}}
</li> <ul>
</ul> <li>
{{- end -}} <a href="{{ .URL }}"
{{- end -}} {{- if $.IsMenuCurrent $menuName . }} aria-current="page"{{ end -}}>
{{- .Name -}}
{{- else -}} </a>
</li>
{{/* Fallback: list direct pages of the current section */}} </ul>
{{- with .CurrentSection -}} {{- end -}}
<small>{{ .Title }}</small> {{- end -}}
<ul> {{- else -}}
{{- range .RegularPages -}} {{- with .CurrentSection -}}
<li> <small>{{ .Title }}</small>
<a href="{{ .RelPermalink }}" <ul>
{{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}> {{- range .RegularPages -}}
{{- .LinkTitle -}} <li>
</a> <a href="{{ .RelPermalink }}"
</li> {{- if eq .RelPermalink $.RelPermalink }} aria-current="page"{{ end -}}>
{{- end -}} {{- .LinkTitle -}}
</ul> </a>
{{- end -}} </li>
{{- end -}}
{{- end -}} </ul>
{{- end -}}
</nav> {{- end -}}
</aside> </nav>
<article role="main">
{{/* ── Main content ──────────────────────────────────────────────── */}} {{ .Content }}
<article> {{- $prevURL := index .Params "prev-url" -}}
{{- $prevTitle := index .Params "prev-title" -}}
{{- if .Description -}} {{- $nextURL := index .Params "next-url" -}}
<hgroup> {{- $nextTitle := index .Params "next-title" -}}
<h1>{{ .Title }}</h1> {{- if or $prevURL $nextURL -}}
<p>{{ .Description }}</p> <footer data-role="prev-next">
</hgroup> {{- if $prevURL -}}
{{- else -}} <a href="{{ $prevURL }}" rel="prev">
<h1>{{ .Title }}</h1> <small>← Previous</small>
{{- end }} <span>{{ $prevTitle }}</span>
</a>
{{ .Content }} {{- end -}}
{{- if and $nextURL $nextTitle -}}
{{/* ── Prev / Next — from front matter, not Hugo section order ── */}} <a href="{{ $nextURL }}" rel="next">
{{- $prevURL := index .Params "prev-url" -}} <small>Next →</small>
{{- $prevTitle := index .Params "prev-title" -}} <span>{{ $nextTitle }}</span>
{{- $nextURL := index .Params "next-url" -}} </a>
{{- $nextTitle := index .Params "next-title" -}} {{- end -}}
{{- if or $prevURL $nextURL -}} </footer>
<div data-role="prev-next"> {{- end -}}
{{- if $prevURL -}} </article>
<a href="{{ $prevURL }}" rel="prev">
<small>← Previous</small> {{- with .TableOfContents -}}
<span>{{ $prevTitle }}</span> <aside data-toc>
</a> <small>On this page</small>
{{- end -}} {{ . }}
{{- if and $nextURL $nextTitle -}} </aside>
<a href="{{ $nextURL }}" rel="next"> {{- end -}}
<small>Next →</small>
<span>{{ $nextTitle }}</span>
</a>
{{- end -}}
</div>
{{- end -}}
</article>
{{/* ── Right TOC ────────────────────────────────────────────────── */}}
{{- with .TableOfContents -}}
<aside data-toc>
<small>On this page</small>
{{ . }}
</aside>
{{- end -}}
</div>
</main>
{{ end }} {{ end }}