1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-14 09:42:09 +00:00
seirdy.one/layouts/partials/header.html
Rohan Kumar ff0c7deafa
Make the skip-link point to h1 instead of main
Link targets need to be focusable to work with VoiceOver.

Making <main> focusable causes some side-effects, like making the TAB
key go to the beginning of <main> instead of the element after the
currently-clicked region.

Also removes the annoying outline around "main" in some non-mainstream
browsers, without having to add extra CSS.
2022-07-13 08:31:20 -07:00

40 lines
1.6 KiB
HTML

<header>
<a href="#h1">Skip to content</a>
<nav aria-label="Global">
<ul>
{{- $currentPage := . -}}
{{- $canonicalRelPermalink := $currentPage.RelPermalink | replaceRE "^/~seirdy/" "/" }}
{{- $isHome := false -}}
{{- if eq $canonicalRelPermalink "/" -}}
{{- $isHome = true -}}
{{- end }}
<li
itemprop="isPartOf"
itemscope="" itemtype="https://schema.org/Blog https://schema.org/WebSite"
itemid="{{ .Site.Params.CanonicalBaseURL }}/">
<a rel="home" itemprop="url" href="{{ .Site.BaseURL }}"{{- if $isHome }} aria-current="page"{{- end -}}>
{{- if $isHome -}}
<strong itemprop="name">{{ .Site.Title }}</strong>
{{- else -}}
<span itemprop="name">{{ .Site.Title }}</span>
{{- end -}}
</a>
</li>
{{ range .Site.Menus.main -}}
{{ $isCurrent := false }}
<li itemprop="hasPart" itemscope="" itemtype="https://schema.org/SiteNavigationElement">
<a href="{{ .URL | absURL}}" itemprop="url"
{{- if or (eq .Identifier "notes" ) (eq .Identifier "articles") (eq .Identifier "bookmarks") }} rel="feed"{{- end }}
{{- if or (eq $currentPage.RelPermalink .URL) ($currentPage.HasMenuCurrent "main" .) -}}{{- $isCurrent = true }} aria-current="page"{{- end -}}>
{{- if or $isCurrent (eq $currentPage.Section .Title) (and (eq $currentPage.Section "posts") (eq .Identifier "articles")) -}}
<strong itemprop="name">{{- .Name -}}</strong>
{{- else -}}
<span itemprop="name">{{- .Name -}}</span>
{{- end -}}
</a>
</li>
{{- end }}
</ul>
</nav>
{{ partial "breadcrumblist.html" . }}
</header>