diff options
Diffstat (limited to 'layouts')
75 files changed, 2430 insertions, 929 deletions
diff --git a/layouts/404.en.html b/layouts/404.en.html new file mode 100644 index 0000000..2829a20 --- /dev/null +++ b/layouts/404.en.html @@ -0,0 +1,142 @@ +{{ define "main" }} + +<main class="min-h-screen px-4 py-12"> + <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()"> + <div class="text-center"> + <!-- 404 Heading --> + <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in"> + 404 + </h1> + + <!-- Error Message --> + <h2 class="text-3xl md:text-4xl font-bold mb-6"> + {{ i18n "notFound" }} + </h2> + + <p class="text-lg text-text-dim mb-8"> + {{ i18n "notFoundMessage" }} + </p> + + <!-- Search Box --> + <div class="mb-12"> + <form id="search-form" class="flex flex-col gap-4"> + <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label> + <input + id="search-input" + type="text" + placeholder="{{ (i18n "searchPlaceholder") }}" + class="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" + @input="filterArticles($el.value)" + /> + </form> + <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0"> + <template x-for="article in filteredArticles" :key="article.title"> + <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors"> + <a :href="article.url" class="block text-left"> + <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4> + <p class="text-sm text-text-dim mt-1" x-text="article.date"></p> + </a> + </div> + </template> + </div> + <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim"> + {{ i18n "noSearchResults" }} + </div> + </div> + + <!-- Recent Articles Section --> + <div class="mb-12"> + <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3> + <div class="space-y-4"> + {{ range first 5 (where .Site.RegularPages "Section" "articles") }} + <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors"> + <a href="{{ .Permalink }}" class="block text-left"> + <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4> + <p class="text-sm text-text-dim mt-1"> + {{ .Date.Format "Jan 02, 2006" }} + </p> + </a> + </div> + {{ end }} + </div> + </div> + + <!-- Explore Topics --> + <div class="mb-12 text-left"> + {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }} + </div> + + <!-- Navigation Links --> + <div class="space-y-4 flex flex-col items-center mb-12"> + <a href="/" class="btn btn-primary"> + {{ i18n "goHome" }} + </a> + <a href="/articles/" class="btn btn-secondary"> + {{ i18n "browseArticles" }} + </a> + <a href="/is/here/" class="btn btn-outline"> + {{ i18n "contactSupport" }} + </a> + </div> + + <!-- Easter Egg Trigger --> + <div class="mt-12 pt-8 border-t border-border"> + <button + type="button" + @click="toggleEasterEgg()" + class="text-sm text-text-dim hover:text-accent transition-colors underline" + > + {{ i18n "followWhiteRabbit" }} + </button> + </div> + + <!-- Easter Egg Modal (Hidden by default) --> + <div + class="fixed inset-0 z-50" + :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }" + x-show="showEasterEgg" + x-cloak + > + <!-- Overlay --> + <div + class="absolute inset-0 bg-black/50" + @click="showEasterEgg = false" + ></div> + + <!-- Modal Content --> + <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4"> + <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2> + + <div class="space-y-4"> + <button + type="button" + @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'" + class="w-full btn btn-primary" + > + 💊 {{ i18n "bluePill" }} + </button> + + <button + type="button" + @click="goToRandomArticle()" + class="w-full btn btn-secondary" + > + 🐰 {{ i18n "redPill" }} + </button> + </div> + + <button + type="button" + @click="showEasterEgg = false" + class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors" + aria-label="Close modal" + > + ✕ + </button> + </div> + </div> + </div> + </div> +</main> + +{{ end }} diff --git a/layouts/404.html b/layouts/404.html deleted file mode 100644 index 3295630..0000000 --- a/layouts/404.html +++ /dev/null @@ -1,98 +0,0 @@ -<!DOCTYPE html> -<html lang="{{ .Site.Language.Locale }}" dir="{{ or .Site.Language.Direction `ltr` }}"> -<head> - <meta charset="utf-8"> - <meta name="viewport" content="width=device-width, initial-scale=1"> - <meta name="theme-color" content="#060b10"> - <title>404 — {{ .Site.Title }}</title> - - <script> - (function() { - const theme = localStorage.getItem('theme') || 'dark'; - if (theme === 'light') { - document.documentElement.classList.add('theme-light'); - } - })(); - </script> - - {{ partialCached "head/css.html" . }} - {{ partialCached "head/js.html" . }} - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css"> - {{ $notfound := resources.Get "css/components/404.css" | fingerprint }} - <link rel="stylesheet" href="{{ $notfound.RelPermalink }}"> -</head> -<body> - <a href="#main-content" class="skip-link">Skip to content</a> - <canvas id="matrix-canvas" aria-hidden="true" data-mode="background"></canvas> - - {{ partial "header.html" . }} - - <main id="main-content" class="hero--404"> - <div class="content-wrapper"> - <!-- Left: Quote + Search --> - <div class="hero-left-404"> - <div class="quote-section"> - <div class="quote-mark">"</div> - <p class="quote-text" id="quote-text">The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.</p> - <p class="quote-author" id="quote-author">— 404 Philosopher</p> - </div> - - <div class="search-box"> - <input type="text" placeholder="Search articles..." aria-label="Search"> - <button aria-label="Search"> - <svg data-feather="search"></svg> - </button> - </div> - - <nav class="quick-nav"> - <h3>Quick Links</h3> - <ul> - <li><a href="/">Home</a></li> - <li><a href="/articles/">Articles</a></li> - <li><a href="/is/">About</a></li> - <li><a href="/is/here">Contact</a></li> - </ul> - </nav> - </div> - - <!-- Right: Recent Articles + Terminal --> - <div class="hero-right-404"> - <div class="recent-articles"> - <h3>Recent Articles</h3> - <ul> - {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }} - <li> - <a href="{{ .RelPermalink }}" class="article-link" data-type="{{ .Params.type }}"> - {{ .Title }} - </a> - </li> - {{ end }} - </ul> - </div> - - <div class="terminal-widget"> - <div class="terminal-bar"> - <span class="terminal-dot" style="background: #ff6b6b;"></span> - <span class="terminal-dot" style="background: #ffd93d;"></span> - <span class="terminal-dot" style="background: #6bcf7f;"></span> - </div> - <div class="terminal-content"> - <div>$ <span class="terminal-prompt">curl https://danix.xyz/lost</span></div> - <div>404: Not Found</div> - <div>$ <span class="terminal-prompt">ls /articles</span></div> - <div id="terminal-files"></div> - </div> - </div> - </div> - </div> - </main> - - {{ partial "footer.html" . }} - - <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> - <script>feather.replace();</script> - - {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }} - <script src="{{ $notFoundJS.RelPermalink }}"></script> -</body> -</html> diff --git a/layouts/404.it.html b/layouts/404.it.html new file mode 100644 index 0000000..d876371 --- /dev/null +++ b/layouts/404.it.html @@ -0,0 +1,142 @@ +{{ define "main" }} + +<main class="min-h-screen px-4 py-12"> + <div class="mx-auto px-4 py-12 max-w-4xl border border-border glow-accent rounded-lg bg-bg p-8" x-data="notFoundPage()"> + <div class="text-center"> + <!-- 404 Heading --> + <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in"> + 404 + </h1> + + <!-- Error Message --> + <h2 class="text-3xl md:text-4xl font-bold mb-6"> + {{ i18n "notFound" }} + </h2> + + <p class="text-lg text-text-dim mb-8"> + {{ i18n "notFoundMessage" }} + </p> + + <!-- Search Box --> + <div class="mb-12"> + <form id="search-form" class="flex flex-col gap-4"> + <label for="search-input" class="sr-only">{{ i18n "searchPlaceholder" }}</label> + <input + id="search-input" + type="text" + placeholder="{{ (i18n "searchPlaceholder") }}" + class="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" + @input="filterArticles($el.value)" + /> + </form> + <div id="search-results" class="mt-4 text-left space-y-3" x-show="filteredArticles.length > 0"> + <template x-for="article in filteredArticles" :key="article.title"> + <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors"> + <a :href="article.url" class="block text-left"> + <h4 class="font-bold text-accent hover:underline" x-text="article.title"></h4> + <p class="text-sm text-text-dim mt-1" x-text="article.date"></p> + </a> + </div> + </template> + </div> + <div x-show="searchQuery && filteredArticles.length === 0" class="mt-4 text-text-dim"> + {{ i18n "noSearchResults" }} + </div> + </div> + + <!-- Recent Articles Section --> + <div class="mb-12"> + <h3 class="text-2xl font-bold mb-6">{{ i18n "recentArticles" }}</h3> + <div class="space-y-4"> + {{ range first 5 (where .Site.RegularPages "Section" "articles") }} + <div class="p-4 border-l-4 border-accent bg-bg/50 hover:bg-bg/70 transition-colors"> + <a href="{{ .Permalink }}" class="block text-left"> + <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4> + <p class="text-sm text-text-dim mt-1"> + {{ .Date.Format "Jan 02, 2006" }} + </p> + </a> + </div> + {{ end }} + </div> + </div> + + <!-- Explore Topics --> + <div class="mb-12 text-left"> + {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false "headingLevel" "h3") }} + </div> + + <!-- Navigation Links --> + <div class="space-y-4 flex flex-col items-center mb-12"> + <a href="/it/" class="btn btn-primary"> + {{ i18n "goHome" }} + </a> + <a href="/it/articles/" class="btn btn-secondary"> + {{ i18n "browseArticles" }} + </a> + <a href="/it/is/here/" class="btn btn-outline"> + {{ i18n "contactSupport" }} + </a> + </div> + + <!-- Easter Egg Trigger --> + <div class="mt-12 pt-8 border-t border-border"> + <button + type="button" + @click="toggleEasterEgg()" + class="text-sm text-text-dim hover:text-accent transition-colors underline" + > + {{ i18n "followWhiteRabbit" }} + </button> + </div> + + <!-- Easter Egg Modal (Hidden by default) --> + <div + class="fixed inset-0 z-50" + :class="{ 'flex items-center justify-center': showEasterEgg, 'hidden': !showEasterEgg }" + x-show="showEasterEgg" + x-cloak + > + <!-- Overlay --> + <div + class="absolute inset-0 bg-black/50" + @click="showEasterEgg = false" + ></div> + + <!-- Modal Content --> + <div class="relative bg-bg border-2 border-accent p-8 rounded-lg shadow-xl max-w-md mx-4"> + <h2 class="text-2xl font-bold mb-6 text-accent">{{ i18n "easterEggTitle" }}</h2> + + <div class="space-y-4"> + <button + type="button" + @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}it/'" + class="w-full btn btn-primary" + > + 💊 {{ i18n "bluePill" }} + </button> + + <button + type="button" + @click="goToRandomArticle()" + class="w-full btn btn-secondary" + > + 🐰 {{ i18n "redPill" }} + </button> + </div> + + <button + type="button" + @click="showEasterEgg = false" + class="absolute top-4 right-4 text-text-dim hover:text-text dark:hover:text-text transition-colors" + aria-label="Close modal" + > + ✕ + </button> + </div> + </div> + </div> + </div> +</main> + +{{ end }} diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html new file mode 100644 index 0000000..6f3e357 --- /dev/null +++ b/layouts/_default/_markup/render-codeblock.html @@ -0,0 +1,23 @@ +{{- $lang := .Type -}} +{{- $hasLang := gt (len $lang) 0 -}} +{{- $highlightLang := $lang -}} +{{- if not $hasLang -}}{{- $highlightLang = "text" -}}{{- end -}} +{{- $opts := dict "lineNos" true "lineNumbersInTable" true -}} + +<div class="code-block-wrapper not-prose"> + {{- if $hasLang -}} + <div class="code-header" data-lang="{{ $lang }}"> + <span class="code-lang-label">{{ $lang }}</span> + <div class="code-copy-wrapper"> + <span role="status" aria-live="polite" class="sr-only code-copy-status"></span> + <button class="code-copy-btn" aria-label="Copy code" data-copy-target> + <i data-feather="copy" class="icon-copy" aria-hidden="true"></i> + <i data-feather="check" class="icon-check hidden" aria-hidden="true"></i> + </button> + </div> + </div> + {{- end -}} + <div class="code-body"> +{{- highlight .Inner $highlightLang $opts -}} + </div> +</div> diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html new file mode 100644 index 0000000..d0d5e05 --- /dev/null +++ b/layouts/_default/_markup/render-heading.html @@ -0,0 +1,5 @@ +{{- if eq .Level 1 -}} +<h1 id="{{ .Anchor }}">{{ .Text | safeHTML }}</h1> +{{- else -}} +<h{{ .Level }} id="{{ .Anchor }}"><span aria-hidden="true" class="heading-prefix">//</span> {{ .Text | safeHTML }}</h{{ .Level }}> +{{- end -}} diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html new file mode 100644 index 0000000..482006e --- /dev/null +++ b/layouts/_default/baseof.html @@ -0,0 +1,130 @@ +<!DOCTYPE html> +<html lang="{{ .Lang }}" class="theme-dark"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + {{ partial "head-meta.html" . }} + <title>{{ .Title }}{{ if ne .Title .Site.Title }} — {{ .Site.Title }}{{ end }}</title> + + <!-- Favicon --> + <link rel="icon" type="image/png" href="/images/fav.png"> + + <!-- Fonts --> + <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600&family=Oxanium:wght@400;600;700&display=swap" rel="stylesheet"> + + <!-- Feather Icons --> + <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.css"> + + <!-- Tailwind CSS --> + {{ $css := resources.Get "css/main.min.css" }} + <link rel="stylesheet" href="{{ $css.RelPermalink }}"> + + <!-- Syntax highlighting (Chroma) --> + {{ $chroma := resources.Get "css/chroma-custom.css" | minify }} + <link rel="stylesheet" href="{{ $chroma.RelPermalink }}"> +</head> +<body class="bg-bg text-text antialiased" data-page-kind="{{ if .IsHome }}home{{ else }}other{{ end }}"> + <!-- Reading progress bar (only on single pages/articles) --> + {{ if eq .Kind "page" }} + <div + id="reading-progress" + class="fixed top-0 left-0 h-1 transition-all duration-100" + style="width: 0%; background: linear-gradient(to right, var(--accent), var(--accent2)); z-index: 9999;" + ></div> + {{ partial "back-to-top.html" . }} + {{ end }} + <!-- Skip to main content link --> + <a href="#main" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:px-4 focus:py-2 focus:bg-accent focus:text-white focus:rounded"> + {{ i18n "skipToContent" }} + </a> + + <!-- Dot grid background pattern --> + <div class="fixed inset-0 pointer-events-none opacity-5 dot-grid" style=" + background-image: radial-gradient(circle, currentColor 1px, transparent 1px); + background-size: 30px 30px; + z-index: -1; + "></div> + + <!-- Matrix rain canvas background --> + <canvas id="matrix-rain" aria-hidden="true"></canvas> + + <!-- Theme toggle & language toggle (before Alpine loads to prevent flash) --> + <script> + (function() { + const theme = localStorage.getItem('theme') || 'dark'; + const html = document.documentElement; + html.classList.remove('theme-light', 'theme-dark'); + html.classList.add('theme-' + theme); + })(); + </script> + + <!-- Navigation --> + {{ partial "header.html" . }} + + <!-- Main content (spaced for fixed header) --> + <main id="main" class="mt-20 relative z-10"> + {{ block "main" . }}{{ end }} + </main> + + <!-- Footer --> + {{ partial "footer.html" . }} + + <!-- Search modal (desktop and mobile) --> + {{ partial "search-modal.html" . }} + + <!-- Alpine.js --> + <script src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js" defer></script> + + <!-- Feather Icons initialization --> + <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> + <script>feather.replace();</script> + + <!-- Theme toggle script --> + {{ $themeScript := resources.Get "js/theme-toggle.js" | minify }} + <script src="{{ $themeScript.RelPermalink }}"></script> + + <!-- Menu script --> + {{ $menuScript := resources.Get "js/menu.js" | minify }} + <script src="{{ $menuScript.RelPermalink }}"></script> + + <!-- Contact form script --> + {{ $contactScript := resources.Get "js/contact-form.js" | minify }} + <script src="{{ $contactScript.RelPermalink }}"></script> + + <!-- 404 Not Found page script --> + {{ $notFoundScript := resources.Get "js/not-found-page.js" | minify }} + <script src="{{ $notFoundScript.RelPermalink }}"></script> + + <!-- Reading progress bar script (on single pages/articles) --> + {{ if eq .Kind "page" }} + {{ $progressScript := resources.Get "js/reading-progress.js" | minify }} + <script src="{{ $progressScript.RelPermalink }}"></script> + {{ end }} + + <!-- Code block copy button --> + {{ if eq .Kind "page" }} + {{ $codeScript := resources.Get "js/code-copy.js" | minify }} + <script src="{{ $codeScript.RelPermalink }}"></script> + {{ end }} + + <!-- Matrix rain background effect --> + {{ with resources.Get "js/matrix-rain.js" }} + {{ $s := . | minify }} + <script src="{{ $s.RelPermalink }}"></script> + {{ end }} + + <!-- Search functionality script --> + {{ $searchScript := resources.Get "js/search.js" | minify }} + <script src="{{ $searchScript.RelPermalink }}"></script> + + <!-- Timeline lazy-reveal (scroll-triggered reveal animation) --> + {{ if eq .Kind "section" }} + {{ $lazyScript := resources.Get "js/article-lazy.js" | minify }} + <script src="{{ $lazyScript.RelPermalink }}"></script> + {{ end }} + + <!-- Tag cloud spiral layout --> + {{ $tagCloudScript := resources.Get "js/tag-cloud-spiral.js" | minify }} + <script src="{{ $tagCloudScript.RelPermalink }}"></script> +</body> +</html> diff --git a/layouts/_default/list.html b/layouts/_default/list.html new file mode 100644 index 0000000..09c0cbb --- /dev/null +++ b/layouts/_default/list.html @@ -0,0 +1,39 @@ +{{ define "main" }} +<div class="mx-auto px-4 py-12 max-w-5xl"> + <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12"> + {{ .Title }} + </h1> + + {{ $pinned := where .Pages "Params.pinned" true }} + {{ $unpinned := where .Pages "Params.pinned" false }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" nil }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" "" }} + {{ end }} + {{ end }} + + {{ $allPages := ($pinned | append $unpinned) }} + + {{ if eq (len $allPages) 0 }} + <div class="py-12 text-center text-text-dim"> + {{ i18n "noRelated" }} + </div> + {{ else }} + <ol class="timeline" aria-label="{{ .Title }}"> + {{ range $i, $page := (sort $pinned "Date" "desc") }} + {{ $side := "left" }} + {{ if eq (mod $i 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }} + {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }} + {{ end }} + {{ $offset := len $pinned }} + {{ range $i, $page := (sort $unpinned "Date" "desc") }} + {{ $idx := add $i $offset }} + {{ $side := "left" }} + {{ if eq (mod $idx 2) 0 }}{{ $side = "left" }}{{ else }}{{ $side = "right" }}{{ end }} + {{ partial "article-list-item.html" (dict "Page" $page "side" $side) }} + {{ end }} + </ol> + {{ end }} +</div> +{{ end }} diff --git a/layouts/_default/single.html b/layouts/_default/single.html new file mode 100644 index 0000000..7a1a069 --- /dev/null +++ b/layouts/_default/single.html @@ -0,0 +1,54 @@ +{{ define "main" }} +<article class="mx-auto px-4 py-12 max-w-7xl"> + <div class="grid md:grid-cols-3 gap-8 content-grid"> + <!-- Article section --> + <div class="md:col-span-2 min-w-0"> + <!-- Top article navigation (articles only) --> + {{ if eq .Section "articles" }} + {{ partial "article-nav.html" (dict "page" . "variant" "top") }} + {{ end }} + + <!-- Breadcrumb --> + {{ partial "breadcrumb.html" . }} + + <!-- Article header --> + {{ partial "article-header.html" . }} + + <!-- Article content --> + <div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} + </div> + + <!-- Tags section --> + {{ if .Params.tags }} + <div class="border-t border-border pt-8"> + <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3> + <div class="flex flex-wrap gap-2"> + {{ $lang := .Lang }} + {{ range .Params.tags }} + {{ $tagUrl := printf "/tags/%s/" (. | urlize) }} + {{ if eq $lang "it" }} + {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }} + {{ end }} + <a + href="{{ $tagUrl }}" + class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm" + > + {{ . }} + </a> + {{ end }} + </div> + </div> + {{ end }} + + <!-- Bottom article navigation (articles only) --> + {{ if eq .Section "articles" }} + {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }} + {{ end }} + </div> + + <!-- Sidebar --> + {{ partial "sidebar.html" . }} + </div> +</article> +{{ end }} diff --git a/layouts/_partials/article-single.html b/layouts/_partials/article-single.html deleted file mode 100644 index f030869..0000000 --- a/layouts/_partials/article-single.html +++ /dev/null @@ -1,56 +0,0 @@ -<article class="article-single"> - <!-- Article Hero --> - {{ if .Params.image }} - <div class="article-hero" style="background-image: url('{{ .Params.image }}')"> - <div class="article-hero-overlay"></div> - <div class="article-hero-content"> - <nav class="article-breadcrumb"> - <a href="/articles/">Articles</a> - <span>/</span> - <span>{{ .Title }}</span> - </nav> - <h1>{{ .Title }}</h1> - </div> - </div> - {{ end }} - - <!-- Article Meta Bar --> - <div class="article-meta-bar"> - <div class="article-meta"> - <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span> - <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span> - <span class="article-read-time">{{ .ReadingTime }} min read</span> - </div> - </div> - - <!-- Share Sidebar (for large screens) --> - {{ partial "share-sidebar.html" . }} - - <!-- Article Body --> - <div class="article-body container-narrow"> - {{ .Content }} - </div> - - <!-- Article Footer Nav --> - {{ $section := .Site.GetPage .Section }} - {{ if $section }} - {{ $prevPage := .PrevInSection }} - {{ $nextPage := .NextInSection }} - {{ if or $prevPage $nextPage }} - <nav class="article-footer-nav"> - {{ if $prevPage }} - <a href="{{ $prevPage.RelPermalink }}" class="nav-prev"> - <span class="nav-label">← Previous</span> - <span class="nav-title">{{ $prevPage.Title }}</span> - </a> - {{ end }} - {{ if $nextPage }} - <a href="{{ $nextPage.RelPermalink }}" class="nav-next"> - <span class="nav-label">Next →</span> - <span class="nav-title">{{ $nextPage.Title }}</span> - </a> - {{ end }} - </nav> - {{ end }} - {{ end }} -</article> diff --git a/layouts/_partials/featured-card.html b/layouts/_partials/featured-card.html deleted file mode 100644 index cf2618f..0000000 --- a/layouts/_partials/featured-card.html +++ /dev/null @@ -1,23 +0,0 @@ -{{ $page := .page }} - -<article class="featured-article"> - {{ if $page.Params.image }} - <div class="featured-image"> - <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy"> - </div> - {{ end }} - - <div class="featured-body"> - <div class="featured-header"> - <span class="featured-type-badge" style="color: var(--type-{{ $page.Params.type }});"> - {{ $page.Params.type }} - </span> - <span class="featured-date">$ {{ $page.Date.Format "2006-01-02" }}</span> - </div> - <h2 class="featured-title">{{ $page.Title }}</h2> - {{ with $page.Params.description }} - <p class="featured-excerpt">{{ . }}</p> - {{ end }} - <a href="{{ $page.RelPermalink }}" class="featured-link">Read the full article →</a> - </div> -</article> diff --git a/layouts/_partials/footer.html b/layouts/_partials/footer.html deleted file mode 100644 index a9df047..0000000 --- a/layouts/_partials/footer.html +++ /dev/null @@ -1,14 +0,0 @@ -<div class="footer-container"> - <div class="footer-content"> - <div class="footer-copyright"> - © {{ now.Year }} {{ .Site.Params.author }}. All rights reserved. - </div> - <nav> - <ul class="footer-nav"> - {{ range .Site.Menus.main }} - <li><a href="{{ .URL }}">{{ .Name }}</a></li> - {{ end }} - </ul> - </nav> - </div> -</div> diff --git a/layouts/_partials/head.html b/layouts/_partials/head.html deleted file mode 100644 index 1a8a727..0000000 --- a/layouts/_partials/head.html +++ /dev/null @@ -1,8 +0,0 @@ -<meta charset="utf-8"> -<meta name="viewport" content="width=device-width, initial-scale=1"> -<meta name="description" content="{{ .Site.Params.description }}"> -<meta name="theme-color" content="#060b10"> -<title>{{ if .IsHome }}{{ .Site.Title }}{{ else }}{{ .Title }} | {{ .Site.Title }}{{ end }}</title> - -{{ partialCached "head/css.html" . }} -{{ partialCached "head/js.html" . }} diff --git a/layouts/_partials/head/css.html b/layouts/_partials/head/css.html deleted file mode 100644 index 8897866..0000000 --- a/layouts/_partials/head/css.html +++ /dev/null @@ -1,15 +0,0 @@ -{{- with resources.Get "css/main.css" }} - {{- $opts := dict - "minify" (cond hugo.IsDevelopment false true) - "sourceMap" (cond hugo.IsDevelopment "linked" "none") - }} - {{- with . | css.Build $opts }} - {{- if hugo.IsDevelopment }} - <link rel="stylesheet" href="{{ .RelPermalink }}"> - {{- else }} - {{- with . | fingerprint }} - <link rel="stylesheet" href="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"> - {{- end }} - {{- end }} - {{- end }} -{{- end }} diff --git a/layouts/_partials/head/js.html b/layouts/_partials/head/js.html deleted file mode 100644 index 0210efa..0000000 --- a/layouts/_partials/head/js.html +++ /dev/null @@ -1,15 +0,0 @@ -{{- with resources.Get "js/main.js" }} - {{- $opts := dict - "minify" (cond hugo.IsDevelopment false true) - "sourceMap" (cond hugo.IsDevelopment "linked" "none") - }} - {{- with . | js.Build $opts }} - {{- if hugo.IsDevelopment }} - <script src="{{ .RelPermalink }}"></script> - {{- else }} - {{- with . | fingerprint }} - <script src="{{ .RelPermalink }}" integrity="{{ .Data.Integrity }}" crossorigin="anonymous"></script> - {{- end }} - {{- end }} - {{- end }} -{{- end }} diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html deleted file mode 100644 index 1f8efb8..0000000 --- a/layouts/_partials/header.html +++ /dev/null @@ -1,29 +0,0 @@ -<nav class="nav-header" role="navigation" aria-label="Main navigation"> - <button class="hamburger" id="hamburger-btn" aria-label="Toggle menu" aria-expanded="false"> - <span></span> - <span></span> - <span></span> - </button> - - <div class="menu-overlay" id="menu-overlay"> - <div class="menu-items"> - <a href="/" class="menu-logo">{{ .Site.Params.author }}</a> - - <ul class="menu-links"> - {{ range .Site.Menus.main }} - <li> - <a href="{{ .URL }}" {{ if (in $.RelPermalink .URL) }}aria-current="page"{{ end }}> - {{ .Name }} - </a> - </li> - {{ end }} - </ul> - - <div class="menu-footer"> - <button class="theme-switch" id="theme-switch" aria-label="Toggle theme"> - <span class="theme-switch-dot"></span> - </button> - </div> - </div> - </div> -</nav> diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html deleted file mode 100644 index 57d223d..0000000 --- a/layouts/_partials/hero.html +++ /dev/null @@ -1,41 +0,0 @@ -<section class="hero" role="region" aria-label="Hero"> - <canvas id="matrix-canvas" data-mode="hero" aria-hidden="true"></canvas> - <div class="hero-container"> - <div class="hero-left"> - <div class="hero-prompt">welcome to</div> - <h1 class="hero-name" data-text="{{ .Site.Params.author }}">{{ .Site.Params.author }}</h1> - <div class="hero-role" id="typed" data-phrases='{{ .Site.Params.typingPhrases | jsonify }}'></div> - <p class="hero-tagline">{{ .Site.Params.description }}</p> - <div class="hero-buttons"> - <a href="/articles/" class="btn btn-primary">Read Articles</a> - <a href="/is/" class="btn btn-outline">About Me</a> - </div> - </div> - <div class="hero-right"> - <div class="hero-terminal"> - <div class="terminal-bar"> - <span class="terminal-dot" style="background: #ff5f57;"></span> - <span class="terminal-dot" style="background: #febc2e;"></span> - <span class="terminal-dot" style="background: #28c840;"></span> - <span class="terminal-title">root@danix.xyz</span> - </div> - <div class="terminal-content"> - <div class="tl tl-d1"><span class="tc-dim">$ </span><span class="tc-ok">whoami</span></div> - <div class="tl tl-d2">danilo</div> - <div class="tl tl-d3"><span class="tc-dim">$ </span><span class="tc-ok">cat roles.txt</span></div> - <div class="tl tl-d4"><span class="tc-key">Security</span> & Web Dev</div> - <div class="tl tl-d5"><span class="tc-key">WordPress</span> Developer</div> - <div class="tl tl-d6"><span class="tc-key">Bash</span> Enthusiast</div> - <div class="tl tl-d7"><span class="tc-dim">$ </span><span class="tc-ok">uptime</span></div> - <div class="tl tl-d8">up 4 years, still learning</div> - <div class="tl tl-d9"><span class="tc-dim">$ </span><span class="tc-ok">_</span></div> - </div> - </div> - </div> - </div><!-- /.hero-container --> - - <div class="scroll-indicator" aria-hidden="true"> - <span>scroll</span> - <div class="scroll-line"></div> - </div> -</section> diff --git a/layouts/_partials/menu.html b/layouts/_partials/menu.html deleted file mode 100644 index 14245b5..0000000 --- a/layouts/_partials/menu.html +++ /dev/null @@ -1,51 +0,0 @@ -{{- /* -Renders a menu for the given menu ID. - -@context {page} page The current page. -@context {string} menuID The menu ID. - -@example: {{ partial "menu.html" (dict "menuID" "main" "page" .) }} -*/}} - -{{- $page := .page }} -{{- $menuID := .menuID }} - -{{- with index site.Menus $menuID }} - <nav> - <ul> - {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} - </ul> - </nav> -{{- end }} - -{{- define "_partials/inline/menu/walk.html" }} - {{- $page := .page }} - {{- range .menuEntries }} - {{- $attrs := dict "href" .URL }} - {{- if $page.IsMenuCurrent .Menu . }} - {{- $attrs = merge $attrs (dict "class" "active" "aria-current" "page") }} - {{- else if $page.HasMenuCurrent .Menu .}} - {{- $attrs = merge $attrs (dict "class" "ancestor" "aria-current" "true") }} - {{- end }} - {{- $name := .Name }} - {{- with .Identifier }} - {{- with T . }} - {{- $name = . }} - {{- end }} - {{- end }} - <li> - <a - {{- range $k, $v := $attrs }} - {{- with $v }} - {{- printf " %s=%q" $k $v | safeHTMLAttr }} - {{- end }} - {{- end -}} - >{{ $name }}</a> - {{- with .Children }} - <ul> - {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }} - </ul> - {{- end }} - </li> - {{- end }} -{{- end }} diff --git a/layouts/_partials/photo-article.html b/layouts/_partials/photo-article.html deleted file mode 100644 index 1040c9b..0000000 --- a/layouts/_partials/photo-article.html +++ /dev/null @@ -1,32 +0,0 @@ -<article class="article-single"> - <!-- Photo Hero --> - {{ if .Params.image }} - <div class="article-hero" style="background-image: url('{{ .Params.image }}')"> - <div class="article-hero-overlay"></div> - <div class="article-hero-content"> - <h1>{{ .Title }}</h1> - </div> - </div> - {{ end }} - - <!-- Article Meta Bar --> - <div class="article-meta-bar"> - <div class="article-meta"> - <span class="article-type-badge type-{{ .Params.type }}">{{ .Params.type }}</span> - <span class="article-date">{{ .Date.Format "Jan 02, 2006" }}</span> - </div> - </div> - - <!-- Photo Grid --> - <div class="article-body container-narrow"> - <div class="photo-grid" data-lightbox="true"> - {{ .Content }} - </div> - </div> - - <!-- Load photo utilities --> - {{ $photoUtils := resources.Get "js/photo-utils.js" }} - {{ $lightbox := resources.Get "js/lightbox.js" | fingerprint }} - <script src="{{ $photoUtils.RelPermalink }}"></script> - <script src="{{ $lightbox.RelPermalink }}"></script> -</article> diff --git a/layouts/_partials/post-card.html b/layouts/_partials/post-card.html deleted file mode 100644 index f3a1362..0000000 --- a/layouts/_partials/post-card.html +++ /dev/null @@ -1,30 +0,0 @@ -{{ if eq .context "home" }} - <article class="article-card reveal" data-type="{{ .type }}"> - <div class="article-type" style="background: var(--type-{{ .type }});">{{ .type }}</div> - <div class="article-content"> - <h3 class="article-title"><a href="{{ .url }}">{{ .title }}</a></h3> - <p class="article-excerpt">{{ .description }}</p> - <div class="article-meta"> - <span>{{ dateFormat "Jan 2, 2006" .date }}</span> - <a href="{{ .url }}" class="article-read">Read →</a> - </div> - </div> - </article> -{{ else }} - {{ $featured := .featured }} - <article class="post-card {{ if $featured }}featured{{ end }}"> - {{ if .image }} - <img src="{{ .image }}" alt="{{ .title }}" class="post-card-image"> - {{ else }} - <div class="post-card-image" style="background: linear-gradient(135deg, var(--color-{{ .type }}), var(--bg2));"></div> - {{ end }} - <div class="post-card-body"> - <div class="post-type-badge {{ .type }}">{{ .type }}</div> - <h3 class="post-card-title"><a href="{{ .url }}">{{ .title }}</a></h3> - <p class="post-card-excerpt">{{ .description }}</p> - <div class="post-card-meta"> - <span>{{ dateFormat "Jan 2, 2006" .date }}</span> - </div> - </div> - </article> -{{ end }} diff --git a/layouts/_partials/share-sidebar.html b/layouts/_partials/share-sidebar.html deleted file mode 100644 index 36b6d03..0000000 --- a/layouts/_partials/share-sidebar.html +++ /dev/null @@ -1,28 +0,0 @@ -<aside class="share-sidebar" id="share-sidebar" data-url="{{ .Permalink }}" data-title="{{ .Title | htmlEscape }}"> - <div class="share-buttons"> - <button class="share-btn" data-platform="whatsapp" title="Share on WhatsApp"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"></path></svg> - </button> - <button class="share-btn" data-platform="telegram" title="Share on Telegram"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M8 14s1.5 2 4 2 4-2 4-2"></path><line x1="9" y1="9" x2="9.01" y2="9"></line><line x1="15" y1="9" x2="15.01" y2="9"></line></svg> - </button> - <button class="share-btn" data-platform="linkedin" title="Share on LinkedIn"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6zM2 9h4v12H2z"></path><circle cx="4" cy="4" r="2"></circle></svg> - </button> - <button class="share-btn" data-platform="twitter" title="Share on X (Twitter)"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M23 3a10.9 10.9 0 0 1-3.14 1.53 4.48 4.48 0 0 0-7.86 3v1A10.66 10.66 0 0 1 3 4s-4 9 5 13a11.64 11.64 0 0 1-7 2s9 5 20 0a9.5 9.5 0 0 0 5-6.5"></path></svg> - </button> - <button class="share-btn" data-platform="facebook" title="Share on Facebook"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a6 6 0 0 0-6 6v4a6 6 0 0 0 6 6h3"></path><path d="M16 18v2"></path><path d="M6 6v12"></path></svg> - </button> - <button class="share-btn" data-platform="reddit" title="Share on Reddit"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="1"></circle><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm7-3c0 1.66-1.34 3-3 3s-3-1.34-3-3 1.34-3 3-3 3 1.34 3 3z"></path></svg> - </button> - <button class="share-btn" data-platform="email" title="Share via Email"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="4" width="20" height="16" rx="2"></rect><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"></path></svg> - </button> - <button class="share-btn" id="share-copy" title="Copy link"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path></svg> - </button> - </div> -</aside> diff --git a/layouts/_partials/static-page.html b/layouts/_partials/static-page.html deleted file mode 100644 index d557b2f..0000000 --- a/layouts/_partials/static-page.html +++ /dev/null @@ -1,33 +0,0 @@ -<article class="static-page"> - <!-- Static Page Hero --> - <div class="page-hero"> - <div class="page-hero-overlay"></div> - <div class="page-hero-content"> - <h1>{{ .Title }}</h1> - </div> - </div> - - <!-- Page Content --> - <div class="page-content container-narrow"> - {{ .Content }} - </div> - - <!-- Related Pages Nav (for is/* section) --> - {{ if eq .Section "is" }} - <nav class="page-nav" style="margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border);"> - <h3 style="margin-bottom: 1rem;">Other pages</h3> - <ul style="list-style: none; margin: 0;"> - {{ $section := .Site.GetPage "/is" }} - {{ if $section }} - {{ range $section.Pages }} - <li style="margin-bottom: 0.5rem;"> - <a href="{{ .RelPermalink }}" {{ if eq $.RelPermalink .RelPermalink }}class="active"{{ end }}> - {{ .Title }} - </a> - </li> - {{ end }} - {{ end }} - </ul> - </nav> - {{ end }} -</article> diff --git a/layouts/_partials/terms.html b/layouts/_partials/terms.html deleted file mode 100644 index 8a6ebec..0000000 --- a/layouts/_partials/terms.html +++ /dev/null @@ -1,23 +0,0 @@ -{{- /* -For a given taxonomy, renders a list of terms assigned to the page. - -@context {page} page The current page. -@context {string} taxonomy The taxonomy. - -@example: {{ partial "terms.html" (dict "taxonomy" "tags" "page" .) }} -*/}} - -{{- $page := .page }} -{{- $taxonomy := .taxonomy }} - -{{- with $page.GetTerms $taxonomy }} - {{- $label := (index . 0).Parent.LinkTitle }} - <div> - <div>{{ $label }}:</div> - <ul> - {{- range . }} - <li><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li> - {{- end }} - </ul> - </div> -{{- end }} diff --git a/layouts/_partials/timeline-item.html b/layouts/_partials/timeline-item.html deleted file mode 100644 index fcb3f50..0000000 --- a/layouts/_partials/timeline-item.html +++ /dev/null @@ -1,31 +0,0 @@ -{{ $page := .page }} -{{ $index := .index }} -{{ $position := "left" }} -{{ if (eq (mod $index 2) 1) }} - {{ $position = "right" }} -{{ end }} - -<article class="timeline-item {{ $position }}" data-type="{{ $page.Params.type }}"> - <div class="timeline-dot"></div> - - <div class="article-card"> - {{ if $page.Params.image }} - <div class="article-card-image"> - <img src="{{ $page.Params.image }}" alt="{{ $page.Title }}" loading="lazy"> - </div> - {{ end }} - - <div class="article-card-body"> - <div class="article-card-header"> - <span class="article-type-badge type-{{ $page.Params.type }}">{{ $page.Params.type }}</span> - <span class="article-date">{{ $page.Date.Format "Jan 02, 2006" }}</span> - </div> - <h3 class="article-card-title"> - <a href="{{ $page.RelPermalink }}">{{ $page.Title }}</a> - </h3> - {{ with $page.Params.description }} - <p class="article-card-excerpt">{{ . }}</p> - {{ end }} - </div> - </div> -</article> diff --git a/layouts/articles/single.html b/layouts/articles/single.html new file mode 100644 index 0000000..e646639 --- /dev/null +++ b/layouts/articles/single.html @@ -0,0 +1,50 @@ +{{ define "main" }} +{{ $articleType := .Params.type | default "life" }} +{{ $template := printf "article-types/%s.html" $articleType }} +<article class="mx-auto px-4 py-12"> + <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid"> + <!-- Article section --> + <div class="md:col-span-2"> + <!-- Top article navigation --> + {{ partial "article-nav.html" (dict "page" . "variant" "top") }} + + <!-- Breadcrumb --> + {{ partial "breadcrumb.html" . }} + + <!-- Article header --> + {{ partial "article-header.html" . }} + + <!-- Type-specific content --> + {{ partial $template . }} + + <!-- Tags section --> + {{ if .Params.tags }} + <div class="border-t border-border pt-8"> + <h3 class="text-lg font-semibold text-accent mb-4">{{ i18n "tags" }}</h3> + <div class="flex flex-wrap gap-2"> + {{ $lang := .Lang }} + {{ range .Params.tags }} + {{ $tagUrl := printf "/tags/%s/" (. | urlize) }} + {{ if eq $lang "it" }} + {{ $tagUrl = printf "/it/tags/%s/" (. | urlize) }} + {{ end }} + <a + href="{{ $tagUrl }}" + class="inline-flex items-center px-3 py-1 border border-border/30 rounded hover:border-accent/50 hover:text-accent transition-colors text-sm" + > + {{ . }} + </a> + {{ end }} + </div> + </div> + {{ end }} + + <!-- Bottom article navigation --> + {{ partial "article-nav.html" (dict "page" . "variant" "bottom") }} + </div> + + <!-- Sidebar --> + {{ partial "sidebar.html" . }} + </div> +</article> +{{ end }} diff --git a/layouts/baseof.html b/layouts/baseof.html deleted file mode 100644 index cdbb1e3..0000000 --- a/layouts/baseof.html +++ /dev/null @@ -1,23 +0,0 @@ -<!DOCTYPE html> -<html lang="{{ site.Language.Locale }}" dir="{{ or site.Language.Direction `ltr` }}"> -<head> - {{ partial "head.html" . }} - <script> - (function() { - const theme = localStorage.getItem('theme') || 'dark'; - if (theme === 'light') { - document.documentElement.classList.add('theme-light'); - } - })(); - </script> -</head> -<body> - <a href="#main-content" class="skip-link">Skip to content</a> - {{ if and (not .IsHome) (ne .Kind "term") (ne .Kind "taxonomy") (ne .Kind "section") }} - <div class="progress-bar" id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div> - {{ end }} - {{ partial "header.html" . }} - <main id="main-content">{{ block "main" . }}{{ end }}</main> - <footer>{{ partial "footer.html" . }}</footer> -</body> -</html> diff --git a/layouts/home.html b/layouts/home.html deleted file mode 100644 index 54d8087..0000000 --- a/layouts/home.html +++ /dev/null @@ -1,48 +0,0 @@ -{{ define "canvas-mode" }}hero{{ end }} - -{{ define "main" }} - {{ partial "hero.html" . }} - - <section id="articles" class="section-container reveal-group" - style="background: var(--bg2); padding: 6rem 2rem;"> - - <div class="section-header"> - <p class="section-eyebrow">// latest posts</p> - <h2 class="section-title">Recent Articles</h2> - </div> - - {{ $articlesSection := .Site.GetPage "/articles" }} - {{ if $articlesSection }} - {{ $articles := $articlesSection.Pages }} - {{ $articles = sort $articles "Date" "desc" }} - <div class="articles-grid"> - {{ range first 6 $articles }} - {{ $type := .Params.type }} - {{ if not $type }}{{ $type = "article" }}{{ end }} - - {{ $excerpt := .Params.excerpt }} - {{ if not $excerpt }} - {{ $excerpt = .Summary | plainify | truncate 150 }} - {{ end }} - - {{ $data := dict - "title" .Title - "type" $type - "description" $excerpt - "date" .Date - "url" .RelPermalink - "image" .Params.image - "featured" .Params.featured - "context" "home" - }} - {{ partial "post-card.html" $data }} - {{ end }} - </div> - {{ end }} - - <div style="text-align: center; margin-top: 3rem;"> - <a href="/articles/" class="btn btn-outline">View All Articles</a> - </div> - - </section> -{{ end }} diff --git a/layouts/index.html b/layouts/index.html new file mode 100644 index 0000000..fd3cfa0 --- /dev/null +++ b/layouts/index.html @@ -0,0 +1,59 @@ +{{ define "main" }} +<section class="min-h-[calc(100vh-200px)] flex items-center justify-center px-4 py-12"> + <div class="max-w-4xl w-full"> + <!-- Profile Image (optional) --> + {{ if .Params.image }} + <div class="flex justify-center mb-8"> + <img + src="{{ .Params.image }}" + alt="{{ .Site.Params.author }}" + loading="lazy" + class="w-32 h-32 md:w-48 md:h-48 rounded-full border-4 border-accent object-cover" + > + </div> + {{ end }} + + <!-- Author Name --> +<!-- <h1 class="text-4xl md:text-5xl font-bold text-accent text-center mb-4"> + {{ .Site.Params.author }} + </h1> + --> + <!-- Bio (from page content) --> + <div class="text-xl text-text-dim text-center mb-8 leading-relaxed prose prose-invert max-w-none"> + {{ .Content }} + </div> + + <!-- Call-to-Action Buttons --> + <div class="flex flex-col sm:flex-row gap-4 justify-center"> + {{ $lang := .Lang }} + {{ $articlesUrl := "/articles/" }} + {{ $contactUrl := "/is/here/" }} + {{ if eq $lang "it" }} + {{ $articlesUrl = "/it/articles/" }} + {{ $contactUrl = "/it/is/here/" }} + {{ end }} + + <!-- Articles Button (Primary) --> + <a + href="{{ $articlesUrl }}" + class="btn btn-primary btn-lg" + > + {{ i18n "articles" }} + </a> + + <!-- Contact Button (Outline) --> + <a + href="{{ $contactUrl }}" + class="btn btn-outline btn-lg" + > + {{ i18n "contact" }} + </a> + </div> + + <!-- Tag Cloud Section --> + <div class="mt-16 pt-8 border-t border-border"> + {{ partial "tag-cloud.html" (dict "page" . "showCount" true "wrapInWidget" false) }} + </div> + </div> +</section> +{{ end }} diff --git a/layouts/index.json b/layouts/index.json new file mode 100644 index 0000000..e17e31e --- /dev/null +++ b/layouts/index.json @@ -0,0 +1,13 @@ +{{- $articles := where .Site.RegularPages "Section" "articles" -}} +{{- $articles = $articles.ByDate.Reverse -}} +[ + {{- range $index, $article := $articles -}} + { + "title": {{ $article.Title | jsonify }}, + "url": {{ $article.Permalink | jsonify }}, + "date": {{ $article.Date.Format "Jan 02, 2006" | jsonify }}, + "summary": {{ substr ($article.Summary | plainify) 0 160 | jsonify }} + } + {{- if ne (add $index 1) (len $articles) }},{{ end }} + {{- end }} +] diff --git a/layouts/is/list.html b/layouts/is/list.html new file mode 100644 index 0000000..128414f --- /dev/null +++ b/layouts/is/list.html @@ -0,0 +1,22 @@ +{{ define "main" }} +<div class="mx-auto px-4 py-12"> + <div class="grid md:grid-cols-3 gap-8 max-w-7xl mx-auto content-grid"> + <!-- Article section --> + <div class="md:col-span-2"> + <!-- Breadcrumb --> + {{ partial "breadcrumb.html" . }} + + <!-- Article header --> + {{ partial "article-header.html" . }} + + <!-- Article content --> + <div class="prose prose-invert max-w-none mb-12"> + {{ .Content }} + </div> + </div> + + <!-- Sidebar --> + {{ partial "sidebar.html" . }} + </div> +</div> +{{ end }} diff --git a/layouts/page.html b/layouts/page.html deleted file mode 100644 index 44073b2..0000000 --- a/layouts/page.html +++ /dev/null @@ -1,9 +0,0 @@ -{{ define "main" }} - {{ if eq .Params.type "photo" }} - {{ partial "photo-article.html" . }} - {{ else if eq .Section "is" }} - {{ partial "static-page.html" . }} - {{ else }} - {{ partial "article-single.html" . }} - {{ end }} -{{ end }} 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 }} diff --git a/layouts/repository/single.html b/layouts/repository/single.html new file mode 100644 index 0000000..ce2c305 --- /dev/null +++ b/layouts/repository/single.html @@ -0,0 +1,77 @@ +{{ define "main" }} +<article class="mx-auto px-4 py-12 max-w-7xl"> + <div class="content-grid"> + <!-- Breadcrumb --> + {{ partial "breadcrumb.html" . }} + + <!-- Page Title (Hero) --> + <div class="mb-12"> + <h1 class="text-5xl md:text-6xl font-bold mb-4 text-accent animate-fade-in"> + {{ i18n "repositoryTitle" }} + </h1> + <p class="text-xl text-text-dim animate-fade-in-delay"> + {{ i18n "repositorySubtitle" }} + </p> + </div> + + <!-- Page Content (markdown sections) --> + <div class="prose dark:prose-invert max-w-none mb-12"> + {{ .Content }} + </div> + + <!-- Social sharing (inline mode) --> + <div class="mb-12"> + {{ partial "social-share.html" (dict "page" . "mode" "inline") }} + </div> + + <!-- Repository Cards Section --> + <section class="mt-16"> + <h2 class="text-3xl font-bold mb-8">{{ i18n "githubReposTitle" }}</h2> + + <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> + {{ range $.Site.Data.repos.repos }} + <div class="border border-border rounded-lg overflow-hidden hover:shadow-lg transition-shadow"> + <!-- Card Image --> + <img + src="{{ .image }}" + alt="{{ .name }}" + class="w-full h-48 object-cover" + loading="lazy" + /> + + <!-- Card Content --> + <div class="p-6"> + <h3 class="text-xl font-bold mb-2">{{ .name }}</h3> + + <p class="text-text-dim mb-4"> + {{ i18n .description_key }} + </p> + + <!-- Tags --> + {{ if .tags }} + <div class="flex flex-wrap gap-2 mb-4"> + {{ range .tags }} + <span class="text-xs px-2 py-1 bg-border/20 rounded"> + {{ . }} + </span> + {{ end }} + </div> + {{ end }} + + <!-- GitHub Link --> + <a + href="{{ .github_url }}" + target="_blank" + rel="noopener noreferrer" + class="btn btn-primary w-full text-center" + > + {{ i18n "visitGithub" }} → + </a> + </div> + </div> + {{ end }} + </div> + </section> + </div> +</article> +{{ end }} diff --git a/layouts/robots.txt b/layouts/robots.txt new file mode 100644 index 0000000..8fc0c20 --- /dev/null +++ b/layouts/robots.txt @@ -0,0 +1,5 @@ +User-agent: * +Disallow: /search-index.json +Disallow: /it/search-index.json + +Sitemap: {{ .Site.BaseURL }}sitemap.xml diff --git a/layouts/section.html b/layouts/section.html deleted file mode 100644 index d817087..0000000 --- a/layouts/section.html +++ /dev/null @@ -1,40 +0,0 @@ -{{ define "main" }} - {{ if eq .Type "articles" }} - <!-- Articles Section with Timeline --> - <div class="page-header"> - <h1>{{ .Title }}</h1> - <div class="filter-buttons"> - <button class="filter-btn active" data-filter="all">All</button> - <button class="filter-btn" data-filter="tech">Tech</button> - <button class="filter-btn" data-filter="life">Life</button> - <button class="filter-btn" data-filter="quote">Quote</button> - <button class="filter-btn" data-filter="link">Link</button> - <button class="filter-btn" data-filter="photo">Photo</button> - </div> - </div> - - {{ $featured := (.Pages.ByDate.Reverse) }} - {{ if and $featured (index $featured 0).Params.featured }} - {{ partial "featured-card.html" (dict "page" (index $featured 0)) }} - {{ end }} - - <section class="timeline-section"> - <div class="timeline-line"></div> - <div class="timeline-feed"> - {{ $pages := .Pages.ByDate.Reverse }} - {{ range $index, $page := $pages }} - {{ partial "timeline-item.html" (dict "page" $page "index" $index) }} - {{ end }} - </div> - </section> - - {{ $filters := resources.Get "js/filters.js" | fingerprint }} - <script defer src="{{ $filters.RelPermalink }}"></script> - - {{ else }} - <!-- Static Section (is/about, is/contact, etc.) --> - <div class="container-narrow" style="padding-top: 2rem;"> - {{ .Content }} - </div> - {{ end }} -{{ end }} diff --git a/layouts/shortcodes/actions.html b/layouts/shortcodes/actions.html index 296a211..7badab3 100644 --- a/layouts/shortcodes/actions.html +++ b/layouts/shortcodes/actions.html @@ -1,7 +1,19 @@ -{{ $link := .Get "url" }} -{{ $desc := .Get "desc" }} -{{ $outclass := .Get "outclass" }} -{{ $inclass := .Get "inclass" }} -<ul class="actions{{ with $outclass }} {{ . }}{{ end }}"> - <li><a href="{{ $link }}" class="button{{ with $inclass }} {{ . }}{{ end }}">{{ $desc }}</a></li> -</ul> +{{- $url := .Get "url" -}} +{{- $desc := .Get "desc" | default "Download" -}} +{{- $outclass := .Get "outclass" | default "" -}} +{{- $inclass := .Get "inclass" | default "" -}} + +{{- if $url -}} +<div class="my-6 {{ $outclass }}"> + <a + href="{{ $url }}" + class="inline-flex items-center gap-2 px-4 py-2 rounded border border-accent/30 text-accent font-medium hover:border-accent/50 hover:bg-accent/10 transition-colors {{ $inclass }}" + download + > + <i data-feather="download" class="w-4 h-4"></i> + {{ $desc }} + </a> +</div> +{{- else -}} + {{- errorf "actions shortcode: 'url' parameter is required" -}} +{{- end -}} diff --git a/layouts/shortcodes/contact.html b/layouts/shortcodes/contact.html new file mode 100644 index 0000000..6c5748f --- /dev/null +++ b/layouts/shortcodes/contact.html @@ -0,0 +1,65 @@ +<form id="contact-form" x-data="contactForm()" @submit.prevent="submitContactForm" class="space-y-6"> + <!-- Name Field --> + <div> + <label for="name" class="block text-sm font-medium text-text mb-2"> + {{ i18n "name" }} + </label> + <input + id="name" + type="text" + x-model="formData.name" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors" + :aria-busy="isSubmitting" + /> + </div> + + <!-- Email Field --> + <div> + <label for="email" class="block text-sm font-medium text-text mb-2"> + {{ i18n "email" }} + </label> + <input + id="email" + type="email" + x-model="formData.email" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors" + :aria-busy="isSubmitting" + /> + </div> + + <!-- Message Field --> + <div> + <label for="message" class="block text-sm font-medium text-text mb-2"> + {{ i18n "message" }} + </label> + <textarea + id="message" + x-model="formData.message" + rows="5" + required + class="w-full px-4 py-2 bg-bg border border-border/50 rounded-lg text-text placeholder-text-dim focus:outline-none focus:border-accent focus:ring-1 focus:ring-accent transition-colors resize-none" + :aria-busy="isSubmitting" + ></textarea> + </div> + + <!-- Status Message --> + <div + x-show="statusMessage" + x-text="statusMessage" + :class="statusClass" + class="px-4 py-3 rounded-lg text-sm transition-all" + ></div> + + <!-- Submit Button --> + <button + type="submit" + :disabled="isSubmitting" + class="w-full px-4 py-2 bg-accent text-bg font-medium rounded-lg hover:bg-accent/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors" + > + <span x-show="!isSubmitting">{{ i18n "submit" }}</span> + <span x-show="isSubmitting">{{ i18n "sending" }}</span> + </button> +</form> + diff --git a/layouts/shortcodes/div-close.html b/layouts/shortcodes/div-close.html deleted file mode 100644 index ea7e47c..0000000 --- a/layouts/shortcodes/div-close.html +++ /dev/null @@ -1,2 +0,0 @@ -</div> - diff --git a/layouts/shortcodes/div.html b/layouts/shortcodes/div.html deleted file mode 100644 index 0c0b755..0000000 --- a/layouts/shortcodes/div.html +++ /dev/null @@ -1,4 +0,0 @@ -{{ if .Get "class" }} -<div class="{{ with .Get "class" }}{{ . }}{{ end }}"> -{{ end }} - diff --git a/layouts/shortcodes/dropcap.html b/layouts/shortcodes/dropcap.html index 80cbefe..6114678 100644 --- a/layouts/shortcodes/dropcap.html +++ b/layouts/shortcodes/dropcap.html @@ -1,14 +1 @@ -{{/* - * The dropcap shortcode: - * - * Usage: - * - * {{< dropcap class="some class" >}} - * your paragraph that will have a drop cap here - * {{< /dropcap >}} - * - */}} - -<p class="has-dropcap {{ with .Get "class"}}{{.}}{{ end }}"> - {{ .InnerDeindent }} -</p> +<span class="text-2xl font-bold first-letter:text-3xl">{{ .Inner }}</span> diff --git a/layouts/shortcodes/em.html b/layouts/shortcodes/em.html index 11f399a..a3a096c 100644 --- a/layouts/shortcodes/em.html +++ b/layouts/shortcodes/em.html @@ -1 +1 @@ -<mark>{{ .Inner | markdownify }}</mark> +<em>{{ .Inner }}</em> diff --git a/layouts/shortcodes/figure.html b/layouts/shortcodes/figure.html deleted file mode 100644 index 4cf2e7b..0000000 --- a/layouts/shortcodes/figure.html +++ /dev/null @@ -1,27 +0,0 @@ -{{/* - * This version of the figure shortcode needs to be closed and doesn't - * add an image itself, but relies on the img.html shortcode to provide - * a responsive image instead. - */}} -<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}> - {{- if .Get "link" -}} - <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}> - {{- end -}} - {{.InnerDeindent}} - {{- if .Get "link" }}</a>{{ end -}} - {{- if or (or (.Get "title") (.Get "caption")) (.Get "attr") -}} - <figcaption> - {{ with (.Get "title") -}} - <h4>{{ . }}</h4> - {{- end -}} - {{- if or (.Get "caption") (.Get "attr") -}}<p> - {{- .Get "caption" | markdownify -}} - {{- with .Get "attrlink" }} - <a href="{{ . }}"> - {{- end -}} - {{- .Get "attr" | markdownify -}} - {{- if .Get "attrlink" }}</a>{{ end }}</p> - {{- end }} - </figcaption> - {{- end }} -</figure> diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html deleted file mode 100644 index ae7d23e..0000000 --- a/layouts/shortcodes/gal-img.html +++ /dev/null @@ -1,16 +0,0 @@ -{{- $src := .Get "src" -}} -{{- $source := resources.Get $src -}} -{{- $alt := .Get "alt" -}} -{{- $caption := .Get "caption" -}} -{{- $location := .Get "location" -}} -{{- $fullsize := $source -}} -{{- $thumb := $source.Resize "400x webp" -}} -<figure class="photo-card" - data-photo-index="{{ .Ordinal }}" - data-src="{{ $fullsize.RelPermalink }}" - data-alt="{{ $alt }}" - data-caption="{{ $caption }}" - data-location="{{ $location }}"> - <img src="{{ $thumb.RelPermalink }}" alt="{{ $alt }}" loading="lazy"> - {{ with $caption }}<figcaption>{{ . }}</figcaption>{{ end }} -</figure> diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index f9e546e..b66c327 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -1,3 +1,12 @@ -<div class="photo-grid" data-lightbox="true"> - {{ .Inner }} +{{- $cols := .Get "cols" | default "2" -}} + +<div class="my-8 grid gap-4" style="grid-template-columns: repeat({{ $cols }}, 1fr)"> + {{- range $line := strings.Split .Inner "\n" -}} + {{- if strings.Contains $line "![" -}} + {{- $image := strings.TrimSpace $line -}} + {{- if $image -}} + {{ $image | markdownify | safeHTML }} + {{- end -}} + {{- end -}} + {{- end -}} </div> diff --git a/layouts/shortcodes/gravatar.html b/layouts/shortcodes/gravatar.html index 56e2514..3a1ebcc 100644 --- a/layouts/shortcodes/gravatar.html +++ b/layouts/shortcodes/gravatar.html @@ -1,52 +1,17 @@ -{{/* - * The gravatar shortcode: - * All arguments are optional, main ones are mail and size and have a fallback set in place. - * Args: - * mail: [string] The email address. Falls back to .Site.Params.author_email which should be set in your config file. - * size: [int] The size of the fetched image. Defaults to 200 if not set. - * class: [string] The class to give to the figure block. - * link: [string] The address to link the picture to. - * target: [string] Where to open the link. One of "_blank", "_self", "_parent", "_top". - * caption: [string] Caption text to show with the image. Supports Markdown. - * - * Usage: - * {{< gravatar mail="some@address.com" size=150 class="some class" link="https://example.com" target="_blank" rel="author" caption="Here's a picture of a dog." >}} - * - * Output: - * <figure class="some class"> - * <a href="https://example.com" target="_blank" rel="author"> - * <img src="https://www.gravatar.com/avatar/emailhash?s=150" alt="Here's a picture of a dog." /> - * </a> - * <figcaption> - * <p> - * Here's a picture of a dog. - * </p> - * </figcaption> - * </figure> - * - */}} +{{- $email := .Get "email" -}} +{{- $size := .Get "size" | default "256" | int -}} +{{- $alt := .Get "alt" | default "User avatar" -}} +{{- $class := .Get "class" | default "w-32 h-32 rounded-full" -}} -{{- $mailhash := $.Site.Params.author_email -}} -{{- if .Get "mail" -}}{{- $mailhash = .Get "mail" -}}{{- end -}} -{{- $hash := $mailhash | lower | md5 -}} - -<figure{{ with .Get "class" }} class="{{ . }}"{{ end }}> -{{- if .Get "link" -}} - <a href="{{ .Get "link" }}"{{ with .Get "target" }} target="{{ . }}"{{ end }}{{ with .Get "rel" }} rel="{{ . }}"{{ end }}> -{{- end }} - <img src="https://www.gravatar.com/avatar/{{- $hash -}}?s={{- with .Get "size" }}{{.}}{{ else }}200{{ end }}" - {{- if or (.Get "alt") (.Get "caption") }} - alt="{{ with .Get "alt" }}{{ . }}{{ else }}{{ .Get "caption" | markdownify| plainify }}{{ end }}" - {{- end -}} - /> -{{- if .Get "link" -}} - </a> -{{- end }} -{{- if .Get "caption" -}} - <figcaption> - <p> - {{- .Get "caption" | markdownify -}} - </p> - </figcaption> -{{- end }} -</figure> +{{- if $email -}} + {{- $hash := md5 (strings.TrimSpace (strings.ToLower $email)) -}} + {{- $gravatarURL := printf "https://www.gravatar.com/avatar/%s?s=%d&d=identicon" $hash $size -}} + <img + src="{{ $gravatarURL }}" + alt="{{ $alt }}" + class="{{ $class }}" + loading="lazy" + /> +{{- else -}} + {{- errorf "gravatar shortcode: 'email' parameter is required" -}} +{{- end -}} diff --git a/layouts/shortcodes/image.html b/layouts/shortcodes/image.html new file mode 100644 index 0000000..84dec3f --- /dev/null +++ b/layouts/shortcodes/image.html @@ -0,0 +1,23 @@ +{{- $src := .Get "src" -}} +{{- $alt := .Get "alt" | default "Image" -}} +{{- $caption := .Get "caption" -}} +{{- $class := .Get "class" | default "w-full h-auto rounded-lg border border-border" -}} +{{- $link := .Get "link" -}} +{{- $figureClass := .Get "figure-class" -}} + +{{- if or $src .Inner -}} + <figure class="my-8{{- with $figureClass }} {{ . }}{{- end -}}"> + {{- if .Inner -}} + {{- .Inner -}} + {{- else -}} + {{- if $link -}}<a href="{{ $link }}">{{- end -}} + <img src="{{ $src }}" alt="{{ $alt }}" class="{{ $class }}" loading="lazy" /> + {{- if $link -}}</a>{{- end -}} + {{- end -}} + {{- if $caption -}} + <figcaption class="mt-3 text-center text-sm text-text-dim italic">{{ $caption }}</figcaption> + {{- end -}} + </figure> +{{- else -}} + {{- errorf "image shortcode: 'src' parameter or inner content is required" -}} +{{- end -}} diff --git a/layouts/shortcodes/img.html b/layouts/shortcodes/img.html deleted file mode 100644 index fbf96c0..0000000 --- a/layouts/shortcodes/img.html +++ /dev/null @@ -1,84 +0,0 @@ -{{/* - Taken from https://www.brycewray.com/posts/2022/06/responsive-optimized-images-hugo/ -*/}} - -{{- $respSizes := .Site.Params.imageSizes -}} -{{- $src := .Get "src" -}} -{{- $source := resources.Get $src -}} -{{- $alt := .Get "alt" -}} -{{- $divClass := .Get "divClass" -}} -{{/* - The styling in $imgClass, below, makes - an image fill the container horizontally - and adjust its height automatically - for that, and then fade in for the LQIP effect. - Feel free to adjust your CSS/SCSS as desired. -*/}} -{{- $imgClass := "animate-fade" -}} -{{- $dataSzes := "(min-width: 1024px) 100vw, 50vw" -}} -{{/* - Now we'll create the 20-pixel-wide LQIP - and turn it into Base64-encoded data, which - is better for performance and caching. -*/}} -{{- $LQIP_img := $source.Resize "20x jpg" -}} -{{- $LQIP_b64 := $LQIP_img.Content | base64Encode -}} -{{/* - $CFPstyle is for use in styling - the div's background, as you'll see shortly. -*/}} -{{- $CFPstyle := printf "%s%s%s%v%s" "background: url(data:image/jpeg;base64," $LQIP_b64 "); background-size: cover; background-repeat: no-repeat; width: " $source.Width "px;" -}} -{{/* - Then, we create a 640-pixel-wide JPG - of the image. This will serve as the - "fallback" image for that tiny percentage - of browsers that don't understand the - HTML `picture` tag. -*/}} -{{- $actualImg := $source.Resize "640x jpg" -}} -<div class="picture{{with $divClass}} {{.}}{{end}}" style="{{ $CFPstyle | safeCSS }}"> -{{/* - Now we'll build the `picture` which modern - browsers use to decide which image, and - which format thereof, to show. Remember to - put `webp` first, since the browser will use - the first format it **can** use, and WebP files - usually are smaller. After WebP, the fallback - is the universally safe JPG format. -*/}} - <a href="{{ $source.RelPermalink }}"> - <picture> - <source - type="image/webp" - srcset=" - {{- with $respSizes -}} - {{- range $i, $e := $respSizes -}} - {{- if ge $source.Width . -}} - {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" $e " webp") ).RelPermalink }} {{ . }}w - {{- end -}} - {{- end -}} - {{- end -}}" - sizes="{{ $dataSzes }}" - /> - <source - type="image/jpeg" - srcset=" - {{- with $respSizes -}} - {{- range $i, $e := . -}} - {{- if ge $source.Width . -}} - {{- if $i }}, {{ end -}}{{- ($source.Resize (printf "%vx%v" . " jpg") ).RelPermalink }} {{ . }}w - {{- end -}} - {{- end -}} - {{- end -}}" - sizes="{{ $dataSzes }}" - /> - <img class="{{ $imgClass }}" - src="{{ $actualImg.RelPermalink }}" - width="{{ $source.Width }}" - height="{{ $source.Height }}" - alt="{{ $alt }}" - loading="lazy" - /> - </picture> - </a> -</div> diff --git a/layouts/shortcodes/quote.html b/layouts/shortcodes/quote.html index 05d0c94..1ed5c3c 100644 --- a/layouts/shortcodes/quote.html +++ b/layouts/shortcodes/quote.html @@ -1,19 +1,15 @@ -<blockquote class="blockquote"> - <p> - {{.Inner}} - </p> - {{ if .Get "source" }} - <footer class="blockquote-footer"> - <cite title="by: {{ with .Get "source"}}{{.}}{{ end }}"> - {{ with .Get "src"}} - by - <a href="{{.}}" target="_blank" rel="noopener noreferrer"> - {{ end }} - {{ with .Get "source" }}{{.}}{{ end }} - {{ with .Get "src"}} - </a> - {{ end }} - </cite> - </footer> - {{ end }} +{{- $source := .Get "source" -}} +{{- $src := .Get "src" -}} + +<blockquote class="my-8 pl-6 border-l-4 border-accent/50 italic text-text-dim"> + <p class="text-lg">{{ .Inner }}</p> + {{- if $source -}} + <footer class="mt-4 text-sm not-italic text-text-dim"> + {{- if $src -}} + — <a href="{{ $src }}" class="text-accent hover:underline">{{ $source }}</a> + {{- else -}} + — {{ $source }} + {{- end -}} + </footer> + {{- end -}} </blockquote> diff --git a/layouts/shortcodes/strike.html b/layouts/shortcodes/strike.html index 415036a..275b7c1 100644 --- a/layouts/shortcodes/strike.html +++ b/layouts/shortcodes/strike.html @@ -1 +1 @@ -<strike>{{ .Inner | markdownify }}</strike> +<s>{{ .Inner }}</s> diff --git a/layouts/shortcodes/svg.html b/layouts/shortcodes/svg.html deleted file mode 100644 index d042bb0..0000000 --- a/layouts/shortcodes/svg.html +++ /dev/null @@ -1,5 +0,0 @@ -<span class="inline-svg{{ with .Get "class" }} {{ . }}{{ end }}"> -{{- $fname := print "SVGs/" ( .Get "name" ) ".svg" -}} -{{ $icon := resources.Get $fname }} -{{ $icon.Content | safeHTML }} -</span> diff --git a/layouts/shortcodes/video.html b/layouts/shortcodes/video.html index aa30a13..1e2645d 100644 --- a/layouts/shortcodes/video.html +++ b/layouts/shortcodes/video.html @@ -1,37 +1,37 @@ -{{/* - * The video shortcode: - * All arguments are optional, except for src which is where you define your video file - * This shortcode supports webm, mp4, and other HTML5 video formats. - * Args: - * src: [string] Path to video file (required) - * class: [string] The class(es) to give to the video block. - * width: [int] The width of the video - * height: [int] The height of the video - * autoplay: [bool] true or false for autoplay - defaults to false - * loop: [bool] true or false for loop - defaults to false - * muted: [bool] true or false for mute - defaults to false - * - * Usage: - * {{< video src="my-video.mp4" width=600 height=400 autoplay=true loop=true muted=true class="responsive-video" >}} - * - * Output: - * <video class="responsive-video" controls preload="auto" width="600" height="400" autoplay loop muted playsinline> - * <source src="my-video.mp4" type="video/mp4"> - * </video> - * - */}} +{{- $src := .Get "src" -}} +{{- $id := .Get "id" -}} +{{- $title := .Get "title" | default "Video" -}} +{{- $class := .Get "class" | default "" -}} -{{ $ext := (.Get "src") | path.Ext }} -{{ $filetype := slicestr $ext 1}} - -<video{{ with .Get "class" }} class="{{ . }}"{{ end }} - controls - preload="auto" - {{ with .Get "width" }}width="{{.}}"{{ end }} - {{ with .Get "height" }}height="{{.}}"{{ end }} - {{ if eq (.Get "autoplay") "true" }}autoplay {{ end }} - {{ if eq (.Get "loop") "true" }}loop {{ end }} - {{ if eq (.Get "muted") "true" }}muted {{ end }} - playsinline > - <source src="{{ ( .Get "src" ) }}" type="video/{{ $filetype }}"> -</video> +{{- if $id -}} + <div class="my-6{{- with $class }} {{ . }}{{- end -}}"> + <iframe + class="w-full aspect-video" + src="https://www.youtube.com/embed/{{ $id }}" + title="{{ $title }}" + allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" + allowfullscreen + ></iframe> + </div> +{{- else if $src -}} + {{- $ext := $src | path.Ext -}} + {{- $filetype := slicestr $ext 1 -}} + {{- $videoURL := $src -}} + {{- $resource := .Page.Resources.GetMatch $src -}} + {{- if $resource -}}{{- $videoURL = $resource.RelPermalink -}}{{- end -}} + <video + {{- with $class }} class="{{ . }}"{{ end }} + controls + preload="auto" + playsinline + {{- with .Get "width" }} width="{{ . }}"{{ end }} + {{- with .Get "height" }} height="{{ . }}"{{ end }} + {{- if eq (.Get "autoplay") "true" }} autoplay{{ end }} + {{- if eq (.Get "loop") "true" }} loop{{ end }} + {{- if eq (.Get "muted") "true" }} muted{{ end }} + > + <source src="{{ $videoURL }}" type="video/{{ $filetype }}"> + </video> +{{- else -}} + {{- errorf "video shortcode: either 'src' or 'id' parameter is required" -}} +{{- end -}} diff --git a/layouts/taxonomy.html b/layouts/taxonomy.html deleted file mode 100644 index c2e7875..0000000 --- a/layouts/taxonomy.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ define "main" }} - <h1>{{ .Title }}</h1> - {{ .Content }} - {{ range .Pages }} - <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> - {{ end }} -{{ end }} diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html new file mode 100644 index 0000000..c3a4317 --- /dev/null +++ b/layouts/taxonomy/list.html @@ -0,0 +1,49 @@ +{{ define "main" }} +<div class="mx-auto px-4 py-12 max-w-4xl"> + <!-- Page title with taxonomy name --> + <h1 class="text-4xl md:text-5xl font-bold text-accent mb-12"> + {{ i18n .Data.Plural }} + </h1> + + <!-- Articles list --> + <div class="space-y-6 max-w-3xl"> + {{ $pinned := where .Pages "Params.pinned" true }} + {{ $unpinned := where .Pages "Params.pinned" false }} + + <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages --> + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" nil }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" "" }} + {{ end }} + {{ end }} + + <!-- Pinned posts first --> + {{ range (sort $pinned "Date" "desc") }} + <div class="relative"> + {{ partial "article-card.html" . }} + <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30"> + {{ i18n "postCount" .Pages.Len }} + </span> + </div> + {{ end }} + + <!-- Regular posts --> + {{ range (sort $unpinned "Date" "desc") }} + <div class="relative"> + {{ partial "article-card.html" . }} + <span class="absolute top-4 right-4 px-2 py-0.5 rounded text-xs font-mono bg-surface text-text-dim border border-border/30"> + {{ i18n "postCount" .Pages.Len }} + </span> + </div> + {{ end }} + + <!-- Empty state --> + {{ if eq (len .Pages) 0 }} + <div class="py-12 text-center text-text-dim"> + {{ i18n "noRelated" }} + </div> + {{ end }} + </div> +</div> +{{ end }} diff --git a/layouts/taxonomy/term.html b/layouts/taxonomy/term.html new file mode 100644 index 0000000..1b953bc --- /dev/null +++ b/layouts/taxonomy/term.html @@ -0,0 +1,46 @@ +{{ define "main" }} +<div class="mx-auto px-4 py-12 max-w-4xl"> + <!-- Page title with taxonomy type --> + <h1 class="text-4xl md:text-5xl font-bold text-accent mb-2"> + {{ i18n .Data.Singular }} + </h1> + + <!-- Current term heading --> + <p class="text-lg text-text-dim mb-12"> + <span class="inline-flex items-center px-3 py-1 rounded text-sm font-medium border border-accent/30 text-accent"> + {{ .Title }} + </span> + </p> + + <!-- Articles list --> + <div class="space-y-6 max-w-3xl"> + {{ $pinned := where .Pages "Params.pinned" true }} + {{ $unpinned := where .Pages "Params.pinned" false }} + + <!-- If no unpinned posts found (because param is undefined), get all non-pinned pages --> + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" nil }} + {{ if eq (len $unpinned) 0 }} + {{ $unpinned = where .Pages "Params.pinned" "" }} + {{ end }} + {{ end }} + + <!-- Pinned posts first --> + {{ range (sort $pinned "Date" "desc") }} + {{ partial "article-card.html" . }} + {{ end }} + + <!-- Regular posts --> + {{ range (sort $unpinned "Date" "desc") }} + {{ partial "article-card.html" . }} + {{ end }} + + <!-- Empty state --> + {{ if eq (len .Pages) 0 }} + <div class="py-12 text-center text-text-dim"> + {{ i18n "noRelated" }} + </div> + {{ end }} + </div> +</div> +{{ end }} diff --git a/layouts/term.html b/layouts/term.html deleted file mode 100644 index c2e7875..0000000 --- a/layouts/term.html +++ /dev/null @@ -1,7 +0,0 @@ -{{ define "main" }} - <h1>{{ .Title }}</h1> - {{ .Content }} - {{ range .Pages }} - <h2><a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></h2> - {{ end }} -{{ end }} |