yetty: Yet another Eleventy starter kit for my (& your) new projects. Built with accessibility and performance in mind.

Features:

Sass/Scss: Scss files are compiled before Eleventy builds the site. The files are compiled in the ./src/styles folder and then will be passed through copy (see .eleventy.js) to the new site created under ./dist/. For Netlify users, an alternative option with plugins is explained here: https://css-tricks.com/making-my-netlify-build-run-sass/.
Critical CSS: Critical CSS is automatically included in the head of the document using the eleventy-critical-css plugin.
PostCSS (Autoprefixer and PurgeCSS): Both dependencies have been set up to run through the main css stylesheet after Eleventy has generated the dist folder.
Persistent dark mode using local storage as seen here: https://css-tricks.com/a-complete-guide-to-dark-mode-on-the-web/
Cache busting via filter based on https://rob.cogit8.org/posts/2020-10-28-simple-11ty-cache-busting/.
HTML minified on prooduction with https://www.npmjs.com/package/html-minifier package.
PWA using https://github.com/okitavera/eleventy-plugin-pwa plugin.
JS compilation and minification with Webpack CLI.
Image processing with eleventy-img plugin. Generates multiple sizes images in two different formats (jpg and webp), and markup with <figure>, <picture> and native lazy loading.
Modernizr CLI: To build a custom and minified version of the library as seen here: https://v2.14islands.com/blog/2016/04/20/better-way-to-use-modernizr-with-command-line-config/. Yetty is using it to detect if the browser supports Webp as background-image in CSS.

This builder is amazing. Try it out to get your own yetty site in a few clicks!

git clone https://github.com/ygoex/yetty.git my-new-project

or, if you are currently signed in to GitHub, generate a repo from this template.

cd my-new-project

Specifically have a look at .eleventy.js to see if you want to configure any Eleventy options differently.

npm install

For local development:

npm start

To build a production version:

npm run build

For debug mode:

DEBUG=* npx eleventy

about/index.md shows how to add a new content page.
posts/ has the blog posts but really they can live in any directory. They need only the post tag to be added to this collection.
Add the nav tag to add a template to the top level site navigation. For example, this is in use on index.njk and about/index.md.
The blog post feed template is in feed/feed.njk. This is also a good example of using a global data files in that it uses _data/metadata.json.
This example uses three 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/postlist.njk is a Nunjucks include and is a reusable component used to display a list of all the posts. index.njk has an example of how to use it.

Inline CSS: If you require further control over the above the fold & common style inlined by CriticalCSS, you can inline the style manually as follows:
1. Add the following code between the head tags in the base.njk file:
```
{% set css %}
  {% include "inline_style/inline_style.css" %}
{% endset %}
<style>
  {{css | cssmin | safe}}
</style>
```
2. Create a scss file with the name inline_style.scss under _includes/inline_style/scss/inline_style.scss
3. Add the following command to the beginning of the sass:prod script in package.json:
```
node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --output-style compressed &&
```
  And also, the following command to the beginning of the sass:dev script:
```
node-sass src/_includes/inline_style/scss/ --output src/_includes/inline_style/ --source-map true --source-map-contents true &&
```
For additional documentation about how to inline css in Eleventy visit:

This starter kit was born as a fork of eleventy-base-blog, but it also includes features inspired by other Eleventy projects: