Front page and typographical redesign

src/fts.mjs

@@ -3,9 +3,11 @@ import * as htmlToText from "html-to-text"
 import * as binaryFuseFilter from "binary-fuse-filter"
 import { xxHash32 as hash } from "js-xxhash"
 import * as msgpack from "msgpackr"
+import * as fs from "fs"
 import { BIGRAM_SEPARATOR, FREQUENCY_SEPARATOR, FREQUENCY_THRESHOLDS, tokenize } from "./fts_common.mjs"
 
 const index = []
+const recordStrings = []
 
 const BIGRAM_INCLUSION = 0.3
 const URL = /https?:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)/g
@@ -22,6 +24,7 @@ export const pushEntry = (sourceType, entry) => {
     const { html, url, timestamp, title, description, ignoreDescription } = entry
     // TODO: this puts URLs inline, maybe do something with that
     const text = (title ?? "") + " " + (!ignoreDescription ? (description && stripHTML(description)) ?? "" : "") + " " + stripHTML(html)
+    recordStrings.push(text)
     const words = tokenize(text)
     const counts = {}
     for (const word of words) {
@@ -43,6 +46,8 @@ export const pushEntry = (sourceType, entry) => {
 }
 
 export const build = () => {
+    fs.writeFileSync("strings.json", JSON.stringify(recordStrings))
+
     let totalTerms = 0
     let totalBigrams = 0
     const totalBigramCounts = {}

src/index.js

@@ -73,11 +73,10 @@ function hslToRgb(h, s, l) {
 
     return `#${hexPad(r * 255)}${hexPad(g * 255)}${hexPad(b * 255)}`
 }
-const hashBG = (cls, i) => {
+const hashBG = (cls, i, hue) => {
     const buf = crypto.createHash("md5").update(cls).digest()
-    const base = (buf[0] + 256 * buf[1]) % 360
-    const hue = (base + i * 37) % 360
-    return `background: ${hslToRgb(hue / 360, 1, 0.9)}; background: hsl(${hue}deg, var(--autocol-saturation), var(--autocol-lightness))`
+    const base = buf[0] + 256 * buf[1]
+    return `background: ${hslToRgb(hue / 360, 0.85, 0.65)}; background: hsl(${hue}deg, var(--autocol-saturation), var(--autocol-lightness)); border: 4px solid black; border-color: hsl(${hue}deg, 80%, var(--autocol-border))`
 }
 globalData.hashBG = hashBG
 
@@ -470,10 +469,8 @@ const compileServiceWorkerJSTask = async () => {
     })
 }
 
-const copyAsset = subpath => fse.copy(path.join(assetsDir, subpath), path.join(outAssets, subpath))
-
 const doImages = async () => {
-    await Promise.all(["images", "titillium-web.woff2", "titillium-web-semibold.woff2", "miracode.woff2", "misc"].map(subpath => fse.copy(path.join(assetsDir, subpath), path.join(outAssets, subpath))))
+    await Promise.all(["images", "titillium-web.woff2", "titillium-web-semibold.woff2", "iosevka.woff2", "misc"].map(subpath => fse.copy(path.join(assetsDir, subpath), path.join(outAssets, subpath))))
 
     await fse.copy(path.join(nodeModules, "katex", "dist", "fonts"), path.join(outAssets, "fonts"))
     await fse.copy(path.join(nodeModules, "katex", "dist", "katex.min.css"), path.join(outAssets, "katex.min.css"))

src/openring.html

@@ -1,4 +1,4 @@
-<h3>From other blogs</h3>
+<h2>From other blogs</h2>
 <section class="atl">
     {{range .Articles}}
     <div class="art">

src/style.sass

@@ -7,8 +7,9 @@ $navbar-width: 20rem
     box-sizing: border-box
 
 :root
-    --autocol-lightness: 80%
-    --autocol-saturation: 100%
+    --autocol-lightness: 65%
+    --autocol-saturation: 85%
+    --autocol-border: 0%
 
 @font-face
     font-family: 'Titillium Web'
@@ -27,26 +28,29 @@ $navbar-width: 20rem
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD
 
 @font-face
-    font-family: 'Miracode'
+    font-family: 'Iosevka'
     font-style: normal
     font-weight: 400
     font-display: swap
-    src: url(/assets/miracode.woff2) format('woff2')
-    unicode-range: U+0000-00A0, U+A2-A9, U+AC-AE, U+00D7, U+00F7, U+FEFF, U+FFFD
+    src: url(/assets/iosevka.woff2) format('woff2')
+    unicode-range: U+0000-00C0, U+A2-A9, U+AC-AE, U+00D7, U+00F7, U+FEFF, U+FFFD
+
+$headers: "Iosevka", "Titillium Web", "Fira Sans", sans-serif
+$monospace: "Iosevka", "Fira Code", monospace
+$body: "Titillium Web", "Fira Sans", sans-serif
 
 body
     margin: 0
-    font-family: 'Titillium Web', 'Fira Sans', sans-serif
+    font-family: $body
     line-height: 1.5
 
 .footnote-ref
     line-height: 1
 
 pre, code, .deemph
-    font-family: 'Miracode', monospace
-    font-size: 0.9em
+    font-family: $monospace
     line-height: 1.3
-    vertical-align: bottom
+    font-size: 0.9em
 
 a
     text-decoration: none
@@ -54,16 +58,17 @@ a
 .blog-post a, .sidenotes a
     text-decoration: underline
 
-
 nav
     display: flex
     align-items: center
 
-    padding: 1em
+    padding: 1rem
     margin-bottom: 0.5em
     background: black
     overflow-x: auto
-    font-size: 1.1em
+    font-size: 1.25em
+
+    font-family: $headers
 
     .logo
         width: 1.5rem
@@ -76,7 +81,6 @@ nav
         align-items: center
         font-style: italic
         color: white
-        font-size: 1.25em
 
     a, img, picture
         margin-right: 0.5em
@@ -88,6 +92,7 @@ nav
 h1, h2, h3, h4, h5, h6
     margin: 0
     font-weight: 600
+    font-family: $headers
     a
         color: inherit
         text-decoration: none !important
@@ -116,10 +121,12 @@ main
     margin-bottom: 0
     display: flex
     flex-wrap: wrap
+    text-align: left
+    
     > div
         min-width: 20em
         background: #eee
-        padding: 1em
+        padding: 12px
         flex: 1 1 20%
 
 .microblog > div
@@ -152,6 +159,7 @@ button, select, input, textarea, .textarea
 
     .title
         font-weight: 500
+        font-family: $headers
     .conditions
         font-style: italic
 
@@ -177,10 +185,8 @@ button, select, input, textarea, .textarea
     img, picture
         padding-right: 1em
         width: 8em
-
-    .title
-        font-size: 1.1em
-        font-weight: 600
+        height: 8em
+        margin-bottom: auto
 
 .caption
     background: lightgray
@@ -296,6 +302,7 @@ $hl-border: 3px
     :root
         --autocol-lightness: 10%
         --autocol-saturation: 50%
+        --autocol-border: 35%
 
     nav .logocont
         color: white
@@ -391,4 +398,11 @@ table
             padding: 0.5em
             margin: 0.5em
             .description
-                font-style: italic
+                font-style: italic
+
+.autocol
+    margin: 4px
+    .title
+        font-size: 1.1em
+        font-family: $headers
+        font-weight: 600

templates/activitypub.pug

@@ -1,4 +1,4 @@
-div.autocol(style=hashBG("microblog", i))
+div.autocol(style=hashBG("microblog", i, 300))
     div
-        a(href=permalink)= renderDate(date)
+        a.title(href=permalink)= renderDate(date)
     div!= content

templates/index.pug

@@ -7,7 +7,7 @@ block content
             Read my opinions via the internet.
         div.blog
             each post, i in posts
-                .autocol.imbox(style=hashBG("blog", i))
+                .autocol.imbox(style=hashBG("blog", i, 180))
                     if images.hasOwnProperty(post.slug)
                         +image(images[post.slug])
                     div
@@ -28,7 +28,7 @@ block content
             Various web projects I have put together over many years. Made with at least four different JS frameworks. Some of them are bad.
         div.experiments
             each experiment, i in experiments
-                .autocol.imbox(style=hashBG("experiments", i))
+                .autocol.imbox(style=hashBG("experiments", i, 120))
                     if images.hasOwnProperty(experiment.slug)
                         +image(images[experiment.slug])
                     div