Eleventeen

Overview:

Eleventeen v8 is a work in progress variation of eleventy-base-blog v8, a starter repository for building a blog with the Eleventy site generator. It features the “MOTHEREFFIN Rainbow mode” powered by HSL Gen. This theme makes subtle adjustments to eleventy-base-blog and includes various changes in CSS and template files.

Features:

• Using Eleventy v2.0 with zero-JavaScript output: This theme utilizes Eleventy version 2.0 and generates a static site without the need for JavaScript.
• Content exclusively pre-rendered: The site is completely pre-rendered as a static site, ensuring optimal performance.
• Easily deploy to a subfolder without changing any content: You can deploy the theme to a subfolder without needing to make any changes to the content.
• Decoupled URLs from content location: All URLs within the site are decoupled from the content’s location on the file system.
• Configure templates via the Eleventy Data Cascade: You can easily configure the site’s templates using the Eleventy Data Cascade.
• Performance-focused with four-hundos Lighthouse score: The site achieves a high Lighthouse score out of the box, indicating good performance.
• Content-driven navigation menu: The theme includes a content-driven navigation menu for easy website navigation.
• Image optimization via {% image %} shortcode: Images in the site are optimized using the {% image %} shortcode.
• Zero-JavaScript output: The theme aims to keep the site’s output as minimalistic as possible without relying on JavaScript.
• Support for modern image formats automatically: The theme automatically supports modern image formats such as AVIF and WebP.
• Automated <picture> syntax markup: The theme automatically generates <picture> syntax markup for images with srcset and optional sizes attributes.
• Per page CSS bundles via eleventy-plugin-bundle: Each page in the site has its own CSS bundle generated by the eleventy-plugin-bundle.
• Built-in syntax highlighter (zero-JavaScript output): The theme includes a built-in syntax highlighter that works without JavaScript.
• Draft posts and automated next/previous links: The theme supports draft posts and includes automated next/previous links for easy navigation between blog posts.
• Generated Pages: The theme automatically generates Home, Archive, About pages, and provides feeds for Atom and JSON.
• Zero-maintenance tag pages: The theme includes zero-maintenance tag pages for organizing content based on tags.
• Content not found (404) page: The theme includes a custom 404 page for handling content not found errors.

Installation:

To install the eleventeen v8 theme, follow these steps:

1. Clone this repository.
2. Navigate to the cloned directory.
3. Optionally, review the eleventy.config.js file to configure any Eleventy options.
4. Install the theme dependencies.
5. Edit the _data/metadata.js file to update the site’s metadata.
6. Run Eleventy to generate the site.
7. To generate a production-ready build, use the appropriate command for your deployment environment. Alternatively, you can build and host the site locally on a development server.
8. If needed, you can run debug mode to see all the internals of the site.

Summary:

Eleventeen v8 is a variation of eleventy-base-blog v8 that offers additional features and customizations. It utilizes Eleventy v2.0 with zero-JavaScript output and focuses on performance. The theme includes content-driven navigation, image optimization, and automated next/previous links. It supports modern image formats, zero-maintenance tag pages, and has a custom 404 page. The installation is straightforward and can be customized using the Eleventy Data Cascade.