Update style

10 files changed, 386 insertions, 340 deletions

diff --git a/deploy.sh b/build-and-deploy.sh
index 44c32dd..4f271c7 100755
--- a/deploy.sh
+++ b/build-and-deploy.sh
@@ -1,4 +1,8 @@
 #!/bin/bash
 
 set -euxo pipefail
+
+ulimit -n 8192
+./update-linklog-json.sh
+csi -s main.scm
 rsync -rvzP --delete --chown 80:80 out/* $RSYNC_TARGET
diff --git a/main.scm b/main.scm
index 7dac6b9..fe49af0 100644
--- a/main.scm
+++ b/main.scm
@@ -13,7 +13,7 @@
 	(chicken irregex)
 	(chicken sort)
 	(chicken port)
-	(only srfi-13 string-join)
+	(only srfi-13 string-join string-prefix?)
 	srfi-18
 	matchable
 	json
@@ -286,7 +286,9 @@
 
   (define (to-li post)
     (printf "[info] indexing post ")
-    (define title (assocdr "title" post))
+    (define title-raw (assocdr "title" post))
+    ;; strip quotes
+    (define title (if (string-prefix? "\"" title-raw) (substring title-raw 1 (- (string-length title-raw) 1)) title-raw))
     (printf "\"~A\"~%" title)
     (define date (assocdr "date" post))
     (define kind (assocdr "kind" post))
@@ -353,7 +355,7 @@
   (define work-md-path (make-pathname work-dir "_linklog.md"))
   (define work-html-path (make-pathname work-dir "_linklog.html"))
   (define out-path (make-pathname (list out-dir) "linklog.html"))
-  
+
   (with-output-to-file work-md-path
     (λ () (print out-md)))
 
diff --git a/static/OFL.txt b/static/OFL.txt
deleted file mode 100644
index 03dd415..0000000
--- a/static/OFL.txt
+++ /dev/null
@@ -1,93 +0,0 @@
-Copyright 2016 The Merriweather Project Authors (https://github.com/EbenSorkin/Merriweather), with Reserved Font Name "Merriweather".

-

-This Font Software is licensed under the SIL Open Font License, Version 1.1.

-This license is copied below, and is also available with a FAQ at:

-https://openfontlicense.org

-

-

------------------------------------------------------------

-SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007

------------------------------------------------------------

-

-PREAMBLE

-The goals of the Open Font License (OFL) are to stimulate worldwide

-development of collaborative font projects, to support the font creation

-efforts of academic and linguistic communities, and to provide a free and

-open framework in which fonts may be shared and improved in partnership

-with others.

-

-The OFL allows the licensed fonts to be used, studied, modified and

-redistributed freely as long as they are not sold by themselves. The

-fonts, including any derivative works, can be bundled, embedded, 

-redistributed and/or sold with any software provided that any reserved

-names are not used by derivative works. The fonts and derivatives,

-however, cannot be released under any other type of license. The

-requirement for fonts to remain under this license does not apply

-to any document created using the fonts or their derivatives.

-

-DEFINITIONS

-"Font Software" refers to the set of files released by the Copyright

-Holder(s) under this license and clearly marked as such. This may

-include source files, build scripts and documentation.

-

-"Reserved Font Name" refers to any names specified as such after the

-copyright statement(s).

-

-"Original Version" refers to the collection of Font Software components as

-distributed by the Copyright Holder(s).

-

-"Modified Version" refers to any derivative made by adding to, deleting,

-or substituting -- in part or in whole -- any of the components of the

-Original Version, by changing formats or by porting the Font Software to a

-new environment.

-

-"Author" refers to any designer, engineer, programmer, technical

-writer or other person who contributed to the Font Software.

-

-PERMISSION & CONDITIONS

-Permission is hereby granted, free of charge, to any person obtaining

-a copy of the Font Software, to use, study, copy, merge, embed, modify,

-redistribute, and sell modified and unmodified copies of the Font

-Software, subject to the following conditions:

-

-1) Neither the Font Software nor any of its individual components,

-in Original or Modified Versions, may be sold by itself.

-

-2) Original or Modified Versions of the Font Software may be bundled,

-redistributed and/or sold with any software, provided that each copy

-contains the above copyright notice and this license. These can be

-included either as stand-alone text files, human-readable headers or

-in the appropriate machine-readable metadata fields within text or

-binary files as long as those fields can be easily viewed by the user.

-

-3) No Modified Version of the Font Software may use the Reserved Font

-Name(s) unless explicit written permission is granted by the corresponding

-Copyright Holder. This restriction only applies to the primary font name as

-presented to the users.

-

-4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font

-Software shall not be used to promote, endorse or advertise any

-Modified Version, except to acknowledge the contribution(s) of the

-Copyright Holder(s) and the Author(s) or with their explicit written

-permission.

-

-5) The Font Software, modified or unmodified, in part or in whole,

-must be distributed entirely under this license, and must not be

-distributed under any other license. The requirement for fonts to

-remain under this license does not apply to any document created

-using the Font Software.

-

-TERMINATION

-This license becomes null and void if any of the above conditions are

-not met.

-

-DISCLAIMER

-THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,

-EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF

-MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT

-OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE

-COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,

-INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL

-DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING

-FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM

-OTHER DEALINGS IN THE FONT SOFTWARE.

diff --git a/static/PTSans-Bold.ttf b/static/PTSans-Bold.ttf
new file mode 100644
index 0000000..f82c3bd
--- /dev/null
+++ b/static/PTSans-Bold.ttf
diff --git a/static/PTSans-BoldItalic.ttf b/static/PTSans-BoldItalic.ttf
new file mode 100644
index 0000000..3e6cf4e
--- /dev/null
+++ b/static/PTSans-BoldItalic.ttf
diff --git a/static/PTSans-Italic.ttf b/static/PTSans-Italic.ttf
new file mode 100644
index 0000000..b06ce61
--- /dev/null
+++ b/static/PTSans-Italic.ttf
diff --git a/static/PTSans-Regular.ttf b/static/PTSans-Regular.ttf
new file mode 100644
index 0000000..adaf671
--- /dev/null
+++ b/static/PTSans-Regular.ttf
diff --git a/static/style.css b/static/style.css
index dc87e2b..86f95df 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,79 +1,86 @@
 body {
-    font-size: 16px;
+    font-size: 17px;
     margin: 20px auto;
     padding: 10px 15px;
     max-width: 800px;
 
-    font-family: "Merriweather", serif;
+    font-family:
+        "PT Sans",
+        -apple-system,
+        system-ui,
+        BlinkMacSystemFont,
+        sans-serif;
     font-optical-sizing: auto;
     font-weight: 400;
     font-style: normal;
 
-    line-height: 35px;
+    line-height: 1.5;
 
     hyphens: initial;
 }
 
 :root {
-    --dark--header-color: #fff;
-    --dark--p-color: #eee;
-    --dark--link-color: #bbf;
-    --dark--bg-color: #222;
-    --dark--blockquote-color: #ddd;
-    --dark--blockquote-bg-color: #60606020;
-    --dark--code-bg-color: #353535;
-    --dark--h2-bg-color: #fd501bb0;
-    --dark--syntax-0: #eee;
-    --dark--syntax-1: #ffb29a;
-    --dark--syntax-2: #bbf;
-    --dark--syntax-3: #92d392;
+    --dark--bg-color: #1b1f29;
+    --dark--p-color: #eff1f8;
+    --dark--header-color: #ffffff;
+    --dark--link-color: #5da9e9;
+    --dark--blockquote-color: #eff1f8;
+    --dark--blockquote-bg-color: #ffffff10;
+    --dark--code-bg-color: #ffffff0d;
+    --dark--h2-bg-color: #6d326d40;
+
+    --dark--syntax-0: #eff1f8;
+    --dark--syntax-1: #5da9e9;
+    --dark--syntax-2: #f8b67b;
+    --dark--syntax-3: #b884b8;
 
-    --light--header-color: #1a1a1a;
-    --light--p-color: #101010;
-    --light--link-color: #007973;
-    --light--bg-color: #fff;
-    --light--blockquote-color: #606060;
-    --light--blockquote-bg-color: #c8c8c820;
-    --light--code-bg-color: #eee;
-    --light--h2-bg-color: #f73e0030;
-    --light--syntax-0: #101010;
-    --light--syntax-1: #f73e00;
-    --light--syntax-2: #007973;
-    --light--syntax-3: #1038d8;
+    --light--bg-color: #ffffff;
+    --light--p-color: #1a1a1a;
+    --light--header-color: #003f91;
+    --light--link-color: #3980bc;
+    --light--blockquote-color: #1a1a1a;
+    --light--blockquote-bg-color: #eff1f866;
+    --light--code-bg-color: #eff1f8;
+    --light--h2-bg-color: #6d326d1a;
+
+    --light--syntax-0: #1a1a1a;
+    --light--syntax-1: #6d326d;
+    --light--syntax-2: #3980bc;
+    --light--syntax-3: #003f91;
 }
 
 @media (prefers-color-scheme: dark) {
     :root {
         --header-color: var(--dark--header-color);
-	--p-color: var(--dark--p-color);
+        --p-color: var(--dark--p-color);
         --link-color: var(--dark--link-color);
         --bg-color: var(--dark--bg-color);
         --blockquote-color: var(--dark--blockquote-color);
         --blockquote-bg-color: var(--dark--blockquote-bg-color);
         --code-bg-color: var(--dark--code-bg-color);
-	--h2-bg-color: var(--dark--h2-bg-color);
+        --h2-bg-color: var(--dark--h2-bg-color);
 
-	--syntax-0: var(--dark--syntax-0);
-	--syntax-1: var(--dark--syntax-1);
-	--syntax-2: var(--dark--syntax-2);
-	--syntax-3: var(--dark--syntax-3);
+        --syntax-0: var(--dark--syntax-0);
+        --syntax-1: var(--dark--syntax-1);
+        --syntax-2: var(--dark--syntax-2);
+        --syntax-3: var(--dark--syntax-3);
     }
 }
 @media (prefers-color-scheme: light) {
     :root {
         --header-color: var(--light--header-color);
-	--p-color: var(--light--p-color);
+        --p-color: var(--light--p-color);
         --link-color: var(--light--link-color);
         --bg-color: var(--light--bg-color);
         --blockquote-color: var(--light--blockquote-color);
         --blockquote-bg-color: var(--light--blockquote-bg-color);
         --code-bg-color: var(--light--code-bg-color);
-	--h2-bg-color: var(--light--h2-bg-color);
+        --h2-bg-color: var(--light--h2-bg-color);
 
-	--syntax-0: var(--light--syntax-0);
-	--syntax-1: var(--light--syntax-1);
-	--syntax-2: var(--light--syntax-2);
-	--syntax-3: var(--light--syntax-3);
+        --syntax-0: var(--light--syntax-0);
+        --syntax-1: var(--light--syntax-1);
+        --syntax-2: var(--light--syntax-2);
+        --syntax-3: var(--light--syntax-3);
     }
 }
 
@@ -114,25 +121,27 @@ html {
     background-color: var(--bg-color);
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     color: var(--header-color);
+    line-height: 1.2;
 }
 
-h2, h4, h6 {
-    padding: 0 8px;
-    display: inline-block;
-    background-color: var(--h2-bg-color);
-}
-
-a, a:visited {
+a,
+a:visited {
     color: var(--link-color);
     text-decoration: none;
-    font-weight: bold;
+    font-weight: normal;
     cursor: pointer;
     text-underline-position: under;
 }
 
-a:hover, a:focus {
+a:hover,
+a:focus {
     text-decoration: underline;
 }
 
@@ -166,30 +175,39 @@ a:hover, a:focus {
 }
 
 code {
-    padding: 6px;
-    background-color: var(--code-bg-color);
+    padding: 3px 5px;
     white-space: nowrap;
+    border: 1px solid var(--blockquote-color);
 }
 
-pre, div.sourceCode {
+pre,
+div.sourceCode {
     padding: 8px 10px;
-    overflow-x:	scroll;
+    overflow-x: scroll;
     color: inherit;
-    background-color: var(--code-bg-color);
 }
 
 .sourceCode {
-    line-height: 22px;
+    line-height: 1.3;
+    border: 1px solid var(--blockquote-color);
+}
+
+.sourceCode code,
+.sourceCode pre {
+    border: none;
 }
 
 blockquote {
     display: block;
     color: var(--blockquote-color);
-    background-color: var(--blockquote-bg-color);
     border-left: 10px solid var(--link-color);
     margin: 20px 0;
-    padding: 2px 20px;
-    quotes: "\201C""\201D""\2018""\2019";
+    padding: 2px 15px;
+    quotes: "\201C" "\201D" "\2018" "\2019";
+}
+
+blockquote p {
+    margin: 10px 0;
 }
 
 img {
@@ -232,7 +250,14 @@ small {
     color: var(--blockquote-color);
 }
 
-ul, ol {
+h1 small {
+    opacity: 0.65;
+    font-weight: 400;
+    font-size: 20px;
+}
+
+ul,
+ol {
     margin-left: 10px;
 }
 
@@ -255,7 +280,7 @@ li::marker {
 }
 
 .archive-entry a {
-    line-height: 25px;
+    line-height: 1.5;
     display: block;
     margin-bottom: 6px;
 }
@@ -294,37 +319,112 @@ table {
 
 p {
     margin: 20px 0;
-    line-height: 32px;
+    line-height: 1.5;
 }
 
 /* Syntax highlighting, overrides Pandoc generated styles */
