An Eleventy blog theme focused on content, and various convenience features. Demo.

Makes use of SimpleCSS, with inspiration from Hylia and minimal-mistakes. I developed it for my blog.

Features

• My focus is mainly on content, and less on everything else (author, social, tags, etc).
• Images using regular Markdown syntax are displayed with lightbox
• Image gallery with captions
• Link to a post's .md file is converted to final URL
• Links and images paths automatically adjusted to match blog prefix
• Main CSS is inline in the page
• Automatic light and dark mode
• Simplified post layout with date at bottom
• Simplified home page layout
• Adjust number of post listings
• Post excerpts below post listings
• Links, year, copyright, and photos in footer
• Opengraph and JSON+LD metadata for posts including preview image
• Code blocks rendered using Prism syntax highlighting
• Notice boxes such as info, warning, success
• Seamless gist integration as code blocks
• Github repo cards generator
• No tags listings, no site navigation, no social, no landing page, no analytics
• Draft posts appear locally
• UI testing (for this repo)
• Github Actions for publishing
• Extra wide images, videos and code blocks to make it extra-wide and stand out from the text
• Full width images and videos
• Robots.txt, .well-known folder
• Favicon

Generate a repo from this public template, or fork it.
Delete the tests/ folder and .github/workflows/playwright.yml

• Set your values in the metadata.json file
• Set the footer links and images

The posts go in the posts folder. Drafts can go in the drafts folder and will only appear when running locally (npm run start or docker compose up) but not when building (npm run build).

• Set the date of a post
• Add an image
• Add an image gallery
• Link to another post or URL
• Add a notice panel with info, warning, success, danger
• Add a code block with syntax highlighting
• Add a Github Gist
• Add a Github Repo Card
• Add videos and audio
• Controlling extra-wide images, videos, code blocks
• Set Opengraph preview image and metadata

Publish it. I've included a sample Github Action, use or modify as you need.

Running it with Docker

This will do the npm install and npm start together.

docker compose up

Then browse to http://localhost:8080/

Running it with Node

Requires Node 20. First get all the dependencies.

npm install

To serve the site, and watch for changes:

npm run start

Then browse to http://localhost:8080/

To just build the site once (normally used for Github Actions):

npm install
npm run build

Running Tests

Make sure Firefox is installed. sudo apt install firefox

Run Playwright tests, this should automatically do an npm start first.

npm test

Once you've forked this repo, copying new features and updates from this repo to yours shouldn't be done wholesale. Instead, a diff tool like meld or Beyond Compare is recommended.

For commandline, here's a useful rsync command which copies most files and excludes some unnecessary ones. At least it's a starting point:

cd your-blog-repo  
rsync -av --progress ../eleventy-satisfactory/ ./ \
--exclude '.git' \
--exclude 'tests'  \
--exclude '_site'  \
--exclude 'node_modules'  \
--exclude 'posts' --include 'posts/posts.json'  \
--exclude 'drafts' --include 'drafts.11tydata.js'  \
--exclude 'playwright*'  \
--exclude 'test*'  \
--exclude 'bottomlinks.json' \
--exclude 'screenshots'

After the rsync, it's still worth doing a git diff to see what's changed, or if there are any conflicts.

TODO/Investigate

• Can the cssmin shortcode adjust the inline url() paths? That could allow putting the font lines into its own CSS file.
• Can the Github CSS be included just once, instead of once per card? This could be done using WebC, have to wrap my head around it.
• Should the gallery behave the same for gallery + markdown and gallery + shortcode?
• There isn't a clean way to give users the ability to toggle light and dark mode

References

• Eleventy
• Simple.css
• Favicon created by Uniconlabs
• Article icon by Freepik
• Paired shortcode
• Shortcode with image gallery
• Customizing markdown-it