From c858d2131fddeac9bc219ffb02225c0129d367f9 Mon Sep 17 00:00:00 2001 From: osmarks Date: Tue, 2 Jan 2024 02:23:11 +0000 Subject: [PATCH] layout rework --- blog/maghammer.md | 6 ++-- blog/on-phones.md | 6 ++-- src/global.json | 12 +++++-- src/index.js | 1 + src/page.js | 4 +-- src/style.sass | 42 ++++++++++++++++++------- templates/blogPost.pug | 4 +-- templates/experiment.pug | 2 +- templates/index.pug | 2 +- templates/layout.pug | 68 ++++++++++++++++++++++------------------ 10 files changed, 92 insertions(+), 55 deletions(-) diff --git a/blog/maghammer.md b/blog/maghammer.md index 3253fe8..c27cf5d 100644 --- a/blog/maghammer.md +++ b/blog/maghammer.md @@ -43,7 +43,7 @@ Currently, I have custom scripts to import this data, which are run nightly as a * Media files in my archive folder (all videos I've watched recently) - format, various metadata fields, and full extracted subtitles with full text search. * I've now added [WhisperX](https://github.com/m-bain/whisperX/) autotranscription on all files with bad/nonexistent subtitles. While it struggles with music more than Whisper itself, its use of batched inference and voice activity detection meant that I got ~100x realtime speed on average processing all my files (after a patch to fix the awfully slow alignment algorithm). * [Miniflux](/rssgood/) RSS feed entries. -* [Minoteaur](/minoteaur/) notes, files and structured data. I don't have links indexed since SQLite isn't much of a graph database (no, I will not write a recursive common table expression for it), and my importer reads directly off the Minoteaur database and writing a Markdown parser would have been annoying. +* [Minoteaur](/minoteaur/) notes, files and structured data. I don't have links indexed since SQLite isn't much of a graph database[^6], and my importer reads directly off the Minoteaur database and writing a Markdown parser would have been annoying. * RCLWE web history (including the `circache` holding indexed pages in my former Recoll install). There are also some other datasets handled differently, because the tools I use for those happened to already use SQLite somewhere and had reasonably usable formats. Specifically, [Gadgetbridge](https://www.gadgetbridge.org/) data from my smartwatch is copied off my phone and accessible in Datasette, [Atuin](https://github.com/ellie/atuin)'s local shell history database is symlinked in, Firefox history comes from [my script](https://github.com/osmarks/random-stuff/blob/master/histretention.py) on my laptop rather than the nightly serverside batch job, and I also connected my Calibre library database, though I don't actually use that. 13GB of storage is used in total. @@ -96,4 +96,6 @@ If you have related good ideas or correct opinions, you may tell me them below. [^4]: FAISS has some helpful manuals [like this](https://github.com/facebookresearch/faiss/wiki/Guidelines-to-choose-an-index) describing the various forms available, although there are rather a lot of them which say slightly different things. -[^5]: This is the size assuming optimal compression, but obviously the actual brain has many other concerns and isn't storing things that way. The actual hardware probably holds, very roughly, 1015 bits. \ No newline at end of file +[^5]: This is the size assuming optimal compression, but obviously the actual brain has many other concerns and isn't storing things that way. The actual hardware probably holds, very roughly, 1015 bits. + +[^6]: The SQLite documentation describes use of [recursive common table expressions](https://www.sqlite.org/lang_with.html) to implement graph queries, but this, while cool, is not exactly pleasant and elegant. \ No newline at end of file diff --git a/blog/on-phones.md b/blog/on-phones.md index 3e8c309..31e6b3c 100644 --- a/blog/on-phones.md +++ b/blog/on-phones.md @@ -8,7 +8,7 @@ updated: 24/01/2020 * Why notches? WHY? Just because Apple used them doesn't mean every single manufacturer needs to start making their screens have ugly black bits on them. * Really, why Apple at all? They sell uncustomisable and locked-down stuff at higher and higher prices with fewer and fewer nice-to-haves (e.g. headphone jacks) each year. And the vendor lock-in (Lightning headphones, iVersionsOfMostOtherSoftware) is also bad. * It would be nice to *not* have battery life ruined to get slightly slimmer phones. -* The complete lack of updates after a year or so is annoying. Custom ROMs kind of fix this but many aren't available (or even aren't possible due to locked bootloaders) on many devices. This is probably just planned obsolecence. +* The complete lack of updates after a year or so is annoying. Custom ROMs kind of fix this but many aren't available (or even aren't possible due to locked bootloaders) on many devices[^4]. This is probably just planned obsolecence. * Most of the stuff manufacturers preload (their own UI skinning, apps) is just useless bloat. Especially the preloaded, unremovable, probably-spying-on-you Facebook apps which are annoyingly common. * The lack of SD card slots is, again, probably just planned obsolecence. * Proper physical QWERTY keyboards would be nice, though as they're such a niche feature that's probably never going to happen except on a few phones. @@ -31,4 +31,6 @@ It's now the future (2023) and things have actually improved slightly in some wa [^2]: It's funny and sad to read old phone reviews which praise the performance of devices running single low-IPC cores at 1GHz or so. -[^3]: The most practical right now, inasmuch as BlackBerry/TCL haven't released anything relevant in years, is the [Unihertz Titan (Pocket)](https://www.unihertz.com/products/titan-pocket). It has some cool features aside from the keyboard, but it also has awful cameras, an undersized-by-my-current-standards battery, a bad LCD display, and a MediaTek SoC (according to legend, they're worse at GPL compliance so custom ROMs are lacking). \ No newline at end of file +[^3]: The most practical right now, inasmuch as BlackBerry/TCL haven't released anything relevant in years, is the [Unihertz Titan (Pocket)](https://www.unihertz.com/products/titan-pocket). It has some cool features aside from the keyboard, but it also has awful cameras, an undersized-by-my-current-standards battery, a bad LCD display, and a MediaTek SoC (according to legend, they're worse at GPL compliance so custom ROMs are lacking). + +[^4]: Also, they don't fix the firmware, which probably has horrible security problems in it. \ No newline at end of file diff --git a/src/global.json b/src/global.json index da00ccb..a834505 100644 --- a/src/global.json +++ b/src/global.json @@ -15,7 +15,15 @@ "Proxying NVMe cloud-scale hyperlink...", "There's nothing in the rulebook that says a golden retriever can't construct a self-intersecting non-convex regular polygon.", "Part of the solution, not the precipitate.", - "If you can't stand the heat, get out of the server room." + "If you can't stand the heat, get out of the server room.", + "I don't generate falsehoods. I generate facts. I generate truth. I generate knowledge. I generate wisdom. I generate Bing.", + "Everyone who can't fly, get on the dinosaur. We're punching through.", + "Do not pity the dead; pity the ones who failed to upgrade their RAM.", + "The right answers, but not to those particular questions.", + "I am a transhumanist because I do not have enough hubris not to try to kill God.", + "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." ], "feeds": [ "https://www.science.org/blogs/pipeline/feed", @@ -29,4 +37,4 @@ ], "dateFormat": "YYYY-MM-DD", "microblogSource": "https://b.osmarks.net/outbox" -} \ No newline at end of file +} diff --git a/src/index.js b/src/index.js index f16f521..82cb62a 100644 --- a/src/index.js +++ b/src/index.js @@ -191,6 +191,7 @@ const processBlog = async () => { meta.slug = meta.slug || removeExtension(basename) meta.wordCount = page.content.split(/\s+/).map(x => x.trim()).filter(x => x).length addColor(meta) + meta.haveSidenotes = true }, processContent: renderMarkdown }) }) console.log(chalk.yellow(`${Object.keys(blog).length} blog entries`)) diff --git a/src/page.js b/src/page.js index 0163ab0..b798d05 100644 --- a/src/page.js +++ b/src/page.js @@ -370,9 +370,9 @@ window.points = (async () => { const footnotes = document.querySelector(".footnotes") const sidenotes = document.querySelector(".sidenotes") -if (sidenotes) { +if (sidenotes && footnotes) { const codeblocks = document.querySelectorAll("pre.hljs") - const article = document.querySelector("main.blog-post") + const article = document.querySelector(".content") while (footnotes.firstChild) { sidenotes.appendChild(footnotes.firstChild) } diff --git a/src/style.sass b/src/style.sass index e5ad20a..af92574 100644 --- a/src/style.sass +++ b/src/style.sass @@ -1,6 +1,7 @@ $sidenotes-width: 20rem $content-margin: 1rem $content-width: 40rem +$navbar-width: 20rem @font-face font-family: 'Titillium Web' @@ -72,19 +73,20 @@ h1, h2, h3, h4, h5, h6 font-weight: 600 a text-decoration: none !important - color: inherit - -main, .header - margin-left: $content-margin - margin-right: $content-margin + color: inherit // for easier viewing on big screen devices, narrow the width of text // also make links a bit more distinct -main.blog-post - max-width: $content-width +main + max-width: 100% + width: $content-width text-align: justify + margin-left: $content-margin + margin-right: $content-margin a text-decoration: underline + &.fullwidth + width: calc($content-width + $sidenotes-width + 1.5 * $content-margin) .blog, .experiments, .atl, .microblog margin: -0.5em @@ -101,9 +103,6 @@ main.blog-post .microblog > div flex: 1 1 30% -main - margin-top: 1em - ul list-style-type: square padding-left: 1em @@ -201,4 +200,25 @@ blockquote margin-left: $content-margin margin-right: $content-margin .footnotes-sep - display: block \ No newline at end of file + display: block + +@media (min-width: calc(2 * $content-margin + $content-width + $sidenotes-width + $navbar-width)) + body + display: flex + .nav-container + flex-grow: 1 + nav + display: block + > a, .logocont + display: block + margin-right: 0 + width: $navbar-width + font-size: 1.5em + text-align: right + margin-bottom: 0 + box-sizing: border-box + top: 0 + position: sticky + margin-left: auto + .sidenotes-container + flex-grow: 1 \ No newline at end of file diff --git a/templates/blogPost.pug b/templates/blogPost.pug index d5c9537..de8b948 100644 --- a/templates/blogPost.pug +++ b/templates/blogPost.pug @@ -1,9 +1,7 @@ extends layout.pug block content - .sidenotes-container - main.blog-post!= content - .sidenotes + div.content.blog-post!= content block under-title if draft diff --git a/templates/experiment.pug b/templates/experiment.pug index 25f0dbf..7b85e0b 100644 --- a/templates/experiment.pug +++ b/templates/experiment.pug @@ -1,4 +1,4 @@ extends layout.pug block content - main!= content \ No newline at end of file + div.content!= content \ No newline at end of file diff --git a/templates/index.pug b/templates/index.pug index 89ac60d..13d6145 100644 --- a/templates/index.pug +++ b/templates/index.pug @@ -1,7 +1,7 @@ extends layout.pug block content - main + div.content h2 Blog p. Read my opinions via the internet. diff --git a/templates/layout.pug b/templates/layout.pug index b317b5f..3df8ef2 100644 --- a/templates/layout.pug +++ b/templates/layout.pug @@ -31,35 +31,41 @@ html(lang="en") if comments !== "off" script(src=`https://${domain}/isso/js/embed.min.js`, async=true, data-isso=`https://${domain}/isso/`) body - nav - a.logocont(href="/") - img.logo(src="/assets/images/logo256.png", alt="osmarks.net logo") - .logotext osmarks - +nav-item(`https://mse.${domain}/`, "Meme Search") - +nav-item(`https://i.${domain}/`, "Images") - +nav-item("https://github.com/osmarks/website", "Contribute") - +nav-item(`https://b.${domain}`, "Microblog") - +nav-item(`https://status.${domain}`, "Status") - +nav-item(`https://r.${domain}/login`, "Login") - block nav-items - .header - h1.page-title= title - block under-title - h3.deemph - if updated - span= `Updated ${renderDate(updated)}` - if created || wordCount - span= " / " - if created - span= `Created ${renderDate(created)}` - if wordCount - span= " / " - if wordCount - span= `${metricPrefix(wordCount, "")} words` - if description - em.description!= description - block content + .nav-container + nav + a.logocont(href="/") + img.logo(src="/assets/images/logo256.png", alt="osmarks.net logo") + .logotext osmarks + +nav-item(`https://mse.${domain}/`, "Meme Search") + +nav-item(`https://i.${domain}/`, "Images") + +nav-item("https://github.com/osmarks/website", "Contribute") + +nav-item(`https://b.${domain}`, "Microblog") + +nav-item(`https://status.${domain}`, "Status") + +nav-item(`https://r.${domain}/login`, "Login") + block nav-items + .sidenotes-container + main(class=!haveSidenotes ? "fullwidth" : "") + .header + h1.page-title= title + block under-title + h3.deemph + if updated + span= `Updated ${renderDate(updated)}` + if created || wordCount + span= " / " + if created + span= `Created ${renderDate(created)}` + if wordCount + span= " / " + if wordCount + span= `${metricPrefix(wordCount, "")} words` + if description + em.description!= description + block content - if comments !== "off" - .isso - section(id="isso-thread") + if comments !== "off" + .isso + section(id="isso-thread") + + if haveSidenotes + .sidenotes