This commit is contained in:
Zach Leatherman 2018-01-22 22:53:46 -06:00
parent b9c0d87306
commit 14655cb1c4
8 changed files with 200 additions and 11 deletions

View File

@ -1,11 +1,11 @@
<!doctype html>
<html lang="en"{% if templateClass %} class="{{ templateClass }}"{% endif %}>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{ title or metadata.title }}</title>
<link rel="stylesheet" href="/css/index.css">
<link rel="stylesheet" href="/posts/posts.css">
<link rel="stylesheet" href="/css/prism-base16-monokai.dark.css">
<link rel="alternate" href="/feed/" type="application/atom+xml" title="{{ title }}">
</head>
<body>
@ -18,7 +18,7 @@
</ul>
</header>
<main>
<main{% if templateClass %} class="{{ templateClass }}"{% endif %}>
{{ layoutContent | safe }}
</main>

View File

@ -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(`<pre class="language-${this.language}"><code class="language-${this.language}">\n` + tokens + "\n</code></pre>");
}
}
};

View File

@ -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(`<pre class="language-${this.language}"><code class="language-${this.language}">` + html + "</code></pre>");
}
}
};

View File

@ -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 */
}

View File

@ -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;
}

View File

@ -7,13 +7,13 @@ permalink: feed/atom.xml
<subtitle>{{ metadata.feed.subtitle }}</subtitle>
<link href="{{ metadata.feed.url }}" rel="self"/>
<link href="{{ metadata.url }}"/>
<updated>{{ collections.post | lastUpdatedDate }}</updated>
<updated>{{ collections.posts | rssLastUpdatedDate }}</updated>
<id>{{ metadata.feed.id }}</id>
<author>
<name>{{ metadata.author.name }}</name>
<email>{{ metadata.author.email }}</email>
</author>
{% for post in collections.post %}
{% for post in collections.posts %}
<entry>
<title>{{ post.data.title }}</title>
<link href="{{ metadata.url }}{{ post.url }}"/>

View File

@ -4,10 +4,10 @@ tags: nav
navtitle: Home
---
<div class="next-steps">
<div class="warning">
Now edit the <code>_data/metadata.json</code> with your blogs information—and delete this message from <code>index.njk</code>.
</div>
{% set postslist = collections.post %}
{% set postslist = collections.posts %}
{% include "postslist.njk" %}

View File

@ -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"
}
}