add the possibility of sidebar content, update AI article to use it instead of footnotes

assets/site.css

@@ -36,6 +36,7 @@ body {
   --s4: calc(var(--s3) * var(--ratio));
   --s5: calc(var(--s4) * var(--ratio));
   --content-width: clamp(75vw, 40rem, 100vw - 3rem);
+  --sidebar-width: clamp(10rem, calc(0.2 * var(--content-width)), calc(var(--content-width) * 0.5));
   --inset: calc(50vw - var(--content-width) / 2);
   background-image:
     radial-gradient(circle at -20% -20vmin, #0000ff19, transparent 60%),
@@ -186,6 +187,24 @@ aside {
   margin-left: 1ch;
   font-size: var(--s-1);
 }
+
+span.aside {
+  float: right;
+  clear: right;
+  width: var(--sidebar-width);
+  padding: 0.5rem 0 0.5rem 1rem;
+  font-size: var(--s-1);
+}
+@media (min-width: 40rem) {
+  main:has(span.aside) {
+    padding-right: calc(var(--inset) + var(--sidebar-width));
+  }
+  span.aside {
+    padding: 0 0 0 1rem;
+    margin-right: calc(-1 * var(--sidebar-width));
+  }
+}
+
 ul.collection {
   padding-left: 0;
   > li {
@@ -291,8 +310,15 @@ body > header > nav {
   body > header > nav {
     display: none;
   }
+  body > footer {
+    display: none;
+  }
   a[href^="http"]::after {
     content: " (" attr(href) ")";
+    font-size: 0.75em;
+    .footnotes & {
+      display: block;
+    }
   }
 }
 
@@ -391,6 +417,16 @@ h1 {
   }
 }
 
+:where(ol li) {
+  list-style-type: decimal;
+  & :where(ol li) {
+    list-style-type: lower-alpha;
+    & :where(ol li) {
+      list-style-type: upper-alpha;
+    }
+  }
+}
+
 main {
   h1,
   h2,

eleventy.config.js

@@ -3,6 +3,7 @@ import path from "path";
 import md from "markdown-it";
 import mdAnchor from "markdown-it-anchor";
 import mdFootnote from "markdown-it-footnote";
+import { spoiler as mdSpoiler } from "@mdit/plugin-spoiler";
 import mdLinkAttributes from "markdown-it-link-attributes";
 import prettier from "prettier";
 import dayjs from "dayjs";
@@ -29,6 +30,10 @@ export default (config) => {
       }),
     })
     .use(mdFootnote)
+    .use(mdSpoiler, {
+      tag: "span",
+      attrs: [["class", "aside"]]
+    })
     .use(mdLinkAttributes, {
       matcher(href) {
         return href.match(/^https?:\/\//);
@@ -38,6 +43,12 @@ export default (config) => {
         rel: "noopener",
       },
     });
+  mdLib.renderer.rules.render_footnote_anchor = (tokens, idx, options, env, slf) => {
+    let id = slf.rules.footnote_anchor_name(tokens, idx, options, env, slf)
+    if (tokens[idx].meta.subId > 0) id += `:${tokens[idx].meta.subId}`
+    /* ↩ with escape code to prevent display as Apple Emoji on iOS */
+    return ` <a href="#fnref${id}" class="footnote-backref">\u21a9\uFE0E</a>`
+  };
   config.setLibrary("md", mdLib);
   config.addPassthroughCopy({
     assets: "/",

package-lock.json

@@ -11,6 +11,7 @@
       "dependencies": {
         "@11ty/eleventy": "^3.1.0",
         "@11ty/eleventy-plugin-rss": "^2.0.4",
+        "@mdit/plugin-spoiler": "^0.21.0",
         "dayjs": "^1.11.11",
         "eleventy-plugin-clean": "^2.0.1",
         "markdown-it-anchor": "^9.0.1",
@@ -406,6 +407,26 @@
         "win32"
       ]
     },
+    "node_modules/@mdit/plugin-spoiler": {
+      "version": "0.21.0",
+      "resolved": "https://registry.npmjs.org/@mdit/plugin-spoiler/-/plugin-spoiler-0.21.0.tgz",
+      "integrity": "sha512-6T6gbuWEMW6uKKsEmAs1ti2c0xTafwjnQFE9lxw7VRIM7wY3p14LEnbMoUaY/copWog9aKN6SxgUoGCrpuVE5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/markdown-it": "^14.1.2"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "markdown-it": "^14.1.0"
+      },
+      "peerDependenciesMeta": {
+        "markdown-it": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@msgpackr-extract/msgpackr-extract-darwin-arm64/-/msgpackr-extract-darwin-arm64-3.0.3.tgz",
@@ -530,15 +551,13 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/@types/linkify-it/-/linkify-it-5.0.0.tgz",
       "integrity": "sha512-sVDA58zAw4eWAffKOaQH5/5j3XeayukzDk+ewSsnv3p4yJEZHCCzMDiZM8e0OUrRvmpGZ85jf4yDHkHsgBNr9Q==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/@types/markdown-it": {
       "version": "14.1.2",
       "resolved": "https://registry.npmjs.org/@types/markdown-it/-/markdown-it-14.1.2.tgz",
       "integrity": "sha512-promo4eFwuiW+TfGxhi+0x3czqTYJkG8qB17ZUJiVF10Xm7NLVRSLUsfRTU/6h1e24VvRnXCx+hG7li58lkzog==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/linkify-it": "^5",
         "@types/mdurl": "^2"
@@ -548,8 +567,7 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/@types/mdurl/-/mdurl-2.0.0.tgz",
       "integrity": "sha512-RGdgjQUZba5p6QEFAVx2OGb8rQDL/cPRG7GiedRzMcJ1tYnUANBncjbSB1NRGwbvjcPeikRABz2nshyPk1bhWg==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/a-sync-waterfall": {
       "version": "1.0.1",

package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@11ty/eleventy": "^3.1.0",
     "@11ty/eleventy-plugin-rss": "^2.0.4",
+    "@mdit/plugin-spoiler": "^0.21.0",
     "dayjs": "^1.11.11",
     "eleventy-plugin-clean": "^2.0.1",
     "markdown-it-anchor": "^9.0.1",

site/pages/unoffice-hours.md

@@ -5,6 +5,6 @@ layout: "base.njk"
 
 Working remotely has a lot of benefits, but we miss out on the serendipitous connections and socialization that happened just from being in the same room. Unoffice hours is part of an attempt to make new connections, but without applying the giant invisible filter of my own preferences.
 
-If you want to talk about pretty much anything, [book 30 minutes on my calendar](https://appointments.apps.seigler.net/?service=1).
+If you want to talk about pretty much anything, [book 30 minutes on my calendar](https://cal.com/joshuaseigler/unoffice-hours).
 
 We could do some pair programming, talk about tech, life, matters of aesthetics or philosophy - the point is serendipity.

site/posts/2024-06-05-redesign.md

@@ -12,3 +12,5 @@ In the upper right I added a style toggle that applies the font from Star Wars,
 I also finally made a section for recipes!
 
 > May 2025 edit: I updated the design some more without changing the tech stack. The main improvements are animated clouds and a host of minor adjustments.
+
+> June 2025 edit: I have continued to alter the design. Pray I don't alter it any further.

site/posts/2025-04-24-thinking-machines.md

@@ -31,13 +31,16 @@ Simply put, an LLM is a document completion engine. You give it text, and it ext
 
 Because they are built from essentially the whole public internet, LLMs also have a strong connection to The Algorithm. Algorithms that run social media feeds and online advertising are designed to attract human attention, a precious thing. Social media algorithms and LLMs are oriented towards capturing that attention. The foundational LLM paper is even called, "Attention is all you need". A prescient title. LLM intelligence is not like ours. It can't know what it's like to be a human.
 
-If this was a person, someone who wanted your attention and had this kind of indifference towards truth, they would be considered a con-man or bullshitter^[[On Bullshit by Harry Frankfurt | Internet Archive](https://archive.org/details/on-bullshit-by-harry-frankfurt)]. Untrustworthy.
+If this was a person, someone who wanted your attention and had this kind of indifference towards truth, they would be considered a con-man or bullshitter. !![On Bullshit by Harry Frankfurt | Internet Archive](https://archive.org/details/on-bullshit-by-harry-frankfurt)!! Untrustworthy.
 
 ## Don't create the torment nexus
 
-LLMs clearly manifest a type of intelligence. Sure, it's "just" some linear algebra and a ton of data. But it does exhibit a type of intelligence. One without empathy. Not being human, it *can't* have empathy -- and intelligence without empathy can be dangerous ^[[AI chatbot pushed teen to kill himself, lawsuit alleges | AP News](https://apnews.com/article/chatbot-ai-lawsuit-suicide-teen-artificial-intelligence-9d48adc572100822fdbc3c90d1456bd0)] ^[[Belgian man dies by suicide following exchanges with chatbot | Brussels Times](https://www.brusselstimes.com/430098/belgian-man-commits-suicide-following-exchanges-with-chatgpt)] ^[[AI-Fueled Spiritual Delusions Are Destroying Human Relationships | Rolling Stone](https://www.rollingstone.com/culture/culture-features/ai-spiritual-delusions-destroying-human-relationships-1235330175/)].
+LLMs clearly manifest a type of intelligence. Sure, it's "just" some linear algebra and a ton of data. But it does exhibit a type of intelligence. One without empathy. Not being human, it *can't* have empathy -- and intelligence without empathy can be dangerous !![AI chatbot pushed teen to kill himself, lawsuit alleges | AP News](https://apnews.com/article/chatbot-ai-lawsuit-suicide-teen-artificial-intelligence-9d48adc572100822fdbc3c90d1456bd0)
+[Belgian man dies by suicide following exchanges with chatbot | Brussels Times](https://www.brusselstimes.com/430098/belgian-man-commits-suicide-following-exchanges-with-chatgpt)
+[AI-Fueled Spiritual Delusions Are Destroying Human Relationships | Rolling Stone](https://www.rollingstone.com/culture/culture-features/ai-spiritual-delusions-destroying-human-relationships-1235330175/)!!.
 
-Science fiction is littered with cautionary tales about inhuman intelligence. For that matter, so is myth: genies give people whatever they want, but because people have self-destructive desires (like the desire to avoid work), it goes wrong. In TRON, Infocom has the MCP (Master Control Program), an overgrown chess program that is given access to whatever information it can consume, until its intelligence and capabilities are seemingly endless. The company leadership comes to rely on the program so completely that it becomes their entire interface for understanding and operating the business. There is also the irony that Infocom's success was built on the misuse of intellectual property, much as LLM companies have done ^[[AI, Copyright, and the Law: The Ongoing Battle Over Intellectual Property Rights | IP & Technology Law Society](https://sites.usc.edu/iptls/2025/02/04/ai-copyright-and-the-law-the-ongoing-battle-over-intellectual-property-rights/)] ^[[Generative AI Has an Intellectual Property Problem | Harvard Business Review](https://hbr.org/2023/04/generative-ai-has-an-intellectual-property-problem)].
+Science fiction is littered with cautionary tales about inhuman intelligence. For that matter, so is myth: genies give people whatever they want, but because people have self-destructive desires (like the desire to avoid work), it goes wrong. In TRON, Infocom has the MCP (Master Control Program), an overgrown chess program that is given access to whatever information it can consume, until its intelligence and capabilities are seemingly endless. The company leadership comes to rely on the program so completely that it becomes their entire interface for understanding and operating the business. There is also the irony that Infocom's success was built on the misuse of intellectual property, much as LLM companies have done !![AI, Copyright, and the Law: The Ongoing Battle Over Intellectual Property Rights | IP & Technology Law Society](https://sites.usc.edu/iptls/2025/02/04/ai-copyright-and-the-law-the-ongoing-battle-over-intellectual-property-rights/)
+[Generative AI Has an Intellectual Property Problem | Harvard Business Review](https://hbr.org/2023/04/generative-ai-has-an-intellectual-property-problem)!!.
 
 I don't think I am wise enough to safely use a genie in a bottle. And I don't want to outsource my creative efforts to an addictive, bullshitting alien intellect, even if it might save time and effort in the short term.