rdela/eleventeen

🌈📓 Eleventy Blog with Rainbow Mode powered by Chromagen 🎨💥 https://chromagen.io

eleventeen 🌈📓

Eleventeen is an evolving variation of Eleventy Base Blog, an Eleventy blog starter. The name is an homage to the Daisy Chainsaw album 👩🏻‍🎤🎶

WARNING: Here Be Canaries 🐥

Eleventeen boldly embraced Eleventy v3 ahead of its upstream source in PR #8 / v9.0.0-alpha.5, while Eleventy Base Blog remains on the stable v2 release as of 28 April 2024.

Rainbow Mode™

In addition to Base Blog’s killer features and Eleventy 3’s bundler-free ESM support, eleventeen sports a novel new visual experience we call Rainbow Mode™, powered by Chromagen, the color scheme generator we publish under the Famebot organization. Our homegrown Rainbow Mode is wholly distinct from and not to be confused with Emacs rainbow-mode, which “sets background color to strings that match color names.”

prefers-color-scheme: rainbow

We posit a third color scheme preference in addition to light and dark “modes,” rainbow. And here in the world of eleventeen, rainbow is the default. But we acknowledge not all sites are a match for Rainbow Mode, and still want those sites to enjoy the rest of what eleventeen has to offer.

Mono Mode 📓🏁

v9.2.3-alpha.5 added a mono option to _data/metadata.js in PR #13 that disables Rainbow Mode if you set it to true.

mono is false by default, on purpose, because it beats making people set an option called rainbow to false. Plus it might make the current {%- if not metadata.mono %} template logic in _includes/layouts/base.njk a little more resilient.

Show Me the Mono

You can see mono enabled at mono.eleventeen.blog

Try toggling light and dark mode using devtools, there are links to how at the bottom to chromagen.io

The rainbow eleventeen demo still lives (happily ever after) at eleventeen.blog

Other Additions to and Divergences from Eleventy Base Blog

Rejoicing and rainbows aside, eleventeen also adds post images in PR #10 / v9.2.1-alpha.5 , refines them further in 🎈PR #11 / v9.2.2-alpha.5 , and makes some more subtle adjustments to Eleventy Base Blog. There are various changes in public/css/index.css, and in _includes/postslist.njk:

<ol reversed class="postlist" style="counter-reset: start-from {{ (postslistCounter or postslist.length) + 1 }}">

becomes:

<ul reversed class="postlist">

The example About page content/about/index.md tells the story as well.

Please remember to star eleventeen on GitHub ⭐️🐙

Getting Started

If you get stuck, try the Eleventy Getting Started Guide.

1. Make a directory and navigate to it.

mkdir my-blog-name
cd my-blog-name

2. Clone this Repository to your new directory.

git clone https://github.com/rdela/eleventeen.git .

Edit _data/metadata.js to configure the site’s details.

Optional: Review eleventy.config.js to customize the Eleventy build configuration.

3. Install dependencies

npm install

4. Run Eleventy

Develop:

npm run d

Or

npm run start

Generate a production-ready build:

npm run build

Or

npx @11ty/eleventy

Or build and host on a local development server:

npx @11ty/eleventy --serve

You can run debug mode to see all the internals.

Key Features

• Using Eleventy v2.0 3.0 alpha with zero-JavaScript output.
  • Content is exclusively pre-rendered (this is a static site).
  • Can easily deploy to a subfolder without changing any content
  • All URLs are decoupled from the content’s location on the file system.
  • Configure templates via the Eleventy Data Cascade
• Performance focused: four-hundos Lighthouse score out of the box!
  • View the Lighthouse report for the latest eleventeen build courtesy of the Netlify Lighthouse plugin.
  • 0 Cumulative Layout Shift
  • 0ms Total Blocking Time

We work hard for these hundies

Like Eleventy Base Blog, eleventeen scores a perfect 400 on Lighthouse audits, 100 in accessibility, best-practices, performance, and SEO.

If you deploy eleventeen to Netlify as is with its included netlify.toml build config file, eleventeen expects netlify-plugin-lighthouse to be installed at v6 or higher, so it can monitor Lighthouse audit performance thresholds in the onPostBuild event. v5 changed @netlify/plugin-lighthouse’s default behavior to running during the onSuccess build step in PR #588. Running the plugin in onPostBuild now requires fail_deploy_on_score_thresholds to be set to true in netlify.toml.

If the plugin is not installed or installed at a version older than 5.0.0, particularly 4.1.1 or lower, you will get a “failed due to plugin error” during the build. The deploy log shows “Deploy failed due to an error in @netlify/plugin-lighthouse plugin,” and more specifically:

