Skip to content

Unit 9: footer, about page, and analytics dispatcher refactor #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
stradichenko wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Unit 9: footer, about page, and analytics dispatcher refactor #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions assets/css/about-profile.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,3 +282,9 @@
margin-bottom: var(--spacing-md);
line-height: 1.6;
}

/* Heading sizing for the about page (was inline in layouts/page/about.html) */
.about-section h1 {
font-size: 2em;
margin: 0.67em 0;
}
33 changes: 14 additions & 19 deletions layouts/page/about.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,18 @@
{{ define "main" }}
<style>
.about-section h1 {
font-size: 2em;
margin: 0.67em 0;
}
</style>
<article class="about-section">
<div class="about-profile-container">
<div class="about-left-column">
<div class="profile-image">
<img src="{{ with .Site.Params.contact.profilepicture }}{{ . | absURL }}{{ else }}{{ "images/profile.png" | absURL }}{{ end }}"
alt="Profile Picture"
width="240"
<img src="{{ with site.Params.contact.profilepicture }}{{ . | absURL }}{{ else }}{{ "images/profile.png" | absURL }}{{ end }}"
alt="Profile Picture"
width="240"
height="240"
loading="lazy">
</div>
<h2 class="profile-name">{{ .Site.Params.contact.profilename | default "Your Name" }}</h2>
<p class="profile-description">{{ .Site.Params.about.profiledescription | default "A short description about yourself." }}</p>
<h2 class="profile-name">{{ site.Params.contact.profilename | default "Your Name" }}</h2>
<p class="profile-description">{{ site.Params.about.profiledescription | default "A short description about yourself." }}</p>
<div class="social-links">
{{ with .Site.Params.social }}
{{ with site.Params.social }}
{{ if or .linkedin .twitter .instagram .orcid .github .email }}
{{ with .linkedin }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="LinkedIn Profile">
Expand Down Expand Up @@ -53,10 +47,10 @@ <h2 class="profile-name">{{ .Site.Params.contact.profilename | default "Your Nam
</a>
{{ end }}
{{ else }}
<p>No social links available.</p>
<p>{{ i18n "NoSocialLinks" | default "No social links available." }}</p>
{{ end }}
{{ else }}
<p>No social links available.</p>
<p>{{ i18n "NoSocialLinks" | default "No social links available." }}</p>
{{ end }}
</div>
</div>
Expand All @@ -65,8 +59,8 @@ <h1>{{ .Title }}</h1>
<div class="about-text">
{{ .Site.Params.about.abouttext | markdownify }}
</div>
<h2>{{ .Site.Params.about.intereststitle | default "Interests" }}</h2>
{{ with .Site.Params.about.interests }}
<h2>{{ site.Params.about.intereststitle | default (i18n "Interests" | default "Interests") }}</h2>
{{ with site.Params.about.interests }}
<div class="interests-columns">
<ul class="column-1">
{{ range first (div (len .) 2) . }}
Expand All @@ -80,7 +74,7 @@ <h2>{{ .Site.Params.about.intereststitle | default "Interests" }}</h2>
</ul>
</div>
{{ else }}
<p>No interests listed.</p>
<p>{{ i18n "NoInterests" | default "No interests listed." }}</p>
{{ end }}
</div>
</div>
Expand All @@ -91,11 +85,12 @@ <h2>{{ .Site.Params.about.intereststitle | default "Interests" }}</h2>
</div>

<!-- Include Zipf's Law Analysis -->
{{/* TODO(Unit 12): zipfs-law CSS loading should move into the widget refactor. */}}
{{ $zipfsCSS := resources.Get "css/zipfs-law.css" }}
{{ if $zipfsCSS }}
{{ $zipfsCSS = $zipfsCSS | resources.Minify | fingerprint }}
<link rel="stylesheet" href="{{ $zipfsCSS.RelPermalink }}"
integrity="{{ $zipfsCSS.Data.Integrity }}"
<link rel="stylesheet" href="{{ $zipfsCSS.RelPermalink }}"
integrity="{{ $zipfsCSS.Data.Integrity }}"
crossorigin="anonymous">
{{ end }}
{{ partial "zipfs-law.html" . }}
Expand Down
29 changes: 23 additions & 6 deletions layouts/partials/analytics.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,23 @@
<!-- Self-hosted analytics partials - Privacy-respecting analytics solutions -->
{{ partial "analytics/plausible.html" . }}
{{ partial "analytics/umami.html" . }}
{{ partial "analytics/matomo.html" . }}
{{ partial "analytics/fathom.html" . }}
{{ partial "analytics/shynet.html" . }}
{{/*
analytics.html — provider dispatcher.

Selects a single analytics provider via site.Params.analytics.provider.
Supported providers (matching files in layouts/partials/analytics/):
plausible, matomo, umami, fathom, shynet

Provider partials read their own configuration from
site.Params.analytics.<provider>* (e.g. plausibleDomain, matomoURL).

The output is invariant per site, so the dispatch is wrapped in
partialCached. Provider sub-partials are also cached, keyed on the
provider name, so they only render once per build.
*/}}
{{- $provider := site.Params.analytics.provider | default "" -}}
{{- if $provider -}}
{{- $known := slice "plausible" "matomo" "umami" "fathom" "shynet" -}}
{{- if in $known $provider -}}
{{- partialCached (printf "analytics/%s.html" $provider) . $provider -}}
{{- else -}}
<!-- analytics: unknown provider {{ $provider | safeHTML }} -->
{{- end -}}
{{- end -}}
89 changes: 46 additions & 43 deletions layouts/partials/footer.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,66 +1,69 @@
{{ if eq hugo.Environment "development" }}
<!-- In development, load individual CSS files with SRI but without minification -->
{{ $variablesCSS := resources.Get "css/global/variables/core.css" | toCSS | fingerprint }}
<link rel="stylesheet" href="{{ $variablesCSS.RelPermalink }}" integrity="{{ $variablesCSS.Data.Integrity }}" crossorigin="anonymous">

{{ $footerCSS := resources.Get "css/footer.css" | toCSS | fingerprint }}
<link rel="stylesheet" href="{{ $footerCSS.RelPermalink }}" integrity="{{ $footerCSS.Data.Integrity }}" crossorigin="anonymous">
{{ else }}
<!-- In production, concatenate, minify, and fingerprint -->
{{ $cssFiles := slice (resources.Get "css/global/variables/core.css") (resources.Get "css/footer.css") }}
{{ $footerCSS := $cssFiles | resources.Concat "css/footer-combined.css" | minify | fingerprint }}
<link rel="stylesheet" href="{{ $footerCSS.RelPermalink }}" integrity="{{ $footerCSS.Data.Integrity }}" crossorigin="anonymous">
{{ end }}
{{/*
footer.html — footer body partial.

Notes:
- footer.css is bundled in head/styles.html (Unit 6); do not load it again here.
- Inline social SVGs are kept inline as a fallback. When the icons partial
(Unit 7, layouts/partials/icons.html) lands, replace each SVG with:
{{ partial "icons.html" (dict "name" "github" "class" "social-icon") }}
- customText is rendered as plain text by default. Opt in to raw HTML via
site.Params.footer.allowHTML = true.
- i18n strings (Unit 4) are used when keys are present; otherwise we fall back
to English literals.
*/}}

<!-- Remove the footer tag as it's already in the main template -->
<div class="footer-social-links">
{{ with .Site.Params.social }}
{{ if or .linkedin .twitter .instagram .orcid .github .email }}
{{ with .linkedin }}
{{- with site.Params.social -}}
{{- if or .linkedin .twitter .instagram .orcid .github .email -}}
{{- with .linkedin }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="LinkedIn Profile" class="social-link linkedin">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M19 0h-14c-2.761 0-5 2.239-5 5v14c0 2.761 2.239 5 5 5h14c2.762 0 5-2.239 5-5v-14c0-2.761-2.238-5-5-5zm-11 19h-3v-11h3v11zm-1.5-12.268c-.966 0-1.75-.79-1.75-1.764s.784-1.764 1.75-1.764 1.75.79 1.75 1.764-.783 1.764-1.75 1.764zm13.5 12.268h-3v-5.604c0-3.368-4-3.113-4 0v5.604h-3v-11h3v1.765c1.396-2.586 7-2.777 7 2.476v6.759z"/></svg>
</a>
{{ end }}
{{ with .twitter }}
{{- end }}
{{- with .twitter }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="Twitter" class="social-link twitter">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z"/></svg>
</a>
{{ end }}
{{ with .instagram }}
{{- end }}
{{- with .instagram }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="Instagram" class="social-link instagram">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838c-3.403 0-6.162 2.759-6.162 6.162s2.759 6.163 6.162 6.163 6.162-2.759 6.162-6.163c0-3.403-2.759-6.162-6.162-6.162zm0 10.162c-2.209 0-4-1.79-4-4 0-2.209 1.791-4 4-4s4 1.791 4 4c0 2.21-1.791 4-4 4zm6.406-11.845c-.796 0-1.441.645-1.441 1.44s.645 1.44 1.441 1.44c.795 0 1.439-.645 1.439-1.44s-.644-1.44-1.439-1.44z"/></svg>
</a>
{{ end }}
{{ with .orcid }}
{{- end }}
{{- with .orcid }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="ORCID" class="social-link orcid">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 512 512">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 512 512" aria-hidden="true" focusable="false">
<path d="M294.75 188.19h-45.92V342h47.47c67.62 0 83.12-51.34 83.12-76.91 0-41.64-26.54-76.9-84.67-76.9zM256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm-80.79 360.8h-29.84v-207.5h29.84zm-14.92-231.14c-13.2 0-23.09-10.47-23.09-23.09s9.89-23.09 23.09-23.09c12.63 0 22.52 10.47 22.52 23.09s-9.89 23.09-22.52 23.09zm196.67 231.14h-30.42v-97.51c0-12.63-3.36-41.18-38.27-41.18-34.91 0-38.27 28.55-38.27 41.18V368H220v-207.5h30.42v25.41c9.47-13.2 28.55-27.54 59.54-27.54 66.29 0 72.23 41.18 72.23 82.36V368z"/>
</svg>
</a>
{{ end }}
{{ with .github }}
{{- end }}
{{- with .github }}
<a href="{{ . }}" target="_blank" rel="noopener" aria-label="GitHub" class="social-link github">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
</a>
{{ end }}
{{ with .email }}
{{- end }}
{{- with .email }}
<a href="mailto:{{ . }}" aria-label="Email" class="social-link email">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="20" height="20" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M0 3v18h24v-18h-24zm21.518 2l-9.518 7.713-9.518-7.713h19.036zm-19.518 14v-11.817l10 8.104 10-8.104v11.817h-20z"/></svg>
</a>
{{ end }}
{{ end }}
{{ end }}
{{- end }}
{{- end -}}
{{- end -}}
</div>
<div class="footer-info">
{{ with .Site.Params.footer.customText }}
{{- with site.Params.footer.customText }}
{{- if site.Params.footer.allowHTML }}
<p>{{ . | safeHTML }}</p>
{{ else }}
<p>Copyright &copy; {{ now.Year }}. All rights reserved. <a href="{{ .Site.BaseURL }}index.xml">RSS</a>.
Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener">HUGO</a> &
{{- else }}
<p>{{ . }}</p>
{{- end }}
{{- else }}
<p>Copyright &copy; {{ time.Now.Year }}. All rights reserved. <a href="{{ site.BaseURL }}index.xml">RSS</a>.
Powered by <a href="https://gohugo.io/" target="_blank" rel="noopener">HUGO</a> &amp;
<a href="https://github.com/stradichenko/PKB-theme" target="_blank" rel="noopener">PKB-theme</a></p>
{{ end }}
{{ if .Site.Params.footer.showEnvironment }}
{{- end }}

{{- if site.Params.footer.showEnvironment }}
<p class="footer-environment">Environment: {{ hugo.Environment }}</p>
{{ end }}
{{- end }}
</div>