Cinephage Documentation UX Overhaul 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: Complete UX overhaul of the Cinephage documentation website — sidebar restructuring, support section integration, homepage redesign, search, theming, and information architecture cleanup.

Architecture: Incremental improvements to existing Docusaurus v4 site. Keep autogenerated sidebars with _category_.json curation. Add @docusaurus/plugin-search-local. Enhance CSS for cards and visual hierarchy. Restructure support section with proper landing pages.

Tech Stack: Docusaurus v4, TypeScript, React, CSS, Node.js

File Structure

New Files

docs/getting-started/_category_.json — Category config for Getting Started
docs/guides/_category_.json — Category config for Guides
docs/reference/_category_.json — Category config for Reference
docs/explanation/_category_.json — Category config for Explanation
docs/support/_category_.json — Category config for Support
docs/support/index.md — Support landing page with card grid
docs/getting-started/index.md — Improved getting started landing
docs/guides/index.md — Improved guides landing
docs/reference/index.md — Improved reference landing
docs/explanation/index.md — Improved explanation landing

Modified Files

sidebars.ts — Add support category
docusaurus.config.ts — Search plugin, breadcrumbs, TOC, footer/navbar
src/pages/index.tsx — Homepage redesign
src/pages/index.module.css — Homepage styles
src/components/HomepageFeatures/index.tsx — Feature cards
src/components/HomepageFeatures/styles.module.css — Card styles
src/css/custom.css — Card, admonition, table, mobile styles
docs/index.md — Docs landing page rewrite
docs/support/releases.md — Release history rewrite

Deleted Files

docs/getting-started/installation.md — Duplicate
docs/support/faq.md — Duplicate

Files:

Modify: sidebars.ts
Delete: docs/getting-started/installation.md
Delete: docs/support/faq.md
Create: docs/getting-started/_category_.json
Create: docs/guides/_category_.json
Create: docs/reference/_category_.json
Create: docs/explanation/_category_.json
Create: docs/support/_category_.json
Step 1: Update sidebars.ts to add support category

Add support category to the sidebar config:

import type { SidebarsConfig } from '@docusaurus/plugin-content-docs';

const sidebars: SidebarsConfig = {
  docsSidebar: [
    'index',
    {
      type: 'category',
      label: 'Getting Started',
      items: [{ type: 'autogenerated', dirName: 'getting-started' }]
    },
    {
      type: 'category',
      label: 'Guides',
      items: [{ type: 'autogenerated', dirName: 'guides' }]
    },
    {
      type: 'category',
      label: 'Reference',
      items: [{ type: 'autogenerated', dirName: 'reference' }]
    },
    {
      type: 'category',
      label: 'Explanation',
      items: [{ type: 'autogenerated', dirName: 'explanation' }]
    },
    {
      type: 'category',
      label: 'Support',
      items: [{ type: 'autogenerated', dirName: 'support' }]
    }
  ]
};

export default sidebars;

Step 2: Remove duplicate files

rm docs/getting-started/installation.md
rm docs/support/faq.md

Step 3: Create category.json files

Create docs/getting-started/_category_.json:

{
  "label": "Getting Started",
  "position": 1,
  "link": {
    "type": "generated-index",
    "title": "Getting Started with Cinephage",
    "description": "Installation, initial setup, and your first steps with Cinephage."
  }
}

Create docs/guides/_category_.json:

{
  "label": "Guides",
  "position": 2,
  "link": {
    "type": "generated-index",
    "title": "How-To Guides",
    "description": "Task-oriented guides for configuring and using Cinephage."
  }
}

Create docs/reference/_category_.json:

{
  "label": "Reference",
  "position": 3,
  "link": {
    "type": "generated-index",
    "title": "Technical Reference",
    "description": "API documentation, configuration options, database schema, and YAML formats."
  }
}

Create docs/explanation/_category_.json:

{
  "label": "Explanation",
  "position": 4,
  "link": {
    "type": "generated-index",
    "title": "Explanation",
    "description": "Architecture decisions, concepts, and how Cinephage works under the hood."
  }
}

Create docs/support/_category_.json:

{
  "label": "Support",
  "position": 5,
  "link": {
    "type": "generated-index",
    "title": "Support & Help",
    "description": "FAQ, release notes, roadmap, and troubleshooting resources."
  }
}

Step 4: Verify build passes

Run: npm run build Expected: Build succeeds with no broken link errors

Step 5: Commit

git add sidebars.ts docs/getting-started/_category_.json docs/guides/_category_.json docs/reference/_category_.json docs/explanation/_category_.json docs/support/_category_.json
git rm docs/getting-started/installation.md docs/support/faq.md
git commit -m "docs: add support section to sidebar, remove duplicates, add category configs"

Task 2: Create Support Landing Page and Fix Releases

Files:

Create: docs/support/index.md
Modify: docs/support/releases.md
Step 1: Create docs/support/index.md

Write a support landing page with card grid:

---
title: Support & Help
description: FAQ, release notes, roadmap, and troubleshooting resources for Cinephage
sidebar_position: 0
---

# Support & Help

Find answers, track releases, and get help with Cinephage.

## Quick Links

<div className="card-grid">

<div className="card">

### 📋 Frequently Asked Questions

Common questions about installing, configuring, and using Cinephage.

[Browse FAQ →](/docs/support/faq)

</div>

<div className="card">

### 🚀 Release History

Version history, release notes, and Docker tag reference.

[View Releases →](/docs/support/releases)

</div>

<div className="card">

### 🗺️ Roadmap

Planned features, work in progress, and known limitations.

[View Roadmap →](/docs/support/roadmap)

</div>

<div className="card">

### 🔧 Troubleshooting

Common issues, logs, and debugging steps.

[Troubleshooting Guide →](/docs/guides/deploy/troubleshooting)

</div>

</div>

## Can't Find What You Need?

