diff --git a/.eleventy.js b/.eleventy.js index 47c32aa0b9..380eaaa454 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -1,19 +1,53 @@ const { DateTime } = require("luxon"); +const liquidjsSyntaxHighlighter = require("./_src/eleventy-liquidjs-tag-highlight-prismjs"); -function dateToISO(str) { - return DateTime.fromJSDate(str).toISO({ includeOffset: true, suppressMilliseconds: true }); +function dateToISO(dateObj) { + return DateTime.fromJSDate(dateObj).toISO({ includeOffset: true, suppressMilliseconds: true }); } -module.exports = function(config) { - return { - templateFormats: [ +module.exports = function(eleventyConfig) { + eleventyConfig.addLayoutAlias("post", "layouts/post.njk"); + + eleventyConfig.addFilter("rssLastUpdatedDate", collection => { + if( !collection.length ) { + throw new Error( "Collection is empty in lastUpdatedDate filter." ); + } + // Newest date in the collection + return dateToISO(collection[ collection.length - 1 ].date); + }); + + eleventyConfig.addFilter("rssDate", dateObj => { + return dateToISO(dateObj); + }); + + eleventyConfig.addFilter("readableDate", dateObj => { + return DateTime.fromJSDate(dateObj).toFormat("dd LLL yyyy"); + }); + + // compatibility with existing {% highlight js %} and others + eleventyConfig.addLiquidTag("highlight", liquidjsSyntaxHighlighter); + + // only content in the `posts/` directory + eleventyConfig.addCollection("posts", function(collection) { + return collection.getAllSorted().filter(function(item) { + return item.inputPath.match(/^\.\/posts\//) !== null; + }); + }); + + return { + templateFormats: [ "md", "njk", "html", "png", + "jpg", "css" ], - markdownTemplateEngine: "njk", + + // if your site lives in a subdirectory, change this + urlPrefix: "/", + + markdownTemplateEngine: "liquid", htmlTemplateEngine: "njk", dataTemplateEngine: "njk", passthroughFileCopy: true, @@ -22,23 +56,6 @@ module.exports = function(config) { includes: "_includes", data: "_data", output: "_site" - }, - nunjucksFilters: { - lastUpdatedDate: collection => { - // Newest date in the collection - return dateToISO(collection[ collection.length - 1 ].date); - }, - rssDate: dateObj => { - return dateToISO(dateObj); - }, - url: url => { - // If your blog lives in a subdirectory, change this: - let rootDir = "/"; - if( !url || url === "/" ) { - return rootDir; - } - return rootDir + url; - } - } - }; -}; \ No newline at end of file + } + }; +}; diff --git a/_data/metadata.json b/_data/metadata.json index 930064fc68..18526755d6 100644 --- a/_data/metadata.json +++ b/_data/metadata.json @@ -1,11 +1,13 @@ { - "title": "Eleventy, the Blog", - "subtitle": "This is a sample project to showcase the Eleventy Static Site Generator.", - "feedurl": "https://11ty.io/feed/", - "url": "https://11ty.io/", - "id": "https://11ty.io/", + "title": "Your Blog Name", + "url": "https://myurl.com/", + "feed": { + "subtitle": "I am writing about my experiences as a naval navel-gazer.", + "url": "https://myurl.com/feed/", + "id": "https://myurl.com/" + }, "author": { - "name": "Zach Leatherman", - "email": "zachleat@zachleat.com" + "name": "Your Name Here", + "email": "youremailaddress@example.com" } } \ No newline at end of file diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index f483819875..5b2c13c1b9 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -3,24 +3,28 @@ - {{ title }} + {{ title or metadata.title }}
- +

{{ metadata.title }}

- {{ layoutContent | safe }} +
+ {{ layoutContent | safe }} +
+ + diff --git a/_includes/layouts/home.njk b/_includes/layouts/home.njk index 90e3e9447a..4dbf888ce0 100644 --- a/_includes/layouts/home.njk +++ b/_includes/layouts/home.njk @@ -2,6 +2,4 @@ layout: layouts/base.njk templateClass: tmpl-home --- -

My Blog

- {{ layoutContent | safe }} diff --git a/_includes/layouts/post.njk b/_includes/layouts/post.njk index b45a371bc3..23dd549c9a 100644 --- a/_includes/layouts/post.njk +++ b/_includes/layouts/post.njk @@ -5,8 +5,3 @@ templateClass: tmpl-post

{{ title }}

{{ layoutContent | safe }} - -

Posts:

- -{% import "postlist.njk" as postsm %} -{{ postsm.list(collections.post, page.url) }} diff --git a/_includes/postlist.njk b/_includes/postlist.njk deleted file mode 100644 index 66dae09466..0000000000 --- a/_includes/postlist.njk +++ /dev/null @@ -1,13 +0,0 @@ -{% macro list(posts, url) %} - -{% endmacro %} \ No newline at end of file diff --git a/_includes/postslist.njk b/_includes/postslist.njk new file mode 100644 index 0000000000..bdaa453e0e --- /dev/null +++ b/_includes/postslist.njk @@ -0,0 +1,9 @@ +
    +{% for post in postslist | reverse %} +
  1. + {{ post.data.title }} + {{ post.date | readableDate }} + {% for tag in post.data.tags %}{% if tag != "post" %}{{ tag }}{% endif %}{% endfor %} +
  2. +{% endfor %} +
\ No newline at end of file diff --git a/about/index.md b/about/index.md index 8748f70e6a..be5d26c228 100644 --- a/about/index.md +++ b/about/index.md @@ -1,10 +1,9 @@ --- -layout: layouts/home.njk +layout: layouts/post.njk title: About Me tags: nav navtitle: About -templateClass: tmpl-page +templateClass: tmpl-post --- -## About Me I am a person that writes stuff. \ No newline at end of file diff --git a/css/index.css b/css/index.css index da29745729..6e803c76e8 100644 --- a/css/index.css +++ b/css/index.css @@ -1,37 +1,127 @@ +:root { + --red: #C5004A; + --darkred: #7F0036; + --lightgray: #e0e0e0; + --gray: #C0C0C0; + --darkgray: #666; + --navy: #17050F; + --blue: #082840; + --white: #fff; +} +* { + box-sizing: border-box; +} +html, +body { + padding: 0; + margin: 0; + font-family: sans-serif; +} p { max-width: 37.5em; /* 600px /16 */ } +a[href] { + color: var(--blue); +} +a[href]:visited { + color: var(--navy); +} +main { + padding: 1rem; +} +main :first-child { + margin-top: 0; +} +header { + border-bottom: 1px dashed var(--lightgray); +} +header:after { + content: ""; + display: table; + clear: both; +} -/* Logo */ -.logo { - max-width: 12.5em; /* 200px /16 */ +/* Header */ +.home { + padding: 0 1rem; + float: left; + margin: 1rem 0; /* 16px /16 */ + font-size: 1em; /* 16px /16 */ } -.tmpl-page .logo, -.tmpl-post .logo { - max-width: 8.75em; /* 140px /16 */ -} -@media (min-width: 31.25em) { /* 500px */ - .tmpl-page .logo, - .tmpl-post .logo { - position: absolute; - right: 1em; - top: 1em; - } - .tmpl-page body, - .tmpl-post body { - padding-right: 10em; /* 160px /16 */ - } +.home :link:not(:hover) { + text-decoration: none; } + /* Nav */ .nav { padding: 0; list-style: none; + float: left; + margin-left: 1em; } .nav-item { display: inline-block; margin-right: 1em; } +.nav-item a[href]:not(:hover) { + text-decoration: none; +} +.nav-item-active { + font-weight: 700; + text-decoration: underline; +} + /* Posts list */ -.post-active { +.postlist { + list-style: none; + padding: 0; +} +.postlist-item { + counter-increment: start-from -1; +} +.postlist-item:before { + display: inline-block; + pointer-events: none; + content: "" counter(start-from, decimal-leading-zero) ". "; + line-height: 100%; + text-align: right; +} +.postlist-date, +.postlist-item:before { + font-size: 0.8125em; /* 13px /16 */ + color: var(--darkgray); +} +.postlist-date { + word-spacing: -0.5px; +} +.postlist-link { + display: inline-block; + padding: 0.25em 0.1875em; /* 4px 3px /16 */ +} +.postlist-item-active .postlist-link { font-weight: bold; +} +.tmpl-home .postlist-link { + font-size: 1.1875em; /* 19px /16 */ + font-weight: 700; +} + + +/* Tags */ +.tag { + display: inline-block; + vertical-align: text-top; + text-transform: uppercase; + font-size: 0.625em; /* 10px /16 */ + padding: 2px 4px; + margin-left: 0.8em; /* 8px /10 */ + background-color: var(--red); + color: var(--white); + border-radius: 0.25em; /* 3px /12 */ +} + +/* Next steps */ +.next-steps { + background-color: #ffc; + padding: 0.375em 0.625em; /* 6px 10px /16 */ } \ No newline at end of file diff --git a/feed/feed.njk b/feed/feed.njk index f044575077..3e6a3393d6 100644 --- a/feed/feed.njk +++ b/feed/feed.njk @@ -4,11 +4,11 @@ permalink: feed/atom.xml {{ metadata.title }} - {{ metadata.subtitle }} - + {{ metadata.feed.subtitle }} + {{ collections.post | lastUpdatedDate }} - {{ metadata.id }} + {{ metadata.feed.id }} {{ metadata.author.name }} {{ metadata.author.email }} diff --git a/index.njk b/index.njk index 542a0dade2..7d420ec43e 100644 --- a/index.njk +++ b/index.njk @@ -1,9 +1,13 @@ --- layout: layouts/home.njk -title: My Blog tags: nav navtitle: Home --- -{% import "postlist.njk" as postsm %} -{{ postsm.list(collections.post) }} + +
+ Now edit the _data/metadata.json with your blog’s information—and delete this message from index.njk. +
+ +{% set postslist = collections.post %} +{% include "postslist.njk" %} diff --git a/package.json b/package.json index bdcbf212b5..356ebcfae5 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ }, "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { - "@11ty/eleventy": "^0.2.7", + "@11ty/eleventy": "file:../eleventy", "luxon": "^0.3.1" } } diff --git a/posts/secondpost.md b/posts/secondpost.md index bbaa46bca2..e6019f9961 100644 --- a/posts/secondpost.md +++ b/posts/secondpost.md @@ -2,6 +2,7 @@ title: This is my second post. tags: - post + - number-2 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.