mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-10 00:12:09 +00:00
Give code figures both a label and description
This commit is contained in:
parent
120232a403
commit
d89de5db68
2 changed files with 21 additions and 4 deletions
|
@ -1,6 +1,14 @@
|
||||||
{{ $codeIndex := (.Page.Scratch.Get "codeIndex") }}
|
{{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}}
|
||||||
<figcaption>
|
{{- $id := (printf `code-%d` $codeIndex) -}}
|
||||||
<strong itemprop="name" id="{{ if .Get "id" }}{{.Get "id"}}{{else}}code-{{ $codeIndex }}{{end}}"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{end}}:
|
{{ with .Parent }}
|
||||||
|
{{- with .Get "id" -}}
|
||||||
|
{{- $id = . -}}
|
||||||
|
{{- end -}}
|
||||||
|
{{- end -}}
|
||||||
|
<figcaption id="{{ $id }}-caption">
|
||||||
|
<span id="{{ $id }}">
|
||||||
|
<strong itemprop="name"> <span itemprop="codeSampleType">Code snippet</span> {{ $codeIndex }}</strong>{{with .Get "lang"}} (<span itemprop="programmingLanguage">{{ . }}</span>){{ end -}}
|
||||||
|
</span>:
|
||||||
{{ .Inner | markdownify | safeHTML }}
|
{{ .Inner | markdownify | safeHTML }}
|
||||||
</figcaption>
|
</figcaption>
|
||||||
{{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
|
{{- .Page.Scratch.Set "codeIndex" (add 1 $codeIndex) -}}
|
||||||
|
|
|
@ -1,3 +1,12 @@
|
||||||
<figure itemscope itemtype="https://schema.org/SoftwareSourceCode">
|
{{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}}
|
||||||
|
{{- $id := (printf `code-%d` (sub $codeIndex 1)) -}}
|
||||||
|
{{- with .Get "id" -}}
|
||||||
|
{{- $id = . -}}
|
||||||
|
{{- end -}}
|
||||||
|
<!--
|
||||||
|
The full caption is too long for an aria-label;
|
||||||
|
just use the beginning for the label and the full thing for the aria description.
|
||||||
|
-->
|
||||||
|
<figure aria-labelledby="{{ $id }}" aria-describedby="{{ $id }}-caption" itemscope itemtype="https://schema.org/SoftwareSourceCode">
|
||||||
{{ .Inner | markdownify }}
|
{{ .Inner | markdownify }}
|
||||||
</figure>
|
</figure>
|
||||||
|
|
Loading…
Reference in a new issue