Merge branch 'main' into v2

# Conflicts:
#	.eleventy.js
#	package.json
#	tags-list.njk

.eleventy.js

@@ -61,8 +61,8 @@ module.exports = function(eleventyConfig) {
         placement: "after",
         class: "direct-link",
         symbol: "#",
-        level: [1,2,3,4],
       }),
+      level: [1,2,3,4],
       slugify: eleventyConfig.getFilter("slug")
     });
   });

README.md

@@ -6,16 +6,16 @@ A starter repository showing how to build a blog with the [Eleventy](https://git
 
 ## Demos
 
-* [Netlify](https://eleventy-base-blog.netlify.com/)
+- [Netlify](https://eleventy-base-blog.netlify.com/)
-* [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
+- [GitHub Pages](https://11ty.github.io/eleventy-base-blog/)
-* [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
+- [Remix on Glitch](https://glitch.com/~11ty-eleventy-base-blog)
 
 ## Deploy this to your own site
 
 Deploy this Eleventy site in just a few clicks on these services:
 
-* [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
+- [Get your own Eleventy web site on Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/11ty/eleventy-base-blog)
-* [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
+- [Get your own Eleventy web site on Vercel](https://vercel.com/import/project?template=11ty%2Feleventy-base-blog)
 
 Or, read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/deployment/).
 
@@ -27,7 +27,6 @@ Or, read more about [Deploying an Eleventy project](https://www.11ty.dev/docs/de
 git clone https://github.com/11ty/eleventy-base-blog.git my-blog-name
 ```
 
-
 ### 2. Navigate to the directory
 
 ```
@@ -42,39 +41,43 @@ Specifically have a look at `.eleventy.js` to see if you want to configure any E
 npm install
 ```
 
-### 4. Edit _data/metadata.json
+### 4. Edit \_data/metadata.json
 
 ### 5. Run Eleventy
 
 ```
-npx eleventy
+npx @11ty/eleventy
 ```
 
 Or build and host locally for local development
+
 ```
-npx eleventy --serve
+npx @11ty/eleventy --serve
 ```
 
 Or build automatically when a template changes:
+
 ```
-npx eleventy --watch
+npx @11ty/eleventy --watch
 ```
 
 Or in debug mode:
+
 ```
-DEBUG=* npx eleventy
+DEBUG=* npx @11ty/eleventy
 ```
 
 ### Implementation Notes
 
-* `about/index.md` shows how to add a content page.
+- `about/index.md` shows how to add a 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.
+- `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`.
+- Use the `eleventyNavigation` key in your front matter to add a template to the top level site navigation. For example, this is in use on `index.njk` and `about/index.md`.
-* Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`.
+- Content can be any template format (blog posts needn’t be markdown, for example). Configure your supported templates in `.eleventy.js` -> `templateFormats`.
-	* Because `css` and `png` are listed in `templateFormats` but are not supported template types, any files with these extensions will be copied without modification to the output (while keeping the same directory structure).
+- The `css` and `img` directories in the input directory will be copied to the output folder (via `addPassthroughCopy()` in the `.eleventy.js` file).
-* 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`.
+- 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:
+- This example uses three layouts:
-  * `_includes/layouts/base.njk`: the top level HTML structure
+  - `_includes/layouts/base.njk`: the top level HTML structure
-  * `_includes/layouts/home.njk`: the home page template (wrapped into `base.njk`)
+  - `_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/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.
+- `_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.
+

_includes/layouts/base.njk

@@ -1,11 +1,13 @@
 <!doctype html>
-<html lang="en">
+<html lang="{{ metadata.language }}">
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>{{ title or metadata.title }}</title>
     <meta name="description" content="{{ description or metadata.description }}">
-    <meta name="generator" content="{{ eleventy.generator }}">
+
+    {#- Uncomment this if you’d like folks to know that you used Eleventy to build your site!  #}
+    {#- <meta name="generator" content="{{ eleventy.generator }}"> #}
 
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
@@ -28,7 +30,7 @@
     <main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
 
       <!-- Delete this message -->
-      <div class="warning">
+      <div class="infobox">
         <ol>
           <li>Edit the <code>_data/metadata.json</code> with your blog’s information.</li>
           <li>(Optional) Edit <code>.eleventy.js</code> with your <a href="https://www.11ty.dev/docs/config/">configuration preferences</a>.</li>

_includes/layouts/post.njk

@@ -5,8 +5,8 @@ templateClass: tmpl-post
 <h1>{{ title }}</h1>
 
 <time datetime="{{ page.date | htmlDateString }}">{{ page.date | readableDate }}</time>
-{%- for tag in tags | filterTagList -%}
+{%- for tag in tags | filterTagList %}
-{%- set tagUrl %}/tags/{{ tag | slug }}/{% endset -%}
+{%- set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
 <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
 {%- endfor %}
 

_includes/postslist.njk

@@ -4,7 +4,7 @@
     <a href="{{ post.url | url }}" class="postlist-link">{% if post.data.title %}{{ post.data.title }}{% else %}<code>{{ post.url }}</code>{% endif %}</a>
     <time class="postlist-date" datetime="{{ post.date | htmlDateString }}">{{ post.date | readableDate }}</time>
     {% for tag in post.data.tags | filterTagList %}
-      {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+      {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
       <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
     {% endfor %}
   </li>

css/index.css

@@ -1,13 +1,37 @@
-/* Colors */
+/* Defaults */
 :root {
-  --lightgray: #e0e0e0;
+  --font-family: -apple-system, system-ui, sans-serif;
-  --gray: #C0C0C0;
+  --font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono, Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono, Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New, Courier, monospace;
-  --darkgray: #333;
-  --navy: #17050F;
-  --blue: #082840;
-  --white: #fff;
 }
 
+/* Theme colors */
+:root {
+  --color-gray-20: #e0e0e0;
+  --color-gray-50: #C0C0C0;
+  --color-gray-90: #333;
+
+  --background-color: #fff;
+
+  --text-color: var(--color-gray-90);
+  --text-color-link: #082840;
+  --text-color-link-visited: #17050F;
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-gray-20: #e0e0e0;
+    --color-gray-50: #C0C0C0;
+    --color-gray-90: #dad8d8;
+
+    /* --text-color is assigned to --color-gray-_ above */
+    --text-color-link: #1493fb;
+    --text-color-link-visited: #a6a6f8;
+
+    --background-color: #15202b;
+  }
+}
+
+
 /* Global stylesheet */
 * {
   box-sizing: border-box;
@@ -17,10 +41,11 @@ html,
 body {
   padding: 0;
   margin: 0;
-  font-family: -apple-system, system-ui, sans-serif;
+  font-family: var(--font-family);
-  color: var(--darkgray);
+  color: var(--text-color);
-  background-color: var(--white);
+  background-color: var(--background-color);
 }
+
 p:last-child {
   margin-bottom: 0;
 }
@@ -33,12 +58,14 @@ p,
 .tmpl-post li {
   line-height: 1.45;
 }
+
 a[href] {
-  color: var(--blue);
+  color: var(--text-color-link);
 }
 a[href]:visited {
-  color: var(--navy);
+  color: var(--text-color-link-visited);
 }
+
 main {
   padding: 1rem;
 }
@@ -46,13 +73,14 @@ main :first-child {
   margin-top: 0;
 }
 header {
-  border-bottom: 1px dashed var(--lightgray);
+  border-bottom: 1px dashed var(--color-gray-20);
 }
 header:after {
   content: "";
   display: table;
   clear: both;
 }
+
 table {
   margin: 1em 0;
 }
@@ -63,7 +91,7 @@ table th {
 
 pre,
 code {
-  font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+  font-family: var(--font-family-monospace);
   line-height: 1.5;
 }
 pre {
@@ -78,7 +106,6 @@ pre {
   -o-tab-size: 2;
   tab-size: 2;
   -webkit-hyphens: none;
-  -moz-hyphens: none;
   -ms-hyphens: none;
   hyphens: none;
   padding: 1em;
@@ -141,7 +168,7 @@ code {
 .postlist-date,
 .postlist-item:before {
   font-size: 0.8125em; /* 13px /16 */
-  color: var(--darkgray);
+  color: var(--color-gray-90);
 }
 .postlist-date {
   word-spacing: -0.5px;
@@ -173,8 +200,8 @@ code {
   margin-left: 0.6666666666667em; /* 8px /12 */
   margin-top: 0.5em; /* 6px /12 */
   margin-bottom: 0.5em; /* 6px /12 */
-  color: var(--darkgray);
+  color: var(--color-gray-90);
-  border: 1px solid var(--gray);
+  border: 1px solid var(--color-gray-50);
   border-radius: 0.25em; /* 3px /12 */
   text-decoration: none;
   line-height: 1.8;
@@ -185,18 +212,28 @@ a[href].post-tag:visited {
 }
 a[href].post-tag:hover,
 a[href].post-tag:focus {
-  background-color: var(--lightgray);
+  background-color: var(--color-gray-20);
 }
 .postlist-item > .post-tag {
   align-self: center;
 }
 
-/* Warning */
+/* Infobox */
-.warning {
+:root {
-  background-color: #ffc;
+  --color-infobox: #ffc;
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-infobox: #082840;
+  }
+}
+
+.infobox {
+  background-color: var(--color-infobox);
+  color: var(--color-gray-90);
   padding: 1em 0.625em; /* 16px 10px /16 */
 }
-.warning ol:only-child {
+.infobox ol:only-child {
   margin: 0;
 }
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "eleventy-base-blog",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "description": "A starter repository for a blog web site using the Eleventy static site generator.",
   "scripts": {
     "build": "npx @11ty/eleventy",
@@ -28,7 +28,7 @@
     "@11ty/eleventy": "^2.0.0-canary.12",
     "@11ty/eleventy-navigation": "^0.3.3",
     "@11ty/eleventy-plugin-rss": "^1.2.0",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.1.0",
     "luxon": "^2.4.0",
     "markdown-it-anchor": "^8.6.4"
   }

tags-list.njk

@@ -5,6 +5,6 @@ layout: layouts/home.njk
 <h1>Tags</h1>
 
 {% for tag in collections.all | getAllTags | filterTagList %}
-  {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %}
+  {% set tagUrl %}/tags/{{ tag | slugify }}/{% endset %}
   <a href="{{ tagUrl | url }}" class="post-tag">{{ tag }}</a>
 {% endfor %}

tags.njk

@@ -5,7 +5,6 @@ pagination:
   alias: tag
   filter:
     - all
-    - nav
     - post
     - posts
     - tagList
@@ -13,7 +12,7 @@ pagination:
 layout: layouts/home.njk
 eleventyComputed:
   title: Tagged “{{ tag }}”
-permalink: /tags/{{ tag | slug }}/
+permalink: /tags/{{ tag | slugify }}/
 ---
 <h1>Tagged “{{ tag }}”</h1>