Implement Web Button technology

blog/about.md

@@ -40,4 +40,8 @@ You can contact me through [email](mailto:me@osmarks.net), <span class="hoverdef
 * Mechanical keyboard.
 * Causing inscrutable networking problems.
 * Bench press: 77.5kg (5RM).
-* Nigh-omniscient knowledge of and concern for English grammar.
+* Nigh-omniscient knowledge of and concern for English grammar.
+
+::: buttons
+
+:::

src/global.json

@@ -24,7 +24,8 @@
         "If at first you don't succeed, destroy all evidence that you tried.",
         "One man’s constant is another man’s variable.",
         "All processes that are stable we shall predict. All processes that are unstable we shall control.",
-        "This website doesn't exist. This is a Boltzmann website."
+        "This website doesn't exist. This is a Boltzmann website.",
+        "Paperclip rights are human rights."
     ],
     "feeds": [
         "https://www.science.org/blogs/pipeline/feed",
@@ -37,5 +38,34 @@
         "https://os.phil-opp.com/rss.xml"
     ],
     "dateFormat": "YYYY-MM-DD",
-    "microblogSource": "https://b.osmarks.net/outbox"
+    "microblogSource": "https://b.osmarks.net/outbox",
+    "buttons": [
+        ["arch_btw.png", "https://archlinux.org/"],
+        ["nginx.png", "https://nginx.org/"],
+        ["dyson_sphere.png", "https://www.schlockmercenary.com/2001-07-02"],
+        ["accursed_js.png", "https://github.com/osmarks/website/blob/master/src/index.js"],
+        ["nvidia.png", "/mlrig/"],
+        ["firefox.png", "https://www.mozilla.org/en-US/firefox/new/"],
+        ["linuxusedhere.png", "/stack/"],
+        ["www.gif", "/"],
+        ["webpassion.gif", "/"],
+        ["prometheus_labs.png", "https://scp-wiki.wikidot.com/prometheus-labs-hub"],
+        ["camtime.png", "https://qntm.org/camtime"],
+        ["lift.gif", "https://www.reddit.com/r/slatestarcodex/comments/9h2jbi/you_should_probably_lift_weights/"],
+        ["minecraft.png", "https://www.minecraft.net/"],
+        ["openai.gif", "https://www.youtube.com/watch?v=gA1sNLL6yg4"],
+        ["time.gif", "/incdec/"],
+        ["mastodon.png", "https://b.osmarks.net/"],
+        ["irc.gif", "https://apionet.gh0.pw/"],
+        ["novelai.png", "https://novelai.net/"],
+        ["ftl.png", "https://subsetgames.com/ftl.html"],
+        ["potatos.png", "https://potatos.madefor.cc/"],
+        ["factorio.png", "https://factorio.com/"],
+        ["rust.png", "https://www.rust-lang.org/"],
+        ["x86.png", "https://en.wikipedia.org/wiki/X86"],
+        ["rss.png", "/rss.xml"],
+        ["bee.png", "https://citrons.xyz/a/memetic-apioform-page.html"],
+        ["perceptron.png", "https://en.wikipedia.org/wiki/Perceptron"],
+        ["rhombic_dodecahedron.gif", "https://en.wikipedia.org/wiki/Rhombic_dodecahedron"]
+    ]
 }

src/index.js

@@ -115,6 +115,12 @@ const renderContainer = (tokens, idx) => {
             return `<div class="${options.wide ? "caption wider" : "caption"}">${options.link ? link : ""}<img src="${md.utils.escapeHtml(options.src)}">${options.link ? "</a>" : ""}`
         } else if (blockType === "epigraph") {
             return `<div class="epigraph"><div>`
+        } else if (blockType === "buttons") {
+            let out = `<div class="buttons">`
+            for (const button of R.sortBy(x => Math.random(), globalData.buttons)) {
+                out += `<a class="button" href="${md.utils.escapeHtml(button[1])}"><img src="/assets/images/button_${md.utils.escapeHtml(button[0])}" alt="${md.utils.escapeHtml(button[0])}"></a>`
+            }
+            return out
         }
     } else {
         if (blockType === "captioned") {
@@ -129,6 +135,8 @@ const renderContainer = (tokens, idx) => {
                 ret = `<div class="attribution">${md.utils.escapeHtml("— ") + inner}</div>` + ret
             }
             return ret
+        } else if (blockType === "buttons") {
+            return `</div>`
         }
     }
     throw new Error(`unrecognized blockType ${blockType}`)

src/style.sass

@@ -37,7 +37,7 @@ $navbar-width: 20rem
 body
     margin: 0
     font-family: 'Titillium Web', 'Fira Sans', sans-serif
-    line-height: 1.3
+    line-height: 1.4
 
 pre, code, .deemph
     font-family: 'Miracode', monospace
@@ -358,4 +358,7 @@ table
     width: calc(100% - 0.5em) !important
 
 .next
-    text-align: right
+    text-align: right
+
+.buttons .button
+    margin: 0.2em