From 67e9f82c94b25599c59b273b081f8ce4b92f0794 Mon Sep 17 00:00:00 2001
From: Cassie Jones <code@witchoflight.com>
Date: Wed, 19 Feb 2020 15:10:05 +0100
Subject: [PATCH] Add anchors to headings, typography tweaks

I need anchors on headings so that I can link to a post-script note.
Might as well add more stuff while I'm at it >_<
---
 .eleventy.js        | 14 +++++++++++++-
 _includes/style.css | 11 +++++++++++
 package-lock.json   | 21 +++++++++++++++++++++
 package.json        |  4 +++-
 static/prism.css    |  2 +-
 5 files changed, 49 insertions(+), 3 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 5ecfe4e..05d4de4 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -2,7 +2,17 @@ const pluginRss = require("@11ty/eleventy-plugin-rss");
 const pluginSyntaxHighlight = require("@11ty/eleventy-plugin-syntaxhighlight");
 const Nunjucks = require("nunjucks");
 const dateFilter = require("nunjucks-date-filter");
-const md = require("markdown-it")();
+const uslug = require("uslug");
+const anchor = require("markdown-it-anchor");
+const md = require("markdown-it")({
+    html: true,
+    typographer: true,
+}).use(anchor, {
+    slugify: s => uslug(s),
+    permalink: true,
+    permalinkBefore: true,
+    permalinkClass: "header-anchor c-sun dec-none",
+});
 const CleanCSS = require("clean-css");
 const htmlMinifier = require("html-minifier");
 const util = require("util");
@@ -12,6 +22,8 @@ module.exports = (eleventyConfig) => {
     eleventyConfig.addPlugin(pluginRss);
     eleventyConfig.addPlugin(pluginSyntaxHighlight);
 
+    eleventyConfig.setLibrary("md", md);
+
     eleventyConfig.addTransform("html-minifier", htmlMinifierTransform);
 
     eleventyConfig.addPassthroughCopy("img");
diff --git a/_includes/style.css b/_includes/style.css
index a1b2c51..f7087da 100644
--- a/_includes/style.css
+++ b/_includes/style.css
@@ -10,9 +10,20 @@ footer { margin-top: 1em; }
 /* Typography */
 h1 { margin: 0; }
 h1, h2, h3, h4, h5, h6 { margin-bottom: 0; }
+code { font-size: 1.2em; word-spacing: -0.2em; }
+p {
+    /* leaving out because Safari doesn't do hyphens well */
+    /* text-align: justify; */
+    /* Firefox's & Chrome's hyphenation is too agressive for no justification,
+       Safari's is too relaxed for justification enabled. */
+    /* hyphens: auto; */
+    /* Currently only supported on Safari. Looks nice tho. */
+    hanging-punctuation: first allow-end last;
+}
 /* Links */
 .c-sun { color: #f78123; }
 .dec-none { text-decoration: none; }
+@media (min-width: 825px) { .header-anchor { margin-left: -1em; } }
 
 blockquote {
     border-left: solid 10px #bbb;
diff --git a/package-lock.json b/package-lock.json
index 87c8e42..90e0954 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3609,6 +3609,12 @@
         "uc.micro": "^1.0.5"
       }
     },
+    "markdown-it-anchor": {
+      "version": "5.2.5",
+      "resolved": "https://registry.npmjs.org/markdown-it-anchor/-/markdown-it-anchor-5.2.5.tgz",
+      "integrity": "sha512-xLIjLQmtym3QpoY9llBgApknl7pxAcN3WDRc2d3rwpl+/YvDZHPmKscGs+L6E05xf2KrCXPBvosWt7MZukwSpQ==",
+      "dev": true
+    },
     "maximatch": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/maximatch/-/maximatch-0.1.0.tgz",
@@ -5985,6 +5991,12 @@
       "integrity": "sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==",
       "dev": true
     },
+    "unorm": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/unorm/-/unorm-1.6.0.tgz",
+      "integrity": "sha512-b2/KCUlYZUeA7JFUuRJZPUtr4gZvBh7tavtv4fvk4+KV9pfGiR6CQAQAWl49ZpR3ts2dk4FYkP7EIgDJoiOLDA==",
+      "dev": true
+    },
     "unpipe": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/unpipe/-/unpipe-1.0.0.tgz",
@@ -6055,6 +6067,15 @@
       "integrity": "sha512-cwESVXlO3url9YWlFW/TA9cshCEhtu7IKJ/p5soJ/gGpj7vbvFrAY/eIioQ6Dw23KjZhYgiIo8HOs1nQ2vr/oQ==",
       "dev": true
     },
+    "uslug": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/uslug/-/uslug-1.0.4.tgz",
+      "integrity": "sha1-uaIvCRTgqGFAYz2swwLl9PpFBnc=",
+      "dev": true,
+      "requires": {
+        "unorm": ">= 1.0.0"
+      }
+    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
diff --git a/package.json b/package.json
index ddea4ff..0b33e58 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "clean-css": "^4.2.1",
     "html-minifier": "^4.0.0",
     "markdown-it": "^8.4.2",
-    "nunjucks-date-filter": "^0.1.1"
+    "markdown-it-anchor": "^5.2.5",
+    "nunjucks-date-filter": "^0.1.1",
+    "uslug": "^1.0.4"
   },
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
diff --git a/static/prism.css b/static/prism.css
index 3edcaef..48c6837 100644
--- a/static/prism.css
+++ b/static/prism.css
@@ -87,7 +87,7 @@ pre::selection, pre ::selection, code::selection, code ::selection {
 .language-css .token.string,
 .style .token.string {
 	color: #9a6e3a;
-	background: hsla(0, 0%, 100%, .5);
+	/* background: hsla(0, 0%, 100%, .5); */
 }
 
 .token.atrule,
-- 
2.43.2