diff --git a/_includes/layouts/base.njk b/_includes/layouts/base.njk index 5b2c13c..aafbcb5 100644 --- a/_includes/layouts/base.njk +++ b/_includes/layouts/base.njk @@ -1,11 +1,11 @@ - + {{ title or metadata.title }} - + @@ -18,7 +18,7 @@ -
+ {{ layoutContent | safe }}
diff --git a/_src/eleventy-liquidjs-tag-highlight-plain.js b/_src/eleventy-liquidjs-tag-highlight-plain.js new file mode 100644 index 0000000..e5a30d4 --- /dev/null +++ b/_src/eleventy-liquidjs-tag-highlight-plain.js @@ -0,0 +1,32 @@ +module.exports = function(liquidEngine) { + + return { + parse: function(tagToken, remainTokens) { + this.language = tagToken.args; + this.tokens = []; + + var stream = liquidEngine.parser.parseStream(remainTokens); + + stream + .on('token', token => { + if (token.name === 'endhighlight') { + stream.stop(); + } else { + this.tokens.push(token); + } + }) + .on('end', x => { + throw new Error("tag highlight not closed"); + }); + + stream.start(); + }, + render: function(scope, hash) { + var tokens = this.tokens.map(token => { + return token.raw.trim(); + }).join('').trim(); + + return Promise.resolve(`
\n` + tokens + "\n
"); + } + } +}; \ No newline at end of file diff --git a/_src/eleventy-liquidjs-tag-highlight-prismjs.js b/_src/eleventy-liquidjs-tag-highlight-prismjs.js new file mode 100644 index 0000000..1e8d039 --- /dev/null +++ b/_src/eleventy-liquidjs-tag-highlight-prismjs.js @@ -0,0 +1,37 @@ +const Prism = require('prismjs'); + +module.exports = function(liquidEngine) { + let langMap = { + "css": "css", + "html": "markup", + "js": "javascript" + }; + + return { + parse: function(tagToken, remainTokens) { + this.language = langMap[ tagToken.args ] || tagToken.args; + this.tokens = []; + + var stream = liquidEngine.parser.parseStream(remainTokens); + + stream + .on('token', token => { + if (token.name === 'endhighlight') { + stream.stop(); + } else { + this.tokens.push(token); + } + }) + .on('end', x => { + throw new Error("tag highlight not closed"); + }); + + stream.start() + }, + render: function(scope, hash) { + var tokens = this.tokens.map(token => token.raw).join('').trim(); + var html = Prism.highlight(tokens, Prism.languages[ this.language ]); + return Promise.resolve(`
` + html + "
"); + } + } +}; \ No newline at end of file diff --git a/css/index.css b/css/index.css index 6e803c7..1ad5a13 100644 --- a/css/index.css +++ b/css/index.css @@ -17,9 +17,15 @@ body { margin: 0; font-family: sans-serif; } -p { +p, +.tmpl-post li, +img { max-width: 37.5em; /* 600px /16 */ } +p, +.tmpl-post li { + line-height: 1.45; +} a[href] { color: var(--blue); } @@ -40,6 +46,30 @@ header:after { display: table; clear: both; } +pre, +code { + font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace; + line-height: 1.5; +} +pre { + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + padding: 1em; + margin: .5em 0; + background-color: #f6f6f6; +} /* Header */ .home { @@ -120,8 +150,8 @@ header:after { border-radius: 0.25em; /* 3px /12 */ } -/* Next steps */ -.next-steps { +/* Warning */ +.warning { background-color: #ffc; padding: 0.375em 0.625em; /* 6px 10px /16 */ } \ No newline at end of file diff --git a/css/prism-base16-monokai.dark.css b/css/prism-base16-monokai.dark.css new file mode 100644 index 0000000..7a872a7 --- /dev/null +++ b/css/prism-base16-monokai.dark.css @@ -0,0 +1,89 @@ +code[class*="language-"], pre[class*="language-"] { + font-size: 14px; + line-height: 1.375; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + -moz-tab-size: 2; + -o-tab-size: 2; + tab-size: 2; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; + background: #272822; + color: #f8f8f2; +} +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; +} +.token.comment, .token.prolog, .token.doctype, .token.cdata { + color: #75715e; +} +.token.punctuation { + color: #f8f8f2; +} +.token.namespace { + opacity: .7; +} +.token.operator, .token.boolean, .token.number { + color: #fd971f; +} +.token.property { + color: #f4bf75; +} +.token.tag { + color: #66d9ef; +} +.token.string { + color: #a1efe4; +} +.token.selector { + color: #ae81ff; +} +.token.attr-name { + color: #fd971f; +} +.token.entity, .token.url, .language-css .token.string, .style .token.string { + color: #a1efe4; +} +.token.attr-value, .token.keyword, .token.control, .token.directive, .token.unit { + color: #a6e22e; +} +.token.statement, .token.regex, .token.atrule { + color: #a1efe4; +} +.token.placeholder, .token.variable { + color: #66d9ef; +} +.token.deleted { + text-decoration: line-through; +} +.token.inserted { + border-bottom: 1px dotted #f9f8f5; + text-decoration: none; +} +.token.italic { + font-style: italic; +} +.token.important, .token.bold { + font-weight: bold; +} +.token.important { + color: #f92672; +} +.token.entity { + cursor: help; +} +pre > code.highlight { + outline: 0.4em solid #f92672; + outline-offset: .4em; +} diff --git a/feed/feed.njk b/feed/feed.njk index 3e6a339..7f7d372 100644 --- a/feed/feed.njk +++ b/feed/feed.njk @@ -7,13 +7,13 @@ permalink: feed/atom.xml {{ metadata.feed.subtitle }} - {{ collections.post | lastUpdatedDate }} + {{ collections.posts | rssLastUpdatedDate }} {{ metadata.feed.id }} {{ metadata.author.name }} {{ metadata.author.email }} - {% for post in collections.post %} + {% for post in collections.posts %} {{ post.data.title }} diff --git a/index.njk b/index.njk index 7d420ec..1777ba0 100644 --- a/index.njk +++ b/index.njk @@ -4,10 +4,10 @@ tags: nav navtitle: Home --- -
+
Now edit the _data/metadata.json with your blog’s information—and delete this message from index.njk.
-{% set postslist = collections.post %} +{% set postslist = collections.posts %} {% include "postslist.njk" %} diff --git a/package.json b/package.json index 356ebcf..0312996 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,7 @@ "homepage": "https://github.com/11ty/eleventy-base-blog#readme", "devDependencies": { "@11ty/eleventy": "file:../eleventy", - "luxon": "^0.3.1" + "luxon": "^0.3.1", + "prismjs": "^1.10.0" } }