add the possibility of sidebar content, update AI article to use it instead of footnotes
This commit is contained in:
Joshua Seigler
parent
7bae93bab6
commit
a4306bc57d
6 changed files with 79 additions and 8 deletions
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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: "/",
|
||||
|
|
|
|||
28
package-lock.json
generated
28
package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
|
|
@ -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. !!! 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 !
|
||||
[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 !
|
||||
[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.
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue