www-from-model/layouts/term.html
Stephan Heunis c3bd9caf91 Demo use case: display a list of distributions from DataDownload documents in bundle
The idea is that a dataset bundle can have any number of DataDownload documents
(json.gz) identified by a commit string, with the same identifiers being available
in the dataset's list of 'distributions' ('commit' key) in the front matter params.
The hugo term page template will render the new 'term-distributions' partial if it
finds any distributions in the page params. This uses the new filetree.js functionality
to fetch and decompress the associated DataDownload json-ld document (for the commit
that the user selected) and to then turn that object into a file tree hierarchy which
can more easily be rendered by using javascript to manipulate the expand/collapse
behavior of the underlying details-summary tags that are used for the directory nodes.

In summary, this only shows for a dataset bundle that has distributions in json.gz files
which will be loaded once the user selects them, and the whole file tree can be explored.
2026-06-16 22:55:24 +02:00

137 lines
No EOL
4.6 KiB
HTML

{{ define "main" }}
{{ $toc := and (.Params.showTableOfContents | default (.Site.Params.list.showTableOfContents | default false)) (in .TableOfContents "<ul") }}
{{ $taxonomy := .Data.Plural }}
{{ $taxonomyPage := site.GetPage (print $taxonomy) }}
{{ $depictionType := default "depiction" (index $taxonomyPage.Params "term" "depiction_type") }}
{{ $personDisplay := default "Contributors" (index $taxonomyPage.Params "term" "person_display") }}
{{ $relationsDisplay := default "none" (index $taxonomyPage.Params "term" "show_relations") }}
{{ $relations := .Data.Pages }}
<header>
{{ if .Params.showBreadcrumbs | default (.Site.Params.list.showBreadcrumbs | default false) }}
{{ partial "breadcrumbs.html" . }}
{{ end }}
<h1 class="mt-0 mb-2 text-4xl font-extrabold text-neutral-900 dark:text-neutral inline-flex items-center">
{{ .Title }}
{{ if .Params.date }}
{{ $year := substr .Params.date 0 4 }}
<span class="text-2xl">
({{ $year }})
</span>
{{ end }}
{{ partial "term-heading-kind.html" (dict
"term" .
"size" "lg"
) }}
{{ partial "term-heading-identifiers.html" (dict
"term" .
"size" "xl"
) }}
</h1>
</header>
<article class="prose max-w-full dark:prose-invert">
<!-- Links -->
{{ partial "term-info-links.html" . }}
<!-- Persons -->
{{ partial "term-info-related-terms.html" (dict
"term" .
"taxonomy" "persons"
"display" $personDisplay
) }}
<!-- Topics -->
{{ partial "term-info-related-terms.html" (dict
"term" .
"taxonomy" "topics"
"display" "Topics"
) }}
<!-- Licenses -->
{{ partial "term-info-licenses.html" . }}
<!-- Depiction and Graph -->
{{ $depictions := .Resources.Match (print $depictionType ".*") }}
{{ $hasDepiction := gt (len $depictions) 0 }}
<table class="not-prose w-full">
<tr>
{{ if $hasDepiction }}
<td width="30%" class="align-middle">
<div class="flex justify-center items-center">
{{ with index $depictions 0 }}
{{ if eq .MediaType.SubType "svg" }}
<img
src="{{ .RelPermalink }}"
class="mx-auto max-h-[300px] w-auto object-contain"
alt=""
>
{{ else }}
{{ $img := .Fit "300x300" }}
<img
src="{{ $img.RelPermalink }}"
width="{{ $img.Width }}"
height="{{ $img.Height }}"
class="mx-auto object-contain"
>
{{ end }}
{{ end }}
</div>
</td>
{{ end }}
<td class="align-middle text-center">
{{ if .Param "graphRootNodePID" | default false }}
<div class="prose max-w-full dark:prose-invert">
<script>
const limitGraphRootNodeId = '{{ .Param "graphRootNodePID" }}';
</script>
<script type="module" crossorigin src="/graph.js"></script>
<div class="relative">
{{ if .Param "graphDescription" | default false }}
<p>{{ .Param "graphDescription" }}</p>
{{ end }}
<div id="sigma-node-type-controls" class="absolute z-10 left-2 bottom-2" >
<div id="sigma-controls-list" class="text-left" ></div>
</div>
<div id="sigma-container" class="w-full h-[40vh] m-0 p-0 bg-neutral-100 dark:bg-neutral-600" ></div>
</div>
</div>
{{ end }}
</td>
</tr>
</table>
<!-- Description -->
{{ with .Params.description }}
<p>{{ . | markdownify }}</p>
{{ end }}
</article>
<!-- Content from index page -->
<section
class="{{ if $toc -}}
mt-12
{{- else -}}
mt-0
{{- end }} prose flex max-w-full flex-col dark:prose-invert lg:flex-row"
>
{{ if $toc }}
<div class="order-first px-0 lg:order-last lg:max-w-xs lg:ps-8">
<div class="toc ps-5 lg:sticky lg:top-10">
{{ partial "toc.html" . }}
</div>
</div>
{{ end }}
<div class="min-h-0 min-w-0 grow">
{{ .Content | emojify }}
</div>
</section>
{{ with .Params.distributions }}
{{ partial "term-distributions.html" . }}
{{ end }}
<!-- Relations -->
{{ if .Data.Pages }}
{{ if eq $relationsDisplay "congo" }}
{{ partial "term-relations.html" . }}
{{ else if eq $relationsDisplay "expandable" }}
<h2 class="mt-12 text-2xl font-bold text-neutral-700 dark:text-neutral-300">Contributions</h2>
<hr class="w-36 border-dotted border-neutral-400 mb-2" />
{{ partial "related-by-category-lists.html" . }}
{{ else }}
{{ end }}
{{ end }}
{{ end }}