From c42150058196f5affad5c6c590e99dd2fc7321c3 Mon Sep 17 00:00:00 2001 From: "Danilo M." Date: Fri, 10 Apr 2026 11:29:00 +0200 Subject: feat: complete Hugo theme implementation from mockups MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Transform all production-ready mockup files into a fully functional Hugo theme with all design patterns, components, and interactivity. Implements the complete plan: token alignment, global shell, homepage, articles section, single article views, photo gallery, static pages, and 404 page. Changes: - Phase 0: Token alignment (--color-* → --type-*, add spacing/z-index/timing scales) - Phase 1a: Global shell (baseof.html, hamburger menu, theme toggle, matrix rain) - Phase 1b: Homepage (hero layout, glitch/typing/scroll-reveal effects) - Phase 1c: Articles section (timeline layout, filter system, featured cards) - Phase 1d: Single article (meta bar, share sidebar, footer nav, progress bar) - Phase 1e: Photo gallery (lightbox, grid layout, shortcode updates) - Phase 1f: Static pages (about/contact page layout) - Phase 1g: 404 page (standalone HTML, quote randomization, recent articles) New files: - 6 CSS components: hamburger, article-hero, share-sidebar, timeline, lightbox, 404 - 8 JS modules: hamburger, glitch, typing, scroll-reveal, share-sidebar, lightbox, 404, photo-utils - 6 template partials: article-single, featured-card, photo-article, share-sidebar, static-page, timeline-item - 1 layout: 404.html (standalone) Updated: - All CSS variables with comprehensive token system - All JS modules integrated into main.js - All shortcodes (gallery, gal-img) for lightbox compatibility - All layout files (baseof, home, section, page) with new dispatching logic Verified: Hugo build succeeds with 21 pages, no errors. Co-Authored-By: Claude Haiku 4.5 --- layouts/404.html | 98 +++++++++++++++++++++++++++++++++++ layouts/_partials/article-single.html | 56 ++++++++++++++++++++ layouts/_partials/featured-card.html | 23 ++++++++ layouts/_partials/header.html | 30 +++++++---- layouts/_partials/hero.html | 44 +++++++++++++--- layouts/_partials/matrix-canvas.html | 1 - layouts/_partials/photo-article.html | 32 ++++++++++++ layouts/_partials/share-sidebar.html | 28 ++++++++++ layouts/_partials/static-page.html | 33 ++++++++++++ layouts/_partials/timeline-item.html | 31 +++++++++++ layouts/baseof.html | 16 ++++-- layouts/home.html | 40 +++++++------- layouts/page.html | 38 +++----------- layouts/section.html | 41 ++++++++------- layouts/shortcodes/gal-img.html | 17 ++++-- layouts/shortcodes/gallery.html | 6 +-- 16 files changed, 434 insertions(+), 100 deletions(-) create mode 100644 layouts/404.html create mode 100644 layouts/_partials/article-single.html create mode 100644 layouts/_partials/featured-card.html delete mode 100644 layouts/_partials/matrix-canvas.html create mode 100644 layouts/_partials/photo-article.html create mode 100644 layouts/_partials/share-sidebar.html create mode 100644 layouts/_partials/static-page.html create mode 100644 layouts/_partials/timeline-item.html (limited to 'layouts') diff --git a/layouts/404.html b/layouts/404.html new file mode 100644 index 0000000..3295630 --- /dev/null +++ b/layouts/404.html @@ -0,0 +1,98 @@ + + + + + + + 404 — {{ .Site.Title }} + + + + {{ partialCached "head/css.html" . }} + {{ partialCached "head/js.html" . }} + + {{ $notfound := resources.Get "css/components/404.css" | fingerprint }} + + + + + + + {{ partial "header.html" . }} + +
+
+ +
+
+
"
+

The page you're looking for doesn't exist. But that's okay, nothing exists until you find it.

+

— 404 Philosopher

+
+ +
+ + +
+ + +
+ + +
+
+

Recent Articles

+
    + {{ range first 5 (.Site.RegularPages.ByDate.Reverse) }} +
  • + + {{ .Title }} + +
    • + {{ end }} +
+
+ +
+
+ + + +
+
+
$ curl https://danix.xyz/lost
+
404: Not Found
+
$ ls /articles
+
+
+
+
+
+
+ + {{ partial "footer.html" . }} + + + + + {{ $notFoundJS := resources.Get "js/404.js" | fingerprint }} + + + diff --git a/layouts/_partials/article-single.html b/layouts/_partials/article-single.html new file mode 100644 index 0000000..f030869 --- /dev/null +++ b/layouts/_partials/article-single.html @@ -0,0 +1,56 @@ +
+ + {{ if .Params.image }} +
+
+
+ +

{{ .Title }}

