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.

TO-DO:

Improve documentation
Testing with Cypress

Demo

yetty

Deploy this to your own site

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

Get your own yetty web site on Netlify

Requirements

Node.js v10 or higher must be installed to run this program.
npm 7.20.0 or higher must be also installed.

Getting Started

1. Clone this Repository

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.

2. Navigate to the directory

cd my-new-project

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

3. Install dependencies

npm install

4. Edit _data/metadata.json and adjust the values to your details.

5. Run Eleventy

For local development:

npm start

To build a production version:

npm run build

For debug mode:

DEBUG=* npx eleventy

Implementation Notes

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.

Other features you might require:

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:

da-ol-man / yetty Goto Github PK

yetty's Introduction