Aurora Theme

Aurora ships with GenGen as a first-class example theme. It delivers a modern editorial layout featuring a hero spotlight, responsive article grid, and curated media embeds styled with bold aurora gradients.

ℹ️ Quick start — Switch an existing site to Aurora by setting theme: aurora in config.yaml and running gengen build.

Theme Structure

Aurora lives under _themes/aurora/ and follows the standard GenGen theme layout:

_themes/aurora/
├── content/
│   └── index.html      # Theme homepage (front matter page)
├── _layouts/
│   ├── default.html     # Shell with header / footer
│   ├── page.html        # Static page layout
│   └── post.html        # Article layout with metadata + tag footer
├── _includes/
│   ├── head.html        # Metadata + stylesheet link
│   ├── nav.html         # Sticky navigation with JS toggle
│   ├── foot.html        # Footer + interactive script bundle
│   └── partials/
│       ├── post_header.html
│       ├── post_meta.html
│       ├── post_card.html
│       └── media/ (YouTube, Twitter, Social Graph)
├── _sass/               # Variables, mixins, components, media partials
└── assets/css/aurora.scss

The Sass partials compile into /assets/css/aurora.css through the built-in Sass plugin, so no additional tooling is required.

Aurora ships a theme homepage under content/index.html with YAML front matter. If your site adds its own index.md or index.html, the site version takes priority.

Home Hero Spotlight

The home layout highlights the most recent non-draft post. Optional front matter fields unlock richer presentation:

---
layout: post
title: fresh linux content everyday
date: 2024-04-16
description: Quick notes on keeping your Linux setup fresh and joyful every single day.
hero_image: https://images.unsplash.com/photo-1580894896995-6c1868efaf73?auto=format&fit=crop&w=1200&q=80
---

• description renders as the hero teaser (falls back to the autogenerated excerpt).
• hero_image displays inside the aurora frame. Without it the hero renders a gradient placeholder.

Navigation links include data-nav-url attributes and a small script (bundled in foot.html) that applies the is-active class based on window.location.pathname.

Article Grid & Post Layout

Posts after the hero appear inside a responsive card grid:

• title + metadata via partials/post_meta.html
• excerpt derived from post content (no raw Liquid tags)
• gradient hover lift defined in _sass/_components.scss

Pagination Navigation

With pagination.enabled: true the hero/grid pulls from page.paginate.items. Aurora's partials/pagination_nav.html include consumes the plugin-provided fields (current_page_path, page_paths, previous_page_path, etc.) to render a responsive pager with ellipsis for large archives. Reuse it anywhere:

{% if page.paginate %}
  {% render 'partials/pagination_nav', paginate: page.paginate %}
{% endif %}

The example site ships with items_per_page: 9, so additional pages (e.g. /page/2/) are generated automatically.

The individual post layout adds:

• metadata ribbon (date + tags)
• styled blockquote, code, and image treatments
• footer section with tag list and sharing placeholder

Media Shortcodes

Aurora ships dedicated partials under _includes/partials/media/:

Shortcode	Usage	Notes
partials/media/youtube	{% render 'partials/media/youtube', id: 'VIDEO_ID', caption: 'Optional caption' %}	Responsive 16:9 frame with aurora glow on hover
partials/media/twitter	{% render 'partials/media/twitter', url: 'https://twitter.com/...' %}	Uses Twitter oEmbed; typography reset to match theme
partials/media/social_graph	{% render 'partials/media/social_graph', url: 'https://example.com/article' %}	Displays Open Graph cards with thumbnail and gradients

All media components share the .aurora-media class and inherit card styling from _sass/_media.scss.

Sass & Customisation

Aurora exposes design tokens in _sass/_variables.scss:

• aurora-font-heading, aurora-font-body
• color palette (aurora-color-surface, aurora-gradient-accent)
• radii + shadows (aurora-radius-lg, aurora-shadow-soft)
• breakpoints (aurora-breakpoint-md, aurora-breakpoint-lg)

Override these variables from your site by importing the theme partials and redefining the tokens before @use.

// assets/css/site.scss
@use '../../_themes/aurora/_sass/variables' with (
  $aurora-gradient-accent: linear-gradient(135deg, #ff7a18, #af002d 85%)
);
@use '../../_themes/aurora/_sass/aurora-theme';

Liquid Helpers & Data Access

Document drops now expose front matter directly, so page.description, page.hero_image, and other custom fields work inside templates. Excerpts are computed from Markdown using the core extractExcerpt helper to avoid leaking layout markup into cards or hero blocks.

Putting It All Together

1. Switch your site to Aurora with theme: aurora.
2. Add optional description, hero_image, and tags front matter to posts for richer cards.
3. Use the bundled media partials when embedding YouTube, tweets, or Open Graph previews.
4. Adjust Sass tokens or extend _sass/_components.scss for additional branding.

Aurora is intended as a reference implementation. Clone it, extend it, or use it as inspiration for your own GenGen themes.