diff options
Update deps and updated the about page.
On branch main
Your branch is up to date with 'origin/main'.
Changes to be committed:
modified: 404.html
modified: _includes/base.html
new file: _includes/main.css
modified: _includes/page.html
modified: _includes/post.html
modified: about.html
deleted: assets/main.css
deleted: atom.xml.njk
modified: eleventy.config.js
modified: index.html
modified: package-lock.json
modified: package.json
modified: posts.html
modified: posts/posts.11tydata.js
Diffstat (limited to '_includes')
| -rw-r--r-- | _includes/base.html | 38 | ||||
| -rw-r--r-- | _includes/main.css | 112 | ||||
| -rw-r--r-- | _includes/page.html | 6 | ||||
| -rw-r--r-- | _includes/post.html | 22 |
4 files changed, 144 insertions, 34 deletions
diff --git a/_includes/base.html b/_includes/base.html index 36d9821..0ca185f 100644 --- a/_includes/base.html +++ b/_includes/base.html @@ -4,41 +4,41 @@ } --- <!doctype html> -<html lang="{{ metadata.language }}"> +<html :lang="metadata.language"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="color-scheme" content="light dark"> - <meta name="generator" content="{{ eleventy.generator }}"> - <title property="og:title">{{ title or metadata.title }}</title> - <meta property="og:locale" content="{{ metadata.language }}"> - <meta name="theme-color" content="{{ metadata.theme }}"> - <meta name="description" property="og:description" content="{{ description or metadata.description }}"> - <meta property="og:url" content="{{ page.url | htmlBaseUrl(metadata.url) }}"> - <link rel="canonical" href="{{ page.url | htmlBaseUrl(metadata.url) }}"> - <meta property="og:site_name" content="{{ metadata.title }}"> - <meta name="author" content="{{ metadata.author.name }}"> + <meta name="generator" :content="eleventy.generator"> + <title property="og:title" @text="title || metadata.title"></title> + <meta property="og:locale" :content="metadata.language"> + <meta name="theme-color" :content="metadata.theme"> + <meta name="description" :property="og:description" :content="description || metadata.description"> + <meta property="og:url" :content="htmlBaseUrl(page.url, metadata.url)"> + <link rel="canonical" href="htmlBaseUrl(page.url, metadata.url)"> + <meta property="og:site_name" :content="metadata.title"> + <meta name="author" :content="metadata.author.name"> <meta property="og:type" content="website"> <meta name="twitter:card" content="summary"> - <link rel="alternate" href="{{ metadata.feed.atom }}" type="application/atom+xml" title="{{ metadata.title }}"> + <link rel="alternate" href="/atom.xml" type="application/atom+xml" :title="metadata.title"> <link rel="icon" href="/favicon.svg" type="image/svg+xml"> - {%- css %}{% include "assets/main.css" %}{% endcss %} - <link rel="stylesheet" href="{% getBundleFileUrl 'css' %}"> + <link rel="stylesheet" href="../node_modules/modern-normalize/modern-normalize.css" /> + <link rel="stylesheet" href="../node_modules/prismjs/themes/prism-okaidia.css" /> + <link rel="stylesheet" href="main.css" /> + <link rel="stylesheet" :href="getBundleFileUrl('css')" webc:keep /> </head> <body> <header> <nav> <a href="#">Sudomsg</a> - {%- for entry in collections.all | eleventyNavigation %} - <a href="{{ entry.url }}">{{ entry.title }}</a> - {%- endfor %} + <template webc:for="entry of eleventyNavigation(collections.all)" webc:nokeep> + <a :href="entry.url" @text="entry.title"></a> + </template> </nav> </header> - <main> - {{ content |safe }} - </main> + <main @html="content"></main> <footer> Subscribe - <a href="/atom.xml">Atom</a> </footer> diff --git a/_includes/main.css b/_includes/main.css new file mode 100644 index 0000000..0f94c46 --- /dev/null +++ b/_includes/main.css @@ -0,0 +1,112 @@ +html { + accent-color: darkred; + text-align: justify; +} + +* :any-link { + color: inherit; + text-decoration: underline; +} + +aside { + max-width: max(40%, 12rem); + background: darkred; + color: white; + float: right; + margin: 1rem; + padding: 0.5rem; +} + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + max-width: 100%; + width: fit-content; + padding: 1rem; + margin: auto; +} + +img, +svg, +video, +canvas { + height: auto; +} + +picture { + display: contents; +} + +@media screen { + + * :any-link:hover, + * :any-link:active { + font-style: italic; + } + + body { + max-width: min(100dvw, 58rem); + min-height: 100dvh; + padding: 0.5rem; + margin-left: auto; + margin-right: auto; + grid-template-columns: 1fr; + grid-template-rows: auto 1fr auto; + grid-template-areas: + 'header' + 'main' + 'footer'; + display: grid; + } + + :is(header, footer) { + padding: 1rem; + font-weight: bolder; + background-color: darkred; + } + + :is(header, footer) *:any-link { + text-decoration: none; + } + + header { + grid-area: header; + } + + main { + grid-area: main; + } + + footer { + align-self: end; + grid-area: footer; + } + + nav>a { + margin-right: 0.5rem; + } +} + +@media print { + + header, + footer { + display: none; + } + + section, + table { + orphans: 4; + break-inside: auto; + } + + tr { + break-inside: avoid; + break-before: auto; + } +} diff --git a/_includes/page.html b/_includes/page.html index 77f888b..2439e37 100644 --- a/_includes/page.html +++ b/_includes/page.html @@ -1,9 +1,9 @@ ---json { -"layout": "base.html" +"layout": "base" } --- <article> - <h1>{{ title }}</h1> - {{ content | safe }} + <h1 @text="title"></h1> + <template @html="content" webc:nokeep /> </article> diff --git a/_includes/post.html b/_includes/post.html index bbe28d9..baecde7 100644 --- a/_includes/post.html +++ b/_includes/post.html @@ -1,21 +1,19 @@ ---json { -"layout": "base.html", -"tags": [ -"post" -] +"layout": "base" } --- -<article itemscope itemtype={% schema "BlogPosting" %}> - <h1>{{ title }}</h1> +<article itemscope :itemtype="schema('BlogPosting')"> + <h1 @text="title"></h1> <small> - <time datetime="{{ page.date | htmlDateString }}" itemprop="datePublished">{{ page.date | readableDate - }}</time> - - <span itemprop="author" itemscope itemtype="{% schema " Person" %}> - <a href="{{metadata.author.url}}" rel="author" itemprop="url"> - <span itemprop="name">{{metadata.author.name}}</span> + <time :datetime="htmlDateString(page.date)" itemprop="datePublished" + @text="readableDate(page.date)"></time> + - <span itemprop="author" itemscope :itemtype="schema('Person')"> + <a :href="metadata.author.url" rel="author" itemprop="url"> + <span itemprop="name" @text="metadata.author.name"></span> </a> </span> </small> - <div temprop: "articleBody">{{ content | safe }}</div> + <p><small itemprop="abstract" @content="(description"></small></p> + <div itemprop="articleBody" @html="content" /> </article> |