diff --git a/.eleventy.js b/.eleventy.js index 4cb684930b..5801bc9af5 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 48082f72f0..b6a7d89c68 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -12 +16 diff --git a/.travis.yml b/.travis.yml deleted file mode 100644 index f7c4435b47..0000000000 --- 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 a9c1c97732..6f97190600 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 ad6569e2f3..850f7c4efd 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 27d6e20a88..4d7327ca59 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 514f370d6b..25c9c82440 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 dceb2a6508..4a7889adf6 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 0000000000..797b0e550a --- /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 93babae6c8..40bba3c3db 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 829d5e5969..182a663946 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 d4b3df8332..8984142c3f 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 0459d1735b..cb53ec6b99 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 21b3d6cf59..88ee86ac99 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 df0ee74f4c..5fda350fc9 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 d37ae3697b..255386067d 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 0fbd53bce3..fa1158bd55 100644 --- a/tags.njk +++ b/tags.njk @@ -5,7 +5,6 @@ pagination: alias: tag filter: - all - - nav - post - posts - tagList
    URLPage Title
    URLPage Title