36 lines
1.7 KiB
Plaintext
36 lines
1.7 KiB
Plaintext
mixin Collapsable(name, data, open)
|
|
- const isExpanded = open || false;
|
|
- const color = data.color ? `focus:ring-nls-${data.color} text-nls-${data.color} focus:text-nls-${data.color} dark:focus:text-nls-${data.color}` : "nls-text-black dark:nls-text-white ring-nls-black dark:ring-nls-white focus:text-black dark:focus:text-white";
|
|
- const category = data.category || "default";
|
|
- const linkEventName = "external link clicked";
|
|
|
|
details.mb-4(open=isExpanded, name=name)
|
|
summary(
|
|
class=`${color} rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg focus:outline-none focus:z-10 focus:ring-2 focus:no-underline`,
|
|
onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
|
|
)= data.summary
|
|
.text-slate-600(class="dark:text-stone-300")
|
|
if data.items
|
|
ul.list-disc.list-inside
|
|
each item in data.items
|
|
li
|
|
if item.text
|
|
= item.text
|
|
if item.links
|
|
each link, index in item.links
|
|
a(
|
|
class=`transition underline-offset-2 underline text-nls-${color} hover:text-nls-black dark:hover:text-white hover:decoration-2 focus:text-nls-black dark:focus:text-white focus:decoration-2`,
|
|
href=link.url,
|
|
title=link.description,
|
|
target="_blank",
|
|
aria-label=link.description,
|
|
rel="noopener noreferrer",
|
|
onclick=`umami.track('${linkEventName}', { category: '${category}', position: 'collapsable', label: '${link.label}', visitDuration: getVisitDuration() })`
|
|
) #{link.text}
|
|
if index < item.links.length - 1
|
|
| ,
|
|
if item.suffix
|
|
= ` ${item.suffix}`
|
|
else
|
|
block
|