make all content dynamic and add umami events
This commit is contained in:
Michael Czechowski
@@ -8,5 +8,4 @@ html.scroll-smooth(lang=lang)
|
||||
include src/components/Title
|
||||
include src/components/Professional
|
||||
include src/components/Academia
|
||||
|
||||
include src/components/Footer
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
40
src/components/Collapsable.pug
Normal file
40
src/components/Collapsable.pug
Normal file
@@ -0,0 +1,40 @@
|
||||
//-
|
||||
Collapsable Component
|
||||
@param {Object} data - The data object containing the collapsable content
|
||||
@param {Boolean} isOpen - The initial state of the collapsable content
|
||||
@param {String} data.color - The color of the collapsable content
|
||||
@param {String} data.category - The category of the collapsable content
|
||||
@param {String} data.summary - The summary of the collapsable content
|
||||
@param {Array} data.items - The items of the collapsable content
|
||||
mixin Collapsable(data, open)
|
||||
- const isExpanded = open || false;
|
||||
- const color = data.color || "orange";
|
||||
- const category = data.category || "default";
|
||||
- const linkEventName = "external link clicked";
|
||||
|
||||
div
|
||||
details.mb-4(open=isExpanded)
|
||||
summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2.cursor-pointer(
|
||||
class=`text-nls-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-nls-${color} focus:bg-nls-${color} focus:text-black focus:no-underline`,
|
||||
onclick=`umami.track('collapsable clicked', { category: '${category}' })`
|
||||
)= data.summary
|
||||
ul.list-disc.list-inside.text-gray-400
|
||||
each item in data.items
|
||||
li
|
||||
if item.text
|
||||
= item.text
|
||||
if item.links
|
||||
each link, index in item.links
|
||||
a.transition.underline-offset-2.underline(
|
||||
class=`text-nls-${color} hover:text-white hover: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}' })`
|
||||
)= link.text
|
||||
if index < item.links.length - 1
|
||||
| ,
|
||||
if item.suffix
|
||||
= item.suffix
|
||||
@@ -1,13 +1,9 @@
|
||||
mixin Link(href, label, target, rel, additionalClasses)
|
||||
a.transition-colors.text-white(
|
||||
data-umami-event="footer link clicked",
|
||||
data-umami-event-label=label,
|
||||
href=href,
|
||||
class=`hover:text-amber-300 ${additionalClasses || ''}`,
|
||||
target=target,
|
||||
rel=rel,
|
||||
onclick="umami.track('signup-button', { name: 'newsletter', id: 123 })"
|
||||
)
|
||||
mixin Link(href, label, target, rel)
|
||||
- const eventName = "external link clicked";
|
||||
- const eventCategory = "footer";
|
||||
- const onclick = `umami.track('${eventName}', { category: 'icons', position: 'footer', label: '${label}' })`;
|
||||
|
||||
a.transition-colors.text-white(href=href, class="hover:text-amber-300", target=target, rel=rel, onclick=onclick)
|
||||
block
|
||||
|
||||
mixin Svg
|
||||
@@ -22,7 +18,7 @@ footer.bg-nls-black.text-white
|
||||
p.mb-4.max-w-prose #{footer.content}
|
||||
.max-w-prose
|
||||
.flex.items-center.space-x-6.mb-8
|
||||
+Link(footer.githubUrl, 'github', 'noopener noreferrer', '_blank')
|
||||
+Link(footer.githubUrl, 'github', '_blank', 'noopener noreferrer')
|
||||
+Svg
|
||||
path(
|
||||
clip-rule="evenodd",
|
||||
@@ -30,7 +26,7 @@ footer.bg-nls-black.text-white
|
||||
fill-rule="evenodd",
|
||||
style="fill: currentColor"
|
||||
)
|
||||
+Link(footer.linkedinUrl, 'linkedin', 'noopener noreferrer', '_blank')
|
||||
+Link(footer.linkedinUrl, 'linkedin', '_blank', 'noopener noreferrer')
|
||||
+Svg
|
||||
path(
|
||||
clip-rule="evenodd",
|
||||
@@ -38,14 +34,18 @@ footer.bg-nls-black.text-white
|
||||
fill-rule="evenodd",
|
||||
style="fill: currentColor"
|
||||
)
|
||||
+Link(footer.xingUrl, 'xing', 'noopener noreferrer', '_blank')
|
||||
+Link(footer.xingUrl, 'xing', '_blank', 'noopener noreferrer')
|
||||
+Svg
|
||||
path(
|
||||
d="M18.188 0c-.517 0-.741.325-.927.66 0 0-7.455 13.224-7.702 13.657.015.024 4.919 9.023 4.919 9.023.17.308.436.66.967.66h3.454c.211 0 .375-.078.463-.22.089-.151.089-.346-.009-.536l-4.879-8.916c-.004-.006-.004-.016 0-.022L22.139.756c.095-.191.097-.387.006-.535C22.056.078 21.894 0 21.686 0h-3.498zM3.648 4.74c-.211 0-.385.074-.473.216-.09.149-.078.339.02.531l2.34 4.05c.004.01.004.016 0 .021L1.86 16.051c-.099.188-.093.381 0 .529.085.142.239.234.45.234h3.461c.518 0 .766-.348.945-.667l3.734-6.609-2.378-4.155c-.172-.315-.434-.659-.962-.659H3.648v.016z",
|
||||
style="fill: currentColor"
|
||||
)
|
||||
+Link(footer.emailLink, 'email', '', '', 'uppercase font-semibold')
|
||||
| #{footer.emailText}
|
||||
a.transition-colors.text-white(
|
||||
href=footer.emailLink,
|
||||
class="hover:text-amber-300 uppercase font-semibold",
|
||||
rel="noopener noreferrer",
|
||||
onclick="umami.track('email clicked', { position: 'footer' })"
|
||||
) #{footer.emailText}
|
||||
// endregion
|
||||
a(href=footer.riskUrl, aria-label=footer.riskAriaLabel, title=footer.riskTitle)
|
||||
img.w-12.ml-auto(src=footer.riskImgSrc, alt=footer.riskImgAlt, class="mt-[1000vh]")
|
||||
|
||||
@@ -12,6 +12,9 @@ section.bg-nls-black.text-white
|
||||
href=item.link.href,
|
||||
class="focus:outline-none focus:z-10 focus:ring-4 focus:ring-white focus:bg-white focus:text-black focus:no-underline",
|
||||
title=item.link.title,
|
||||
target="_blank",
|
||||
rel="noopener noreferrer",
|
||||
onclick=`umami.track('external link clicked', { position: 'professional', label: '${item.link.label}' })`,
|
||||
aria-label=item.link.ariaLabel
|
||||
) #{item.link.text}
|
||||
| #{item.text}
|
||||
|
||||
@@ -1,20 +0,0 @@
|
||||
mixin TechnologySection(title, technologies, color, open)
|
||||
div
|
||||
details.mb-4(open=open)
|
||||
summary.rounded-sm.transition.underline-offset-2.mb-2.cursor-pointer.text-md.font-semibold.mb-2(
|
||||
class=`cursor-pointer text-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-${color} focus:bg-${color} focus:text-black focus:no-underline`
|
||||
)= title
|
||||
ul.list-disc.list-inside.text-gray-400
|
||||
each tech, index in technologies
|
||||
li
|
||||
if tech.url && tech.description
|
||||
a.rounded-sm.transition.underline-offset-2.underline(
|
||||
href=tech.url,
|
||||
class=`text-${color} focus:outline-none focus:z-10 focus:ring-4 focus:ring-${color} focus:bg-${color} focus:text-black hover:text-white focus:no-underline hover:decoration-2`,
|
||||
title=tech.description,
|
||||
aria-label=tech.description
|
||||
)= index + " " + tech.name
|
||||
else
|
||||
span= tech.name || tech
|
||||
if index !== technologies.length - 1
|
||||
| ,
|
||||
@@ -4,7 +4,7 @@ header.bg-nls-black.text-white
|
||||
object.w-full(data=title.logoSvg, type="image/svg+xml")
|
||||
.text-center.max-w-3xl.center.py-8
|
||||
h1.text-xl.mb-4.opacity-90(class="sm:text-5xl", itemprop="email")
|
||||
a(data-umami-event="email clicked", data-umami-event-label="email", href=footer.emailLink, itemprop="email")
|
||||
a(onclick="umami.track('email clicked', { position: 'title' })", href=footer.emailLink, rel="noopener noreferrer", itemprop="email")
|
||||
| #{title.email[0]}
|
||||
span.opacity-20 –
|
||||
| #{title.email[1]}
|
||||
|
||||
Reference in New Issue
Block a user