blog: post layout improvements
parent
10bfb88a0e
commit
bea3c64d0f
|
@ -1,5 +1,6 @@
|
||||||
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
|
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
|
||||||
const pluginRss = require('@11ty/eleventy-plugin-rss');
|
const pluginRss = require('@11ty/eleventy-plugin-rss');
|
||||||
|
const timeToRead = require('eleventy-plugin-time-to-read');
|
||||||
|
|
||||||
module.exports = function (eleventyConfig) {
|
module.exports = function (eleventyConfig) {
|
||||||
const parseDate = (str) => {
|
const parseDate = (str) => {
|
||||||
|
@ -12,8 +13,9 @@ module.exports = function (eleventyConfig) {
|
||||||
const formatPart = (part, date) =>
|
const formatPart = (part, date) =>
|
||||||
new Intl.DateTimeFormat("en", part).format(date);
|
new Intl.DateTimeFormat("en", part).format(date);
|
||||||
|
|
||||||
eleventyConfig.addPlugin(pluginRss)
|
eleventyConfig.addPlugin(pluginRss);
|
||||||
eleventyConfig.addPlugin(syntaxHighlight)
|
eleventyConfig.addPlugin(syntaxHighlight);
|
||||||
|
eleventyConfig.addPlugin(timeToRead);
|
||||||
|
|
||||||
eleventyConfig.addPassthroughCopy({ "src/static": "/" });
|
eleventyConfig.addPassthroughCopy({ "src/static": "/" });
|
||||||
|
|
||||||
|
|
|
@ -10,7 +10,8 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@11ty/eleventy": "^v2.0.0-beta.1",
|
"@11ty/eleventy": "^v2.0.0-beta.1",
|
||||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0"
|
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||||
|
"eleventy-plugin-time-to-read": "^1.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@11ty/dependency-tree": {
|
"node_modules/@11ty/dependency-tree": {
|
||||||
|
@ -705,6 +706,22 @@
|
||||||
"node": ">=0.10.0"
|
"node": ">=0.10.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/eleventy-plugin-time-to-read": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/eleventy-plugin-time-to-read/-/eleventy-plugin-time-to-read-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-EefxYZJviQbClwoQ+pXW0YsVoi3gzXJ3prJoOLO1g3n5dM17KyZh81/yyq5Inrdc2pxBz3CXsyo21kk43gK/Gg==",
|
||||||
|
"engines": {
|
||||||
|
"node": ">=13.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@11ty/eleventy": "*"
|
||||||
|
},
|
||||||
|
"peerDependenciesMeta": {
|
||||||
|
"@11ty/eleventy": {
|
||||||
|
"optional": true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/encodeurl": {
|
"node_modules/encodeurl": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||||
|
@ -2795,6 +2812,12 @@
|
||||||
"jake": "^10.8.5"
|
"jake": "^10.8.5"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"eleventy-plugin-time-to-read": {
|
||||||
|
"version": "1.3.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/eleventy-plugin-time-to-read/-/eleventy-plugin-time-to-read-1.3.0.tgz",
|
||||||
|
"integrity": "sha512-EefxYZJviQbClwoQ+pXW0YsVoi3gzXJ3prJoOLO1g3n5dM17KyZh81/yyq5Inrdc2pxBz3CXsyo21kk43gK/Gg==",
|
||||||
|
"requires": {}
|
||||||
|
},
|
||||||
"encodeurl": {
|
"encodeurl": {
|
||||||
"version": "1.0.2",
|
"version": "1.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||||
|
|
|
@ -10,6 +10,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@11ty/eleventy": "^v2.0.0-beta.1",
|
"@11ty/eleventy": "^v2.0.0-beta.1",
|
||||||
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
"@11ty/eleventy-plugin-rss": "^1.2.0",
|
||||||
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0"
|
"@11ty/eleventy-plugin-syntaxhighlight": "^4.0.0",
|
||||||
|
"eleventy-plugin-time-to-read": "^1.3.0"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,11 @@ subhead: blog
|
||||||
{% if changed_date %}
|
{% if changed_date %}
|
||||||
<small class="updated">(updated <time datetime="{{changed_date | date_to_datetime }}">{{ changed_date | date_formatted }}</time>)</small>
|
<small class="updated">(updated <time datetime="{{changed_date | date_to_datetime }}">{{ changed_date | date_formatted }}</time>)</small>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
<span class="middot"></span>
|
||||||
|
<span class="readtime">{{ content | timeToRead }} to read</span>
|
||||||
|
<span class="middot"></span>
|
||||||
<span>by <span class="author by" id="author">{{ site.name }}</span></span>
|
<span>by <span class="author by" id="author">{{ site.name }}</span></span>
|
||||||
|
<span class="middot"></span>
|
||||||
{% if tags %}
|
{% if tags %}
|
||||||
<span>in
|
<span>in
|
||||||
{% for tag in tags %}
|
{% for tag in tags %}
|
||||||
|
|
|
@ -11,8 +11,27 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
|
||||||
{% block main %}
|
{% block main %}
|
||||||
<ul>
|
<ul>
|
||||||
{% for entry in pagination.items %}
|
{% for entry in pagination.items %}
|
||||||
<li>
|
<li class="list-entry">
|
||||||
<span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
|
<a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
|
||||||
|
<div class="byline">
|
||||||
|
<time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
|
||||||
|
{% if entry.data.changed_date %}
|
||||||
|
<small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
|
||||||
|
{% endif %}
|
||||||
|
<span class="middot"></span>
|
||||||
|
<span class="readtime">{{ entry.content | timeToRead }} to read</span>
|
||||||
|
<span class="middot"></span>
|
||||||
|
<span>by <span class="author by" id="author">{{ site.name }}</span></span>
|
||||||
|
<span class="middot"></span>
|
||||||
|
{% if entry.data.tags %}
|
||||||
|
<span>in
|
||||||
|
{% for tag in entry.data.tags %}
|
||||||
|
<span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<span class="lead"><strong>{{ entry.data.description }}</strong></span>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
|
@ -41,6 +41,14 @@ footer,
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.list-entry {
|
||||||
|
list-style-type: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-entry h2 {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
#content {
|
#content {
|
||||||
max-width: 900px;
|
max-width: 900px;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
@ -53,6 +61,11 @@ footer,
|
||||||
font-size: 0.75rem;
|
font-size: 0.75rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.middot::after {
|
||||||
|
content: '\00B7';
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
time,
|
time,
|
||||||
.author,
|
.author,
|
||||||
.updated {
|
.updated {
|
||||||
|
|
|
@ -20,9 +20,26 @@ date: git Last Modified
|
||||||
<ul>
|
<ul>
|
||||||
{% set taglist = collections[ tag ] %}
|
{% set taglist = collections[ tag ] %}
|
||||||
{% for entry in taglist | reverse %}
|
{% for entry in taglist | reverse %}
|
||||||
<li>
|
<li class="list-entry">
|
||||||
<span><a href="{{ entry.url }}">{{ entry.data.title }}</a> on <span><time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time></span></span>
|
<a href="{{ entry.url }}"><h2>{{ entry.data.title }}</h2></a>
|
||||||
</li>
|
<div class="byline">
|
||||||
|
<time datetime="{{ entry.page.date | date_to_datetime }}">{{ entry.page.date | date_formatted }}</time>
|
||||||
|
{% if entry.data.changed_date %}
|
||||||
|
<small class="updated">(updated <time datetime="{{ entry.data.changed_date | date_to_datetime }}">{{ entry.data.changed_date | date_formatted }}</time>)</small>
|
||||||
|
{% endif %}
|
||||||
|
<span class="middot"></span>
|
||||||
|
<span>by <span class="author by" id="author">{{ site.name }}</span></span>
|
||||||
|
<span class="middot"></span>
|
||||||
|
{% if entry.data.tags %}
|
||||||
|
<span>in
|
||||||
|
{% for tag in entry.data.tags %}
|
||||||
|
<span class="tag"><a href="/posts/tagged/{{ tag | slugify }}/">{{ tag }}</a></span>{% if not loop.last %}, {% endif %}
|
||||||
|
{% endfor %}
|
||||||
|
</span>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
<span class="lead"><strong>{{ entry.data.description }}</strong></span>
|
||||||
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in New Issue