+
+
+ {{ end }} + + +
+
+ {{ .Params.type }} + {{ .Date.Format "Jan 02, 2006" }} + {{ .ReadingTime }} min read +
+
+ + + {{ partial "share-sidebar.html" . }} + + +
+ {{ .Content }} +
+ + + {{ $section := .Site.GetPage .Section }} + {{ if $section }} + {{ $prevPage := .PrevInSection }} + {{ $nextPage := .NextInSection }} + {{ if or $prevPage $nextPage }} + + {{ end }} + {{ end }} +
diff --git a/layouts/_partials/featured-card.html b/layouts/_partials/featured-card.html new file mode 100644 index 0000000..cf2618f --- /dev/null +++ b/layouts/_partials/featured-card.html @@ -0,0 +1,23 @@ +{{ $page := .page }} + +
+ {{ if $page.Params.image }} +
+ {{ $page.Title }} +
+ {{ end }} + +
+
+ + {{ $page.Params.type }} + + $ {{ $page.Date.Format "2006-01-02" }} +
+

{{ $page.Title }}

+ {{ with $page.Params.description }} +

{{ . }}

+ {{ end }} + Read the full article → +
+
diff --git a/layouts/_partials/header.html b/layouts/_partials/header.html index 872c207..1f8efb8 100644 --- a/layouts/_partials/header.html +++ b/layouts/_partials/header.html @@ -1,17 +1,29 @@ -
- {{ .Site.Params.author }} -
-
- + diff --git a/layouts/_partials/hero.html b/layouts/_partials/hero.html index 11034be..ac8a4e1 100644 --- a/layouts/_partials/hero.html +++ b/layouts/_partials/hero.html @@ -1,11 +1,39 @@ -
- {{ partial "matrix-canvas.html" . }} -
-
{{ .Site.Params.avatar }}
-
-

{{ .Site.Params.author }}

-
// engineer • writer • human
-

{{ .Site.Params.description }}

+
+
+
// Featured
+

{{ .Site.Params.author }}

+
+

{{ .Site.Params.description }}

+
+ Read Articles + Explore
+ +
+
+
+ + + +
+
+
$ whoami
+
danilo
+
$ pwd
+
/home/danilo/web
+
$ ls -la
+
total 48
+
drwxr-xr-x 5 danilo staff 160 Apr 9 2026 .
+
-rw-r--r-- 1 danilo staff 4.2K blog.md
+
+
+
+ +
+ Scroll to explore + + + +
diff --git a/layouts/_partials/matrix-canvas.html b/layouts/_partials/matrix-canvas.html deleted file mode 100644 index b10b471..0000000 --- a/layouts/_partials/matrix-canvas.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/layouts/_partials/photo-article.html b/layouts/_partials/photo-article.html new file mode 100644 index 0000000..1040c9b --- /dev/null +++ b/layouts/_partials/photo-article.html @@ -0,0 +1,32 @@ +
+ + {{ if .Params.image }} +
+
+
+

{{ .Title }}

+
+
+ {{ end }} + + +
+
+ {{ .Params.type }} + {{ .Date.Format "Jan 02, 2006" }} +
+
+ + +
+
+ {{ .Content }} +
+
+ + + {{ $photoUtils := resources.Get "js/photo-utils.js" }} + {{ $lightbox := resources.Get "js/lightbox.js" | fingerprint }} + + +
diff --git a/layouts/_partials/share-sidebar.html b/layouts/_partials/share-sidebar.html new file mode 100644 index 0000000..36b6d03 --- /dev/null +++ b/layouts/_partials/share-sidebar.html @@ -0,0 +1,28 @@ + diff --git a/layouts/_partials/static-page.html b/layouts/_partials/static-page.html new file mode 100644 index 0000000..d557b2f --- /dev/null +++ b/layouts/_partials/static-page.html @@ -0,0 +1,33 @@ +
+ +
+
+
+

{{ .Title }}

+
+
+ + +
+ {{ .Content }} +
+ + + {{ if eq .Section "is" }} + + {{ end }} +
diff --git a/layouts/_partials/timeline-item.html b/layouts/_partials/timeline-item.html new file mode 100644 index 0000000..fcb3f50 --- /dev/null +++ b/layouts/_partials/timeline-item.html @@ -0,0 +1,31 @@ +{{ $page := .page }} +{{ $index := .index }} +{{ $position := "left" }} +{{ if (eq (mod $index 2) 1) }} + {{ $position = "right" }} +{{ end }} + +
+
+ +
+ {{ if $page.Params.image }} +
+ {{ $page.Title }} +
+ {{ end }} + +
+
+ {{ $page.Params.type }} + {{ $page.Date.Format "Jan 02, 2006" }} +
+

+ {{ $page.Title }} +

+ {{ with $page.Params.description }} +

{{ . }}