-code.sourceCode span { color: var(--syntax-0); }
-code span.al { color: var(--syntax-1); font-weight: bold; } /* Alert */
-code span.an { color: var(--syntax-0); font-weight: bold; font-style: italic; } /* Annotation */
-code span.at { color: var(--syntax-3); } /* Attribute */
-code span.bn { color: var(--syntax-3); } /* BaseN */
-code span.bu { color: var(--syntax-3); } /* BuiltIn */
-code span.cf { color: var(--syntax-3); font-weight: bold; } /* ControlFlow */
-code span.ch { color: var(--syntax-2); } /* Char */
-code span.cn { color: var(--syntax-3); } /* Constant */
-code span.co { color: var(--syntax-0); font-style: italic; opacity: 0.7; } /* Comment */
-code span.cv { color: var(--syntax-2); font-weight: bold; font-style: italic; } /* CommentVar */
-code span.do { color: var(--syntax-0); font-style: italic; } /* Documentation */
-code span.dt { color: var(--syntax-1); } /* DataType */
-code span.dv { color: var(--syntax-3); } /* DecVal */
-code span.er { color: var(--syntax-1); font-weight: bold; } /* Error */
-code span.ex { } /* Extension */
-code span.fl { color: var(--syntax-3); } /* Float */
-code span.fu { color: var(--syntax-1); } /* Function */
-code span.im { color: var(--syntax-3); font-weight: bold; } /* Import */
-code span.in { color: var(--syntax-3); font-weight: bold; font-style: italic; } /* Information */
-code span.kw { color: var(--syntax-3); font-weight: bold; } /* Keyword */
-code span.op { color: var(--syntax-2); } /* Operator */
-code span.ot { color: var(--syntax-0); } /* Other */
-code span.pp { color: var(--syntax-1); } /* Preprocessor */
-code span.sc { color: var(--syntax-2); } /* SpecialChar */
-code span.ss { color: var(--syntax-2); } /* SpecialString */
-code span.st { color: var(--syntax-2); } /* String */
-code span.va { color: var(--syntax-1); } /* Variable */
-code span.vs { color: var(--syntax-2); } /* VerbatimString */
-code span.wa { color: var(--syntax-3); font-weight: bold; font-style: italic; }
+code.sourceCode span {
+    color: var(--syntax-0);
+}
+code span.al {
+    color: var(--syntax-1);
+    font-weight: bold;
+} /* Alert */
+code span.an {
+    color: var(--syntax-0);
+    font-weight: bold;
+    font-style: italic;
+} /* Annotation */
+code span.at {
+    color: var(--syntax-3);
+} /* Attribute */
+code span.bn {
+    color: var(--syntax-3);
+} /* BaseN */
+code span.bu {
+    color: var(--syntax-3);
+} /* BuiltIn */
+code span.cf {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* ControlFlow */
+code span.ch {
+    color: var(--syntax-2);
+} /* Char */
+code span.cn {
+    color: var(--syntax-3);
+} /* Constant */
+code span.co {
+    color: var(--syntax-0);
+    font-style: italic;
+    opacity: 0.7;
+} /* Comment */
+code span.cv {
+    color: var(--syntax-2);
+    font-weight: bold;
+    font-style: italic;
+} /* CommentVar */
+code span.do {
+    color: var(--syntax-0);
+    font-style: italic;
+} /* Documentation */
+code span.dt {
+    color: var(--syntax-1);
+} /* DataType */
+code span.dv {
+    color: var(--syntax-3);
+} /* DecVal */
+code span.er {
+    color: var(--syntax-1);
+    font-weight: bold;
+} /* Error */
+code span.ex {
+} /* Extension */
+code span.fl {
+    color: var(--syntax-3);
+} /* Float */
+code span.fu {
+    color: var(--syntax-1);
+} /* Function */
+code span.im {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* Import */
+code span.in {
+    color: var(--syntax-3);
+    font-weight: bold;
+    font-style: italic;
+} /* Information */
+code span.kw {
+    color: var(--syntax-3);
+    font-weight: bold;
+} /* Keyword */
+code span.op {
+    color: var(--syntax-2);
+} /* Operator */
+code span.ot {
+    color: var(--syntax-0);
+} /* Other */
+code span.pp {
+    color: var(--syntax-1);
+} /* Preprocessor */
+code span.sc {
+    color: var(--syntax-2);
+} /* SpecialChar */
+code span.ss {
+    color: var(--syntax-2);
+} /* SpecialString */
+code span.st {
+    color: var(--syntax-2);
+} /* String */
+code span.va {
+    color: var(--syntax-1);
+} /* Variable */
+code span.vs {
+    color: var(--syntax-2);
+} /* VerbatimString */
+code span.wa {
+    color: var(--syntax-3);
+    font-weight: bold;
+    font-style: italic;
+}
diff --git a/template.html b/template.html
index 9e8d7e0..0edd822 100644
--- a/template.html
+++ b/template.html
@@ -1,174 +1,204 @@
-<!DOCTYPE html>
+<!doctype html>
 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
-<head>
-  <meta charset="utf-8" />
-  <meta name="generator" content="pandoc" />
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
-  <link rel="shortcut icon" type="image/png" href="/static/favicon.png" />
-$for(author-meta)$
-  <meta name="author" content="$author-meta$" />
-$endfor$
-$if(date-meta)$
-  <meta name="dcterms.date" content="$date-meta$" />
-$endif$
-$if(keywords)$
-  <meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
-$endif$
-$if(description-meta)$
-  <meta name="description" content="$description-meta$" />
-$endif$
-  <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
+    <head>
+        <meta charset="utf-8" />
+        <meta name="generator" content="pandoc" />
+        <meta
+            name="viewport"
+            content="width=device-width, initial-scale=1.0, user-scalable=yes"
+        />
+        <link rel="shortcut icon" type="image/png" href="/static/favicon.png" />
+        $for(author-meta)$
+        <meta name="author" content="$author-meta$" />
+        $endfor$ $if(date-meta)$
+        <meta name="dcterms.date" content="$date-meta$" />
+        $endif$ $if(keywords)$
+        <meta
+            name="keywords"
+            content="$for(keywords)$$keywords$$sep$, $endfor$"
+        />
+        $endif$ $if(description-meta)$
+        <meta name="description" content="$description-meta$" />
+        $endif$
+        <title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
 
-  <style>
-    $styles.html()$
-  </style>
+        <style>
+            $styles.html()$
+        </style>
 
-  <style>
-@font-face {
-    font-family: 'Merriweather';
-    src: url('/static/Merriweather-Regular.ttf') format('truetype');
-    font-weight: normal;
-    font-style: normal;
-}
+        <style>
+            @font-face {
+                font-family: "PT Sans";
+                src: url("/static/PTSans-Regular.ttf") format("truetype");
+                font-weight: normal;
+                font-style: normal;
+            }
 
-@font-face {
-    font-family: 'Merriweather';
-    src: url('/static/Merriweather-Bold.ttf') format('truetype');
-    font-weight: bold;
-    font-style: normal;
-}
+            @font-face {
+                font-family: "PT Sans";
+                src: url("/static/PTSans-Bold.ttf") format("truetype");
+                font-weight: bold;
+                font-style: normal;
+            }
 
-@font-face {
-    font-family: 'Merriweather';
-    src: url('/static/Merriweather-Italic.ttf') format('truetype');
-    font-weight: normal;
-    font-style: italic;
-}
-  </style>
+            @font-face {
+                font-family: "PT Sans";
+                src: url("/static/PTSans-Italic.ttf") format("truetype");
+                font-weight: normal;
+                font-style: italic;
+            }
 
-  <link rel="stylesheet" href="/static/style.css" />
-  <link rel="alternate"
-    type="application/rss+xml"
-    title="RSS Feed for jan.systems"
-    href="/feed.xml" />
+            @font-face {
+                font-family: "PT Sans";
+                src: url("/static/PTSans-BoldItalic.ttf") format("truetype");
+                font-weight: bold;
+                font-style: italic;
+            }
+        </style>
 
-$for(header-includes)$
-  $header-includes$
-$endfor$
-$if(math)$
-$if(mathjax)$
-  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
-$endif$
-  $math$
-  $endif$
-  <link rel="authorization_endpoint" href="https://indieauth.com/auth">
-</head>
-<body>
-  <div class="header-row">
-    <a class="page-title" href="/">jan&#39;s garden</a>
-    <div id="dark-mode-btn"></div>
-  </div>
-  <nav>
-    <a href="/archive">archive</a>
-    <span aria-hidden="true"> &#x2022; </span>
-    <a href="/linklog">linklog</a>
-    <span aria-hidden="true"> &#x2022; </span>
-    <a href="/now">now</a>
-    <span aria-hidden="true"> &#x2022; </span>
-    <a href="/projects">projects</a>
-  </nav>
+        <link rel="stylesheet" href="/static/style.css" />
+        <link
+            rel="alternate"
+            type="application/rss+xml"
+            title="RSS Feed for jan.systems"
+            href="/feed.xml"
+        />
 
-  $if(title)$
-  $if(hide-body-title)$
-  $else$
-  <h1>$title$ $if(date)$<small>($date$)</small>$endif$ $if(kind)$<small>[$kind$]</small>$endif$</h1>
-  $endif$
-  $endif$
+        $for(header-includes)$ $header-includes$ $endfor$ $if(math)$
+        $if(mathjax)$
+        <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+        $endif$ $math$ $endif$
+        <link rel="authorization_endpoint" href="https://indieauth.com/auth" />
+    </head>
+    <body>
+        <div class="header-row">
+            <a class="page-title" href="/">jan&#39;s garden</a>
+            <div id="dark-mode-btn"></div>
+        </div>
+        <nav>
+            <a href="/archive">archive</a>
+            <span aria-hidden="true"> &#x2022; </span>
+            <a href="/linklog">linklog</a>
+            <span aria-hidden="true"> &#x2022; </span>
+            <a href="/now">now</a>
+            <span aria-hidden="true"> &#x2022; </span>
+            <a href="/projects">projects</a>
+        </nav>
 
-  <main>
-    $if(slideshow)$
-    <blockquote data-unfold-hidden>
-      This post is a <a href="?unfold=1">literate slideshow</a>.
-    </blockquote>
-    $endif$
+        $if(title)$ $if(hide-body-title)$ $else$
+        <h1>
+            <div>$title$</div>
+            $if(date)$<small>($date$)</small>$endif$
+            $if(kind)$<small>[$kind$]</small>$endif$
+        </h1>
+        $endif$ $endif$
 
-    $body$
-  </main>
+        <main>
+            $if(slideshow)$
+            <blockquote data-unfold-hidden>
+                This post is a <a href="?unfold=1">literate slideshow</a>.
+            </blockquote>
+            $endif$ $body$
+        </main>
 
-<script>
-const b = document.createElement("button");
-b.innerHTML = "🌓";
-b.setAttribute("id", "dark-mode-btn");
-b.setAttribute("aria-label", "Toggle dark mode");
-document.querySelector("#dark-mode-btn").replaceWith(b);
+        <script>
+            const b = document.createElement("button");
+            b.innerHTML = "🌓";
+            b.setAttribute("id", "dark-mode-btn");
+            b.setAttribute("aria-label", "Toggle dark mode");
+            document.querySelector("#dark-mode-btn").replaceWith(b);
 
-const initialManualColorScheme = localStorage.getItem("colorScheme");
-// If null, no manual color scheme is set
-if (initialManualColorScheme === "dark") {
-  document.body.parentElement.classList.add("dark");
-} else if (initialManualColorScheme === "light") {
-  document.body.parentElement.classList.add("light");
-}
+            const initialManualColorScheme =
+                localStorage.getItem("colorScheme");
+            // If null, no manual color scheme is set
+            if (initialManualColorScheme === "dark") {
+                document.body.parentElement.classList.add("dark");
+            } else if (initialManualColorScheme === "light") {
+                document.body.parentElement.classList.add("light");
+            }
 
-function getCurrentManualColorScheme() {
-  if (document.body.parentElement.classList.contains("dark")) return "dark";
-  if (document.body.parentElement.classList.contains("light")) return "light";
-  return null;
-}
+            function getCurrentManualColorScheme() {
+                if (document.body.parentElement.classList.contains("dark"))
+                    return "dark";
+                if (document.body.parentElement.classList.contains("light"))
+                    return "light";
+                return null;
+            }
 
-document.querySelector("#dark-mode-btn").addEventListener("click", function () {
-  const manualColorScheme = getCurrentManualColorScheme();
-  const userPreferenceIsDark = (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches);
+            document
+                .querySelector("#dark-mode-btn")
+                .addEventListener("click", function () {
+                    const manualColorScheme = getCurrentManualColorScheme();
+                    const userPreferenceIsDark =
+                        window.matchMedia &&
+                        window.matchMedia("(prefers-color-scheme: dark)")
+                            .matches;
 
-  const currentColorScheme = manualColorScheme ?? (userPreferenceIsDark ? "dark" : "light");
-  const newColorScheme = currentColorScheme === "dark" ? "light" : "dark";
+                    const currentColorScheme =
+                        manualColorScheme ??
+                        (userPreferenceIsDark ? "dark" : "light");
+                    const newColorScheme =
+                        currentColorScheme === "dark" ? "light" : "dark";
 
-  document.body.parentElement.classList.remove("dark", "light");
-  document.body.parentElement.classList.add(newColorScheme);
+                    document.body.parentElement.classList.remove(
+                        "dark",
+                        "light",
+                    );
+                    document.body.parentElement.classList.add(newColorScheme);
 
-  localStorage.setItem("colorScheme", newColorScheme);
-});
-</script>
+                    localStorage.setItem("colorScheme", newColorScheme);
+                });
+        </script>
 
-$if(date)$
-$if(title)$
-$if(slug)$
-<div style="display: none;" class="h-entry">
-  <div class="e-content p-name">$title$</div>
-  <a rel="author" class="p-author h-card" href="https://jan.systems">
-    <img class="u-photo" src="https://jan.systems/files/Jan_Tuomi_headshot.jpg" loading="lazy">
-    Jan Tuomi
-  </a>
-  <a class="u-url" href="https://jan.systems/archive/$slug$">
-    Published <time class="dt-published">$date$</time>
-  </a>
-</div>
-$endif$
-$endif$
-$endif$
+        $if(date)$ $if(title)$ $if(slug)$
+        <div style="display: none" class="h-entry">
+            <div class="e-content p-name">$title$</div>
+            <a rel="author" class="p-author h-card" href="https://jan.systems">
+                <img
+                    class="u-photo"
+                    src="https://jan.systems/files/Jan_Tuomi_headshot.jpg"
+                    loading="lazy"
+                />
+                Jan Tuomi
+            </a>
+            <a class="u-url" href="https://jan.systems/archive/$slug$">
+                Published <time class="dt-published">$date$</time>
+            </a>
+        </div>
+        $endif$ $endif$ $endif$
 
-<div style="display: none;" class="h-card">
-  <a class="u-url" href="https://jan.systems">jan.systems</a>
-  <a class="u-url" href="https://github.com/jantuomi" rel="me">GitHub</a>
-  <p class="p-note">Digital gardener, senior software engineer by trade.</p>
-  <img class="u-photo" src="https://jan.systems/files/Jan_Tuomi_headshot.jpg" loading="lazy">
-  <p class="p-name">Jan Tuomi</p>
-  <p class="p-nickname">@jantuomi</p>
-  <p class="p-country-name">Finland</p>
-</div>
+        <div style="display: none" class="h-card">
+            <a class="u-url" href="https://jan.systems">jan.systems</a>
+            <a class="u-url" href="https://github.com/jantuomi" rel="me"
+                >GitHub</a
+            >
+            <p class="p-note">
+                Digital gardener, senior software engineer by trade.
+            </p>
+            <img
+                class="u-photo"
+                src="https://jan.systems/files/Jan_Tuomi_headshot.jpg"
+                loading="lazy"
+            />
+            <p class="p-name">Jan Tuomi</p>
+            <p class="p-nickname">@jantuomi</p>
+            <p class="p-country-name">Finland</p>
+        </div>
 
-$if(slideshow)$
-<script src="/static/reveal-unfold.js"></script>
-<style data-unfold-include>
-  .reveal .slides {
-    text-align: left;
-  }
-</style>
-<script>Unfold.enable({
-  theme: "black",
-  revealCss: document.querySelector("[data-unfold-include]").innerHTML });
-</script>
-$endif$
-
-</body>
+        $if(slideshow)$
+        <script src="/static/reveal-unfold.js"></script>
+        <style data-unfold-include>
+            .reveal .slides {
+                text-align: left;
+            }
+        </style>
+        <script>
+            Unfold.enable({
+                theme: "black",
+                revealCss: document.querySelector("[data-unfold-include]")
+                    .innerHTML,
+            });
+        </script>
+        $endif$
+    </body>
 </html>
diff --git a/update-linklog-json.sh b/update-linklog-json.sh
new file mode 100755
index 0000000..b4261cb
--- /dev/null
+++ b/update-linklog-json.sh
@@ -0,0 +1,3 @@
+#!/bin/sh
+
+curl -v -H Accept:'application/json' -H "Authorization: Bearer $LNHT_TOKEN" https://api.ln.ht/v1/posts/recent -o linklog.json