Skip to content

Latest commit

 

History

History
163 lines (112 loc) · 6.3 KB

README.md

File metadata and controls

163 lines (112 loc) · 6.3 KB
Raw

Eleventy Satisfactory Blog Theme

Build and Publish Github Pages Playwright Tests

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

screenshot screenshot

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