# 404 & Repository Pages Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Create a user-friendly 404 error page with hacker theme integration, search, recent articles, and easter egg; build a Slackware repository guide page with hero section, installation/usage instructions, and GitHub repo cards—both fully accessible and responsive.

**Architecture:** 404 page uses Hugo's special `layouts/404.html` template to render when non-existent URLs are hit. It dynamically fetches recent articles, integrates Alpine.js for search and easter egg modal, and inherits styling/animations from Weeks 1-5. Repository page is a standard Hugo content page (`content/en/repository/_index.md` and `content/it/repository/_index.md`) with markdown-driven content (Installation, Usage, Available Packages sections) and dynamically rendered GitHub repo cards from `data/repos.yaml`. Both pages integrate existing components (buttons, cards, forms, animations) with no new component creation.

**Tech Stack:** Hugo, Tailwind CSS, Alpine.js, markdown content files, YAML data files, existing form/button/card components from Weeks 1-5.

---

## File Structure & Responsibilities

### 404 Error Page
- **`layouts/404.html`** — Hugo's special 404 template; renders error layout, fetches recent articles, includes search box and easter egg modal HTML/Alpine directives
- **`i18n/en.yaml`** — English i18n strings for 404 (page title, error message, button labels, search placeholder)
- **`i18n/it.yaml`** — Italian i18n strings for 404

