---
title: 'Demo pages'
description: 'To avoid overloading this base with too many subtleties, I store special features in separate branches that (usually) keep up with the main branch.'
date: "2023-10-30"
tags:
  - Example
  - Test
demos:
  - title: Gallery
    description: 'A gallery with good old "popup" functionality inside a dialog element, a new image shortcode that links directly to the image with its original dimensions, and a regular loop over images.'
    preview: 'https://eleventy-excellent-gallery.netlify.app/gallery/'
    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-gallery'
  - title: Pagination
    description: 'The blog collection with a pagination of 2 posts per page. To work with visual current page indication, :has() pseudo-class support is required.'
    preview: 'https://eleventy-excellent-pagination.netlify.app/blog/page-1/'
    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-pagination'
  - title: Tags
    description: 'The blog now features a basic tag system. Tags can be stored in front matter, as a YAML list or as an array.'
    preview: 'https://eleventy-excellent-tags.netlify.app/tags/'
    branch: 'https://github.com/madrilene/eleventy-excellent/tree/demo-tags'
---

This is a very opinionated starter, but it can be further developed in many directions. In its current form, it can already be used as a simple blog.

To avoid overloading this base with too many subtleties, I put special features such as image gallery, tags, or pagination in separate branches that (usually... hopefully! 🫣 ) keep up with the main branch.
Work in progress.

![https://placehold.co/600x400/EEE/31343C](https://placehold.co/600x400/EEE/31343C)

## Demos

{% for item in demos %}

<article class="flow my-m-l">
   <h3>{{ item.title }}</h3>
   <p>{{ item.description }}
   <div class="cluster">
   <a class="button no-indicator" href="{{ item.preview }}">Demo</a>
   <a class="button no-indicator" href="{{ item.branch }}">Branch</a>
   </div>
</article>
{% endfor %}