Set up a basic page hierarchy

This commit is contained in:
arne 2022-02-20 13:18:07 +01:00
commit 9001771f1c
10 changed files with 54 additions and 20 deletions

View file

@ -5,6 +5,19 @@ module.exports = function (config) {
files: './_site/assets/*.css' files: './_site/assets/*.css'
}) })
config.addFilter("toISODate", (dateObj) => config.addPassthroughCopy("src/assets/ibm-plex/IBM-Plex-Mono/fonts/**/*")
DateTime.fromJSDate(dateObj).toISODate())
// template filters
config.addFilter('toJSON', obj => JSON.stringify(obj))
config.addFilter('toISODate', date => DateTime.fromJSDate(date).toISODate())
// returns classes to be used on <body>, given a page's url
config.addFilter('pageClasses', url => {
const segments = url.split('/').filter(s => s)
return segments.length ? segments.join(' ') : 'home'
})
return {
markdownTemplateEngine: "njk"
}
} }

View file

@ -8,7 +8,7 @@
"build:eleventy": "eleventy --input=src/", "build:eleventy": "eleventy --input=src/",
"build:sass": "mkdir -p _site/assets/ && sassc src/assets/style.scss > _site/assets/style.css", "build:sass": "mkdir -p _site/assets/ && sassc src/assets/style.scss > _site/assets/style.css",
"build": "pnpm build:sass && pnpm build:eleventy", "build": "pnpm build:sass && pnpm build:eleventy",
"watch:eleventy": "eleventy --serve --input=src/ --incremental", "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",
"start": "scripts/serve.sh" "start": "scripts/serve.sh"
}, },

View file

@ -1 +0,0 @@
# Page header

6
src/_data/page.js Normal file
View file

@ -0,0 +1,6 @@
module.exports = config => {
return {
"title": "arnes.space",
"baseUrl": "https://arnes.space"
}
}

5
src/_includes/posts.njk Normal file
View file

@ -0,0 +1,5 @@
{% extends "root.njk" %}
{% block navigation %}
<a href="{{ "/" | url }}">← Home</a>
{% endblock %}

View file

@ -1,23 +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>{{ title }}</title> <title>{{ 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" /> <link rel="stylesheet" href="{{ '/assets/style.css' | url }}" />
</head> </head>
<body> <body>
<main class="home"> <main class="{{ page.url | pageClasses }}">
<header></header> <header></header>
<nav> <nav>
<h1>arnes.space</h1> <h1>{{ page.title }}</h1>
<h2>Recent Posts</h2> {% block navigation %}
<ul> {% endblock %}
{%- for post in collections.post -%}
<li{% if page.url == post.url %} aria-current="page"{% endif %}>{{ post.date | toISODate }} -- <a href="{{post.url}}">{{ post.data.title }}</a></li>
{%- endfor -%}
</ul>
</nav> </nav>
<article> <article>
{{ content | safe }} {{ content | safe }}

View file

@ -20,7 +20,8 @@ html, body {
body { body {
background: #fefefe; background: #fefefe;
font-family: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace; color: #222;
font-family: monospace;
font-size: 16px; font-size: 16px;
line-height: 1.5; line-height: 1.5;
} }
@ -93,6 +94,10 @@ nav {
article { article {
grid-area: content; grid-area: content;
h2 {
padding: 16px 0
}
ul { ul {
padding: 0 0 0 16px; padding: 0 0 0 16px;
margin: 0 0 32px; margin: 0 0 32px;

View file

@ -1,4 +0,0 @@
---
layout: layout.njk
---
# Hello, World!

10
src/index.njk Normal file
View file

@ -0,0 +1,10 @@
{% extends "root.njk" %}
{% block navigation %}
<h2>Recent Posts</h2>
<ul>
{%- 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>
{%- endfor -%}
</ul>
{% endblock %}

View file

@ -1 +1,4 @@
{"tags": "post"} {
"tags": "posts",
"layout": "posts.njk"
}