10-print header works :)
I had to pin @thi.ng/hiccup to an earlier version because they stopped publishing CommonJS modules. There is [an issue tracking EcmaScript module support in 11ty](https://github.com/11ty/eleventy/issues/836) but it has not been fixed yet and other solutions broke unpredictably by messing with template inheritance.
This commit is contained in:
parent
cd96716515
commit
9024c00b1a
7 changed files with 67 additions and 20 deletions
|
|
@ -1,4 +1,5 @@
|
||||||
const { DateTime } = require('luxon')
|
const { DateTime } = require('luxon')
|
||||||
|
const header = require('./src/_helpers/header')
|
||||||
|
|
||||||
module.exports = function (config) {
|
module.exports = function (config) {
|
||||||
config.setBrowserSyncConfig({
|
config.setBrowserSyncConfig({
|
||||||
|
|
@ -10,6 +11,7 @@ module.exports = function (config) {
|
||||||
// template filters
|
// template filters
|
||||||
config.addFilter('toJSON', obj => JSON.stringify(obj))
|
config.addFilter('toJSON', obj => JSON.stringify(obj))
|
||||||
config.addFilter('toISODate', date => DateTime.fromJSDate(date).toISODate())
|
config.addFilter('toISODate', date => DateTime.fromJSDate(date).toISODate())
|
||||||
|
config.addFilter('header', header)
|
||||||
|
|
||||||
// returns classes to be used on <body>, given a page's url
|
// returns classes to be used on <body>, given a page's url
|
||||||
config.addFilter('pageClasses', url => {
|
config.addFilter('pageClasses', url => {
|
||||||
|
|
|
||||||
|
|
@ -10,6 +10,7 @@
|
||||||
"build": "pnpm build:sass && pnpm build:eleventy",
|
"build": "pnpm build:sass && pnpm build:eleventy",
|
||||||
"watch:eleventy": "eleventy --serve --input=src/",
|
"watch:eleventy": "eleventy --serve --input=src/",
|
||||||
"watch:sass": "ls src/**/*.{scss,sass} 2>/dev/null | entr pnpm build:sass",
|
"watch:sass": "ls src/**/*.{scss,sass} 2>/dev/null | entr pnpm build:sass",
|
||||||
|
"watch": "scripts/serve.sh",
|
||||||
"start": "scripts/serve.sh"
|
"start": "scripts/serve.sh"
|
||||||
},
|
},
|
||||||
"keywords": [],
|
"keywords": [],
|
||||||
|
|
@ -17,6 +18,9 @@
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^1.0.0",
|
"@11ty/eleventy": "^1.0.0",
|
||||||
"luxon": "^2.3.0"
|
"@thi.ng/hiccup": "3.6.22",
|
||||||
|
"lodash": "^4.17.21",
|
||||||
|
"luxon": "^2.3.0",
|
||||||
|
"seedrandom": "^3.0.5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
36
pnpm-lock.yaml
generated
36
pnpm-lock.yaml
generated
|
|
@ -2,11 +2,17 @@ lockfileVersion: 5.3
|
||||||
|
|
||||||
specifiers:
|
specifiers:
|
||||||
'@11ty/eleventy': ^1.0.0
|
'@11ty/eleventy': ^1.0.0
|
||||||
|
'@thi.ng/hiccup': 3.6.22
|
||||||
|
lodash: ^4.17.21
|
||||||
luxon: ^2.3.0
|
luxon: ^2.3.0
|
||||||
|
seedrandom: ^3.0.5
|
||||||
|
|
||||||
devDependencies:
|
devDependencies:
|
||||||
'@11ty/eleventy': 1.0.0
|
'@11ty/eleventy': 1.0.0
|
||||||
|
'@thi.ng/hiccup': 3.6.22
|
||||||
|
lodash: 4.17.21
|
||||||
luxon: 2.3.0
|
luxon: 2.3.0
|
||||||
|
seedrandom: 3.0.5
|
||||||
|
|
||||||
packages:
|
packages:
|
||||||
|
|
||||||
|
|
@ -117,6 +123,28 @@ packages:
|
||||||
lodash.deburr: 4.1.0
|
lodash.deburr: 4.1.0
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/@thi.ng/api/7.2.0:
|
||||||
|
resolution: {integrity: sha512-4NcwHXxwPF/JgJG/jSFd9rjfQNguF0QrHvd6e+CEf4T0sFChqetW6ZmJ6/a2X+noDVntgulegA+Bx0HHzw+Tyw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@thi.ng/checks/2.9.11:
|
||||||
|
resolution: {integrity: sha512-fBvWod32w24JlJsrrOdl+tlx+UNehCORi4rHaJ7l7HH+SEhD/lYTCXOBjwu9D/ztIUjMP5Q+n8cAqI5iPhbvAQ==}
|
||||||
|
dependencies:
|
||||||
|
tslib: 2.3.1
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@thi.ng/errors/1.3.4:
|
||||||
|
resolution: {integrity: sha512-hTk71OPKnioN349sdj2DAoY+69eSerB3MN4Zwz6mosr1QFzIMkfkNOtBeC+Gm0yi0V0EY5LeBYFgqb3oXbtTbw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
|
/@thi.ng/hiccup/3.6.22:
|
||||||
|
resolution: {integrity: sha512-Ev6SzcjJyNVtvwFcNVRQ4wM2TZQA2gPmJIUOvP5i3q/S2qOnq6L+h7XhDkDV6wAs8gl6eu3KRBbcbTpZabAe7w==}
|
||||||
|
dependencies:
|
||||||
|
'@thi.ng/api': 7.2.0
|
||||||
|
'@thi.ng/checks': 2.9.11
|
||||||
|
'@thi.ng/errors': 1.3.4
|
||||||
|
dev: true
|
||||||
|
|
||||||
/@types/minimatch/3.0.5:
|
/@types/minimatch/3.0.5:
|
||||||
resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
|
resolution: {integrity: sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -1742,6 +1770,10 @@ packages:
|
||||||
kind-of: 6.0.3
|
kind-of: 6.0.3
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/seedrandom/3.0.5:
|
||||||
|
resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/semver-compare/1.0.0:
|
/semver-compare/1.0.0:
|
||||||
resolution: {integrity: sha1-De4hahyUGrN+nvsXiPavxf9VN/w=}
|
resolution: {integrity: sha1-De4hahyUGrN+nvsXiPavxf9VN/w=}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
@ -1999,6 +2031,10 @@ packages:
|
||||||
resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
|
resolution: {integrity: sha1-zCAOqyYT9BZtJ/+a/HylbUnfbrQ=}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
||||||
|
/tslib/2.3.1:
|
||||||
|
resolution: {integrity: sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==}
|
||||||
|
dev: true
|
||||||
|
|
||||||
/ua-parser-js/1.0.2:
|
/ua-parser-js/1.0.2:
|
||||||
resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==}
|
resolution: {integrity: sha512-00y/AXhx0/SsnI51fTc0rLRmafiGOM4/O+ny10Ps7f+j/b8p/ZY11ytMgznXkOVo4GQ+KwQG5UQLkLGirsACRg==}
|
||||||
dev: true
|
dev: true
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
const crypto = require('crypto')
|
const crypto = require('crypto')
|
||||||
const seedrandom = require('seedrandom')
|
const seedrandom = require('seedrandom')
|
||||||
const { range } = require('lodash')
|
const { range } = require('lodash')
|
||||||
// const { serialize } = require('@thi.ng/hiccup')
|
const { serialize } = require('@thi.ng/hiccup')
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Given a pair of coordinates representing the center, returns the cartesian
|
* Given a pair of coordinates representing the center, returns the cartesian
|
||||||
|
|
@ -16,7 +16,7 @@ const { range } = require('lodash')
|
||||||
*/
|
*/
|
||||||
const polarToCartesian = (cx, cy, radius, alpha) =>
|
const polarToCartesian = (cx, cy, radius, alpha) =>
|
||||||
[cx + (radius * Math.cos(alpha)),
|
[cx + (radius * Math.cos(alpha)),
|
||||||
cy + (radius * Math.cos(alpha))]
|
cy + (radius * Math.sin(alpha))]
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Draws an svg arc with the given radius with a center at `c-x` and `c-y`. Note
|
* Draws an svg arc with the given radius with a center at `c-x` and `c-y`. Note
|
||||||
|
|
@ -59,8 +59,8 @@ const tenPrint = content => {
|
||||||
return ["svg.ten-print",
|
return ["svg.ten-print",
|
||||||
{"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`,
|
{"viewBox": `${-radius} ${-radius} ${width + 2*radius} ${height + 2*radius}`,
|
||||||
"xmlns": "http://www.w3.org/2000/svg",
|
"xmlns": "http://www.w3.org/2000/svg",
|
||||||
"style": "overflow: visible"}
|
"style": "overflow: visible"},
|
||||||
["style", "path { fill: none; stroke: none; }"] // avoid flash of unstyled content
|
["style", "path { fill: none; stroke: none; }"], // avoid flash of unstyled content
|
||||||
["g", {"transform": "translate(0.5, 0.5"},
|
["g", {"transform": "translate(0.5, 0.5"},
|
||||||
ys.map(y =>
|
ys.map(y =>
|
||||||
xs.map(x => {
|
xs.map(x => {
|
||||||
|
|
@ -70,4 +70,4 @@ const tenPrint = content => {
|
||||||
)]]
|
)]]
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = content => content
|
module.exports = content => serialize(tenPrint(content || ''))
|
||||||
|
|
@ -1,5 +1,9 @@
|
||||||
{% extends "root.njk" %}
|
{% extends "root.njk" %}
|
||||||
|
|
||||||
{% block navigation %}
|
{% block sidebar %}
|
||||||
|
<dl>
|
||||||
|
<dt>Last change</dt>
|
||||||
|
<dd><time datetime="{{page.date}}">{{page.date | toISODate}}</time></dd>
|
||||||
|
</dl>
|
||||||
<a href="{{ "/" | url }}">← Home</a>
|
<a href="{{ "/" | url }}">← Home</a>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
|
|
@ -1,21 +1,20 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>{{ page.title }}</title>
|
<title>{% if data.tite %}{{ data.title }} | {% endif %}{{ page.title }}</title>
|
||||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌌</text></svg>">
|
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🌌</text></svg>">
|
||||||
<link rel="stylesheet" href="{{ '/assets/style.css' | url }}" />
|
<link rel="stylesheet" href="{{ '/assets/style.css' | url }}" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<main class="{{ page.url | pageClasses }}">
|
<main class="{{ page.url | pageClasses }}">
|
||||||
<header></header>
|
<header>{{ content | header | safe }}</header>
|
||||||
<nav>
|
<aside>
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
{% block navigation %}
|
{% block sidebar %}
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
</nav>
|
</aside>
|
||||||
<article>
|
<article>
|
||||||
{{ content | safe }}
|
{{ content | safe }}
|
||||||
</article>
|
</article>
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
{% extends "root.njk" %}
|
{% extends "root.njk" %}
|
||||||
|
|
||||||
{% block navigation %}
|
{% block sidebar %}
|
||||||
<h2>Recent Posts</h2>
|
<nav>
|
||||||
<ul>
|
<h2>Recent Posts</h2>
|
||||||
|
<ul>
|
||||||
{%- for post in (collections.posts | reverse) -%}
|
{%- for post in (collections.posts | reverse) -%}
|
||||||
<li{% if page.url == post.url %} aria-current="page"{% endif %}><time datetime="{{post.date}}">{{ post.date | toISODate }}</time> -- <a href="{{post.url}}">{{ post.data.title }}</a></li>
|
<li{% if page.url == post.url %} aria-current="page"{% endif %}><time datetime="{{post.date}}">{{ post.date | toISODate }}</time> -- <a href="{{post.url}}">{{ post.data.title }}</a></li>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
{% endblock %}
|
{% endblock %}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue