Antora Themes Gallery

A beautiful gallery and registry for Antora documentation themes built with Astro and SolidJS.

Contents

• Features
• Getting Started
  • Prerequisites
  • Installation
  • Building for Production
• Submitting a Theme
  • Automated Screenshots
• Architecture
  • App Structure
• Tech Stack
• License

Features

• Theme Gallery — Browse and search Antora UI themes

• Live Previews — See themes in action via GitHub Pages demos

• Theme Validation — Submit themes with automated validation

• Decentralized Architecture — Themes are hosted on developers' own repositories

Getting Started

Prerequisites

• Node.js 18+

• pnpm

Installation

# Clone the repository
git clone https://github.com/the-dev-center/antora-themes-site.git
cd antora-themes-site

# Install dependencies
pnpm install

# Start development server
pnpm dev

Building for Production

pnpm build
pnpm preview

Submitting a Theme

To submit your Antora UI theme to the gallery:

1. Create a public GitHub repository with your Antora UI theme

2. Add a preview.png screenshot (1280x720 recommended) to your repository root

3. Enable GitHub Pages for your repository

4. Visit the gallery and submit your repository URL

Automated Screenshots

Add this GitHub Action to your theme repository for automatic screenshot generation:

- name: Generate Preview Screenshot
  uses: simonw/shot-scraper-action@v1
  with:
    url: https://${{ github.repository_owner }}.github.io/${{ github.event.repository.name }}/
    output: preview.png
    width: 1280
    height: 720

- name: Commit Screenshot
  run: |
    git config user.name "Preview Bot"
    git config user.email "actions@github.com"
    git add preview.png
    git commit -m "Update preview screenshot" || exit 0
    git push

Architecture

This site uses a decentralized approach:

• No Build Pipeline — Themes are built and hosted by developers

• Metadata Registry — The gallery stores only theme metadata and links

• GitHub API Integration — Validates themes and fetches repository info

App Structure

src/
├── components/              # SolidJS interactive components
│   ├── SubmitThemeForm.tsx     # Theme submission with validation
│   ├── ThemeCard.tsx           # Individual theme card with preview
│   └── ThemeGallery.tsx        # Filterable/searchable gallery grid
├── data/
│   └── themes.ts            # Sample themes and localStorage helpers
├── layouts/
│   └── Layout.astro         # Main layout with nav and footer
├── lib/
│   └── github.ts            # GitHub API integration for validation
├── pages/
│   ├── index.astro          # Homepage with hero + gallery
│   └── submit.astro         # Theme submission page
├── styles/
│   └── global.css           # Tailwind CSS configuration
└── types/
    └── theme.ts             # TypeScript interfaces

Component Details

ThemeCard.tsx

Displays a single theme with preview image, metadata, star count, and action buttons for viewing the demo or repository.

ThemeGallery.tsx

Renders a grid of ThemeCards with search, tag filtering, and sorting (by stars, update date, or name).

SubmitThemeForm.tsx

Handles theme submission with real-time validation via the GitHub API. Checks that the repository exists and contains a preview.png.

github.ts

Utility functions for parsing GitHub URLs, fetching repository info, validating preview images, and building theme objects from API responses.

Tech Stack

• Astro — Static site framework

• SolidJS — Reactive UI components

• Tailwind CSS — Utility-first styling

• TypeScript — Type safety

License

MIT