]> danix's work - danix.xyz-2.git/commitdiff
feat: add breadcrumb navigation component
authorDanilo M. <redacted>
Thu, 16 Apr 2026 13:29:38 +0000 (15:29 +0200)
committerDanilo M. <redacted>
Thu, 16 Apr 2026 13:29:38 +0000 (15:29 +0200)
- Create breadcrumb.html partial with Home > Articles > Title structure
- Support both English and Italian language versions
- Add breadcrumb and breadcrumb-separator CSS classes
- Integrate breadcrumb into article detail pages
- Rebuild CSS: main.min.css updated

Co-Authored-By: Claude Haiku 4.5 <redacted>
themes/danix-xyz-hacker/assets/css/main.css
themes/danix-xyz-hacker/assets/css/main.min.css
themes/danix-xyz-hacker/layouts/articles/single.html
themes/danix-xyz-hacker/layouts/partials/breadcrumb.html [new file with mode: 0644]

index 50d5284c861165805aae164345ecc24baf10d3bb..883d4852b2ab4f9213331fd4ea8b9699c39380c2 100644 (file)
@@ -424,6 +424,19 @@ html.theme-light {
     @apply text-text hover:text-accent transition-colors;
   }
 
+  /* Breadcrumb navigation */
+  .breadcrumb {
+    @apply flex items-center gap-2 text-sm text-text-dim;
+  }
+
+  .breadcrumb a {
+    @apply hover:text-accent transition-colors;
+  }
+
+  .breadcrumb-separator {
+    @apply opacity-50;
+  }
+
   /* Article metadata styling (with icons) */
   .article-meta {
     @apply flex flex-wrap items-center gap-4 text-sm text-text-dim;
index fac5cca04f88ab36af1d432d2080cf12363ac444..82ac77c1663c31b2dbccab6a1ca3c1146bb96c6b 100644 (file)
@@ -1504,6 +1504,31 @@ article.border.border-border\/30.rounded-lg.overflow-hidden.group.menu-overlay {
   opacity: 1;
 }
 
+/* Breadcrumb navigation */
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  color: var(--text-dim);
+}
+
+.breadcrumb a {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.breadcrumb a:hover {
+  color: var(--accent);
+}
+
+.breadcrumb-separator {
+  opacity: 0.5;
+}
+
 /* Article metadata styling (with icons) */
 
 /* Hero typography with fluid sizing */
index fe2ff6e0723c782db6dbaf9c6adf37fa1aef9986..4e97fb3d30d7c9ee0d702ed592cf20f413f882bf 100644 (file)
@@ -5,6 +5,9 @@
   <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" . }}
 
diff --git a/themes/danix-xyz-hacker/layouts/partials/breadcrumb.html b/themes/danix-xyz-hacker/layouts/partials/breadcrumb.html
new file mode 100644 (file)
index 0000000..f2f794f
--- /dev/null
@@ -0,0 +1,20 @@
+<nav class="breadcrumb mb-6" aria-label="Breadcrumb">
+  {{ $currentLang := .Page.Language }}
+
+  <!-- Home link -->
+  <a href="/">Home</a>
+  <span class="breadcrumb-separator">/</span>
+
+  <!-- Articles section -->
+  {{ if eq .Page.Type "article" }}
+    {{ if eq $currentLang "it" }}
+      <a href="/it/articles/">{{ i18n "articles" }}</a>
+    {{ else }}
+      <a href="/articles/">{{ i18n "articles" }}</a>
+    {{ end }}
+    <span class="breadcrumb-separator">/</span>
+
+    <!-- Current article title -->
+    <span>{{ .Page.Title }}</span>
+  {{ end }}
+</nav>