diff options
Diffstat (limited to 'layouts/partials')
22 files changed, 1387 insertions, 0 deletions
diff --git a/layouts/partials/article-card.html b/layouts/partials/article-card.html new file mode 100644 index 0000000..d803464 --- /dev/null +++ b/layouts/partials/article-card.html @@ -0,0 +1,92 @@ +{{ $articleType := .Params.type | default "life" }} +{{ $typeConfig := .Site.Params.articleTypes }} +{{ $typeData := index $typeConfig $articleType }} +{{ $excerpt := .Description | default .Summary }} + +{{ $imageURL := "" }} +{{ $useDefaultThumbnail := false }} +{{ if .Params.image }} + {{ $resource := .Resources.GetMatch .Params.image }} + {{ if $resource }} + {{ $imageURL = $resource.RelPermalink }} + {{ else }} + {{ $imageURL = .Params.image }} + {{ end }} +{{ else }} + {{ $useDefaultThumbnail = true }} +{{ end }} + +<article class="card group bg-bg"> + <!-- Thumbnail --> + {{ if or $imageURL $useDefaultThumbnail }} + <a href="{{ .RelPermalink }}" class="block overflow-hidden bg-surface/50 relative" tabindex="-1"> + {{ if $useDefaultThumbnail }} + <picture> + <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" /> + <img + src="/images/default_thumbnail_dark.png" + alt="{{ .Title }}" + class="card-image group-hover:scale-105 transition-transform duration-200" + loading="lazy" + /> + </picture> + {{ else }} + <img + src="{{ $imageURL }}" + alt="{{ .Title }}" + class="card-image group-hover:scale-105 transition-transform duration-200" + loading="lazy" + /> + {{ end }} + <!-- Type badge pill overlay --> + {{ if $typeData }} + <div + class="absolute top-3 right-3 px-3 py-1.5 rounded-full text-xs font-semibold transition-opacity" + style="background-color: var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);" + > + {{ i18n $articleType }} + </div> + {{ end }} + </a> + {{ end }} + + <!-- Content --> + <div class="card-body"> + <!-- Pinned badge --> + {{ if .Params.pinned }} + <div class="inline-flex items-center gap-1 px-2 py-1 rounded text-sm font-semibold" style="color: {{ .Site.Params.secondaryAccent }};"> + 📌 PINNED + </div> + {{ end }} + + <!-- Title --> + <h3 class="text-xl font-semibold"> + <a href="{{ .RelPermalink }}" class="group-hover:text-accent transition-colors"> + {{ .Title }} + </a> + </h3> + + <!-- Metadata --> + <div class="flex flex-wrap items-center gap-3 text-sm text-text-dim"> + <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}"> + {{ .PublishDate.Format "Jan 2, 2006" }} + </time> + </div> + + <!-- Excerpt --> + {{ if $excerpt }} + <p class="text-text-dim text-sm line-clamp-3 leading-relaxed"> + {{ $excerpt | plainify }} + </p> + {{ end }} + + <!-- CTA Button --> + <a + href="{{ .RelPermalink }}" + class="btn btn-sm mt-2" + > + {{ i18n "readMore" }} + <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> + </a> + </div> +</article> diff --git a/layouts/partials/article-header.html b/layouts/partials/article-header.html new file mode 100644 index 0000000..94c78a5 --- /dev/null +++ b/layouts/partials/article-header.html @@ -0,0 +1,71 @@ +{{ $articleType := .Params.type | default "life" }} +{{ $typeConfig := .Site.Params.articleTypes }} +{{ $typeData := index $typeConfig $articleType }} +{{ $hasType := .Params.type }} + +<div class="mb-8 pb-8 border-b border-border"> + <!-- Title with accent corner --> + <div class="relative mb-6"> + <!-- Vertical accent line (left side) --> + {{ if and $typeData $hasType }} + <div + class="absolute left-0 top-0 bottom-0 w-1 rounded-full" + style="background-color: var(--type-{{ $articleType }});" + ></div> + {{ end }} + + <!-- Horizontal accent line (bottom, 50% width with fade) --> + {{ if and $typeData $hasType }} + <div + class="absolute left-0 bottom-0 h-1 rounded-full" + style="width: 50%; background: linear-gradient(to right, var(--type-{{ $articleType }}), var(--type-{{ $articleType }}) 0%, transparent 100%);" + ></div> + {{ end }} + + <h1 class="text-4xl md:text-5xl font-bold text-accent pl-6 pt-2"> + {{ .Title }} + </h1> + </div> + + <!-- Metadata --> + <div class="flex flex-wrap items-center gap-4 text-sm text-text-dim"> + <!-- Publish date --> + {{ if .PublishDate }} + <div class="flex items-center gap-1"> + <i data-feather="calendar" class="w-4 h-4"></i> + <time datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}"> + {{ .PublishDate.Format "Jan 2, 2006" }} + </time> + </div> + {{ end }} + + <!-- Update date if different --> + {{ if .Lastmod }} + {{ $lastmodDate := .Lastmod.Format "2006-01-02" }} + {{ $pubDate := .PublishDate.Format "2006-01-02" }} + {{ if ne $lastmodDate $pubDate }} + <div class="flex items-center gap-1"> + <i data-feather="edit-2" class="w-4 h-4"></i> + <time datetime="{{ .Lastmod.Format "2006-01-02T15:04:05Z07:00" }}"> + {{ .Lastmod.Format "Jan 2, 2006" }} + </time> + </div> + {{ end }} + {{ end }} + + <!-- Reading time --> + {{ if .Site.Params.readingTime }} + <div class="flex items-center gap-1"> + <i data-feather="clock" class="w-4 h-4"></i> + <span>{{ .ReadingTime }} {{ i18n "min" }} {{ i18n "readingTime" }}</span> + </div> + {{ end }} + + <!-- Type badge --> + {{ if and $typeData $hasType }} + <span class="inline-flex items-center px-2.5 py-1 rounded text-sm font-mono font-semibold whitespace-nowrap transition-all duration-200" style="background-color: var(--type-{{ $articleType }}); border: 1px solid var(--type-{{ $articleType }}); color: var(--type-{{ $articleType }}-text);"> + {{ i18n $articleType }} + </span> + {{ end }} + </div> +</div> diff --git a/layouts/partials/article-list-item.html b/layouts/partials/article-list-item.html new file mode 100644 index 0000000..44cbf32 --- /dev/null +++ b/layouts/partials/article-list-item.html @@ -0,0 +1,95 @@ +{{/* Handle both calling conventions: dict with .Page/.side or direct page */}} +{{ $page := . }} +{{ $side := "left" }} + +{{ if reflect.IsMap . }} + {{ $page = .Page }} + {{ $side = .side | default "left" }} +{{ end }} + +{{ $articleType := $page.Params.type | default "life" }} +{{ $typeConfig := $page.Site.Params.articleTypes }} +{{ $typeData := index $typeConfig $articleType }} +{{ $excerpt := $page.Description | default $page.Summary }} + +{{ $imageURL := "" }} +{{ $useDefaultThumbnail := false }} +{{ if $page.Params.image }} + {{ $resource := $page.Resources.GetMatch $page.Params.image }} + {{ if $resource }} + {{ $imageURL = $resource.RelPermalink }} + {{ else }} + {{ $imageURL = $page.Params.image }} + {{ end }} +{{ else }} + {{ $useDefaultThumbnail = true }} +{{ end }} + +<li class="timeline-item timeline-item--{{ $side }}" style="--type-color: var(--type-{{ $articleType }});"> + {{/* Decorative connector line */}} + <div class="timeline-connector" aria-hidden="true" + style="background-color: var(--type-{{ $articleType }});"></div> + + {{/* Node on spine */}} + <div class="timeline-node" aria-hidden="true" + style="background-color: var(--type-{{ $articleType }}); box-shadow: 0 0 10px color-mix(in srgb, var(--type-{{ $articleType }}) 50%, transparent);"></div> + + <article class="timeline-card group" + style="border-color: color-mix(in srgb, var(--type-{{ $articleType }}) 25%, transparent); + box-shadow: 0 0 18px color-mix(in srgb, var(--type-{{ $articleType }}) 10%, transparent);"> + + {{/* Thumbnail */}} + <a href="{{ $page.RelPermalink }}" class="timeline-thumb" tabindex="-1" aria-hidden="true"> + {{ if $useDefaultThumbnail }} + <picture> + <source srcset="/images/default_thumbnail_light.png" media="(prefers-color-scheme: light)" /> + <img src="/images/default_thumbnail_dark.png" + alt="" + loading="lazy" /> + </picture> + {{ else }} + <img src="{{ $imageURL }}" + alt="" + loading="lazy" /> + {{ end }} + </a> + + {{/* Text body */}} + <div class="timeline-body"> + + {{/* Pinned badge */}} + {{ if $page.Params.pinned }} + <div class="timeline-pinned" style="color: {{ $page.Site.Params.secondaryAccent }};"> + 📌 {{ i18n "pinned" | default "PINNED" }} + </div> + {{ end }} + + {{/* Type + date meta row */}} + <div class="timeline-meta" style="color: var(--type-{{ $articleType }});"> + {{ i18n $articleType | upper }} + <span class="timeline-meta-sep" aria-hidden="true">·</span> + <time class="timeline-date" + datetime="{{ $page.PublishDate.Format "2006-01-02T15:04:05Z07:00" }}"> + {{ $page.PublishDate.Format "Jan 2, 2006" }} + </time> + </div> + + {{/* Title */}} + <h3 class="timeline-title"> + <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a> + </h3> + + {{/* Excerpt */}} + {{ if $excerpt }} + <p class="timeline-excerpt">{{ $excerpt | plainify }}</p> + {{ end }} + + {{/* CTA */}} + <a href="{{ $page.RelPermalink }}" class="btn btn-sm mt-auto"> + {{ i18n "readMore" }} + <i data-feather="arrow-right" class="w-4 h-4 ml-2"></i> + </a> + + </div> + </article> +</li> diff --git a/layouts/partials/article-nav.html b/layouts/partials/article-nav.html new file mode 100644 index 0000000..8a118b3 --- /dev/null +++ b/layouts/partials/article-nav.html @@ -0,0 +1,46 @@ +{{ $page := .page }} +{{ $variant := .variant | default "bottom" }} +{{ $prev := $page.PrevInSection }} +{{ $next := $page.NextInSection }} + +{{/* Shell prompt command varies by position */}} +{{ $cmd := "ls ../" }} +{{ if eq $variant "top" }} + {{ $cmd = "cd" }} +{{ end }} + +<nav class="article-nav {{ if eq $variant "bottom" }}mt-8{{ else }}mb-8{{ end }}" + aria-label="Article navigation"> + <p class="article-nav-prompt" aria-hidden="true"> + [visitor@danix.xyz articles]$ {{ $cmd }} + </p> + <div class="article-nav-links"> + {{/* ---- Previous (left side) ---- */}} + {{ if $prev }} + <a href="{{ $prev.Permalink }}" + class="article-nav-link truncate md:max-w-[45%] text-left" + rel="prev" + title="{{ $prev.Title }}"> + ◄ {{ $prev.Title }} + </a> + {{ else }} + <span class="article-nav-placeholder text-left" aria-label="Beginning of articles"> + ◄ (beginning) + </span> + {{ end }} + + {{/* ---- Next (right side) ---- */}} + {{ if $next }} + <a href="{{ $next.Permalink }}" + class="article-nav-link truncate md:max-w-[45%] text-right" + rel="next" + title="{{ $next.Title }}"> + {{ $next.Title }} ► + </a> + {{ else }} + <span class="article-nav-placeholder text-right" aria-label="End of articles"> + (end) ► + </span> + {{ end }} + </div> +</nav> diff --git a/layouts/partials/article-types/life.html b/layouts/partials/article-types/life.html new file mode 100644 index 0000000..01cd8b8 --- /dev/null +++ b/layouts/partials/article-types/life.html @@ -0,0 +1,3 @@ +<div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} +</div> diff --git a/layouts/partials/article-types/link.html b/layouts/partials/article-types/link.html new file mode 100644 index 0000000..bbf7906 --- /dev/null +++ b/layouts/partials/article-types/link.html @@ -0,0 +1,17 @@ +<div class="mb-8 p-6 bg-surface/30 border border-accent/30 rounded-lg"> + <a + href="{{ .Params.external_url }}" + target="_blank" + rel="noopener noreferrer" + class="inline-flex items-center gap-2 px-6 py-3 bg-accent text-white rounded font-semibold hover:opacity-90 transition-opacity" + > + {{ .Params.link_title | default (i18n "readMore") }} + <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"> + <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path> + </svg> + </a> +</div> + +<div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} +</div> diff --git a/layouts/partials/article-types/photo.html b/layouts/partials/article-types/photo.html new file mode 100644 index 0000000..743e02a --- /dev/null +++ b/layouts/partials/article-types/photo.html @@ -0,0 +1,19 @@ +{{ if .Params.featured_image }} +<figure class="mb-8"> + <img + src="{{ .Params.featured_image }}" + alt="{{ .Title }}" + loading="lazy" + class="w-full h-auto rounded-lg border border-border/30" + /> + {{ if .Params.featured_image_caption }} + <figcaption class="bg-surface/30 p-4 text-sm text-text-dim rounded-b-lg"> + {{ .Params.featured_image_caption }} + </figcaption> + {{ end }} +</figure> +{{ end }} + +<div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} +</div> diff --git a/layouts/partials/article-types/quote.html b/layouts/partials/article-types/quote.html new file mode 100644 index 0000000..f27d189 --- /dev/null +++ b/layouts/partials/article-types/quote.html @@ -0,0 +1,15 @@ +<blockquote class="mb-8 pl-6 border-l-4 border-[--type-quote] italic text-2xl text-text"> + "{{ .Params.quote_text }}" +</blockquote> + +{{ if .Params.quote_author }} +<div class="text-right text-text-dim mb-12"> + — {{ .Params.quote_author }} +</div> +{{ end }} + +{{ if .Content }} +<div class="prose prose-invert max-w-none"> + {{ .Content }} +</div> +{{ end }} diff --git a/layouts/partials/article-types/tech.html b/layouts/partials/article-types/tech.html new file mode 100644 index 0000000..01cd8b8 --- /dev/null +++ b/layouts/partials/article-types/tech.html @@ -0,0 +1,3 @@ +<div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} +</div> diff --git a/layouts/partials/back-to-top.html b/layouts/partials/back-to-top.html new file mode 100644 index 0000000..75095e3 --- /dev/null +++ b/layouts/partials/back-to-top.html @@ -0,0 +1,23 @@ +<div + x-data="{ visible: false }" + @scroll.window="visible = (window.scrollY / (document.documentElement.scrollHeight - window.innerHeight)) >= 0.33" +> + <button + x-show="visible" + x-cloak + x-transition:enter="transition ease-out duration-300" + x-transition:enter-start="opacity-0 translate-y-4" + x-transition:enter-end="opacity-100 translate-y-0" + x-transition:leave="transition ease-in duration-200" + x-transition:leave-start="opacity-100 translate-y-0" + x-transition:leave-end="opacity-0 translate-y-4" + class="back-to-top" + aria-label="{{ i18n "back_to_top" | default "Back to top" }}" + type="button" + @click="window.scrollTo({ top: 0, behavior: window.matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' })" + > + <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> + <polyline points="18 15 12 9 6 15"></polyline> + </svg> + </button> +</div> diff --git a/layouts/partials/breadcrumb-jsonld.html b/layouts/partials/breadcrumb-jsonld.html new file mode 100644 index 0000000..95b5e69 --- /dev/null +++ b/layouts/partials/breadcrumb-jsonld.html @@ -0,0 +1,36 @@ +{{- $homeURL := absURL "/" -}} +{{- $homeName := i18n "home" -}} +{{- if eq .Lang "it" -}} + {{- $homeURL = absURL "/it/" -}} +{{- end -}} +<script type="application/ld+json"> +{ + "@context": "https://schema.org", + "@type": "BreadcrumbList", + "itemListElement": [ + { + "@type": "ListItem", + "position": 1, + "name": "{{ $homeName }}", + "item": "{{ $homeURL }}" + } + {{- $pos := 1 -}} + {{- range .Ancestors.Reverse -}} + {{- if ne .Kind "home" -}} + {{- $pos = add $pos 1 -}} + ,{ + "@type": "ListItem", + "position": {{ $pos }}, + "name": "{{ .Title }}", + "item": "{{ .Permalink }}" + } + {{- end -}} + {{- end -}} + ,{ + "@type": "ListItem", + "position": {{ add $pos 1 }}, + "name": "{{ .Title }}" + } + ] +} +</script> diff --git a/layouts/partials/breadcrumb.html b/layouts/partials/breadcrumb.html new file mode 100644 index 0000000..c15dfeb --- /dev/null +++ b/layouts/partials/breadcrumb.html @@ -0,0 +1,16 @@ +{{ $homeLink := "/" }} +{{ if eq .Lang "it" }} + {{ $homeLink = "/it/" }} +{{ end }} + +<nav class="breadcrumb mb-6" aria-label="Breadcrumb"> + <a href="{{ $homeLink }}">{{ i18n "home" }}</a> + {{ range .Ancestors.Reverse }} + {{ if ne .Kind "home" }} + <span class="breadcrumb-separator">/</span> + <a href="{{ .RelPermalink }}">{{ .Title }}</a> + {{ end }} + {{ end }} + <span class="breadcrumb-separator">/</span> + <span>{{ .Title }}</span> +</nav> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html new file mode 100644 index 0000000..1e50d6f --- /dev/null +++ b/layouts/partials/footer.html @@ -0,0 +1,89 @@ +{{- $quotes := .Site.Data.quotes.quotes -}} + +<footer class="mt-16 frosted-bar border-t py-12 relative z-20"> + <div class="container mx-auto px-4"> + <div class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-8"> + + <!-- Column 1: Fortune Cookie --> + <div> + <p class="font-mono text-xs text-text-dim mb-2">$ fortune</p> + <div id="fortune-quote" aria-live="polite" data-quotes='{{ $quotes | jsonify }}'> + <blockquote> + <p class="fortune-text font-mono text-sm text-text italic leading-relaxed"> + "{{ (index $quotes 0).text }}" + </p> + <cite class="fortune-author font-mono text-xs text-text-dim not-italic mt-2 block text-right"> + — {{ (index $quotes 0).author }} + </cite> + </blockquote> + </div> + </div> + <hr class="md:hidden border-border my-6" /> + + <!-- Column 2: Stack & Feature Badges --> + <div> + <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_built_with" }}</p> + <div class="flex flex-wrap gap-1.5 mb-3"> + <span class="badge-footer-accent">Hugo</span> + <span class="badge-footer-accent">Tailwind CSS</span> + <span class="badge-footer-accent">Alpine.js</span> + <span class="badge-footer-accent">HTML5</span> + <span class="badge-footer-accent">CSS3</span> + <span class="badge-footer-accent">JavaScript</span> + <span class="badge-footer-accent">Claude Code</span> + </div> + + <p class="text-text-dim font-mono text-xs mb-1">{{ i18n "footer_features" }}</p> + <div class="flex flex-wrap gap-1.5"> + <a href="{{ .Site.LanguagePrefix }}/is/a11y-compliant/" class="badge-footer-accent2 hover:opacity-80 transition-opacity">WCAG 2.1 AA</a> + <span class="badge-footer-accent2">Open Source</span> + <span class="badge-footer-accent2">Privacy Friendly</span> + <span class="badge-footer-accent2">Keyboard Accessible</span> + <span class="badge-footer-accent2">Screen Reader Compatible</span> + </div> + </div> + <hr class="md:hidden border-border my-6" /> + + <!-- Column 3: About (Terminal Readout) --> + <div> + <dl class="space-y-1"> + <div class="flex gap-2"> + <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_name" }}:</dt> + <dd class="text-text font-mono text-xs">{{ .Site.Params.author }}</dd> + </div> + <div class="flex gap-2"> + <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_role" }}:</dt> + <dd class="text-text font-mono text-xs">{{ i18n "footer_about_role_value" }}</dd> + </div> + <div class="flex gap-2"> + <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_cert" }}:</dt> + <dd class="text-accent2 font-mono text-xs font-semibold">eJPT</dd> + </div> + <div class="flex gap-2"> + <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_os" }}:</dt> + <dd class="text-text font-mono text-xs">{{ i18n "footer_about_os_value" }} <span class="text-text-dim">({{ i18n "footer_about_os_year" }})</span></dd> + </div> + <div class="flex gap-2"> + <dt class="text-text-dim font-mono text-xs w-20 shrink-0">{{ i18n "footer_about_focus" }}:</dt> + <dd class="text-text font-mono text-xs">{{ i18n "footer_about_focus_value" }}</dd> + </div> + </dl> + </div> + </div> + + <!-- Copyright Bar --> + <div class="pt-8 border-t border-border text-center text-xs text-text-dim space-y-1"> + <p> + {{ i18n "footer_made_with" }} <span aria-hidden="true">❤️</span><span class="sr-only">{{ i18n "footer_love" }}</span>, + {{ i18n "footer_lack_of" }} <span aria-hidden="true">🛏️</span><span class="sr-only">{{ i18n "footer_sleep" }}</span>, + {{ i18n "footer_lots_of" }} <span aria-hidden="true">☕</span><span class="sr-only">{{ i18n "footer_coffee" }}</span> + {{ i18n "footer_by" }} <a href="{{ .Site.LanguagePrefix }}/is/" class="text-accent hover:text-accent2 transition-colors py-2 px-1">danix</a> + </p> + <p>© {{ now.Year }} {{ .Site.Params.author }}. {{ i18n "allRightsReserved" }}</p> + </div> + </div> + + <!-- Fortune.js: Pick a random quote on each page load --> + {{- $fortuneJS := resources.Get "js/fortune.js" | minify -}} + <script src="{{ $fortuneJS.RelPermalink }}"></script> +</footer> diff --git a/layouts/partials/form-components.html b/layouts/partials/form-components.html new file mode 100644 index 0000000..6c6416b --- /dev/null +++ b/layouts/partials/form-components.html @@ -0,0 +1,219 @@ +{{ define "form-components" }} + +<!-- ============================================ + FORM INPUT EXAMPLES + ============================================ --> + +<section class="my-12 space-y-8"> + <h2>Form Components</h2> + + <!-- Basic Form Group --> + <div class="form-group"> + <label for="input-text">Text Input</label> + <input type="text" id="input-text" class="form-input" placeholder="Enter text..."> + </div> + + <!-- Form Group with Error --> + <div class="form-group error"> + <label for="input-email">Email (with error)</label> + <input type="email" id="input-email" class="form-input error" value="invalid-email"> + <div class="form-error">{{ i18n "form_invalid_email" }}</div> + </div> + + <!-- Form Group with Help Text --> + <div class="form-group"> + <label for="input-password" class="">Password</label> + <input type="password" id="input-password" class="form-input" placeholder="••••••"> + <div class="form-group-help">{{ i18n "form_password_help" | default "Must be at least 8 characters" }}</div> + </div> + + <!-- Disabled Input --> + <div class="form-group"> + <label for="input-disabled">Disabled Input</label> + <input type="text" id="input-disabled" class="form-input" value="Cannot edit" disabled> + </div> + + <!-- ============================================ + TEXTAREA EXAMPLES + ============================================ --> + + <div class="form-group"> + <label for="textarea-message">Message</label> + <textarea id="textarea-message" class="form-textarea" placeholder="Enter your message..."></textarea> + </div> + + <!-- ============================================ + SELECT EXAMPLES + ============================================ --> + + <div class="form-group"> + <label for="select-option">Select an option</label> + <select id="select-option" class="form-select"> + <option>Choose...</option> + <option>Option 1</option> + <option>Option 2</option> + <option>Option 3</option> + </select> + </div> + + <!-- ============================================ + CHECKBOX EXAMPLES + ============================================ --> + + <div class="form-group"> + <label for="agree-terms" class="flex items-center gap-3 cursor-pointer"> + <input type="checkbox" id="agree-terms" class="form-checkbox"> + <span>{{ i18n "form_agree_terms" | default "I agree to the terms" }}</span> + </label> + </div> + + <!-- Multiple Checkboxes --> + <div class="form-group space-y-2"> + <p class="font-semibold">{{ i18n "form_select_interests" | default "Select your interests" }}</p> + <label for="interest-tech" class="flex items-center gap-3 cursor-pointer"> + <input type="checkbox" id="interest-tech" class="form-checkbox" name="interests"> + <span>{{ i18n "form_interest_tech" | default "Technology" }}</span> + </label> + <label for="interest-design" class="flex items-center gap-3 cursor-pointer"> + <input type="checkbox" id="interest-design" class="form-checkbox" name="interests"> + <span>{{ i18n "form_interest_design" | default "Design" }}</span> + </label> + </div> + + <!-- ============================================ + RADIO BUTTON EXAMPLES + ============================================ --> + + <div class="form-group space-y-2"> + <p class="font-semibold">{{ i18n "form_select_preference" | default "Select a preference" }}</p> + <label for="preference-option-a" class="flex items-center gap-3 cursor-pointer"> + <input type="radio" id="preference-option-a" name="preference" class="form-radio"> + <span>{{ i18n "form_option_a" | default "Option A" }}</span> + </label> + <label for="preference-option-b" class="flex items-center gap-3 cursor-pointer"> + <input type="radio" id="preference-option-b" name="preference" class="form-radio"> + <span>{{ i18n "form_option_b" | default "Option B" }}</span> + </label> + </div> + + <!-- ============================================ + FORM ROWS (MULTI-COLUMN) + ============================================ --> + + <div class="form-row"> + <div class="form-group"> + <label for="first-name">{{ i18n "form_first_name" | default "First Name" }}</label> + <input type="text" id="first-name" class="form-input" placeholder="John"> + </div> + <div class="form-group"> + <label for="last-name">{{ i18n "form_last_name" | default "Last Name" }}</label> + <input type="text" id="last-name" class="form-input" placeholder="Doe"> + </div> + </div> + + <!-- ============================================ + INLINE FORMS + ============================================ --> + + <div class="form-inline"> + <div class="form-group"> + <label for="search-input">{{ i18n "form_search" | default "Search" }}</label> + <input type="text" id="search-input" class="form-input" placeholder="Type to search..."> + </div> + <button class="btn btn-primary">{{ i18n "form_search_btn" | default "Search" }}</button> + </div> + + <!-- ============================================ + MODALS (DEMO BUTTONS) + ============================================ --> + + <div class="space-y-3 mt-8"> + <h3>Modal Examples</h3> + <button class="btn btn-primary" @click="showAlertModal = true">{{ i18n "form_open_alert" | default "Open Alert Modal" }}</button> + <button class="btn btn-secondary" @click="showConfirmModal = true">{{ i18n "form_open_confirm" | default "Open Confirm Modal" }}</button> + <button class="btn btn-outline" @click="showContentModal = true">{{ i18n "form_open_content" | default "Open Content Modal" }}</button> + </div> + + <!-- ============================================ + NOTIFICATIONS (DEMO BUTTONS) + ============================================ --> + + <div class="space-y-3 mt-8"> + <h3>Notifications</h3> + <button class="btn btn-primary btn-sm" @click="showToast('success')">Success Toast</button> + <button class="btn btn-secondary btn-sm" @click="showToast('error')">Error Toast</button> + <button class="btn btn-sm" style="background-color: #3b82f6; color: white;" @click="showToast('info')">Info Toast</button> + <button class="btn btn-sm" style="background-color: #f59e0b; color: white;" @click="showToast('warning')">Warning Toast</button> + </div> + +</section> + +<!-- ============================================ + ALERT MODAL + ============================================ --> + +<div class="modal" :class="{ active: showAlertModal }" x-show="showAlertModal"> + <div class="modal-backdrop" @click="showAlertModal = false" aria-hidden="true"></div> + <div class="modal-content modal-sm" role="dialog" aria-labelledby="alert-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)"> + <div class="modal-header"> + <h3 class="modal-title" id="alert-modal-title">{{ i18n "form_alert_title" | default "Alert" }}</h3> + <div class="modal-close" @click="showAlertModal = false" aria-label="{{ i18n "closeMenu" }}"></div> + </div> + <div class="modal-body"> + <p>{{ i18n "form_alert_message" | default "This is an alert modal. Click OK to dismiss." }}</p> + </div> + <div class="modal-footer"> + <button class="btn btn-primary" @click="showAlertModal = false">{{ i18n "form_ok" | default "OK" }}</button> + </div> + </div> +</div> + +<!-- ============================================ + CONFIRM MODAL + ============================================ --> + +<div class="modal" :class="{ active: showConfirmModal }" x-show="showConfirmModal"> + <div class="modal-backdrop" @click="showConfirmModal = false" aria-hidden="true"></div> + <div class="modal-content modal-sm" role="dialog" aria-labelledby="confirm-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)"> + <div class="modal-header"> + <h3 class="modal-title" id="confirm-modal-title">{{ i18n "form_confirm_title" | default "Confirm Action" }}</h3> + <div class="modal-close" @click="showConfirmModal = false" aria-label="{{ i18n "closeMenu" }}"></div> + </div> + <div class="modal-body"> + <p>{{ i18n "form_confirm_message" | default "Are you sure you want to continue?" }}</p> + </div> + <div class="modal-footer"> + <button class="btn btn-outline" @click="showConfirmModal = false">{{ i18n "form_cancel" | default "Cancel" }}</button> + <button class="btn btn-primary" @click="handleConfirm()">{{ i18n "form_confirm" | default "Confirm" }}</button> + </div> + </div> +</div> + +<!-- ============================================ + CONTENT MODAL + ============================================ --> + +<div class="modal" :class="{ active: showContentModal }" x-show="showContentModal"> + <div class="modal-backdrop" @click="showContentModal = false" aria-hidden="true"></div> + <div class="modal-content modal-md" role="dialog" aria-labelledby="content-modal-title" aria-modal="true" @x-show.transition.in="createFocusTrap($el)"> + <div class="modal-header"> + <h3 class="modal-title" id="content-modal-title">{{ i18n "form_content_title" | default "Modal with Content" }}</h3> + <div class="modal-close" @click="showContentModal = false" aria-label="{{ i18n "closeMenu" }}"></div> + </div> + <div class="modal-body"> + <p>{{ i18n "form_content_message" | default "This modal contains detailed content. You can add forms, lists, or any HTML here." }}</p> + <div class="mt-4"> + <div class="form-group"> + <label for="modal-input">Input in Modal</label> + <input type="text" id="modal-input" class="form-input" placeholder="Type here..."> + </div> + </div> + </div> + <div class="modal-footer"> + <button class="btn btn-outline" @click="showContentModal = false">{{ i18n "form_close" | default "Close" }}</button> + <button class="btn btn-primary">{{ i18n "form_save" | default "Save" }}</button> + </div> + </div> +</div> + +{{ end }} diff --git a/layouts/partials/hamburger-menu.html b/layouts/partials/hamburger-menu.html new file mode 100644 index 0000000..5d8d8ed --- /dev/null +++ b/layouts/partials/hamburger-menu.html @@ -0,0 +1,125 @@ +<!-- Mobile menu overlay (Alpine.js controlled) --> +<div + x-cloak + x-data="{ menuOpen: false }" + @toggle-menu.window="menuOpen = !menuOpen" + @keydown.escape.window="menuOpen = false" + :class="{ 'opacity-0 invisible': !menuOpen, 'opacity-100 visible': menuOpen }" + class="fixed inset-0 bg-black/50 backdrop-blur transition-all duration-300 z-40" + :aria-hidden="!menuOpen" + @click="if ($event.target === $el) menuOpen = false" +> + <div + class="fixed top-0 right-0 h-screen w-full max-w-sm bg-bg border-l border-border overflow-y-auto transform transition-transform duration-300 z-50" + :class="{ 'translate-x-full': !menuOpen, 'translate-x-0': menuOpen }" + > + <!-- Close button --> + <div class="flex items-center justify-between p-6 border-b border-border"> + <span class="font-bold text-lg text-accent font-oxanium">Menu</span> + <button + @click="menuOpen = false" + aria-label="{{ i18n "closeMenu" }}" + class="p-2 hover:bg-surface rounded transition-colors" + > + <i data-feather="x" class="w-5 h-5"></i> + </button> + </div> + + <!-- Menu items --> + <nav class="p-6" role="navigation" aria-label="{{ i18n "mainMenu" }}"> + {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }} + {{ range .Site.Menus.main }} + {{ $menuPath := strings.TrimSuffix "/" .URL }} + {{ $isActive := eq $menuPath $currentPath }} + <a + href="{{ .URL }}" + @click="menuOpen = false" + class="block py-4 text-lg font-medium transition-colors border-b border-border/30 {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" + {{ if $isActive }}aria-current="page"{{ end }} + > + {{ i18n .Name }} + </a> + {{ end }} + </nav> + + <!-- Mobile search bar --> + <div class="p-6 border-b border-border" x-data="mobileSearch()"> + <label for="search-input-mobile" class="sr-only"> + {{ i18n "searchPlaceholder" }} + </label> + <input + id="search-input-mobile" + type="text" + :value="searchQuery" + @input="filterArticles($el.value); ensureIndexLoaded()" + placeholder="{{ i18n "searchPlaceholder" }}" + class="w-full px-4 py-2 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text text-sm" + aria-describedby="mobile-search-results" + /> + + <!-- Mobile search results --> + <div id="mobile-search-results" class="mt-3 space-y-2" x-show="filteredArticles.length > 0" role="region" aria-live="polite"> + <template x-for="article in filteredArticles" :key="article.url"> + <div class="p-3 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded text-sm"> + <a :href="article.url" @click="menuOpen = false" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-1 py-1"> + <h4 class="font-bold text-accent" x-text="article.title"></h4> + <p class="text-xs text-text-dim mt-0.5" x-text="article.date"></p> + </a> + </div> + </template> + </div> + + <!-- Empty state --> + <div + x-show="searchQuery && filteredArticles.length === 0" + class="mt-3 text-sm text-text-dim" + role="status" + > + {{ i18n "noSearchResults" }} + </div> + </div> + + <!-- Language switcher --> + <div class="p-6"> + <div class="text-sm text-text-dim mb-3">{{ i18n "language" }}</div> + <div class="flex gap-2"> + {{ $currentLang := .Page.Language }} + {{ $currentPath := .RelPermalink }} + {{ range .Site.Languages }} + {{ $langCode := .Lang }} + {{ $langName := .LanguageName }} + {{ $current := eq $langCode $currentLang }} + <!-- Build the translated URL by replacing language prefix --> + {{ $url := $currentPath }} + {{ if eq $langCode "en" }} + {{ if hasPrefix $currentPath "/it/" }} + {{ $url = strings.TrimPrefix "/it" $currentPath }} + {{ end }} + {{ else }} + {{ if not (hasPrefix $currentPath "/it/") }} + {{ $url = printf "/it%s" $currentPath }} + {{ end }} + {{ end }} + <a + href="{{ $url }}" + @click="menuOpen = false" + class="flex-1 py-2 px-3 text-center rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}bg-surface hover:bg-surface/80{{ end }}" + > + {{ $langName }} + </a> + {{ end }} + </div> + </div> + + </div> +</div> + +<script> + // Close menu before page navigation to prevent flicker + window.addEventListener('beforeunload', () => { + const overlay = document.querySelector('[x-data*="menuOpen"]'); + if (overlay && overlay.__x) { + overlay.__x.$data.menuOpen = false; + } + }); +</script> diff --git a/layouts/partials/head-meta.html b/layouts/partials/head-meta.html new file mode 100644 index 0000000..34a60e2 --- /dev/null +++ b/layouts/partials/head-meta.html @@ -0,0 +1,57 @@ +{{/* description: per-page excerpt wins over site-wide description */}} +{{ $description := .Site.Language.Params.siteDescription }} +{{ with .Params.excerpt }}{{ $description = . }}{{ end }} + +{{/* og:type: "article" only for single content pages that have a date */}} +{{ $ogType := "website" }} +{{ if and (eq .Kind "page") .Date }}{{ $ogType = "article" }}{{ end }} + +{{/* og:image: page image wins; fall back to lamp for homepage, dark thumbnail for articles */}} +{{ $defaultImage := "images/default_thumbnail_dark.png" }} +{{ if .IsHome }}{{ $defaultImage = "images/lampD.png" }}{{ end }} +{{ $ogImage := printf "%s%s" .Site.BaseURL $defaultImage }} +{{ with .Params.image }}{{ $ogImage = printf "%s%s" $.Site.BaseURL (strings.TrimLeft "/" .) }}{{ end }} + +{{/* author: page-level param wins; fall back to site param */}} +{{ $author := .Site.Params.author }} +{{ with .Params.author }}{{ $author = . }}{{ end }} + +<meta name="description" content="{{ $description }}"> + +<meta property="og:title" content="{{ .Title }}"> +<meta property="og:description" content="{{ $description }}"> +<meta property="og:type" content="{{ $ogType }}"> +<meta property="og:url" content="{{ .Permalink }}"> +<meta property="og:site_name" content="{{ .Site.Title }}"> +<meta property="og:locale" content="{{ .Site.Language.Params.locale }}"> +<meta property="og:image" content="{{ $ogImage }}"> + +{{ if eq $ogType "article" }} +<meta property="article:published_time" content="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}"> +<meta property="article:author" content="{{ $author }}"> +{{ end }} + +<meta name="twitter:card" content="summary_large_image"> +<meta name="twitter:title" content="{{ .Title }}"> +<meta name="twitter:description" content="{{ $description }}"> +<meta name="twitter:image" content="{{ $ogImage }}"> +{{ with .Site.Params.twitterHandle }} +<meta name="twitter:site" content="@{{ . }}"> +{{ end }} + +{{/* SEO: Self-referencing canonical */}} +<link rel="canonical" href="{{ .Permalink }}"> + +{{/* SEO: hreflang alternates for all language variants */}} +{{ range .AllTranslations }} +<link rel="alternate" hreflang="{{ .Language.Lang }}" href="{{ .Permalink }}"> +{{ end }} +{{/* x-default: EN version (served at root /) */}} +{{ range .AllTranslations }} + {{ if eq .Language.Lang "en" }} +<link rel="alternate" hreflang="x-default" href="{{ .Permalink }}"> + {{ end }} +{{ end }} + +{{/* Structured data: BreadcrumbList JSON-LD (single pages and named sections) */}} +{{ if or (eq .Kind "page") (eq .Kind "section") }}{{ partial "breadcrumb-jsonld.html" . }}{{ end }} diff --git a/layouts/partials/header.html b/layouts/partials/header.html new file mode 100644 index 0000000..914e645 --- /dev/null +++ b/layouts/partials/header.html @@ -0,0 +1,94 @@ +<header class="fixed top-0 left-0 right-0 z-50 frosted-bar border-b"> + <nav class="container mx-auto px-4 py-4 flex items-center justify-between"> + <!-- Logo and Site Name --> + {{ $homeLink := "/" }} + {{ if eq .Lang "it" }} + {{ $homeLink = "/it/" }} + {{ end }} + <a href="{{ $homeLink }}" class="flex items-center gap-2 hover:opacity-80 transition-opacity"> + <img src="/images/lampD.png" alt="Logo" style="width: 40px; height: 40px; max-width: none;" class="flex-shrink-0"> + <span class="hidden md:inline font-bold text-lg text-accent font-oxanium">danix.xyz</span> + </a> + + <!-- Desktop menu (hidden on mobile) --> + <div class="hidden md:flex items-center gap-8"> + {{ $currentPath := strings.TrimSuffix "/" .RelPermalink }} + {{ range .Site.Menus.main }} + {{ $menuPath := strings.TrimSuffix "/" .URL }} + {{ $isActive := eq $menuPath $currentPath }} + <a + href="{{ .URL }}" + class="text-sm transition-colors {{ if $isActive }}text-accent font-bold{{ else }}hover:text-accent{{ end }}" + {{ if $isActive }}aria-current="page"{{ end }} + > + {{ i18n .Name }} + </a> + {{ end }} + </div> + + <!-- Right side controls: Search, Language, Theme, Menu --> + <div class="flex items-center gap-4 md:gap-6"> + <!-- Search button (desktop only) --> + <button + x-data + @click="$dispatch('open-search')" + aria-label="{{ i18n "searchArticles" }}" + class="hidden md:flex p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent" + > + <i data-feather="search" class="w-5 h-5" aria-hidden="true"></i> + </button> + + <!-- Language switcher (desktop) --> + <div class="hidden md:flex gap-2"> + {{ $currentLang := .Page.Language }} + {{ $currentPath := .RelPermalink }} + {{ range .Site.Languages }} + {{ $langCode := .Lang }} + {{ $langName := .LanguageName }} + {{ $current := eq $langCode $currentLang }} + <!-- Build the translated URL by replacing language prefix --> + {{ $url := $currentPath }} + {{ if eq $langCode "en" }} + {{ if hasPrefix $currentPath "/it/" }} + {{ $url = strings.TrimPrefix "/it" $currentPath }} + {{ end }} + {{ else }} + {{ if not (hasPrefix $currentPath "/it/") }} + {{ $url = printf "/it%s" $currentPath }} + {{ end }} + {{ end }} + <a + href="{{ $url }}" + class="px-2 py-1 text-sm rounded transition-colors {{ if $current }}bg-accent text-white{{ else }}hover:bg-surface{{ end }}" + > + {{ $langName }} + </a> + {{ end }} + </div> + + <!-- Theme toggle button --> + <button + id="theme-toggle" + aria-label="{{ i18n "toggleTheme" }}" + class="p-2 rounded hover:bg-surface transition-colors" + > + <i id="theme-icon-sun" data-feather="sun" class="w-5 h-5" aria-hidden="true"></i> + <i id="theme-icon-moon" data-feather="moon" class="w-5 h-5" aria-hidden="true"></i> + </button> + + <!-- Hamburger menu button (mobile only) --> + <button + x-data + @click="$dispatch('toggle-menu')" + aria-label="{{ i18n "toggleMenu" }}" + aria-controls="hamburger-menu" + class="md:hidden p-2 rounded hover:bg-surface transition-colors" + > + <i data-feather="menu" class="w-5 h-5"></i> + </button> + </div> + </nav> + + <!-- Mobile hamburger overlay menu --> + {{ partial "hamburger-menu.html" . }} +</header> diff --git a/layouts/partials/search-modal.html b/layouts/partials/search-modal.html new file mode 100644 index 0000000..6b96b3a --- /dev/null +++ b/layouts/partials/search-modal.html @@ -0,0 +1,87 @@ +<!-- Desktop Search Modal (hidden on mobile, shown via Alpine) --> +<div + x-cloak + x-data="searchOverlay()" + @keydown.escape.window="handleEscape($event)" + @open-search.window="open()" + class="fixed inset-0 z-50" + :class="{ 'flex items-center justify-center': isOpen, 'hidden': !isOpen }" + x-show="isOpen" +> + <!-- Overlay backdrop --> + <div + class="absolute inset-0 bg-black/50" + @click="close()" + aria-hidden="true" + ></div> + + <!-- Modal content --> + <div + class="relative bg-bg border-2 border-accent rounded-lg shadow-xl max-w-2xl mx-4 w-full" + role="dialog" + aria-labelledby="search-modal-title" + aria-modal="true" + > + <!-- Header with close button --> + <div class="flex items-center justify-between p-6 border-b border-border"> + <h2 id="search-modal-title" class="text-xl font-bold text-accent"> + {{ i18n "searchArticles" }} + </h2> + <button + @click="close()" + aria-label="Close search" + class="p-2 rounded hover:bg-surface transition-colors focus:outline-none focus:ring-2 focus:ring-accent" + > + <i data-feather="x" class="w-5 h-5" aria-hidden="true"></i> + </button> + </div> + + <!-- Search input --> + <div class="p-6 border-b border-border"> + <label for="search-input-desktop" class="sr-only"> + {{ i18n "searchPlaceholder" }} + </label> + <input + id="search-input-desktop" + type="text" + :value="searchQuery" + @input="filterArticles($el.value)" + placeholder="{{ i18n "searchPlaceholder" }}" + class="w-full px-4 py-3 border-2 border-border rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent bg-bg text-text" + aria-describedby="search-results" + /> + </div> + + <!-- Results container --> + <div id="search-results" class="max-h-96 overflow-y-auto p-6"> + <!-- Results list --> + <div x-show="filteredArticles.length > 0" class="space-y-3" role="region" aria-live="polite"> + <template x-for="article in filteredArticles" :key="article.url"> + <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors rounded"> + <a :href="article.url" class="block focus:outline-none focus:ring-2 focus:ring-accent rounded px-2 py-1"> + <h3 class="font-bold text-accent hover:underline" x-text="article.title"></h3> + <p class="text-sm text-text-dim mt-1" x-text="article.date"></p> + </a> + </div> + </template> + </div> + + <!-- Empty state --> + <div + x-show="searchQuery && filteredArticles.length === 0" + class="text-center py-8 text-text-dim" + role="status" + > + {{ i18n "noSearchResults" }} + </div> + + <!-- No query state --> + <div + x-show="!searchQuery" + class="text-center py-8 text-text-dim" + > + {{ i18n "searchPlaceholder" }} + </div> + </div> + </div> +</div> diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html new file mode 100644 index 0000000..a2225f1 --- /dev/null +++ b/layouts/partials/sidebar.html @@ -0,0 +1,54 @@ +<aside class="order-last md:order-none md:col-span-1"> + <!-- Author info widget (optional - can be expanded) --> + <div class="sidebar-widget"> + <p class="sidebar-widget-label"># {{ i18n "author" }}</p> + <p class="text-text-dim text-sm leading-relaxed"> + {{ .Site.Params.author }} + </p> + </div> + + <hr class="sidebar-hr"> + + <!-- Social sharing widget --> + {{ partial "social-share.html" (dict "page" . "mode" "sidebar") }} + + <!-- Related posts widget (articles only) --> + {{ if and .Site.Params.relatedPosts (eq .Section "articles") }} + {{ $related := first 5 (.Site.RegularPages.Related .) }} + <hr class="sidebar-hr"> + <div class="sidebar-widget"> + <p class="sidebar-widget-label"># {{ i18n "relatedPosts" }}</p> + {{ if $related }} + <ul class="space-y-3"> + {{ range $related }} + {{ $articleType := .Params.type | default "life" }} + {{ $excerpt := .Description | default .Summary }} + <li + class="pl-3 border-l-2" + style="border-color: var(--type-{{ $articleType }});" + > + <a href="{{ .RelPermalink }}" class="text-sm hover:text-accent transition-colors leading-snug block"> + {{ .Title }} + <time class="text-text-dim/60 ml-1" datetime="{{ .PublishDate.Format "2006-01-02T15:04:05Z07:00" }}"> + · {{ .PublishDate.Format "Jan 2006" }} + </time> + </a> + {{ if $excerpt }} + <p class="text-xs text-text-dim/70 leading-snug mt-0.5 line-clamp-1"> + {{ $excerpt | plainify | truncate 60 }} + </p> + {{ end }} + </li> + {{ end }} + </ul> + {{ else }} + <p class="text-sm text-text-dim">{{ i18n "noRelated" }}</p> + {{ end }} + </div> + {{ end }} + + <hr class="sidebar-hr"> + + <!-- Tag Cloud Widget --> + {{ partial "tag-cloud.html" (dict "page" . "showCount" false "wrapInWidget" true "maxTags" 15) }} +</aside> diff --git a/layouts/partials/social-share.html b/layouts/partials/social-share.html new file mode 100644 index 0000000..9e9be43 --- /dev/null +++ b/layouts/partials/social-share.html @@ -0,0 +1,123 @@ +{{ $page := .page }} +{{ $mode := .mode | default "sidebar" }} +{{ $url := $page.Permalink | urlquery }} +{{ $title := $page.Title | urlquery }} + +{{ $gridClass := "share-grid gap-1" }} +{{ if eq $mode "inline" }} + {{ $gridClass = "flex flex-wrap justify-center gap-1" }} +{{ end }} + +<div class="sidebar-widget"> + <p class="sidebar-widget-label"># {{ i18n "share" }}</p> + <nav aria-label="{{ i18n "share" }}"> + <div class="{{ $gridClass }}"> + + <!-- Copy link --> + <div x-data="{ copied: false }"> + <button + @click="navigator.clipboard.writeText('{{ $page.Permalink }}').then(() => { copied = true; setTimeout(() => copied = false, 2000) })" + :aria-label="copied ? '{{ i18n "linkCopied" }}' : '{{ i18n "copyLink" }}'" + :class="copied ? 'btn-share btn-share--copied' : 'btn-share'" + > + <i x-show="!copied" data-feather="copy" aria-hidden="true"></i> + <i x-show="copied" data-feather="check" aria-hidden="true"></i> + </button> + </div> + + <!-- Email --> + <a + href="mailto:?subject={{ $title }}&body={{ $title }}%0A%0A{{ $page.Permalink | urlquery }}" + aria-label="{{ i18n "shareViaEmail" }}" + class="btn-share" + > + <i data-feather="mail" aria-hidden="true"></i> + </a> + + <!-- Facebook --> + <a + href="https://www.facebook.com/sharer/sharer.php?u={{ $url }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "facebook" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" focusable="false"> + <path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/> + </svg> + </a> + + <!-- Twitter / X --> + <a + href="https://twitter.com/intent/tweet?url={{ $url }}&text={{ $title }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "twitter" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/> + </svg> + </a> + + <!-- Reddit --> + <a + href="https://www.reddit.com/submit?url={{ $url }}&title={{ $title }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "reddit" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M12 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0zm5.01 4.744c.688 0 1.25.561 1.25 1.249a1.25 1.25 0 0 1-2.498.056l-2.597-.547-.8 3.747c1.824.07 3.48.632 4.674 1.488.308-.309.73-.491 1.207-.491.968 0 1.754.786 1.754 1.754 0 .716-.435 1.333-1.01 1.614a3.111 3.111 0 0 1 .042.52c0 2.694-3.13 4.87-7.004 4.87-3.874 0-7.004-2.176-7.004-4.87 0-.183.015-.366.043-.534A1.748 1.748 0 0 1 4.028 12c0-.968.786-1.754 1.754-1.754.463 0 .898.196 1.207.49 1.207-.883 2.878-1.43 4.744-1.487l.885-4.182a.342.342 0 0 1 .14-.197.35.35 0 0 1 .238-.042l2.906.617a1.214 1.214 0 0 1 1.108-.701zM9.25 12C8.561 12 8 12.562 8 13.25c0 .687.561 1.248 1.25 1.248.687 0 1.248-.561 1.248-1.249 0-.688-.561-1.249-1.249-1.249zm5.5 0c-.687 0-1.248.561-1.248 1.25 0 .687.561 1.248 1.249 1.248.688 0 1.249-.561 1.249-1.249 0-.687-.562-1.249-1.25-1.249zm-5.466 3.99a.327.327 0 0 0-.231.094.33.33 0 0 0 0 .463c.842.842 2.484.913 2.961.913.477 0 2.105-.056 2.961-.913a.361.361 0 0 0 .029-.463.33.33 0 0 0-.464 0c-.547.533-1.684.73-2.512.73-.828 0-1.979-.196-2.512-.73a.326.326 0 0 0-.232-.095z"/> + </svg> + </a> + + <!-- Pinterest --> + <a + href="https://pinterest.com/pin/create/button/?url={{ $url }}&description={{ $title }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "pinterest" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M12 0C5.373 0 0 5.373 0 12c0 5.084 3.163 9.426 7.627 11.174-.105-.949-.2-2.405.042-3.441.218-.937 1.407-5.965 1.407-5.965s-.359-.719-.359-1.782c0-1.668.967-2.914 2.171-2.914 1.023 0 1.518.769 1.518 1.69 0 1.029-.655 2.568-.994 3.995-.283 1.194.599 2.169 1.777 2.169 2.133 0 3.772-2.249 3.772-5.495 0-2.873-2.064-4.882-5.012-4.882-3.414 0-5.418 2.561-5.418 5.207 0 1.031.397 2.138.893 2.738a.36.36 0 0 1 .083.345l-.333 1.36c-.053.22-.174.267-.402.161-1.499-.698-2.436-2.889-2.436-4.649 0-3.785 2.75-7.262 7.929-7.262 4.163 0 7.398 2.967 7.398 6.931 0 4.136-2.607 7.464-6.227 7.464-1.216 0-2.359-.632-2.75-1.378l-.748 2.853c-.271 1.043-1.002 2.35-1.492 3.146C9.57 23.812 10.763 24 12 24c6.627 0 12-5.373 12-12S18.627 0 12 0z"/> + </svg> + </a> + + <!-- WhatsApp --> + <a + href="https://api.whatsapp.com/send?text={{ $title }}%20{{ $page.Permalink | urlquery }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "whatsapp" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 0 1-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 0 1-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 0 1 2.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0 0 12.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 0 0 5.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 0 0-3.48-8.413z"/> + </svg> + </a> + + <!-- Telegram --> + <a + href="https://t.me/share/url?url={{ $url }}&text={{ $title }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "telegram" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M11.944 0A12 12 0 0 0 0 12a12 12 0 0 0 12 12 12 12 0 0 0 12-12A12 12 0 0 0 12 0a12 12 0 0 0-.056 0zm4.962 7.224c.1-.002.321.023.465.14a.506.506 0 0 1 .171.325c.016.093.036.306.02.472-.18 1.898-.962 6.502-1.36 8.627-.168.9-.499 1.201-.82 1.23-.696.065-1.225-.46-1.9-.902-1.056-.693-1.653-1.124-2.678-1.8-1.185-.78-.417-1.21.258-1.91.177-.184 3.247-2.977 3.307-3.23.007-.032.014-.15-.056-.212s-.174-.041-.249-.024c-.106.024-1.793 1.14-5.061 3.345-.48.33-.913.49-1.302.48-.428-.008-1.252-.241-1.865-.44-.752-.245-1.349-.374-1.297-.789.027-.216.325-.437.893-.663 3.498-1.524 5.83-2.529 6.998-3.014 3.332-1.386 4.025-1.627 4.476-1.635z"/> + </svg> + </a> + + <!-- Signal --> + <a + href="https://signal.me/#p/{{ $page.Permalink | urlquery }}" + target="_blank" rel="noopener noreferrer" + aria-label="{{ i18n "signal" }}" + class="btn-share" + > + <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor" stroke="none" aria-hidden="true" focusable="false"> + <path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm.157 5.32a6.68 6.68 0 0 1 6.143 4.032l.734-.267.55 1.513-.717.261a6.71 6.71 0 0 1 .133 1.327 6.68 6.68 0 0 1-.176 1.51l.69.252-.55 1.513-.707-.258A6.68 6.68 0 0 1 12 18.68a6.68 6.68 0 0 1-6.294-4.455l-.66.24-.55-1.513.677-.247A6.71 6.71 0 0 1 5 12.187a6.71 6.71 0 0 1 .16-1.438l-.698-.254.55-1.513.725.264A6.68 6.68 0 0 1 12.157 5.32zM12 7.2a4.8 4.8 0 1 0 0 9.6A4.8 4.8 0 0 0 12 7.2z"/> + </svg> + </a> + + </div> + </nav> +</div> diff --git a/layouts/partials/tag-cloud.html b/layouts/partials/tag-cloud.html new file mode 100644 index 0000000..b896e8d --- /dev/null +++ b/layouts/partials/tag-cloud.html @@ -0,0 +1,90 @@ +{{/* tag-cloud.html + Reusable tag cloud partial for homepage, sidebar, and 404 pages. + + Params (dict): + page Page required — calling page context (provides .Site.Taxonomies.tags, .Lang) + showCount bool optional — show post count per tag (default true) + heading string optional — heading text override (default: i18n "tagCloud") + headingLevel string optional — h2|h3|p for non-widget mode (default "h2") + wrapInWidget bool optional — wrap in .sidebar-widget for sidebar placement (default false) + maxTags int optional — max tags to show, 0 = all (default 0) +*/}} + +{{- $page := .page -}} +{{- $showCount := .showCount | default true -}} +{{- $heading := .heading | default (i18n "tagCloud") -}} +{{- $headingLevel := .headingLevel -}} +{{- $wrapInWidget := .wrapInWidget | default false -}} +{{- $maxTags := .maxTags | default 0 -}} + +{{- $tags := $page.Site.Taxonomies.tags -}} + +{{/* Early exit if no tags */}} +{{- if $tags -}} + +{{/* Compute max count for continuous scaling */}} +{{- $maxCount := 0 -}} +{{- range $tags -}} + {{- if gt .Count $maxCount -}}{{- $maxCount = .Count -}}{{- end -}} +{{- end -}} + +{{/* Ordered tag list (descending by count) */}} +{{- $orderedTags := $tags.ByCount -}} +{{- if gt $maxTags 0 -}} + {{- $orderedTags = first $maxTags $orderedTags -}} +{{- end -}} + +{{/* Render based on placement mode */}} +{{- if $wrapInWidget -}} +<div class="sidebar-widget"> + <p class="sidebar-widget-label"># {{ i18n "topTags" }}</p> + <nav aria-label="{{ i18n "exploreTopics" }}"> + <div class="tag-cloud" data-tag-cloud> +{{- else -}} +<section {{- if $headingLevel }} aria-labelledby="tag-cloud-heading"{{ end }}> + {{- if $headingLevel -}} + {{- if eq $headingLevel "h2" -}} + <h2 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h2> + {{- else if eq $headingLevel "h3" -}} + <h3 id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</h3> + {{- else -}} + <p id="tag-cloud-heading" class="text-lg font-semibold text-accent mb-4">{{ $heading }}</p> + {{- end -}} + {{- end -}} + <nav aria-label="{{ i18n "exploreTopics" }}"> + <div class="tag-cloud" data-tag-cloud> +{{- end -}} + + {{- range $orderedTags -}} + {{- $count := .Count -}} + {{- $ratio := (div (float $count) (float $maxCount)) -}} + {{- $size := (add 0.6 (mul $ratio 1.2)) -}} + {{- $opacity := (add 0.7 (mul $ratio 0.3)) -}} + <a + href="{{ .Page.RelPermalink }}" + class="tag-cloud-link" + data-weight="{{ printf "%.4f" $ratio }}" + {{- if ge $ratio 0.5 }} + style="font-size: {{ $size }}rem; color: var(--accent); opacity: {{ $opacity }};" + {{- else }} + style="font-size: {{ $size }}rem; color: var(--text-dim); opacity: {{ $opacity }};" + {{- end }} + aria-label="{{ .Name }}{{- if $showCount }} ({{ i18n "postCount" $count }}){{- end -}}" + > + {{- .Name -}} + {{- if $showCount -}} + <span class="tag-cloud-count" aria-hidden="true">{{ $count }}</span> + {{- end -}} + </a> + {{- end -}} + + </div> + </nav> + +{{- if $wrapInWidget -}} +</div> +{{- else -}} +</section> +{{- end -}} + +{{- end -}}{{/* end if $tags */}} diff --git a/layouts/partials/toast-container.html b/layouts/partials/toast-container.html new file mode 100644 index 0000000..7bbd3c0 --- /dev/null +++ b/layouts/partials/toast-container.html @@ -0,0 +1,13 @@ +{{ define "toast-container" }} + +<!-- Toast notification container with Alpine.js integration --> +<div class="toast-container" x-data="formComponentsData()"> + <template x-for="toast in toasts" :key="toast.id"> + <div class="toast" :class="`toast-${toast.type}`" x-show="toasts.length > 0"> + <span x-text="toast.message"></span> + <button class="toast-close" @click="removeToast(toast.id)" type="button" aria-label="Close notification"></button> + </div> + </template> +</div> + +{{ end }} |