mirror of
https://github.com/foo-dogsquared/hugo-theme-more-contentful.git
synced 2025-04-25 00:19:15 +00:00
5b540f3c1b
I've also put more comments on the individual components in the partial. Hopefully, that'll mitigate against me forgetting their purpose all over again.
108 lines
3.9 KiB
HTML
108 lines
3.9 KiB
HTML
{{- /*
|
|
Here's where all of the inline partials are defined.
|
|
If the partial is short enough, it should be put here.
|
|
*/ -}}
|
|
|
|
{{- /*
|
|
This is a partial that creates an icon from the icon templates and links them from the created file.
|
|
Why not embed the text into the resulting document, you ask?
|
|
I just want to save a few kilobytes of the total site weight. :)
|
|
|
|
It accepts a dictionary with the specified keys:
|
|
|
|
- id - The name of the resource in a specific set.
|
|
- output - The output location of the resource relative to the base URL.
|
|
It can accept a formatted string (e.g., "icons/brand/%s.svg") where 'id' will be used.
|
|
- template - The template file to be used.
|
|
It should relative to the asset directory.
|
|
*/ -}}
|
|
{{- define "partials/components/icon.html" }}
|
|
{{- $icon := . }}
|
|
{{- $res := resources.ExecuteAsTemplate (printf $icon.output $icon.id) $icon.id (resources.Get $icon.template) }}
|
|
<svg class="icon">
|
|
<use href="{{ $res.Permalink }}#{{ $icon.id }}"></use>
|
|
</svg>
|
|
{{- end }}
|
|
|
|
|
|
{{- /*
|
|
A partial that aliases the Heroicon template from the icon partial.
|
|
It only needs a string of the ID from one of the icons.
|
|
*/ -}}
|
|
{{- define "partials/components/heroicon.html" }}
|
|
{{- partial "components/icon.html" (dict "id" . "output" "icons/generic/%s.svg" "template" "templates/heroicon.svg") }}
|
|
{{ end }}
|
|
|
|
|
|
{{- /*
|
|
The theme button in its own bed.
|
|
Take note this component already has conditional rendering so a conditional is unnecessary.
|
|
*/ -}}
|
|
{{- define "partials/components/theme-button.html" }}
|
|
{{- if gt (len (index $.Site.Data "more-contentful").themes) 1 }}
|
|
<div class="site__theme-btn" aria-label="Theme toggle">
|
|
{{ partial "components/heroicon.html" "color-swatch" }}
|
|
<div class="site__theme-dropdown">
|
|
{{- range $filename, $scheme := (index $.Site.Data "more-contentful").themes }}
|
|
{{- $name := cond (eq $filename "_index") (printf "%s (default)" .scheme) .scheme }}
|
|
<div class="site__theme-item" {{ if ne $filename "_index" }}data-theme="{{ .scheme }}"{{ end }}>{{ $name }}</div>
|
|
{{- end }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script defer>
|
|
const themeDropdown = document.querySelector('.site__theme-btn');
|
|
themeDropdown.addEventListener('click', (event) => {
|
|
const { target } = event;
|
|
if (target.classList.contains("site__theme-item")) {
|
|
if (target.dataset.theme) {
|
|
theme = target.dataset.theme;
|
|
window.localStorage.setItem("theme", theme);
|
|
document.documentElement.dataset.theme = theme;
|
|
} else {
|
|
window.localStorage.removeItem("theme");
|
|
delete document.documentElement.dataset.theme;
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
{{- end }}
|
|
{{- end }}
|
|
|
|
|
|
{{- /*
|
|
The component where it will display the metadata of the post.
|
|
This is used on list templates but feel free to change that.
|
|
*/ -}}
|
|
{{- define "partials/components/post-meta.html" }}
|
|
<div class="list post__meta">
|
|
{{- if ne (.PublishDate.Format "2006") "0001" -}}
|
|
<time datetime="{{ .PublishDate }}">
|
|
{{ partial "components/heroicon.html" "calendar" }}
|
|
<span style="margin-left: 0.5em;">{{ .PublishDate.Format "2006-01-02" }}</span>
|
|
</time>
|
|
{{- end }}
|
|
|
|
{{- if and .GitInfo (ne (.PublishDate.Format "2006-01-02") (.Lastmod.Format "2006-01-02")) }}
|
|
<time datetime="{{ .Lastmod }}">
|
|
{{ partial "components/heroicon.html" "refresh" }}
|
|
<span style="margin-left: 0.5em;">{{ .Lastmod.Format "2006-01-02" }}</span>
|
|
</time>
|
|
{{- end }}
|
|
|
|
{{- /* The authors are appended with 'et al' if there's more than one author in the map. */ -}}
|
|
{{ with .Params.author }}
|
|
{{- $names := slice }}
|
|
{{- range . }}{{ $names = $names | append .name }}{{ end }}
|
|
{{- $author := index (first 1 $names) 0 }}
|
|
<span data-authors="{{ jsonify $names }}">
|
|
{{ partial "components/heroicon.html" "pencil" }}
|
|
<span style="margin-left: 0.5em;">
|
|
{{ $author }}{{ if ge (len .) 2 }}, et al.{{ end }}
|
|
</span>
|
|
</span>
|
|
{{ end }}
|
|
|
|
</div>
|
|
{{- end }}
|