Fixes #3
Zach Leatherman
parent
b9c0d87306
commit
14655cb1c4
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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>");
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -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 */
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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 }}"/>
|
||||
|
|
|
|||
|
|
@ -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 blog’s information—and delete this message from <code>index.njk</code>.
|
||||
</div>
|
||||
|
||||
{% set postslist = collections.post %}
|
||||
{% set postslist = collections.posts %}
|
||||
{% include "postslist.njk" %}
|
||||
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue