feat(ui): header anchors

The nicest thing here is that the needed css is bucketed and server only on post pages, lazy-loading it :)

11ty/_includes/layouts/post.njk

@@ -3,8 +3,11 @@ layout: 'layouts/root.njk'
 ---
 
 {# Only include the syntax highlighter CSS on blog posts #}
-{%- css %}{% include "node_modules/prismjs/themes/prism-okaidia.css" %}{% endcss %}
-{%- css %}{% include "public/css/prism-diff.css" %}{%- endcss %}
+{%- css 'posts' %}
+  {% include 'public/css/posts.css' %}
+  {% include 'public/css/prism-diff.css' %}
+  {% include 'node_modules/prismjs/themes/prism-okaidia.css' %}
+{% endcss %}
 
 <section>
   <h1 id="post-title" class="glitch" data-text="{{ title | stripCodeTag }}">{{ title | safe }}</h1>

11ty/_includes/layouts/root.njk

@@ -18,6 +18,9 @@
     {% endcss %}
     <style>{% getBundle "css" %}</style>
 
+    <link rel="stylesheet" href="{% getBundleFileUrl 'css', 'posts' %}" media="print" onload="this.media='all'">
+    <noscript><link rel="stylesheet" href="{% getBundleFileUrl 'css', 'posts' %}"></noscript>
+
     <link rel="preload" href="/css/glitch.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
     <noscript><link rel="stylesheet" href="/css/glitch.css"></noscript>
 

eleventy.config.js

@@ -60,8 +60,8 @@ module.exports = function(eleventyConfig) {
         return Array.from(tagSet);
     });
 
-    eleventyConfig.addFilter('filterTagList', function filterTagList(tags) {
-        return (tags || []).filter(tag => ['all', 'nav', 'post', 'posts'].indexOf(tag) === -1);
+    eleventyConfig.addFilter('filterTagsList', function filterTagList(tags) {
+        return (tags || []).filter(tag => ['all', 'nav', 'post', 'posts', 'quirks'].indexOf(tag) === -1);
     });
 
     // Customize Markdown library settings:

public/css/index.css

@@ -175,6 +175,11 @@ a:hover {
 	display: inline-block;
 }
 
+a.header-anchor {
+	position: absolute;
+	visibility: hidden;
+}
+
 /* Nav */
 .nav {
 	display: flex;

public/css/posts.css

@@ -0,0 +1,21 @@
+a.header-anchor {
+  position: absolute;
+  margin-left: -20px;
+  float: left;
+  line-height: 1;
+  padding-right: 4px;
+  visibility: hidden;
+  width: 20px;
+  text-decoration: none;
+  color: inherit;
+  text-align: right;
+}
+
+h1:hover a.header-anchor,
+h2:hover a.header-anchor,
+h3:hover a.header-anchor,
+h4:hover a.header-anchor,
+h5:hover a.header-anchor,
+h6:hover a.header-anchor {
+  visibility: visible;
+}