From b9c0d873062270e8cfad367627c5dcd8c530c58e Mon Sep 17 00:00:00 2001 From: Zach Leatherman Date: Mon, 22 Jan 2018 08:17:48 -0600 Subject: [PATCH] start of eleventy-base-blog that pairs with 0.2.8 --- .eleventy.js | 69 ++++++++++++-------- _data/metadata.json | 16 +++-- _includes/layouts/base.njk | 14 ++-- _includes/layouts/home.njk | 2 - _includes/layouts/post.njk | 5 -- _includes/postlist.njk | 13 ---- _includes/postslist.njk | 9 +++ about/index.md | 5 +- css/index.css | 128 +++++++++++++++++++++++++++++++------ feed/feed.njk | 6 +- index.njk | 10 ++- package.json | 2 +- posts/secondpost.md | 1 + 13 files changed, 193 insertions(+), 87 deletions(-) delete mode 100644 _includes/postlist.njk create mode 100644 _includes/postslist.njk diff --git a/.eleventy.js b/.eleventy.js index 47c32aa..380eaaa 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 930064f..1852675 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 f483819..5b2c13c 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 90e3e94..4dbf888 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 b45a371..23dd549 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 66dae09..0000000 --- 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 0000000..bdaa453 --- /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 8748f70..be5d26c 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 da29745..6e803c7 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 f044575..3e6a339 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 542a0da..7d420ec 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 bdcbf21..356ebcf 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 bbaa46b..e6019f9 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.