mirror of
https://git.sr.ht/~seirdy/seirdy.one
synced 2024-11-23 21:02: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") }}
|
||||
<figcaption>
|
||||
<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}}:
|
||||
{{- $codeIndex := (.Page.Scratch.Get "codeIndex") -}}
|
||||
{{- $id := (printf `code-%d` $codeIndex) -}}
|
||||
{{ 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 }}
|
||||
</figcaption>
|
||||
{{- .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 }}
|
||||
</figure>
|
||||
|
|
Loading…
Reference in a new issue