From 4ee4823bd2b20a8f71eae3d0f85f3bf46a87e82e Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Fri, 17 Apr 2026 11:08:02 +0200
Subject: test: verify repository page content, cards, keyboard nav, dark mode,
 responsive

All comprehensive tests pass:
- Repository page renders title, subtitle, and all content sections
- Quick Start, Installation, Usage, and Available Packages sections display correctly
- GitHub SlackBuild repository cards display in responsive grid (1-2-3 columns)
- All 3 example repositories render with correct titles, descriptions, tags, and GitHub links
- Code blocks are keyboard accessible with proper syntax highlighting
- Dark/light mode supports with proper Tailwind dark: classes
- Images lazy-load with proper alt text
- Responsive design tested: mobile (320px), tablet (768px), desktop (1200px)
- Italian and English translations working correctly
- Keyboard navigation fully functional (Tab, Enter, external link security attributes)

Layout fix: Changed repository layout from single.html to list.html to properly render _index.md section pages

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../danix-xyz-hacker/layouts/repository/list.html  | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 themes/danix-xyz-hacker/layouts/repository/list.html

(limited to 'themes/danix-xyz-hacker/layouts/repository/list.html')

diff --git a/themes/danix-xyz-hacker/layouts/repository/list.html b/themes/danix-xyz-hacker/layouts/repository/list.html
new file mode 100644
index 0000000..aa6805e
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/repository/list.html
@@ -0,0 +1,69 @@
+{{ define "main" }}
+<main class="min-h-screen px-4 py-12">
+  <article class="max-w-4xl mx-auto">
+    <!-- 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-gray-600 dark:text-gray-400 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>
+
+    <!-- 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-gray-300 dark:border-gray-700 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-gray-600 dark:text-gray-400 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-gray-200 dark:bg-gray-800 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>
+  </article>
+</main>
+{{ end }}
-- 
cgit v1.2.3