Merge branch 'master' into remove-passthrough-references-from-readme

.eleventy.js

@@ -1,23 +1,23 @@
-const { DateTime } = require("luxon");
 const fs = require("fs");
-const pluginRss = require("@11ty/eleventy-plugin-rss");
+
-const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const { DateTime } = require("luxon");
-const pluginNavigation = require("@11ty/eleventy-navigation");
 const markdownIt = require("markdown-it");
 const markdownItAnchor = require("markdown-it-anchor");
 
+const pluginRss = require("@11ty/eleventy-plugin-rss");
+const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
+const pluginNavigation = require("@11ty/eleventy-navigation");
+
 module.exports = function(eleventyConfig) {
+  // Copy the `img` and `css` folders to the output
+  eleventyConfig.addPassthroughCopy("img");
+  eleventyConfig.addPassthroughCopy("css");
+
   // Add plugins
   eleventyConfig.addPlugin(pluginRss);
   eleventyConfig.addPlugin(pluginSyntaxHighlight);
   eleventyConfig.addPlugin(pluginNavigation);
 
-  // https://www.11ty.dev/docs/data-deep-merge/
-  eleventyConfig.setDataDeepMerge(true);
-
-  // Alias `layout: post` to `layout: layouts/post.njk`
-  eleventyConfig.addLayoutAlias("post", "layouts/post.njk");
-
   eleventyConfig.addFilter("readableDate", dateObj => {
     return DateTime.fromJSDate(dateObj, {zone: 'utc'}).toFormat("dd LLL yyyy");
   });
@@ -29,6 +29,9 @@ module.exports = function(eleventyConfig) {
 
   // Get the first `n` elements of a collection.
   eleventyConfig.addFilter("head", (array, n) => {
+    if(!Array.isArray(array) || array.length === 0) {
+      return [];
+    }
     if( n < 0 ) {
       return array.slice(n);
     }
@@ -41,10 +44,11 @@ module.exports = function(eleventyConfig) {
     return Math.min.apply(null, numbers);
   });
 
-  eleventyConfig.addFilter("filterTagList", tags => {
+  function filterTagList(tags) {
-    // should match the list in tags.njk
     return (tags || []).filter(tag => ["all", "nav", "post", "posts"].indexOf(tag) === -1);
-  })
+  }
+
+  eleventyConfig.addFilter("filterTagList", filterTagList)
 
   // Create an array of all tags
   eleventyConfig.addCollection("tagList", function(collection) {
@@ -53,22 +57,22 @@ module.exports = function(eleventyConfig) {
       (item.data.tags || []).forEach(tag => tagSet.add(tag));
     });
 
-    return [...tagSet];
+    return filterTagList([...tagSet]);
   });
 
-  // Copy the `img` and `css` folders to the output
-  eleventyConfig.addPassthroughCopy("img");
-  eleventyConfig.addPassthroughCopy("css");
-
   // Customize Markdown library and settings:
   let markdownLibrary = markdownIt({
     html: true,
     breaks: true,
     linkify: true
   }).use(markdownItAnchor, {
-    permalink: true,
+    permalink: markdownItAnchor.permalink.ariaHidden({
-    permalinkClass: "direct-link",
+      placement: "after",
-    permalinkSymbol: "#"
+      class: "direct-link",
+      symbol: "#",
+      level: [1,2,3,4],
+    }),
+    slugify: eleventyConfig.getFilter("slug")
   });
   eleventyConfig.setLibrary("md", markdownLibrary);
 
@@ -100,6 +104,12 @@ module.exports = function(eleventyConfig) {
       "liquid"
     ],
 
+    // Pre-process *.md files with: (default: `liquid`)
+    markdownTemplateEngine: "njk",
+
+    // Pre-process *.html files with: (default: `liquid`)
+    htmlTemplateEngine: "njk",
+
     // -----------------------------------------------------------------
     // If your site deploys to a subdirectory, change `pathPrefix`.
     // Don’t worry about leading and trailing slashes, we normalize these.
@@ -114,15 +124,6 @@ module.exports = function(eleventyConfig) {
     pathPrefix: "/",
     // -----------------------------------------------------------------
 
-    // Pre-process *.md files with: (default: `liquid`)
-    markdownTemplateEngine: "njk",
-
-    // Pre-process *.html files with: (default: `liquid`)
-    htmlTemplateEngine: "njk",
-
-    // Opt-out of pre-processing global data JSON files: (default: `liquid`)
-    dataTemplateEngine: false,
-
     // These are all optional (defaults are shown):
     dir: {
       input: ".",

.nvmrc

@@ -1 +1 @@
-12
+16

.travis.yml

@@ -1,14 +0,0 @@
-language: node_js
-node_js:
-  - 12
-before_script:
-  - npm install @11ty/eleventy -g
-script: eleventy --pathprefix="/eleventy-base-blog/"
-deploy:
-  local-dir: _site
-  provider: pages
-  skip-cleanup: true
-  github-token: $GITHUB_TOKEN  # Set in travis-ci.org dashboard, marked secure
-  keep-history: true
-  on:
-    branch: master

README.md

@@ -12,11 +12,13 @@ A starter repository showing how to build a blog with the [Eleventy](https://git
 
 ## Deploy this to your own site
 
-These builders are amazing—try them out to get your own Eleventy site in a few clicks!
+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 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/).
+
 ## Getting Started
 
 ### 1. Clone this Repository
@@ -69,7 +71,7 @@ DEBUG=* npx eleventy
 
 - `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.
-- 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`.
 - The `css` and `png` directories in the input directory are going to be copied without modification to the output, because they're passed to `addPassthroughCopy()`.
 - 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`.
@@ -78,3 +80,4 @@ DEBUG=* npx eleventy
   - `_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.
+

_includes/layouts/base.njk

@@ -1,12 +1,15 @@
 <!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 }}">
+
     <link rel="stylesheet" href="{{ '/css/index.css' | url }}">
     <link rel="stylesheet" href="{{ '/css/prism-base16-monokai.dark.css' | url }}">
+    <link rel="stylesheet" href="{{ '/css/prism-diff.css' | url }}">
     <link rel="alternate" href="{{ metadata.feed.path | url }}" type="application/atom+xml" title="{{ metadata.title }}">
     <link rel="alternate" href="{{ metadata.jsonfeed.path | url }}" type="application/json" title="{{ metadata.title }}">
   </head>

_includes/layouts/post.njk

@@ -12,6 +12,7 @@ templateClass: tmpl-post
 
 {{ content | safe }}
 
+{%- if collections.posts %}
 {%- set nextPost = collections.posts | getNextCollectionItem(page) %}
 {%- set previousPost = collections.posts | getPreviousCollectionItem(page) %}
 {%- if nextPost or previousPost %}
@@ -21,3 +22,4 @@ templateClass: tmpl-post
   {%- if previousPost %}<li>Previous: <a href="{{ previousPost.url | url }}">{{ previousPost.data.title }}</a></li>{% endif %}
 </ul>
 {%- endif %}
+{%- endif %}

css/index.css

@@ -88,36 +88,6 @@ pre {
 code {
   word-break: break-all;
 }
-.highlight-line {
-  display: block;
-  padding: 0.125em 1em;
-  text-decoration: none; /* override del, ins, mark defaults */
-  color: inherit; /* override del, ins, mark defaults */
-}
-
-/* allow highlighting empty lines */
-.highlight-line:empty:before {
-  content: " ";
-}
-/* avoid double line breaks when using display: block; */
-.highlight-line + br {
-  display: none;
-}
-
-.highlight-line-isdir {
-  color: #b0b0b0;
-  background-color: #222;
-}
-.highlight-line-active {
-  background-color: #444;
-  background-color: hsla(0, 0%, 27%, .8);
-}
-.highlight-line-add {
-  background-color: #45844b;
-}
-.highlight-line-remove {
-  background-color: #902f2f;
-}
 
 /* Header */
 .home {
@@ -198,9 +168,11 @@ code {
   align-items: center;
   justify-content: center;
   text-transform: uppercase;
-  font-size: 0.6875em; /* 11px /16 */
+  font-size: 0.75em; /* 12px /16 */
-  padding: 0.09090909090909em 0.3636363636364em; /* 1px 4px /11 */
+  padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */
-  margin-left: 0.8em; /* 8px /10 */
+  margin-left: 0.6666666666667em; /* 8px /12 */
+  margin-top: 0.5em; /* 6px /12 */
+  margin-bottom: 0.5em; /* 6px /12 */
   color: var(--darkgray);
   border: 1px solid var(--gray);
   border-radius: 0.25em; /* 3px /12 */

css/prism-base16-monokai.dark.css

@@ -68,7 +68,6 @@ pre[class*="language-"] {
 	text-decoration: line-through;
 }
 .token.inserted {
-	border-bottom: 1px dotted #f9f8f5;
 	text-decoration: none;
 }
 .token.italic {

css/prism-diff.css

@@ -0,0 +1,40 @@
+/*
+ * New diff- syntax
+ */
+
+pre[class*="language-diff-"] {
+  --eleventy-code-padding: 1.25em;
+	padding-left: var(--eleventy-code-padding);
+	padding-right: var(--eleventy-code-padding);
+}
+.token.deleted {
+	background-color: hsl(0, 51%, 37%);
+}
+.token.inserted {
+	background-color: hsl(126, 31%, 39%);
+}
+
+/* Make the + and - characters unselectable for copy/paste */
+.token.prefix.unchanged,
+.token.prefix.inserted,
+.token.prefix.deleted {
+	-webkit-user-select: none;
+	user-select: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--eleventy-code-padding);
+  padding-top: 2px;
+  padding-bottom: 2px;
+  background-color: rgba(0,0,0,.2);
+}
+
+/* Optional: full-width background color */
+.token.inserted:not(.prefix),
+.token.deleted:not(.prefix) {
+	display: block;
+	margin-left: calc(-1 * var(--eleventy-code-padding));
+	margin-right: calc(-1 * var(--eleventy-code-padding));
+	text-decoration: none; /* override del, ins, mark defaults */
+	color: inherit; /* override del, ins, mark defaults */
+}

feed/json.njk

@@ -21,7 +21,7 @@ eleventyExcludeFromCollections: true
       "id": "{{ absolutePostUrl }}",
       "url": "{{ absolutePostUrl }}",
       "title": "{{ post.data.title }}",
-      "content_html": {% if post.templateContent %}{{ post.templateContent | dump | safe }}{% else %}""{% endif %},
+      "content_html": {% if post.templateContent %}{{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) | dump | safe }}{% else %}""{% endif %},
       "date_published": "{{ post.date | rssDate }}"
     }
     {%- if not loop.last -%}

netlify.toml

@@ -1,3 +1,3 @@
 [build]
   publish = "_site"
-  command = "DEBUG=* eleventy"
+  command = "npm run build"

package.json

@@ -1,13 +1,14 @@
 {
   "name": "eleventy-base-blog",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "A starter repository for a blog web site using the Eleventy static site generator.",
   "scripts": {
-    "build": "eleventy",
+    "build": "npx @11ty/eleventy",
-    "watch": "eleventy --watch",
+    "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy",
-    "serve": "eleventy --serve",
+    "watch": "npx @11ty/eleventy --watch",
-    "start": "eleventy --serve",
+    "serve": "npx @11ty/eleventy --serve",
-    "debug": "DEBUG=* eleventy"
+    "start": "npx @11ty/eleventy --serve",
+    "debug": "DEBUG=* npx @11ty/eleventy"
   },
   "repository": {
     "type": "git",
@@ -23,13 +24,13 @@
     "url": "https://github.com/11ty/eleventy-base-blog/issues"
   },
   "homepage": "https://github.com/11ty/eleventy-base-blog#readme",
-  "devDependencies": {
+  "dependencies": {
-    "@11ty/eleventy": "^0.12.1",
+    "@11ty/eleventy": "^1.0.1",
-    "@11ty/eleventy-navigation": "^0.1.6",
+    "@11ty/eleventy-navigation": "^0.3.3",
-    "@11ty/eleventy-plugin-rss": "^1.1.1",
+    "@11ty/eleventy-plugin-rss": "^1.1.2",
-    "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0",
+    "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
-    "luxon": "^1.26.0",
+    "luxon": "^2.4.0",
-    "markdown-it": "^12.0.4",
+    "markdown-it": "^13.0.1",
-    "markdown-it-anchor": "^7.1.0"
+    "markdown-it-anchor": "^8.6.4"
   }
 }

page-list.njk

@@ -8,8 +8,10 @@ permalink: /page-list/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber
 ---
 <table>
   <thead>
-    <th>URL</th>
+    <tr>
-    <th>Page Title</th>
+      <th>URL</th>
+      <th>Page Title</th>
+    </tr>
   </thead>
   <tbody>
 {%- for entry in entries %}

posts/firstpost.md

@@ -14,11 +14,11 @@ Bring to the table win-win survival strategies to ensure proactive domination. A
 
 Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
 
-``` text/2-3
+```diff-js
 // this is a command
 function myCommand() {
-	let counter = 0;
++	let counter = 0;
-	counter++;
++	counter++;
 }
 
 // Test with a line break above this line.

posts/thirdpost.md

@@ -4,16 +4,17 @@ description: This is a post on My Blog about win-win survival strategies.
 date: 2018-08-24
 tags:
   - second tag
+  - posts with two tags
 layout: layouts/post.njk
 ---
 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
 
-``` js/2/4
+```diff-js
 // this is a command
 function myCommand() {
-	let counter = 0;
++	let counter = 0;
 
-	counter++;
+-	counter++;
 
 }
 

tags-list.njk

@@ -4,7 +4,7 @@ layout: layouts/home.njk
 ---
 <h1>Tags</h1>
 
-{% for tag in collections.tagList | filterTagList %}
+{% for tag in collections.tagList %}
   {% set tagUrl %}/tags/{{ tag | slug }}/{% 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