Plugin "@netlify/plugin-lighthouse" invalid/unknown input(s) "fail_deploy_on_score_thresholds"

You can install the plugin through the Netlify UI: “from the Integrations Hub, the Plugins directory, or through this direct installation link.” One tricky part of installing it through the UI is making sure you are on version 6 or higher. v6 is the latest version as of 2024-05-01. To check you can visit your site’s Enabled integrations and select Options > Change version to make sure you are on a major version greater than or equal to 6.0.0.

Alternatively, you can install the plugin manually with:

npm i -D @netlify/plugin-lighthouse

Some versions below v6 can exhibit an issue where the presence of a x-robots-tag: noindex header on deploy previews lowers the SEO score to 92, but even then production builds still score 100. The solution is to update the plugin, and this is what led to discovering the issues detailed here, in PR #16 / commit 5172fb3, and on Mastodon. Note netlify-plugin-lighthouse is now in maintenance(-only) mode.

More Features

• Local development live reload provided by Eleventy Dev Server.
• Content-driven navigation menu
• Image optimization via the {% image %} shortcode.
  • Zero-JavaScript output.
  • Support for modern image formats automatically (e.g. AVIF and WebP)
  • Prefers <img> markup if possible (single image format) but switches automatically to <picture> for multiple image formats.
  • Automated <picture> syntax markup with srcset and optional sizes
  • Includes width/height attributes to avoid content layout shift.
  • Includes loading="lazy" for native lazy loading without JavaScript.
  • Includes decoding="async"
  • Images can be co-located with blog post files.
  • View the Image plugin source code
• Per page CSS bundles via eleventy-plugin-bundle.
• Built-in syntax highlighter (zero-JavaScript output).
• Blog Posts
  • Draft posts: use draft: true to mark a blog post as a draft. Drafts are only included during --serve/--watch and are excluded from full builds. View the Drafts plugin source code.
  • Automated next/previous links
  • Accessible deep links to headings
• Generated Pages
  • Home, Archive, and About pages.
  • Feeds for Atom and JSON
  • sitemap.xml
  • Zero-maintenance tag pages (View on the Demo)
  • Content not found (404) page

Demos

• eleventeen on Netlify, Rainbow Mode (default): https://eleventeen.blog or https://eleventeen.netlify.app (Latest Lighthouse report)
• eleventeen on Netlify, Mono Mode: https://mono.eleventeen.blog (Latest Lighthouse report)
• eleventy-base-blog on Netlify
• eleventy-base-blog on GitHub Pages
• Remix eleventy-base-blog on Glitch
• eleventy-base-blog on Cloudflare Pages

Deploy this to your own site

Deploy this Eleventy site in just a few clicks on these services:

• Deploy eleventeen to Netlify
• Deploy eleventeen to Vercel
• Look in .github/workflows/gh-pages.yml.sample for information on Deploying to GitHub Pages.
• Try it out on Stackblitz
• Read more about Deploying an Eleventy project to the web.

Implementation Notes

• content/about/index.md is an example of a content page.
• content/archive/ has the blog posts but really they can live in any directory, in eleventy-base-blog they are in content/blog/. They only need the posts tag to be included in the blog posts collection, see content/archive/archive.11tydata.js.
• Use the eleventyNavigation key (via the Eleventy Navigation plugin) in your front matter to add a template to the top level site navigation. This is in use on content/index.njk and content/about/index.md.
• Content can be in any template format (blog posts needn’t exclusively be markdown, for example). Configure your project’s supported templates in eleventy.config.js -> templateFormats.
• The public folder in your input directory will be copied to the output folder (via addPassthroughCopy in the eleventy.config.js file). This means ./public/css/* will live at ./_site/css/* after your build completes.
• Provides two content feeds:
  • content/feed/feed.njk
  • content/feed/json.njk
• This project uses three Eleventy Layouts:
  • _includes/layouts/base.njk: the top level HTML structure
  • _includes/layouts/home.njk: the home page template (wrapped into base.njk)
  • _includes/layouts/post.njk: the blog post template (wrapped into base.njk)
• _includes/postslist.njk is a Nunjucks include and is a reusable component used to display a list of all the posts. content/index.njk has an example of how to use it.

Content Security Policy

If your site enforces a Content Security Policy (as public-facing sites should), you should pick one:

1. In base.njk, remove <style>{% getBundle "css" %}</style> and uncomment <link rel="stylesheet" href="{% getBundleFileUrl "css" %}">
2. Configure the server with the CSP directive style-src: 'unsafe-inline' (less secure).