mirror of
https://github.com/Screenly/Anthias.git
synced 2026-06-10 17:18:43 -04:00
dfa56b9643
Generate a slug-based id per FAQ entry from the question text and add a hover-revealed "#" permalink next to each. The accordion JS now opens (and scrolls to) the entry whose slug matches the URL hash on load and on hashchange, and writes the slug back to the URL when a question is clicked open — so the address bar always reflects the expanded entry and is safe to copy. Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
60 lines
3.3 KiB
HTML
60 lines
3.3 KiB
HTML
{{ define "main" }}
|
|
{{- $faq := site.Data.faq -}}
|
|
{{- $iconPlus := resources.Get "images/plus.svg" -}}
|
|
{{- $iconMinus := resources.Get "images/minus.svg" -}}
|
|
<header class="bg-brand-dark py-16 md:py-20 px-6 md:px-12 lg:px-20">
|
|
<div class="max-w-7xl mx-auto">
|
|
<h1 class="text-white text-4xl md:text-5xl font-extrabold tracking-tight">FAQ</h1>
|
|
<p class="text-white/60 text-lg mt-4 max-w-xl">Common questions about Anthias.</p>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="bg-white py-16 lg:py-24 px-6 md:px-12 lg:px-20">
|
|
<div class="max-w-3xl mx-auto space-y-12">
|
|
{{- range $gi, $group := $faq -}}
|
|
<div>
|
|
<h2 class="text-xs font-semibold uppercase tracking-[0.12em] text-brand-purple mb-2">{{ $group.group }}</h2>
|
|
<div class="divide-y divide-black/10 border-t border-black/10">
|
|
{{- range $i, $item := $group.items -}}
|
|
{{- $slug := $item.question | anchorize -}}
|
|
<div id="{{ $slug }}" class="group scroll-mt-4 relative">
|
|
<a
|
|
href="#{{ $slug }}"
|
|
aria-label="Permalink to: {{ $item.question }}"
|
|
data-faq-anchor
|
|
class="absolute left-0 top-5 leading-relaxed font-mono text-brand-purple/50 hover:text-brand-purple opacity-0 group-hover:opacity-100 focus-visible:opacity-100 transition-opacity sm:-translate-x-6 px-1 sm:px-0"
|
|
>#</a>
|
|
<button
|
|
id="{{ $slug }}-btn"
|
|
data-accordion="{{ $slug }}-answer"
|
|
aria-expanded="false"
|
|
aria-controls="{{ $slug }}-answer"
|
|
class="w-full flex items-center justify-between text-left py-5 bg-transparent border-0 cursor-pointer text-brand-near-black font-bold leading-relaxed gap-4 pl-6 sm:pl-0"
|
|
>
|
|
<span>{{ $item.question }}</span>
|
|
<img class="icon-plus w-5 h-5 shrink-0" src="{{ $iconPlus.RelPermalink }}" alt="" aria-hidden="true" />
|
|
<img class="icon-minus w-5 h-5 shrink-0 hidden" src="{{ $iconMinus.RelPermalink }}" alt="" aria-hidden="true" />
|
|
</button>
|
|
<section id="{{ $slug }}-answer" aria-labelledby="{{ $slug }}-btn" class="hidden pb-6 docs-prose" data-accordion-content>
|
|
{{ $item.answer | markdownify }}
|
|
</section>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
</div>
|
|
{{- end -}}
|
|
</div>
|
|
</section>
|
|
|
|
<section class="bg-bg-light py-16 lg:py-24 px-6 md:px-12 lg:px-20">
|
|
<div class="max-w-7xl mx-auto text-center">
|
|
<h2 class="text-2xl font-bold">Still have questions?</h2>
|
|
<p class="text-zinc-500 mt-2">Ask on the forum or open a GitHub discussion.</p>
|
|
<div class="flex flex-wrap justify-center gap-4 mt-6">
|
|
<a class="btn-primary" href="https://forums.screenly.io" target="_blank" rel="noopener">Visit the Forum</a>
|
|
<a class="btn-secondary text-brand-near-black border-black/20 hover:border-black/40 hover:bg-black/5" href="https://github.com/Screenly/Anthias/discussions" target="_blank" rel="noopener">GitHub Discussions</a>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
{{ end }}
|