Eleventy Satisfactory Blog Theme

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

How to use this blog theme

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

Configuration

Write a post

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).

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

How to run the blog locally

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

Updating

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.

Notes

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

mendhak / eleventy-satisfactory

readme