libretech/M6C9.de
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Activity

refactor academia section; restructure course data and improve collapsible component

Browse Source
This commit is contained in:
Michael Czechowski
2025-06-14 03:02:54 +02:00
parent 0302e5c69d
commit d1026a8edf
10 changed files with 83 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Academia.pug
View File

@@ -34,24 +34,8 @@ section#academia
p(class=`text-slate-700 dark:text-slate-300 ${additionalClasses}`) !{paragraph}
// endregion
// region Courses
// region Academic Courses
.grid.grid-cols-1.gap-6.mb-8(class="md:grid-cols-1")
div
details.mb-4
summary.rounded-sm.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
class="dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses dhbw', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.dhbw
ul.list-disc.list-inside
each course in academia.courses.dhbw
li= course
div
details.mb-4
summary.rounded-sm.text-md.text-nls-black.transition.underline-offset-2.mb-2.cursor-pointer(
class="sm:text-lg dark:text-white focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-black dark:focus:ring-white focus:bg-nls-black focus:text-white dark:focus:bg-white dark:focus:text-nls-black focus:no-underline",
onclick="umami.track('collapsable clicked', { category: 'courses leibniz-fh', visitDuration: getVisitDuration() })"
)= academia.courseInstitutions.lfh
ul.list-disc.list-inside
each course in academia.courses.lfh
li= course
// endregion
each institution in academia.institutions
+Collapsable("academia", institution)
// endregion

4
src/components/Collapsable.pug
View File

@@ -1,12 +1,12 @@
mixin Collapsable(name, data, open)
- const isExpanded = open || false;
- const color = data.color || "nls-text-black dark:nls-text-white";
- 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/50 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=`rounded-sm transition mb-2 cursor-pointer text-md font-semibold mb-2 cursor-pointer sm:text-lg text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black dark:focus:text-white focus:no-underline`,
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-4 focus:no-underline`,
onclick=`umami.track('collapsable clicked', { category: '${category}', visitDuration: getVisitDuration() })`
)= data.summary
.text-slate-600(class="dark:text-stone-300")

6
src/components/Footer.pug
View File

@@ -5,7 +5,7 @@ mixin Link(href, label, target, rel)
- const eventCategory = "footer";
- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}', visitDuration: getVisitDuration() })`;
a.transition-colors.text-nls-black(href=href, class="dark:text-white hover:text-amber-300", target=target, rel=rel, onclick=onclick, aria-label=label, title=label)
a.transition-colors.text-nls-black.rounded.ring-offset-2(href=href, class="dark:text-white hover:ring-2 ring-nls-black dark:ring-nls-white", target=target, rel=rel, onclick=onclick, aria-label=label, title=label)
block
mixin Svg
@@ -44,9 +44,9 @@ footer#footer
style="fill: currentColor"
)
a.transition-colors.text-nls-black.uppercase.font-semibold(
a.transition-colors.text-nls-black.uppercase.font-semibold.rounded.ring-offset-2(
href=footer.emailLink,
class="dark:text-white hover:text-amber-300",
class="dark:text-white hover:ring-2 ring-nls-black dark:ring-nls-white",
rel="noopener noreferrer",
title=footer.emailText,
aria-label=footer.emailText,