diff --git a/.eleventy.js b/.eleventy.js index 4cb6849..5801bc9 100644 --- a/.eleventy.js +++ b/.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 pluginNavigation = require("@11ty/eleventy-navigation"); + +const { DateTime } = require("luxon"); 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 => { - // should match the list in tags.njk + function filterTagList(tags) { 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, - permalinkClass: "direct-link", - permalinkSymbol: "#" + permalink: markdownItAnchor.permalink.ariaHidden({ + placement: "after", + 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: ".", diff --git a/.nvmrc b/.nvmrc index 48082f7..b6a7d89 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -12 +16 diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index f7c4435..0000000 --- a/.travis.yml +++ /dev/null @@ -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 diff --git a/README.md b/README.md index a9c1c97..6f97190 100644 --- a/README.md +++ b/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. + diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index ad6569e..850f7c4 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -1,12 +1,15 @@ - + {{ title or metadata.title }} + + + diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index 27d6e20..4d7327c 100644 --- a/_includes/layouts/post.njk +++ b/_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 %}
  • Previous: {{ previousPost.data.title }}
  • {% endif %} {%- endif %} +{%- endif %} diff --git a/css/index.css b/css/index.css index 514f370..25c9c82 100644 --- a/css/index.css +++ b/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 */ - padding: 0.09090909090909em 0.3636363636364em; /* 1px 4px /11 */ - margin-left: 0.8em; /* 8px /10 */ + font-size: 0.75em; /* 12px /16 */ + padding: 0.08333333333333em 0.3333333333333em; /* 1px 4px /12 */ + 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 */ diff --git a/css/prism-base16-monokai.dark.css b/css/prism-base16-monokai.dark.css index dceb2a6..4a7889a 100644 --- a/css/prism-base16-monokai.dark.css +++ b/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 { diff --git a/css/prism-diff.css b/css/prism-diff.css new file mode 100644 index 0000000..797b0e5 --- /dev/null +++ b/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 */ +} diff --git a/feed/json.njk b/feed/json.njk index 93babae..40bba3c 100644 --- a/feed/json.njk +++ b/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 -%} diff --git a/netlify.toml b/netlify.toml index 829d5e5..182a663 100644 --- a/netlify.toml +++ b/netlify.toml @@ -1,3 +1,3 @@ [build] publish = "_site" - command = "DEBUG=* eleventy" \ No newline at end of file + command = "npm run build" diff --git a/package.json b/package.json index d4b3df8..8984142 100644 --- a/package.json +++ b/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", - "watch": "eleventy --watch", - "serve": "eleventy --serve", - "start": "eleventy --serve", - "debug": "DEBUG=* eleventy" + "build": "npx @11ty/eleventy", + "bench": "DEBUG=Eleventy:Benchmark* npx @11ty/eleventy", + "watch": "npx @11ty/eleventy --watch", + "serve": "npx @11ty/eleventy --serve", + "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": { - "@11ty/eleventy": "^0.12.1", - "@11ty/eleventy-navigation": "^0.1.6", - "@11ty/eleventy-plugin-rss": "^1.1.1", - "@11ty/eleventy-plugin-syntaxhighlight": "^3.1.0", - "luxon": "^1.26.0", - "markdown-it": "^12.0.4", - "markdown-it-anchor": "^7.1.0" + "dependencies": { + "@11ty/eleventy": "^1.0.1", + "@11ty/eleventy-navigation": "^0.3.3", + "@11ty/eleventy-plugin-rss": "^1.1.2", + "@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0", + "luxon": "^2.4.0", + "markdown-it": "^13.0.1", + "markdown-it-anchor": "^8.6.4" } } diff --git a/page-list.njk b/page-list.njk index 0459d17..cb53ec6 100644 --- a/page-list.njk +++ b/page-list.njk @@ -8,8 +8,10 @@ permalink: /page-list/{% if pagination.pageNumber > 0 %}{{ pagination.pageNumber --- - - + + + + {%- for entry in entries %} diff --git a/posts/firstpost.md b/posts/firstpost.md index 21b3d6c..88ee86a 100644 --- a/posts/firstpost.md +++ b/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; - counter++; ++ let counter = 0; ++ counter++; } // Test with a line break above this line. diff --git a/posts/thirdpost.md b/posts/thirdpost.md index df0ee74..5fda350 100644 --- a/posts/thirdpost.md +++ b/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++; } diff --git a/tags-list.njk b/tags-list.njk index d37ae36..2553860 100644 --- a/tags-list.njk +++ b/tags-list.njk @@ -4,7 +4,7 @@ layout: layouts/home.njk ---

    Tags

    -{% for tag in collections.tagList | filterTagList %} +{% for tag in collections.tagList %} {% set tagUrl %}/tags/{{ tag | slug }}/{% endset %} {{ tag }} {% endfor %} diff --git a/tags.njk b/tags.njk index 0fbd53b..fa1158b 100644 --- a/tags.njk +++ b/tags.njk @@ -5,7 +5,6 @@ pagination: alias: tag filter: - all - - nav - post - posts - tagList
    URLPage Title
    URLPage Title