mirror of https://github.com/osmarks/website
layout rework
This commit is contained in:
parent
ade0c9e523
commit
c858d2131f
|
|
@ -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, 10<sup>15</sup> bits.
|
||||
[^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, 10<sup>15</sup> 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.
|
||||
|
|
@ -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).
|
||||
[^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.
|
||||
|
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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`))
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
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
|
||||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
extends layout.pug
|
||||
|
||||
block content
|
||||
main!= content
|
||||
div.content!= content
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
extends layout.pug
|
||||
|
||||
block content
|
||||
main
|
||||
div.content
|
||||
h2 Blog
|
||||
p.
|
||||
Read my opinions via the internet.
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue