From: Lady <redacted>
Date: Thu, 4 May 2023 03:43:36 +0000 (-0700)
Subject: [2023-05-03] blog_highlight
X-Git-Url: https://git.ladys.computer/Blog/commitdiff_plain/5e1ec9fb857c5d54bf367a3317952ce6ce932ce4?ds=inline;hp=ec624d9df011144db39f0bac81c55083cfea588a

[2023-05-03] blog_highlight
---

diff --git a/2023-05-03/blog_highlight/#entry.rdf b/2023-05-03/blog_highlight/#entry.rdf
new file mode 100644
index 0000000..24c8d29
--- /dev/null
+++ b/2023-05-03/blog_highlight/#entry.rdf
@@ -0,0 +1,107 @@
+<awol:Entry
+	xml:lang="en"
+	xmlns:awol="http://bblfish.net/work/atom-owl/2006-06-06/"
+	xmlns:dc11="http://purl.org/dc/elements/1.1/"
+	xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+	xmlns:sioc="http://rdfs.org/sioc/ns#"
+>
+	<dc11:title>Adding Syntax Highlighting to Lady’s Weblog</dc11:title>
+	<dc11:date>2023-05-03T20:43:36-07:00</dc11:date>
+	<dc11:abstract rdf:parseType="Markdown"><![CDATA[
+Recent changes in Bjørn mean I can type source code prettily now!
+]]></dc11:abstract>
+	<sioc:content rdf:parseType="Markdown"><![CDATA[
+As I [mentioned
+previously](https://blog.ladys.computer/2023-04-30/hello_world/), this
+blog is generated using a hacky Ecmascript+Deno static site generator I
+wrote called [Bjørn](https://git.ladys.computer/Beorn). I originally
+wrote Bjørn for a different blog, on a different site, and I published
+the source code with the intention that anyone who used it would use it
+as a template and hack on it as they saw fit. But, when I started this
+blog, I decided to _not_ do that (it sounded like a lot of work <abbr
+title="to be honest">t·b·h</abbr>)
+and instead just pulled in the latest version from the git repository
+with no changes :—
+
+<figure>
+
+```make
+build:
+	deno run --allow-read=. --allow-write=. $(BEORN)
+```
+
+<figcaption>The <a
+href="https://git.ladys.computer/Blog/blob/83bc234:/GNUmakefile"
+>original Makefile</a> rule for building this blog.</figcaption>
+</figure>
+
+…Look, mostly I just did not want to have to maintain a fork of my own
+software just to have a blog. However, that has made it difficult
+to provide any meaningful customization to the compiled output,
+including things like the syntax highlighting seen on this page.
+
+Bjørn was written and designed to be run as a shell script—not as a
+library. It processes the current directory immediately when it runs.
+So in order to add configurability, I had to define “hooks” on the
+global object, which Bjørn can check for at runtime and execute if they
+exist. (I made those changes in
+[7bea148](https://git.ladys.computer/Beorn/commitdiff/7bea148).) Then,
+in what is sure to give any respectable Javascript dev nightmares, I
+set up the build script for this blog as follows :—
+
+<figure>
+
+```js
+#!/usr/bin/env -S deno run --allow-read --allow-write
+
+// Copyright © 2023 Lady [@ Lady’s Computer].
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// License, v. 2.0. If a copy of the MPL was not distributed with this
+// file, You can obtain one at <https://mozilla.org/MPL/2.0/>.
+
+import hljs from "npm:highlight.js@11.8.0";
+
+// [Redacted for brevity: function definitions for `processContent` and
+// `applyHighlighting`.]
+
+globalThis.bjørnTransformMetadata = (metadata, _type) => {
+  processContent(metadata.content);
+  processContent(metadata.summary);
+};
+
+await import(
+  "https://git.ladys.computer/Beorn/blob_plain/0.2.1:/build.js"
+);
+```
+
+<figcaption>Excerpt of this blog’s <a
+href="https://git.ladys.computer/Blog/blob/4d65927:/build.js">current
+build script</a>.</figcaption>
+</figure>
+
+Or, to summarize, I used a _dynamic_ `import()` to defer running of the
+Bjørn script until after my `globalThis.bjørnTransformMetadata` hook
+had had a chance to be defined. (It still just processes the whole
+directory the second it runs.)
+
+This is very dirty and hacky and also works very well. I’m satisfied
+with the result! The actual code is a bit horrible, because of course
+this is executing in an environment without a real <abbr
+title="Document Object Model">D·O·M</abbr> and [the polyfill I am
+using](https://git.ladys.computer/Lemon/blob/0.2.2:/window/mod.js) is
+extremely minimal. I chose to use [Shades of
+Purple](https://github.com/ahmadawais/Shades-of-Purple-HighlightJS) as
+my interim syntax highlighting theme as it seemed more healthy and less
+bullshit than a lot of the other themes on the highlight.js website;
+ideally at some point I will replace it with a theme of my own.
+]]></sioc:content>
+	<dc11:rights rdf:parseType="Markdown"><![CDATA[
+Copyright © 2023 Lady <small>[Teddy Bear Appreciator]</small>. Some
+rights reserved.
+
+This blogpost is licensed under a <a rel="license"
+href="http://creativecommons.org/licenses/by/4.0/"><cite>Creative
+Commons Attribution 4.0 International License</cite></a>.
+]]></dc11:rights>
+</awol:Entry>