blog: post layout improvements
parent
10bfb88a0e
commit
bea3c64d0f
|
@ -1,5 +1,6 @@
|
|||
const syntaxHighlight = require('@11ty/eleventy-plugin-syntaxhighlight')
|
||||
const pluginRss = require('@11ty/eleventy-plugin-rss');
|
||||
const timeToRead = require('eleventy-plugin-time-to-read');
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
const parseDate = (str) => {
|
||||
|
@ -12,8 +13,9 @@ module.exports = function (eleventyConfig) {
|
|||
const formatPart = (part, date) =>
|
||||
new Intl.DateTimeFormat("en", part).format(date);
|
||||
|
||||
eleventyConfig.addPlugin(pluginRss)
|
||||
eleventyConfig.addPlugin(syntaxHighlight)
|
||||
eleventyConfig.addPlugin(pluginRss);
|
||||
eleventyConfig.addPlugin(syntaxHighlight);
|
||||
eleventyConfig.addPlugin(timeToRead);
|
||||
|
||||
eleventyConfig.addPassthroughCopy({ "src/static": "/" });
|
||||
|
||||
|
|
|
@ -10,7 +10,8 @@
|
|||
"dependencies": {
|
||||
"@11ty/eleventy": "^v2.0.0-beta.1",
|
||||
"@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": {
|
||||
|
@ -705,6 +706,22 @@
|
|||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
|
@ -2795,6 +2812,12 @@
|
|||
"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": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/encodeurl/-/encodeurl-1.0.2.tgz",
|
||||
|
|
|
@ -10,6 +10,7 @@
|
|||
"dependencies": {
|
||||
"@11ty/eleventy": "^v2.0.0-beta.1",
|
||||
"@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 %}
|
||||
<small class="updated">(updated <time datetime="{{changed_date | date_to_datetime }}">{{ changed_date | date_formatted }}</time>)</small>
|
||||
{% 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 class="middot"></span>
|
||||
{% if tags %}
|
||||
<span>in
|
||||
{% for tag in tags %}
|
||||
|
|
|
@ -11,8 +11,27 @@ permalink: /posts/{% if pagination.pageNumber > 0 %}page/{{ pagination.pageNumbe
|
|||
{% block main %}
|
||||
<ul>
|
||||
{% for entry in pagination.items %}
|
||||
<li>
|
||||
<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>
|
||||
<li class="list-entry">
|
||||
<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>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
|
|
@ -41,6 +41,14 @@ footer,
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.list-entry {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.list-entry h2 {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
#content {
|
||||
max-width: 900px;
|
||||
margin-left: auto;
|
||||
|
@ -53,6 +61,11 @@ footer,
|
|||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.middot::after {
|
||||
content: '\00B7';
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
time,
|
||||
.author,
|
||||
.updated {
|
||||
|
|
|
@ -20,8 +20,25 @@ date: git Last Modified
|
|||
<ul>
|
||||
{% set taglist = collections[ tag ] %}
|
||||
{% for entry in taglist | reverse %}
|
||||
<li>
|
||||
<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>
|
||||
<li class="list-entry">
|
||||
<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>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 %}
|
||||
</ul>
|
||||
|
|
Loading…
Reference in New Issue