### Repository Page
- **`content/en/repository/_index.md`** — English repository page content in markdown (title, intro, Installation, Usage, Available Packages sections, quick-start command)
- **`content/it/repository/_index.md`** — Italian repository page content in markdown (same structure, Italian text)
- **`data/repos.yaml`** — Structured data for GitHub repo cards (repo name, description i18n key, GitHub URL, image path, tags)
- **`themes/danix-xyz-hacker/layouts/repository/single.html`** (optional) — Custom layout to render repository page with repo cards loop (if default single.html doesn't fit)
- **`i18n/en.yaml`** — English i18n strings for Repository page (section headings, button labels, copy feedback)
- **`i18n/it.yaml`** — Italian i18n strings for Repository page

### Supporting Assets (if needed)
- **`static/images/repo-icons/`** — Directory for GitHub repo card images/icons (user provides images before implementation)
- **`themes/danix-xyz-hacker/assets/js/main.js`** (modify if needed) — Add search functionality for 404 page, copy-to-clipboard for repo code blocks

---

## Tasks

### Task 1: Set Up Feature Branch

**Files:**
- Git branch: `week-6-pages`

- [ ] **Step 1: Checkout master and pull latest**

```bash
git checkout master
git pull
```

Expected: On master, latest commits pulled.

- [ ] **Step 2: Create feature branch from master**

```bash
git checkout -b week-6-pages
```

Expected: On new branch `week-6-pages`, no uncommitted changes.

- [ ] **Step 3: Verify branch is clean**

```bash
git status
```

Expected: "On branch week-6-pages" and "nothing to commit, working tree clean".

- [ ] **Step 4: Start npm watch mode**

```bash
npm run watch
```

Expected: Tailwind/CSS watcher starts. Keep this running during development in a separate terminal.

---

### Task 2: Add i18n Strings for 404 Page (English)

**Files:**
- Modify: `i18n/en.yaml`

- [ ] **Step 1: Open i18n/en.yaml file**

```bash
cat i18n/en.yaml | head -20
```

Verify file structure and existing content.

- [ ] **Step 2: Add 404 i18n strings to en.yaml**

At the end of `i18n/en.yaml`, add:

```yaml
notFound:
  other: "Page Not Found"
notFoundHeading:
  other: "404"
notFoundMessage:
  other: "Sorry, the page you're looking for doesn't exist."
searchPlaceholder:
  other: "Search the site..."
searchButton:
  other: "Search"
recentArticles:
  other: "Recent Articles"
goHome:
  other: "Go Home"
browseArticles:
  other: "Browse Articles"
contactSupport:
  other: "Contact Me"
followWhiteRabbit:
  other: "Follow the white rabbit"
noSearchResults:
  other: "No results found"
bluePill:
  other: "Take the blue pill"
redPill:
  other: "Take the red pill"
easterEggTitle:
  other: "Choose Wisely"
```

- [ ] **Step 3: Verify YAML syntax**

```bash
hugo config
```

Expected: No YAML parsing errors (command should complete without errors).

- [ ] **Step 4: Commit changes**

```bash
git add i18n/en.yaml
git commit -m "feat: add 404 page i18n strings (English)"
```

---

### Task 3: Add i18n Strings for 404 Page (Italian)

**Files:**
- Modify: `i18n/it.yaml`

- [ ] **Step 1: Open i18n/it.yaml file**

```bash
cat i18n/it.yaml | head -20
```

Verify file structure.

- [ ] **Step 2: Add 404 i18n strings to it.yaml**

At the end of `i18n/it.yaml`, add:

```yaml
notFound:
  other: "Pagina Non Trovata"
notFoundHeading:
  other: "404"
notFoundMessage:
  other: "Scusa, la pagina che cerchi non esiste."
searchPlaceholder:
  other: "Cerca nel sito..."
searchButton:
  other: "Cerca"
recentArticles:
  other: "Articoli Recenti"
goHome:
  other: "Torna a Casa"
browseArticles:
  other: "Sfoglia Articoli"
contactSupport:
  other: "Contattami"
followWhiteRabbit:
  other: "Segui il coniglio bianco"
noSearchResults:
  other: "Nessun risultato trovato"
bluePill:
  other: "Prendi la pillola blu"
redPill:
  other: "Prendi la pillola rossa"
easterEggTitle:
  other: "Scegli con Saggezza"
```

- [ ] **Step 3: Verify YAML syntax**

```bash
hugo config
```

Expected: No YAML parsing errors.

- [ ] **Step 4: Commit changes**

```bash
git add i18n/it.yaml
git commit -m "feat: add 404 page i18n strings (Italian)"
```

---

### Task 4: Create 404 Error Page Layout

**Files:**
- Create: `themes/danix-xyz-hacker/layouts/404.html`

- [ ] **Step 1: Create 404.html file**

```bash
touch themes/danix-xyz-hacker/layouts/404.html
```

- [ ] **Step 2: Write 404 layout structure**

```html
{{ define "main" }}
<main class="min-h-screen flex items-center justify-center px-4">
  <div class="text-center max-w-2xl w-full">
    <!-- 404 Heading -->
    <h1 class="text-7xl md:text-8xl font-bold text-accent mb-4 animate-fade-in">
      {{ i18n "notFoundHeading" }}
    </h1>

    <!-- Error Message -->
    <h2 class="text-3xl md:text-4xl font-bold mb-6">
      {{ i18n "notFound" }}
    </h2>
    
    <p class="text-lg text-gray-600 dark:text-gray-400 mb-8 animate-fade-in-delay">
      {{ 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-gray-300 dark:border-gray-700 rounded focus:outline-none focus:ring-2 focus:ring-accent focus:border-transparent"
          x-data
          x-on:input="$dispatch('search', { query: $el.value })"
        />
      </form>
      <div id="search-results" class="mt-4 text-left"></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-gray-50 dark:bg-gray-900 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors">
          <a href="{{ .Permalink }}" class="block text-left">
            <h4 class="font-bold text-accent hover:underline">{{ .Title }}</h4>
            <p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
              {{ .Date.Format "Jan 02, 2006" }}
            </p>
          </a>
        </div>
        {{ end }}
      </div>
    </div>

    <!-- Navigation Links -->
    <div class="space-y-4 flex flex-col items-center mb-12">
      <a href="{{ .Site.BaseURL }}" class="btn btn-primary">
        {{ i18n "goHome" }}
      </a>
      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/articles/" class="btn btn-secondary">
        {{ i18n "browseArticles" }}
      </a>
      <a href="{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/contact/" class="btn btn-outline">
        {{ i18n "contactSupport" }}
      </a>
    </div>

    <!-- Easter Egg Trigger -->
    <div class="mt-12 pt-8 border-t border-gray-300 dark:border-gray-700">
      <button
        @click="$dispatch('toggle-easter-egg')"
        class="text-sm text-gray-500 dark:text-gray-400 hover:text-accent transition-colors underline"
      >
        {{ i18n "followWhiteRabbit" }}
      </button>
    </div>

    <!-- Easter Egg Modal (Hidden by default) -->
    <div
      x-data="{ showEasterEgg: false }"
      @toggle-easter-egg.window="showEasterEgg = !showEasterEgg"
      class="fixed inset-0 z-50 hidden"
      :class="{ 'flex items-center justify-center': 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-white dark:bg-gray-900 p-8 rounded-lg shadow-xl max-w-md mx-4 animate-scale-in">
        <h2 class="text-2xl font-bold mb-6">{{ i18n "easterEggTitle" }}</h2>
        
        <div class="space-y-4">
          <button
            @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}'"
            class="w-full btn btn-primary"
          >
            💊 {{ i18n "bluePill" }}
          </button>
          
          <button
            @click="showEasterEgg = false; window.location.href = '{{ .Site.BaseURL }}{{ .Site.Language.Lang }}/articles/' + Math.floor(Math.random() * 50)"
            class="w-full btn btn-secondary"
          >
            🐰 {{ i18n "redPill" }}
          </button>
        </div>

        <button
          @click="showEasterEgg = false"
          class="absolute top-4 right-4 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
          aria-label="Close modal"
        >
          ✕
        </button>
      </div>
    </div>
  </div>
</main>
{{ end }}
```

- [ ] **Step 3: Verify file created**

```bash
ls -la themes/danix-xyz-hacker/layouts/404.html
```

Expected: File exists with content.

- [ ] **Step 4: Test 404 page in Hugo**

```bash
hugo server
```

Navigate to: `http://localhost:1313/en/this-does-not-exist/`

Expected: 404 page displays with "404" heading, error message, search box, recent articles, navigation links.

- [ ] **Step 5: Test in Italian**

Navigate to: `http://localhost:1313/it/questa-pagina-non-esiste/`

Expected: 404 page displays in Italian.

- [ ] **Step 6: Commit changes**

```bash
git add themes/danix-xyz-hacker/layouts/404.html
git commit -m "feat: create 404 error page with search, recent articles, and easter egg"
```

---

### Task 5: Add i18n Strings for Repository Page (English)

**Files:**
- Modify: `i18n/en.yaml`

- [ ] **Step 1: Add Repository i18n strings to en.yaml**

At the end of `i18n/en.yaml`, add:

```yaml
repositoryTitle:
  other: "Slackware Repository"
repositorySubtitle:
  other: "Download and install my curated Slackware packages"
quickStartTitle:
  other: "Quick Start"
copyCommand:
  other: "Copy"
copiedMessage:
  other: "Copied to clipboard!"
installationTitle:
  other: "Installation"
usageTitle:
  other: "Usage"
availablePackagesTitle:
  other: "Available Packages"
githubReposTitle:
  other: "GitHub SlackBuild Repositories"
visitGithub:
  other: "Visit GitHub"
```

- [ ] **Step 2: Verify YAML syntax**

```bash
hugo config
```

Expected: No errors.

- [ ] **Step 3: Commit changes**

```bash
git add i18n/en.yaml
git commit -m "feat: add Repository page i18n strings (English)"
```

---

### Task 6: Add i18n Strings for Repository Page (Italian)

**Files:**
- Modify: `i18n/it.yaml`

- [ ] **Step 1: Add Repository i18n strings to it.yaml**

At the end of `i18n/it.yaml`, add:

```yaml
repositoryTitle:
  other: "Repository Slackware"
repositorySubtitle:
  other: "Scarica e installa i miei pacchetti Slackware curati"
quickStartTitle:
  other: "Inizio Rapido"
copyCommand:
  other: "Copia"
copiedMessage:
  other: "Copiato negli appunti!"
installationTitle:
  other: "Installazione"
usageTitle:
  other: "Utilizzo"
availablePackagesTitle:
  other: "Pacchetti Disponibili"
githubReposTitle:
  other: "Repository GitHub SlackBuild"
visitGithub:
  other: "Visita GitHub"
```

- [ ] **Step 2: Verify YAML syntax**

```bash
hugo config
```

Expected: No errors.

- [ ] **Step 3: Commit changes**

```bash
git add i18n/it.yaml
git commit -m "feat: add Repository page i18n strings (Italian)"
```

---

### Task 7: Create Repository Page Content (English)

**Files:**
- Create: `content/en/repository/_index.md`

- [ ] **Step 1: Create repository directory and file**

```bash
mkdir -p content/en/repository
touch content/en/repository/_index.md
```

- [ ] **Step 2: Write English repository page content**

```markdown
+++
title = "Slackware Repository"
date = 2026-04-17T00:00:00Z
draft = false
+++

## {{ i18n "quickStartTitle" }}

Add the repository to your Slackware system:

\`\`\`bash
# Add repository configuration (example command)
wget -O - https://danix.xyz/packages/slackware.asc | gpg --import
echo "deb https://danix.xyz/packages/slackware/ stable main" >> /etc/apt/sources.list.d/danix.list
apt-get update
\`\`\`

## {{ i18n "installationTitle" }}

### Prerequisites

- Slackware 15.0 or later
- Root or sudo access
- wget or curl

### Steps

1. Download and import the repository GPG key
2. Add the repository to your package manager configuration
3. Update your package lists
4. Install packages as needed

### Repository URL

```
https://danix.xyz/packages/slackware/
```

## {{ i18n "usageTitle" }}

### Installing a Package

\`\`\`bash
apt-get install package-name
\`\`\`

### Updating Packages

\`\`\`bash
apt-get update
apt-get upgrade
\`\`\`

### Searching for Packages

\`\`\`bash
apt-cache search keyword
\`\`\`

## {{ i18n "availablePackagesTitle" }}

Check the repository for the latest available packages. See the GitHub SlackBuild repositories below for build information and source files.
```

- [ ] **Step 3: Verify file created**

```bash
cat content/en/repository/_index.md
```

Expected: Content displays correctly.

- [ ] **Step 4: Test in Hugo**

```bash
hugo server
```

Navigate to: `http://localhost:1313/en/repository/`

Expected: Repository page displays with all sections (Quick Start, Installation, Usage, Available Packages).

- [ ] **Step 5: Commit changes**

```bash
git add content/en/repository/_index.md
git commit -m "feat: create English repository page content"
```

---

### Task 8: Create Repository Page Content (Italian)

**Files:**
- Create: `content/it/repository/_index.md`

- [ ] **Step 1: Create Italian repository file**

```bash
mkdir -p content/it/repository
touch content/it/repository/_index.md
```

- [ ] **Step 2: Write Italian repository page content**

```markdown
+++
title = "Repository Slackware"
date = 2026-04-17T00:00:00Z
draft = false
+++

## {{ i18n "quickStartTitle" }}

Aggiungi il repository al tuo sistema Slackware:

\`\`\`bash
# Aggiungi configurazione repository (comando di esempio)
wget -O - https://danix.xyz/packages/slackware.asc | gpg --import
echo "deb https://danix.xyz/packages/slackware/ stable main" >> /etc/apt/sources.list.d/danix.list
apt-get update
\`\`\`

## {{ i18n "installationTitle" }}

### Prerequisiti

- Slackware 15.0 o successivi
- Accesso root o sudo
- wget o curl

### Passaggi

1. Scarica e importa la chiave GPG del repository
2. Aggiungi il repository alla configurazione del gestore di pacchetti
3. Aggiorna gli elenchi dei pacchetti
4. Installa i pacchetti come necessario

### URL Repository

```
https://danix.xyz/packages/slackware/
```

## {{ i18n "usageTitle" }}

### Installazione di un Pacchetto

\`\`\`bash
apt-get install nome-pacchetto
\`\`\`

### Aggiornamento dei Pacchetti

\`\`\`bash
apt-get update
apt-get upgrade
\`\`\`

### Ricerca di Pacchetti

\`\`\`bash
apt-cache search parola-chiave
\`\`\`

## {{ i18n "availablePackagesTitle" }}

Controlla il repository per i pacchetti disponibili più recenti. Consulta i repository GitHub SlackBuild di seguito per informazioni sulla compilazione e file di origine.
```

- [ ] **Step 3: Verify file created**

```bash
cat content/it/repository/_index.md
```

Expected: Content displays correctly.

- [ ] **Step 4: Test in Hugo**

Navigate to: `http://localhost:1313/it/repository/`

Expected: Repository page displays in Italian.

- [ ] **Step 5: Commit changes**

```bash
git add content/it/repository/_index.md
git commit -m "feat: create Italian repository page content"
```

---

### Task 9: Create Repository Data File (GitHub Repos)

**Files:**
- Create: `data/repos.yaml`

- [ ] **Step 1: Create data directory and file**

```bash
mkdir -p data
touch data/repos.yaml
```

- [ ] **Step 2: Write repos data structure**

```yaml
repos:
  - name: "slackbuild-example-1"
    description_key: "repo_example_1_desc"
    github_url: "https://github.com/danix/slackbuild-example-1"
    image: "images/repo-icons/example-1.png"
    tags:
      - "Slackware"
      - "Build System"

  - name: "slackbuild-example-2"
    description_key: "repo_example_2_desc"
    github_url: "https://github.com/danix/slackbuild-example-2"
    image: "images/repo-icons/example-2.png"
    tags:
      - "Slackware"
      - "Package"

  - name: "slackbuild-example-3"
    description_key: "repo_example_3_desc"
    github_url: "https://github.com/danix/slackbuild-example-3"
    image: "images/repo-icons/example-3.png"
    tags:
      - "Slackware"
      - "Utilities"
```

- [ ] **Step 3: Verify YAML syntax**

```bash
hugo config
```

Expected: No errors.

- [ ] **Step 4: Commit changes**

```bash
git add data/repos.yaml
git commit -m "feat: add repository data file with GitHub repos list"
```

---

### Task 10: Add Repository Descriptions to i18n (English)

**Files:**
- Modify: `i18n/en.yaml`

- [ ] **Step 1: Add repo description i18n keys to en.yaml**

At the end of `i18n/en.yaml`, add:

```yaml
repo_example_1_desc:
  other: "SlackBuild scripts for Example Package 1. Build system and tools for Slackware package management."
repo_example_2_desc:
  other: "SlackBuild scripts for Example Package 2. A comprehensive package with full documentation and support."
repo_example_3_desc:
  other: "SlackBuild scripts for Example Package 3. Utility package for system administration and configuration."
```

- [ ] **Step 2: Verify YAML syntax**

```bash
hugo config
```

Expected: No errors.

- [ ] **Step 3: Commit changes**

```bash
git add i18n/en.yaml
git commit -m "feat: add repository descriptions to English i18n"
```

---

### Task 11: Add Repository Descriptions to i18n (Italian)

**Files:**
- Modify: `i18n/it.yaml`

- [ ] **Step 1: Add repo description i18n keys to it.yaml**

At the end of `i18n/it.yaml`, add:

```yaml
repo_example_1_desc:
  other: "Script SlackBuild per Pacchetto Esempio 1. Sistema di compilazione e strumenti per la gestione dei pacchetti Slackware."
repo_example_2_desc:
  other: "Script SlackBuild per Pacchetto Esempio 2. Un pacchetto completo con documentazione e supporto completi."
repo_example_3_desc:
  other: "Script SlackBuild per Pacchetto Esempio 3. Pacchetto di utilità per amministrazione di sistema e configurazione."
```

- [ ] **Step 2: Verify YAML syntax**

```bash
hugo config
```

Expected: No errors.

- [ ] **Step 3: Commit changes**

```bash
git add i18n/it.yaml
git commit -m "feat: add repository descriptions to Italian i18n"
```

---

### Task 12: Create Custom Repository Layout (if needed)

**Files:**
- Create: `themes/danix-xyz-hacker/layouts/repository/single.html` (optional)

- [ ] **Step 1: Check if custom layout is needed**

Test current rendering by navigating to repository page in Hugo server:

```bash
hugo server
```

Visit: `http://localhost:1313/en/repository/`

Check if page renders with correct structure and repo cards display properly.

- [ ] **Step 2: If default layout is insufficient, create custom layout**

```bash
mkdir -p themes/danix-xyz-hacker/layouts/repository
touch themes/danix-xyz-hacker/layouts/repository/single.html
```

- [ ] **Step 3: Write custom repository layout (if needed)**

```html
{{ 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 }}
```

- [ ] **Step 4: If created, verify file**

```bash
ls -la themes/danix-xyz-hacker/layouts/repository/single.html
```

Expected: File exists.

- [ ] **Step 5: Test repository page**

```bash
hugo server
```

Navigate to: `http://localhost:1313/en/repository/`

Expected: Page displays with hero section, markdown content, and repo cards in grid layout.

- [ ] **Step 6: If custom layout created, commit**

```bash
git add themes/danix-xyz-hacker/layouts/repository/single.html
git commit -m "feat: add custom repository page layout with repo cards grid"
```

---

### Task 13: Test 404 Page Functionality

**Files:**
- Reference: `layouts/404.html`

- [ ] **Step 1: Test 404 page keyboard navigation**

```bash
hugo server
```

Navigate to: `http://localhost:1313/en/this-does-not-exist/`

Press Tab repeatedly:
- Focus should move to search input
- Focus should move to recent articles
- Focus should move to navigation buttons
- Focus should move to "Follow the white rabbit" link

Expected: All elements keyboard-accessible, logical tab order.

- [ ] **Step 2: Test 404 easter egg trigger**

On 404 page, click "Follow the white rabbit" link.

Expected: Modal appears with "Choose Wisely" title, blue pill and red pill buttons, and close button (×).

- [ ] **Step 3: Test easter egg buttons**

- Click "Take the blue pill" → should navigate to home page
- Close modal (click ×) → modal should disappear
- Click "Follow the white rabbit" again → modal should reappear
- Click "Take the red pill" → should navigate to random article (or articles page)

Expected: All buttons work, modal focus trap works, Escape key closes modal (if implemented).

- [ ] **Step 4: Test 404 in Italian**

Navigate to: `http://localhost:1313/it/questa-pagina-non-esiste/`

Expected: 404 page displays in Italian with Italian text for all labels.

- [ ] **Step 5: Test 404 dark/light mode**

On 404 page, click theme toggle in header.

Expected: 404 page styling adapts to light and dark modes, focus rings visible in both.

- [ ] **Step 6: Test 404 responsive design**

Set browser viewport to:
- 320px (mobile): Page should be single column, buttons stack vertically
- 768px (tablet): Page should be single column, buttons side-by-side or stacked
- 1200px (desktop): Page should be centered with max-width

Expected: Page responsive at all breakpoints, no horizontal scroll.

- [ ] **Step 7: Commit test results (no code changes)**

If any issues found during testing, fix them inline in `layouts/404.html` and commit as bugfix. If all tests pass:

```bash
git add -u
git commit -m "test: verify 404 page functionality (keyboard navigation, easter egg, dark mode, responsive)" --allow-empty
```

---

### Task 14: Test Repository Page Functionality

**Files:**
- Reference: `content/en/repository/_index.md`, `content/it/repository/_index.md`, `data/repos.yaml`

- [ ] **Step 1: Test repository page renders content sections**

```bash
hugo server
```

Navigate to: `http://localhost:1313/en/repository/`

Verify page displays:
- Page title ("Slackware Repository")
- Quick Start section with code block
- Installation section with instructions
- Usage section with command examples
- Available Packages section

Expected: All markdown content renders correctly.

- [ ] **Step 2: Test repository cards display**

On repository page, scroll down to "GitHub SlackBuild Repositories" section.

Verify:
- Cards display in grid layout (1 column mobile, 2-3 columns tablet/desktop)
- Each card shows image, project name, description, tags, and GitHub link
- Images load correctly (or show placeholder if images not yet created)

Expected: All cards display with correct data from `data/repos.yaml`.

- [ ] **Step 3: Test repository page keyboard navigation**

Press Tab repeatedly:
- Focus should move through code blocks
- Focus should move through GitHub repo links
- All elements keyboard-accessible

Expected: Full keyboard navigation works.

- [ ] **Step 4: Test repository page in Italian**

Navigate to: `http://localhost:1313/it/repository/`

Expected: Page displays in Italian with Italian headings, descriptions, and link labels.

- [ ] **Step 5: Test repository page dark/light mode**

On repository page, click theme toggle in header.

Expected: Page styling adapts to both modes, cards have proper contrast, focus rings visible.

- [ ] **Step 6: Test repository page responsive design**

Set viewport to:
- 320px: Single column, cards stacked, code blocks scrollable
- 768px: Single column, cards 2 per row
- 1200px: Single column content, cards 2-3 per row

Expected: Page responsive at all breakpoints.

- [ ] **Step 7: Test copy-to-clipboard (optional, if implemented)**

If copy buttons are added to code blocks:
- Hover over code block, click copy button
- Verify code is copied to clipboard
- Verify toast notification shows "Copied!"

Expected: Copy functionality works with feedback.

- [ ] **Step 8: Commit test results**

```bash
git add -u
git commit -m "test: verify repository page content, cards, keyboard nav, dark mode, responsive" --allow-empty
```

---

### Task 15: Verify Accessibility Compliance (404 & Repository)

**Files:**
- Reference: `layouts/404.html`, `content/en/repository/_index.md`, `content/it/repository/_index.md`

- [ ] **Step 1: Test heading hierarchy**

Using browser DevTools, inspect both pages:

**404 page:**
- Should have one `<h1>` (404 heading or error title)
- Should have `<h2>` for "Recent Articles" section
- No heading skips (e.g., h1 → h3)

**Repository page:**
- Should have one `<h1>` (page title)
- Should have `<h2>` for Installation, Usage, Available Packages, GitHub Repos sections
- No heading skips

Expected: Proper heading hierarchy on both pages.

- [ ] **Step 2: Test color contrast**

Using WebAIM Contrast Checker or Chrome DevTools:

Check these elements on 404 page:
- "404" heading text vs background
- Error message text vs background
- Button text vs button background
- Link text vs background
- Focus ring vs background

Check on repository page:
- Section headings vs background
- Body text vs background
- Code block text vs code background
- Card titles vs card background
- Button text vs button background
- Focus ring vs background

Test in both light and dark modes.

Expected: All text meets WCAG AA minimum (4.5:1 contrast).

- [ ] **Step 3: Test focus indicators**

On both pages:
- Press Tab to move through all interactive elements
- Verify focus indicator (2px ring) is visible on each element
- Verify focus ring has sufficient contrast (≥3:1) with background

Expected: Focus indicators visible and contrasting on all focusable elements.

- [ ] **Step 4: Test screen reader (optional)**

If available, use VoiceOver (Mac) or NVDA (Windows):

**404 page:**
- Navigate to page, verify title announced ("404" or page name)
- Verify error message announced
- Verify search box label announced
- Verify article titles/links announced
- Verify buttons announced with labels

**Repository page:**
- Verify page title announced
- Verify section headings announced with level
- Verify code blocks announced (or at minimum, not blocking navigation)
- Verify card titles and links announced
- Verify all button labels announced

Expected: Screen reader users can navigate and understand page structure.

- [ ] **Step 5: Test prefers-reduced-motion**

If animations are used on 404/repository pages:

Set OS preference to reduce motion (System Preferences > Accessibility > Display > Reduce Motion).

Reload page and verify:
- Fade-in animation on 404 heading should be removed or instant
- Scale-in animation on easter egg modal should be removed or instant
- Card hover transitions should be removed or instant

Expected: Animations are disabled for users with motion preference.

- [ ] **Step 6: Commit accessibility verification**

```bash
git add -u
git commit -m "test: verify accessibility (WCAG AA) - heading hierarchy, contrast, focus, motion" --allow-empty
```

---

### Task 16: Final Build & Merge to Master

**Files:**
- Git branch: `week-6-pages` → `master`

- [ ] **Step 1: Run final CSS build**

```bash
npm run build
```

Expected: CSS compilation completes in ~200-250ms, no errors, `main.min.css` generated.

- [ ] **Step 2: Verify no uncommitted changes**

```bash
git status
```

Expected: "nothing to commit, working tree clean" or only intentional changes.

- [ ] **Step 3: View final commit log**

```bash
git log --oneline -10
```

Expected: Shows all commits from week-6-pages feature branch (Task 1 through Task 15).

- [ ] **Step 4: Switch to master and merge**

```bash
git checkout master
git pull
git merge week-6-pages -m "merge: Week 6 - 404 page and Repository page complete (all pages accessible, responsive, multilingual)"
```

Expected: Fast-forward or clean merge, no conflicts.

- [ ] **Step 5: Verify merge success**

```bash
git status
git log --oneline -1
```

Expected: On master, latest commit is merge commit, working tree clean.

- [ ] **Step 6: Verify all files present**

```bash
ls -la layouts/404.html
ls -la content/en/repository/_index.md
ls -la content/it/repository/_index.md
ls -la data/repos.yaml
```

Expected: All files present.

- [ ] **Step 7: Final Hugo build verification**

```bash
hugo server
```

Test all pages:
- Home page: loads correctly
- Articles page: displays article list
- About page: loads correctly
- Contact page: form displays
- Repository page (EN/IT): loads with content and cards
- 404 page (navigate to non-existent URL): displays correctly
- Language switcher: works on all pages
- Dark/light mode: works on all pages
- Keyboard navigation: works on all pages

Expected: All pages function correctly, no regressions.

- [ ] **Step 8: Commit final verification**

```bash
git log --oneline -1
git branch -a
```

Expected: Confirms merge to master and all commits integrated.

---

## Summary

**Week 6 deliverables:**
- ✅ 404 error page (Easter egg easter egg with blue/red pill modal, recent articles, search box)
- ✅ Repository page (Hero, Installation, Usage, Available Packages sections, GitHub repo cards)
- ✅ Multilingual support (EN/IT) for both pages
- ✅ Full keyboard accessibility, focus management, WCAG AA compliance
- ✅ Responsive design (320px, 768px, 1200px+)
- ✅ Dark/light mode compatibility
- ✅ All content editable via markdown and YAML (no hardcoded content in templates)
- ✅ All tests passing, all regressions verified as zero

**Files created:** 5 new files (404.html, 2 markdown content files, 1 data YAML file, optional custom layout)
**Files modified:** 4 files (2 i18n YAML files, potentially custom CSS if needed)
**Total commits:** ~16 commits across all tasks
**Testing:** 2 comprehensive test tasks covering functionality, accessibility, responsiveness

**Next:** Merge to master and update HANDOFF.md with Week 6 completion status.