+ {{ end }} +
+
+
diff --git a/layouts/baseof.html b/layouts/baseof.html index ad6613f..c9633d0 100644 --- a/layouts/baseof.html +++ b/layouts/baseof.html @@ -2,11 +2,21 @@ {{ partial "head.html" . }} + -
-
{{ partial "header.html" . }}
-
{{ block "main" . }}{{ end }}
+ +
+ + {{ partial "header.html" . }} +
{{ block "main" . }}{{ end }}
{{ partial "footer.html" . }}
diff --git a/layouts/home.html b/layouts/home.html index f285b41..6328ee5 100644 --- a/layouts/home.html +++ b/layouts/home.html @@ -1,29 +1,27 @@ +{{ define "canvas-mode" }}hero{{ end }} + {{ define "main" }} {{ partial "hero.html" . }} -
-
Latest
- -
- {{ $articlesSection := .Site.GetPage "/articles" }} - {{ if $articlesSection }} - {{ $articles := $articlesSection.Pages }} - {{ $articles := sort $articles "Date" "desc" }} - {{ range first 6 $articles }} - {{ $type := .Params.type }} - {{ if not $type }}{{ $type = "article" }}{{ end }} +
+ {{ $articlesSection := .Site.GetPage "/articles" }} + {{ if $articlesSection }} + {{ $articles := $articlesSection.Pages }} + {{ $articles := sort $articles "Date" "desc" }} + {{ 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 }} - {{ partial "post-card.html" $data }} + {{ $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 }} + {{ partial "post-card.html" $data }} {{ end }} -
+ {{ end }} - View all articles -
+ View All Articles +
{{ end }} diff --git a/layouts/page.html b/layouts/page.html index 8fb2903..44073b2 100644 --- a/layouts/page.html +++ b/layouts/page.html @@ -1,35 +1,9 @@ {{ define "main" }} -
-
-

{{ .Title }}

-
- {{ dateFormat "Jan 2, 2006" .Date }} - {{ if .Params.type }}{{ .Params.type }}{{ end }} -
- -
- {{ .Content }} -
-
-
- - {{ if eq .Type "is" }} -
- -
+ {{ 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/section.html b/layouts/section.html index b9f0646..d817087 100644 --- a/layouts/section.html +++ b/layouts/section.html @@ -1,9 +1,9 @@ {{ define "main" }} -
-

{{ .Title }}

- - {{ if eq .Type "articles" }} -
+ {{ if eq .Type "articles" }} + +
+

{{ .Title }}

+
@@ -11,25 +11,30 @@
+
-
- {{ range .Pages.ByDate.Reverse }} - {{ $excerpt := .Params.excerpt }} - {{ if not $excerpt }} - {{ $excerpt = .Summary | plainify | truncate 150 }} - {{ end }} + {{ $featured := (.Pages.ByDate.Reverse) }} + {{ if and $featured (index $featured 0).Params.featured }} + {{ partial "featured-card.html" (dict "page" (index $featured 0)) }} + {{ end }} - {{ $data := dict "title" .Title "type" .Params.type "description" $excerpt "date" .Date "url" .RelPermalink "image" .Params.image "featured" false }} - {{ partial "post-card.html" $data }} +
+
+
+ {{ $pages := .Pages.ByDate.Reverse }} + {{ range $index, $page := $pages }} + {{ partial "timeline-item.html" (dict "page" $page "index" $index) }} {{ end }}
- {{ else }} - {{ .Content }} - {{ end }} -
+ - {{ if eq .Type "articles" }} {{ $filters := resources.Get "js/filters.js" | fingerprint }} + + {{ else }} + +
+ {{ .Content }} +
{{ end }} {{ end }} diff --git a/layouts/shortcodes/gal-img.html b/layouts/shortcodes/gal-img.html index 0693319..ae7d23e 100644 --- a/layouts/shortcodes/gal-img.html +++ b/layouts/shortcodes/gal-img.html @@ -1,7 +1,16 @@ {{- $src := .Get "src" -}} {{- $source := resources.Get $src -}} {{- $alt := .Get "alt" -}} -{{- $icon := $source.Resize "400x webp" -}} - - {{ $alt }} - +{{- $caption := .Get "caption" -}} +{{- $location := .Get "location" -}} +{{- $fullsize := $source -}} +{{- $thumb := $source.Resize "400x webp" -}} +
+ {{ $alt }} + {{ with $caption }}
{{ . }}
{{ end }} +
diff --git a/layouts/shortcodes/gallery.html b/layouts/shortcodes/gallery.html index 8a30fc5..f9e546e 100644 --- a/layouts/shortcodes/gallery.html +++ b/layouts/shortcodes/gallery.html @@ -1,5 +1,3 @@ -
-
- {{ .Inner }} -
+
+ {{ .Inner }}
-- cgit v1.2.3