- 💬 **[Discord Community](https://discord.gg/scGCBTSWEt)** - Real-time help
- 🐛 **[GitHub Issues](https://github.com/MoldyTaint/Cinephage/issues)** - Bug reports
- 📖 **[Getting Help](/docs/getting-started/getting-help)** - All support resources

Step 2: Rewrite docs/support/releases.md

---
title: Release History
description: Cinephage version history, release notes, and Docker tags
sidebar_position: 2
tags: [releases, versions, changelog]
keywords: [releases, versions, stable, dev]
---

# Release History

Cinephage follows semantic versioning and maintains two release channels.

## Release Channels

| Channel | Tag | Description |
|---------|-----|-------------|
| **Stable** | `latest` or `vX.Y.Z` | Production-ready releases |
| **Preview** | `dev` | Latest development builds |

## Version History

### v0.5.0 (Latest Stable)

**Release Date:** 2025-04-XX

**Major Features:**
- Activity Management with enhanced history and bulk actions
- Backup & Restore with encrypted configuration
- Native subtitle sync with alass algorithm
- Media Move between root folders
- Smart Lists with TMDB Discover integration
- i18n support with Spanish localization
- rTorrent download client support

**Breaking Changes:**
- `BETTER_AUTH_SECRET` now required (auto-generated fallback removed)
- Subtitles API response shape changed
- Docker volume mounts consolidated to `/config`

**Infrastructure:**
- Docker base image changed to `node:24-trixie-slim`
- Automated release pipeline with release-please

[View full release notes on GitHub →](https://github.com/MoldyTaint/Cinephage/releases/tag/v0.5.0)

### v0.6.0 (In Development)

**Status:** Preview builds available

**Preview Tags:**
- `ghcr.io/moldytaint/cinephage:dev`
- `ghcr.io/moldytaint/cinephage:dev-YYYYMMDD-RUN`

[View dev branch →](https://github.com/MoldyTaint/Cinephage/tree/dev)

## Docker Tags Reference

### Stable Releases

```bash
# Latest stable
docker pull ghcr.io/moldytaint/cinephage:latest

# Pinned version (recommended for production)
docker pull ghcr.io/moldytaint/cinephage:v0.5.0

Preview Builds

# Latest development build
docker pull ghcr.io/moldytaint/cinephage:dev

Which Tag Should I Use?

Use Case	Recommended Tag
Production deployment	`latest` or `vX.Y.Z`
Testing new features	`dev`
Deterministic deploys	`vX.Y.Z` (pinned)
CI/CD pipelines	`vX.Y.Z` (pinned)

Task 3: Create Category Landing Pages

Files:

Create: docs/getting-started/index.md
Create: docs/guides/index.md
Create: docs/reference/index.md
Create: docs/explanation/index.md
Step 1: Create docs/getting-started/index.md

---
title: Getting Started
description: Install Cinephage, configure it, and add your first media
sidebar_position: 0
---

# Getting Started

New to Cinephage? Follow these steps to get up and running.

## Quick Start

1. **[Installation](/docs/getting-started/installation)** — Get Cinephage running with Docker
2. **[Initial Setup](/docs/getting-started/initial-setup)** — Configure TMDB API, download clients, and root folders
3. **[Adding Media](/docs/getting-started/adding-media)** — Add your first movie or TV show

## What's Next?

- [Understanding the Interface](/docs/getting-started/understanding-interface) — Learn the Cinephage UI
- [Getting Help](/docs/getting-started/getting-help) — Where to find support

## New to Self-Hosting?

Cinephage is a self-hosted application that runs in Docker. You'll need:
- A machine to run it on (NAS, server, or computer)
- Docker installed
- A TMDB API key (free)

Don't worry — the installation guide walks you through everything.

Step 2: Create docs/guides/index.md

---
title: Guides
description: Task-oriented guides for configuring and using Cinephage
sidebar_position: 0
---

# Guides

Practical, task-oriented guides for getting things done with Cinephage.

## Configure

Set up and customize your Cinephage instance:

- [Download Clients](/docs/guides/configure/download-clients) — qBittorrent, SABnzbd, Deluge, and more
- [Quality Profiles](/docs/guides/configure/quality-profiles) — Define quality preferences and cutoffs
- [Indexers](/docs/guides/configure/indexers) — Add search sources
- [Subtitles](/docs/guides/configure/subtitles) — Language preferences and providers
- [Live TV](/docs/guides/configure/live-tv) — IPTV and EPG setup

## Deploy

Server management and operations:

- [Troubleshooting](/docs/guides/deploy/troubleshooting) — Common issues and fixes
- [Backup & Restore](/docs/guides/deploy/backup-restore) — Protect your configuration
- [Performance Tuning](/docs/guides/deploy/performance-tuning) — Optimize resource usage
- [Migration](/docs/guides/deploy/migration) — Upgrade between versions

## Use

Day-to-day workflows:

- [Search & Download](/docs/guides/use/search-and-download) — Find and grab content
- [Import Existing Files](/docs/guides/use/import-existing-files) — Add your existing library
- [Monitor & Upgrade](/docs/guides/use/monitor-and-upgrade) — Keep content up to date
- [Organize Files](/docs/guides/use/organize-files) — Rename and move media

Step 3: Create docs/reference/index.md

---
title: Reference
description: Technical documentation for Cinephage APIs, configuration, and formats
sidebar_position: 0
---

# Reference

Comprehensive technical documentation for Cinephage.

## API Documentation

- [Authentication](/docs/reference/api/authentication) — API key and session management
- [Endpoints Overview](/docs/reference/api/endpoints-overview) — API structure and conventions
- [Rate Limiting](/docs/reference/api/rate-limiting) — API usage limits

## Configuration

- [Environment Variables](/docs/reference/configuration/environment-variables) — All available env vars
- [Settings Explained](/docs/reference/configuration/settings-explained) — Configuration options
- [Supported Languages](/docs/reference/configuration/supported-languages) — Language codes and formats

## Database

- [Schema Overview](/docs/reference/database/schema-overview) — Database structure
- [Table Reference](/docs/reference/database/table-reference) — Complete table documentation

## YAML Formats

- [Indexer Definitions](/docs/reference/yaml/indexer-definitions) — Custom indexer format
- [Naming Tokens](/docs/reference/yaml/naming-tokens) — Available naming variables

Step 4: Create docs/explanation/index.md

---
title: Explanation
description: How Cinephage works — architecture, concepts, and design decisions
sidebar_position: 0
---

# Explanation

Understand how Cinephage works and why it works that way.

## Architecture

- [Architecture Overview](/docs/explanation/architecture) — High-level system design
- [Workers and Tasks](/docs/explanation/workers-and-tasks) — Background processing
- [Search System](/docs/explanation/search-system) — How content discovery works

## Concepts

- [Core Concepts](/docs/explanation/concepts) — Key ideas and terminology
- [Quality Scoring](/docs/explanation/quality-scoring) — How release quality is evaluated
- [Design Decisions](/docs/explanation/design-decisions) — Why we built it this way

Step 5: Verify build passes

Run: npm run build Expected: Build succeeds

Step 6: Commit

git add docs/getting-started/index.md docs/guides/index.md docs/reference/index.md docs/explanation/index.md
git commit -m "docs: add category landing pages for all sections"

Task 4: Rewrite Docs Landing Page

Files:

Modify: docs/index.md
Step 1: Rewrite docs/index.md

---
title: Cinephage Documentation
description: Complete documentation for Cinephage, the unified self-hosted media management platform
slug: /
tags: [overview, getting-started]
keywords: [cinephage, documentation, media management, self-hosted]
---

# Cinephage Documentation

Welcome to the Cinephage documentation. Cinephage is a self-hosted media management platform that unifies movies, TV shows, live TV, and streaming into a single modern application.

## What Cinephage Does

Instead of running multiple separate services, Cinephage provides one cohesive platform:

- **One database** — All your media and configurations together
- **One interface** — Browse, search, and manage everything
- **One configuration** — Set up indexers and clients once
- **One container** — Deploy with Docker and go

## Documentation Sections

<div className="card-grid">

<div className="card">

### 📚 Getting Started

Installation, setup, and your first steps.

[Get Started →](/docs/getting-started)

</div>

<div className="card">

### ⚙️ Guides

Task-oriented guides for configuration and use.

[Browse Guides →](/docs/guides)

</div>

<div className="card">

### 📖 Reference

API docs, configuration, database schema.

[View Reference →](/docs/reference)

</div>

<div className="card">

### 💡 Explanation

Architecture, concepts, and design decisions.

[Learn More →](/docs/explanation)

</div>

<div className="card">

### 🆘 Support

FAQ, releases, roadmap, and troubleshooting.

[Get Help →](/docs/support)

</div>

</div>

## Quick Start

1. **Install** — [Docker installation guide](/docs/getting-started/installation)
2. **Configure** — [Set up TMDB API and download clients](/docs/getting-started/initial-setup)
3. **Add Media** — [Add your first movie or show](/docs/getting-started/adding-media)

## New in v0.5.0

:::info[Latest Release]
- **Activity Management** — Enhanced history with stats and bulk actions
- **Backup & Restore** — Encrypted configuration backups
- **Native Subtitle Sync** — Built-in sync engine
- **Smart Lists** — Dynamic TMDB Discover integration
- **i18n Support** — Spanish localization

[View full release notes →](/docs/support/releases)
:::

## Getting Help

- 💬 **[Discord](https://discord.gg/scGCBTSWEt)** — Community chat
- 🐛 **[GitHub Issues](https://github.com/MoldyTaint/Cinephage/issues)** — Bug reports
- 🔧 **[Troubleshooting](/docs/guides/deploy/troubleshooting)** — Common issues

---

Ready to dive in? Start with the [Installation guide](/docs/getting-started/installation).

Step 2: Verify build passes

Run: npm run build Expected: Build succeeds

Step 3: Commit

git add docs/index.md
git commit -m "docs: rewrite landing page with cards and quick start"

Task 5: Redesign Homepage

Files:

Modify: src/pages/index.tsx
Modify: src/pages/index.module.css
Modify: src/components/HomepageFeatures/index.tsx
Modify: src/components/HomepageFeatures/styles.module.css
Step 1: Update src/pages/index.tsx

import type { ReactNode } from 'react';
import clsx from 'clsx';
import Link from '@docusaurus/Link';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
import Layout from '@theme/Layout';
import HomepageFeatures from '@site/src/components/HomepageFeatures';
import Heading from '@theme/Heading';

import styles from './index.module.css';

function HomepageHeader() {
  const { siteConfig } = useDocusaurusContext();
  return (
    <header className={clsx('hero--primary hero', styles.heroBanner)}>
      <div className="container">
        <Heading as="h1" className="hero__title">
          {siteConfig.title}
        </Heading>
        <p className="hero__subtitle">{siteConfig.tagline}</p>
        <div className={styles.buttons}>
          <Link
            className="button button--secondary button--lg"
            to="/docs/getting-started"
          >
            Get Started
          </Link>
          <Link
            className="button button--outline button--secondary button--lg"
            to="https://github.com/MoldyTaint/Cinephage"
          >
            View on GitHub
          </Link>
        </div>
      </div>
    </header>
  );
}

export default function Home(): ReactNode {
  const { siteConfig } = useDocusaurusContext();
  return (
    <Layout
      title="Documentation"
      description="Cinephage documentation — self-hosted media management that replaces Radarr, Sonarr, Prowlarr, Bazarr, Overseerr, and FlareSolverr in a single app."
    >
      <HomepageHeader />
      <main>
        <HomepageFeatures />
      </main>
    </Layout>
  );
}

Step 2: Update src/pages/index.module.css

.heroBanner {
  padding: 4rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

@media screen and (max-width: 996px) {
  .heroBanner {
    padding: 2rem;
  }
}

Step 3: Update src/components/HomepageFeatures/index.tsx

import type { ReactNode } from 'react';
import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';

interface FeatureItem {
  title: string;
  description: string;
  icon: string;
}

const FeatureList: FeatureItem[] = [
  {
    title: 'Movies',
    description: 'Built-in library with TMDB integration and automatic metadata matching.',
    icon: '🎬',
  },
  {
    title: 'TV Shows',
    description: 'Episode tracking, season monitoring, and automated downloads.',
    icon: '📺',
  },
  {
    title: 'Indexers',
    description: 'YAML-based definitions with 15+ sources — torrent, usenet, and streaming.',
    icon: '🔍',
  },
  {
    title: 'Subtitles',
    description: '11 providers with native sync engine and multi-language support.',
    icon: '📝',
  },
  {
    title: 'Streaming',
    description: 'Direct streaming and NZB playback without downloading.',
    icon: '▶️',
  },
  {
    title: 'Live TV',
    description: 'IPTV management with EPG and channel lineups.',
    icon: '📡',
  },
];

function Feature({ title, description, icon }: FeatureItem): ReactNode {
  return (
    <div className={clsx('col col--4', styles.feature)}>
      <div className={styles.featureCard}>
        <div className={styles.featureIcon}>{icon}</div>
        <Heading as="h3">{title}</Heading>
        <p>{description}</p>
      </div>
    </div>
  );
}

export default function HomepageFeatures(): ReactNode {
  return (
    <section className={styles.features}>
      <div className="container">
        <div className="row">
          {FeatureList.map((props, idx) => (
            <Feature key={idx} {...props} />
          ))}
        </div>
      </div>
    </section>
  );
}

Step 4: Update src/components/HomepageFeatures/styles.module.css

.features {
  display: flex;
  align-items: center;
  padding: 4rem 0;
  width: 100%;
}

.feature {
  margin-bottom: 2rem;
}

.featureCard {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 8px;
  padding: 2rem;
  height: 100%;
  transition: all 0.2s ease;
}

.featureCard:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.featureIcon {
  font-size: 2rem;
  margin-bottom: 1rem;
}

@media screen and (max-width: 996px) {
  .features {
    padding: 2rem 0;
  }
}

Step 5: Verify build passes

Run: npm run build Expected: Build succeeds

Step 6: Commit

git add src/pages/index.tsx src/pages/index.module.css src/components/HomepageFeatures/index.tsx src/components/HomepageFeatures/styles.module.css
git commit -m "feat: redesign homepage with feature cards and dual CTAs"

Task 6: Add Search Plugin

Files:

Modify: package.json
Modify: docusaurus.config.ts
Step 1: Install search plugin

npm install @docusaurus/plugin-search-local

Step 2: Update docusaurus.config.ts

Add the search plugin to the config:

import { themes as prismThemes } from 'prism-react-renderer';
import type { Config } from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';

const config: Config = {
  // ... existing config ...

  plugins: [
    [
      '@docusaurus/plugin-search-local',
      {
        indexDocs: true,
        indexBlog: false,
        indexPages: false,
        docsRouteBasePath: '/docs',
        hashed: true,
        language: ['en'],
      }
    ]
  ],

  // ... rest of config ...
};

export default config;

Step 3: Verify build passes

Run: npm run build Expected: Build succeeds, search index generated

Step 4: Commit

git add package.json package-lock.json docusaurus.config.ts
git commit -m "feat: add local search plugin"

Files:

Modify: docusaurus.config.ts
Step 1: Update footer links

Add Support section to footer:

footer: {
  style: 'dark',
  links: [
    {
      title: 'Documentation',
      items: [
        { label: 'Getting Started', to: '/docs/getting-started' },
        { label: 'Guides', to: '/docs/guides' },
        { label: 'Reference', to: '/docs/reference' },
      ]
    },
    {
      title: 'Support',
      items: [
        { label: 'FAQ', to: '/docs/support/faq' },
        { label: 'Troubleshooting', to: '/docs/guides/deploy/troubleshooting' },
        { label: 'Roadmap', to: '/docs/support/roadmap' },
        { label: 'Releases', to: '/docs/support/releases' },
      ]
    },
    {
      title: 'Community',
      items: [
        { label: 'Discord', href: 'https://discord.gg/scGCBTSWEt' },
        { label: 'GitHub Discussions', href: 'https://github.com/MoldyTaint/Cinephage/discussions' },
        { label: 'Issues', href: 'https://github.com/MoldyTaint/Cinephage/issues' },
      ]
    },
    {
      title: 'More',
      items: [
        { label: 'GitHub', href: 'https://github.com/MoldyTaint/Cinephage' },
        { label: 'Changelog', href: 'https://github.com/MoldyTaint/Cinephage/blob/main/CHANGELOG.md' },
      ]
    }
  ],
  copyright: `Copyright © ${new Date().getFullYear()} Cinephage. Licensed under GPL-3.0. Built with Docusaurus.`
}

Step 2: Update navbar items

Add Discord link to navbar:

navbar: {
  title: 'Cinephage',
  logo: {
    alt: 'Cinephage Logo',
    src: 'img/logo.png'
  },
  items: [
    {
      type: 'docSidebar',
      sidebarId: 'docsSidebar',
      position: 'left',
      label: 'Documentation'
    },
    {
      type: 'html',
      position: 'left',
      value: '<a href="/deploy" class="navbar__link">Deploy <span class="badge badge--secondary">Beta</span></a>'
    },
    {
      href: 'https://discord.gg/scGCBTSWEt',
      position: 'left',
      label: 'Discord',
    },
    {
      type: 'dropdown',
      label: 'Source Code',
      position: 'right',
      items: [
        { href: 'https://github.com/MoldyTaint/Cinephage', label: 'Cinephage (main)' },
        { href: 'https://github.com/MoldyTaint/Cinephage/tree/dev', label: 'Cinephage (dev)' },
        { href: 'https://github.com/MoldyTaint/Cinephage-Docs', label: 'Documentation Repo' }
      ]
    }
  ]
}

Step 3: Add breadcrumbs and TOC config

Add to themeConfig:

docs: {
  breadcrumbs: true,
},
tableOfContents: {
  minHeadingLevel: 2,
  maxHeadingLevel: 3,
},

Step 4: Verify build passes

Run: npm run build Expected: Build succeeds

Step 5: Commit

git add docusaurus.config.ts
git commit -m "feat: update footer, navbar, breadcrumbs, and TOC config"

Task 8: Add CSS for Cards and Visual Polish

Files:

Modify: src/css/custom.css
Step 1: Add card grid styles

Append to src/css/custom.css:

/* Card Grid */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.card {
  border: 1px solid var(--ifm-color-emphasis-300);
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

[data-theme='dark'] .card {
  border-color: var(--ifm-color-emphasis-600);
}

[data-theme='dark'] .card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

Step 2: Add admonition styling

/* Admonition variants */
.alert--info {
  --ifm-alert-background-color: rgba(99, 102, 241, 0.1);
  --ifm-alert-border-color: #6366f1;
}

.alert--success {
  --ifm-alert-background-color: rgba(34, 197, 94, 0.1);
  --ifm-alert-border-color: #22c55e;
}

.alert--warning {
  --ifm-alert-background-color: rgba(245, 158, 11, 0.1);
  --ifm-alert-border-color: #f59e0b;
}

.alert--danger {
  --ifm-alert-background-color: rgba(239, 68, 68, 0.1);
  --ifm-alert-border-color: #ef4444;
}

Step 3: Add table improvements

/* Table styling */
table {
  width: 100%;
  display: table;
}

table thead tr {
  border-bottom: 2px solid var(--ifm-color-emphasis-300);
}

table tbody tr:nth-child(2n) {
  background-color: var(--ifm-color-emphasis-100);
}

table tbody tr:hover {
  background-color: var(--ifm-color-emphasis-200);
}

Step 4: Add mobile improvements

/* Mobile sidebar padding */
@media screen and (max-width: 996px) {
  .navbar-sidebar__items {
    padding: 1rem;
  }
  
  .card-grid {
    grid-template-columns: 1fr;
  }
}

Step 5: Verify build passes

Run: npm run build Expected: Build succeeds

Step 6: Commit

git add src/css/custom.css
git commit -m "feat: add card, admonition, table, and mobile styles"

Task 9: Final Verification

Files:

All files
Step 1: Full build verification

Run: npm run build Expected: Build succeeds with no errors or broken links

Step 2: Check for broken links

If build fails with link errors, fix them:

git add -A
git commit -m "docs: complete UX overhaul - sidebar, support section, homepage, search, theming"

Spec Coverage Check

Spec Section	Task(s) Implementing
4.1 Sidebar & Navigation	Task 1
4.2 Support Section Overhaul	Task 2
4.3 Homepage Redesign	Task 5
4.4 Docs Landing Page	Task 4
4.5 Category Landing Pages	Task 3
4.6 Theming & CSS	Task 8
4.7 Footer & Navbar	Task 7
4.8 Search	Task 6
4.9 Breadcrumbs & TOC	Task 7
4.10 Information Architecture	Task 1, 2, 9

No placeholders found. All tasks have complete code and verification steps.

Cinephage Documentation UX Overhaul Implementation Plan

File Structure

New Files

Modified Files

Deleted Files

Task 1: Fix Sidebar and Remove Duplicates

Task 2: Create Support Landing Page and Fix Releases

Preview Builds

Which Tag Should I Use?

See Also

Task 3: Create Category Landing Pages

Task 4: Rewrite Docs Landing Page

Task 5: Redesign Homepage

Task 6: Add Search Plugin

Task 7: Update Footer and Navbar

Task 8: Add CSS for Cards and Visual Polish

Task 9: Final Verification

Spec Coverage Check

File Structure​

New Files​

Modified Files​

Deleted Files​

Task 1: Fix Sidebar and Remove Duplicates​

Task 2: Create Support Landing Page and Fix Releases​

Preview Builds​

Which Tag Should I Use?​

See Also​

Task 3: Create Category Landing Pages​

Task 4: Rewrite Docs Landing Page​

Task 5: Redesign Homepage​

Task 6: Add Search Plugin​

Task 7: Update Footer and Navbar​

Task 8: Add CSS for Cards and Visual Polish​

Task 9: Final Verification​

Spec Coverage Check​

File Structure

New Files

Modified Files

Deleted Files

Task 1: Fix Sidebar and Remove Duplicates

Task 2: Create Support Landing Page and Fix Releases

Preview Builds

Which Tag Should I Use?

See Also

Task 3: Create Category Landing Pages

Task 4: Rewrite Docs Landing Page

Task 5: Redesign Homepage

Task 6: Add Search Plugin

Task 7: Update Footer and Navbar

Task 8: Add CSS for Cards and Visual Polish

Task 9: Final Verification

Spec Coverage Check