start writing password strength post

start writing kubernetes alternative post
start working on kubernetes alternative post
2023-10-23 05:54:11 -07:00 · 2023-10-23 05:53:58 -07:00 · 2023-10-01 06:41:33 -07:00 · 2023-09-25 06:57:50 -07:00 · 2023-09-24 13:29:35 -07:00 · 2023-09-24 09:46:57 -07:00
49 changed files with 3134 additions and 6439 deletions
--- a/.gitignore
+++ b/.gitignore
@ -3,3 +3,9 @@ node_modules
 /build
 /.svelte-kit
 /package
+.env
+.env.*
+!.env.example
+vite.config.js.timestamp-*
+vite.config.ts.timestamp-*
+**/_test.*
--- a/.npmrc
+++ b/.npmrc
@ -0,0 +1,2 @@
+engine-strict=true
+resolution-mode=highest
--- a/README.md
+++ b/README.md
@ -1,6 +1,6 @@
 # create-svelte

-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte);
+Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

 ## Creating a project

@ -8,14 +8,12 @@ If you're seeing this, you've probably already done this step. Congrats!

 ```bash
 # create a new project in the current directory
-npm init svelte@next
+npm create svelte@latest

 # create a new project in my-app
-npm init svelte@next my-app
+npm create svelte@latest my-app
 ```

-> Note: the `@next` is temporary
-
 ## Developing

 Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
@ -29,10 +27,12 @@ npm run dev -- --open

 ## Building

-Before creating a production version of your app, install an [adapter](https://kit.svelte.dev/docs#adapters) for your target environment. Then:
+To create a production version of your app:

 ```bash
 npm run build
 ```

-> You can preview the built app with `npm run preview`, regardless of whether you installed an adapter. This should _not_ be used to serve your app in production.
+You can preview the production build with `npm run preview`.
+
+> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
--- a/jsconfig.json
+++ b/jsconfig.json
@ -1,11 +0,0 @@
-{
-    "extends": "./.svelte-kit/tsconfig.json",
-    "compilerOptions": {
-        "baseUrl": ".",
-        "paths": {
-            "$lib": ["src/lib"],
-            "$lib/*": ["src/lib/*"]
-        }
-    },
-    "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"]
-}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,18 +1,23 @@
 {
-  "name": "blog",
+	"name": "blog.jfmonty2.com",
 	"version": "0.0.1",
+	"private": true,
 	"scripts": {
-    "dev": "svelte-kit dev",
-    "build": "svelte-kit build",
-    "preview": "svelte-kit preview"
+		"dev": "vite dev",
+		"build": "vite build",
+		"preview": "vite preview"
 	},
 	"devDependencies": {
-    "@sveltejs/adapter-static": "^1.0.0-next.21",
-    "@sveltejs/kit": "next",
-    "mdsvex": "^0.9.8",
-    "node-sass": "^6.0.1",
-    "svelte": "^3.42.6",
-    "svelte-preprocess": "^4.9.8"
+		"@sveltejs/adapter-auto": "^2.0.0",
+		"@sveltejs/adapter-static": "^2.0.3",
+		"@sveltejs/kit": "^1.20.4",
+		"hast-util-to-text": "^4.0.0",
+		"mdast-util-to-string": "^4.0.0",
+		"mdsvex": "^0.11.0",
+		"svelte": "^4.0.5",
+		"unist-util-find": "^3.0.0",
+		"unist-util-visit": "^5.0.0",
+		"vite": "^4.4.2"
 	},
 	"type": "module"
 }
--- a/src/app.html
+++ b/src/app.html
@ -4,12 +4,12 @@
 		<meta charset="utf-8" />
 		<link rel="preload" href="/Tajawal-Regular.woff2" as="font" type="font/woff2" />
 		<link rel="preload" href="/Baskerville-Regular.woff2" as="font" type="font/woff2" />
-		<link rel="icon" href="/favicon.png" />
 		<link rel="stylesheet" href="/style.css" />
-		<meta name="viewport" content="width=device-width, initial-scale=1" />
-		%svelte.head%
+		<link rel="alternate" type="application/atom+xml" href="/feed">
+		<meta name="viewport" content="width=device-width" />
+		%sveltekit.head%
 	</head>
-	<body>
-		<div id="svelte">%svelte.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>
--- a/src/lib/Dropcap.svelte
+++ b/src/lib/Dropcap.svelte
@ -34,9 +34,8 @@
    }
 </style>

-<p>
-    <span class="drop-cap">{initial}</span>
-    <span class="first-word" style:--shift={shift}>{remainder}</span>
-    <slot></slot>
-</p>

+<span class="drop-cap">{initial}</span>
+{#if remainder.length}
+    <span class="first-word" style:--shift={shift}>{remainder}</span>
+{/if}
--- a/src/lib/Heading.svelte
+++ b/src/lib/Heading.svelte
@ -0,0 +1,67 @@
+    <script>
+    export let level;
+    export let id = '';
+
+    const tag = `h${level}`;
+</script>
+
+<style>
+    a {
+        /* Works better to set the size here for line-height reasons */
+        font-size: 0.9em;
+        /* color: hsl(0, 0%, 25%); */
+        color: var(--accent-color);
+    }
+
+    a:hover {
+        border-bottom: 0.05em solid currentcolor;
+    }
+
+    svg {
+        width: 1em;
+        /* tiny tweak for optical alignment */
+        transform: translateY(2px);
+    }
+
+    .before {
+        display: none;
+        padding-right: 0.25em;
+        margin-left: -1.25em;
+    }
+    
+    @media(min-width: 58rem) {
+        .before {
+            display: inline;
+            opacity: 0;
+            transition: opacity 150ms;
+        }
+
+        .h:hover .before, .before:hover {
+            opacity: 1;
+        }
+
+        .after {
+            display: none;
+        }
+
+        .h:hover {
+            cursor: default;
+        }
+    }
+</style>
+
+<svelte:element this={tag} {id} class="h">
+    <span class="before">
+        <a href="#{id}">
+            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+              <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+            </svg></a></span><span> <!-- Looks ugly but necessary to get rid of spurious whitespace -->
+        <slot></slot>
+    </span>
+    <!-- Icon from https://heroicons.com/ -->
+    <a href="#{id}" class="after">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+          <path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 011.242 7.244l-4.5 4.5a4.5 4.5 0 01-6.364-6.364l1.757-1.757m13.35-.622l1.757-1.757a4.5 4.5 0 00-6.364-6.364l-4.5 4.5a4.5 4.5 0 001.242 7.244" />
+        </svg>
+    </a>
+</svelte:element>
--- a/src/lib/Link.svelte
+++ b/src/lib/Link.svelte
@ -18,7 +18,7 @@


 {#if href.startsWith('/') || host(href) === $page.host}
-    <a sveltekit:prefetch {href}>
+    <a data-sveltekit-preload-data="hover" {href}>
        <slot></slot>
    </a>
 {:else}
--- a/src/lib/Post.svelte
+++ b/src/lib/Post.svelte
@ -1,33 +1,142 @@
 <script context="module">
    import { onMount } from 'svelte';
    import { formatDate } from './datefmt.js';
-    import { makeSlug } from '$lib/slug.js';
+    import { makeSlug } from '$lib/utils.js';
    
+    import Toc from './Toc.svelte';
    import Link from './Link.svelte';
    export { Link as a };
 </script>

 <script>
    export let title, date;
-    export const description = '';
+    export let description = '';
    export const draft = false;
+    export let toc = null;
+
+    export let slug;
+    export let prev = null;
+    export let next = null;
 </script>

 <style>
+    .page {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
+
+        padding: 0 0.5rem;
+    }
+
+    .title {
+        grid-column: 2 / 3;
+    }
+
+    .left-gutter {
+        grid-column: 1 / 2;
+        justify-self: end;
+    }
+
    .subtitle {
        font-size: 0.9em;
        font-style: italic;
        margin-top: -0.5rem;
    }
+
+    .post {
+        grid-column: 2 / 3;
+    }
+
+    .footer {
+        grid-column: 2 / 3;
+        margin-bottom: 2rem;
+        display: flex;
+    }
+
+    hr {
+        grid-column: 2 / 3;
+        width: 100%;
+        border-top: 1px solid hsl(0 0% 75%);
+        border-bottom: none;
+        margin: 2rem 0;
+    }
+
+    .footer a {
+        display: flex;
+        align-items: center;
+        gap: 0.45em;
+
+        font-size: 1rem;
+        color: var(--content-color-faded);
+        text-decoration: underline;
+        text-underline-offset: 0.25em;
+        text-decoration-color: transparent;
+
+        transition: 150ms;
+    }
+    .footer a:hover {
+        text-decoration-color: currentColor;
+        text-decoration: underline;
+    }
+
+    .footer svg {
+        width: 1em;
+        transition: 150ms;
+    }
+
+    a.prev:hover svg {
+        transform: translateX(-50%);
+    }
+    a.next:hover svg {
+        transform: translateX(50%);
+    }
 </style>

 <svelte:head>
-    <title>{title}</title>
+    <title>{title} | Joe's Blog</title>
+    <meta property="og:title" content="{title} | Joe's Blog">
+    <meta property="og:type" content="article">
+    <meta property="og:url" content="https://blog.jfmonty2.com/{slug}">
+    <meta property="og:description" content={description}>
+    <meta property="og:site_name" content="Joe's Blog">
    <link rel="stylesheet" href="/prism-dracula.css" />
 </svelte:head>

-<div id="post">
+<div class="page">
+    <div class="title">
        <h1 id="{makeSlug(title)}">{title}</h1>
        <p class="subtitle">{formatDate(date)}</p>
+    </div>
+
+    <div class="left-gutter">
+        {#if toc?.length !== 0}
+            <Toc items={toc} />
+        {/if}
+    </div>
+
+    <div class="post">
        <slot></slot>
+    </div>
+
+    <hr>
+
+    <div class="footer">
+        {#if prev}
+            <a href="/{prev}" class="prev" data-sveltekit-preload-data="hover">
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 19.5L3 12m0 0l7.5-7.5M3 12h18" />
+                </svg>
+                Previous
+            </a>
+        {/if}
+
+        {#if next}
+            <!-- we use margin-left rather than justify-content so it works regardless of whether the "previous" link exists -->
+            <a href="/{next}" class="next" style="margin-left: auto;" data-sveltekit-preload-data="hover">
+                Next
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3" />
+                </svg>
+            </a>
+        {/if}
+    </div>
 </div>
--- a/src/lib/Sidenote.svelte
+++ b/src/lib/Sidenote.svelte
@ -1,4 +1,4 @@
-<style lang="scss">
+<style>
    /* always applicable */
    :global(body) {
        counter-reset: sidenote;
@ -8,21 +8,22 @@
        counter-increment: sidenote;
        color: #444;
        margin-left: 0.05rem;
+    }

-        &:after {
+    .counter:after {
        font-size: 0.75em;
        position: relative;
        bottom: 0.3rem;
        color: #8c0606;
    }
-    }

    .sidenote {
        color: #555;
        font-size: 0.8rem;
+    }

-        &:before {
-            content: counter(sidenote) " ";
+    .sidenote:before {
+        content: var(--sidenote-index, counter(sidenote)) " ";
        /* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
        (because the sidenote is floated it counts as a positioned parent, I think) */
        position: absolute;
@ -32,7 +33,6 @@
        font-size: 0.75rem;
        color: #8c0606;
    }
-    }

    .sidenote-toggle {
        display: none;
@ -46,16 +46,28 @@

        .sidenote {
            --gap: 2rem;
-            --sidenote-width: min(14rem, calc(50vw - var(--gap) - var(--content-width) / 2));
+            --sidenote-width: min(16rem, calc(50vw - var(--gap) - 1rem - var(--content-width) / 2));
            width: var(--sidenote-width);
            hyphens: auto;
            position: relative;
            float: right;
            clear: right;
-            margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); // gives us 2rem of space between content and sidenote
+            margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); /* gives us 2rem of space between content and sidenote */
            margin-bottom: 0.7rem;
        }

+        /* fade-in animation */
+        .sidenote {
+            opacity: 0;
+            animation: fade-in 600ms ease-out;
+            animation-delay: 500ms;
+             animation-fill-mode: forwards; 
+        }
+        @keyframes fade-in {
+            from {opacity: 0;}
+            to {opacity: 1;}
+        }
+
        .nested.sidenote {
            margin-right: 0;
            margin-top: 0.7rem;
@ -107,26 +119,13 @@
            font-size: 1.25rem;
            color: #8c0606;
            cursor: pointer;
-            
-            &:hover {
+        }
+        .dismiss:hover {
            transform: scale(1.1);
            font-weight: 800;
        }
-        }

    }
-
-    // /* slight tweaks for in between state */
-    // @media (min-width: 52.5em) and (max-width: 70em) {
-    //     .sidenote {
-    //         padding-left: calc(50vw - 19rem);
-    //     }
-    // }
-    // @media (max-width: 52.5em) {
-    //     .sidenote {
-    //         padding-left: 2rem;
-    //     }
-    // }
 </style>

 <script context="module">
--- a/src/lib/Toc.svelte
+++ b/src/lib/Toc.svelte
@ -0,0 +1,149 @@
+<script>
+    import { onMount } from 'svelte';
+    import { makeSlug } from '$lib/utils.js';
+
+    export let items;
+
+    items.forEach(i => i.slug = makeSlug(i.text));
+
+    let headings = [];
+    let currentHeadingSlug = null;
+    let currentSubheadingSlug = null;
+
+    function setCurrentHeading() {
+        for (const h of headings) {
+            const yPos = h.getBoundingClientRect().y;
+            if (yPos > (window.innerHeight / 3)) {
+                break;
+            }
+            if (h.tagName === 'H2') {
+                currentHeadingSlug = h.id;
+                currentSubheadingSlug = null;
+            }
+            if (h.tagName === 'H3') {
+                currentSubheadingSlug = h.id
+            }
+        }
+    }
+
+    onMount (() => {
+        // These shouldn't change over the life of the page, so we can cache them
+        headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
+        setCurrentHeading();
+    });
+</script>
+
+<svelte:window on:scroll={setCurrentHeading} />
+
+<style>
+    #toc {
+        display: none;
+        position: sticky;
+        top: 1.5rem;
+        margin-left: 1rem;
+        margin-right: 2rem;
+
+        max-width: 14rem;
+        color: var(--content-color-faded);
+        opacity: 0;
+        animation: fade-in 600ms ease-out;
+        animation-delay: 500ms;
+        animation-fill-mode: forwards;
+    }
+
+    @media(min-width: 1300px) {
+        #toc { display: block }
+    }
+
+    @keyframes fade-in {
+        from {opacity: 0}
+        to {opacity: 1}
+    }
+
+    /* margin-left is to match the padding on the top-level list items,
+    but here it needs to be margin so that the border is also shifted */
+    h5 {
+        font-variant: petite-caps;
+        font-weight: 500;
+        max-width: fit-content;
+
+        margin-top: 0;
+        margin-bottom: 0.25em;
+
+        padding-bottom: 0.25em;
+        border-bottom: 1px solid currentcolor;
+        /* make the border stretch beyond the text just a bit, because I like the effect */
+        padding-right: 1.5rem;
+    }
+
+    ul {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    li {
+        position: relative;
+        font-size: 0.9rem;
+    }
+    li.depth-2 {
+        align-items: stretch;
+        margin-bottom: 0.2rem;
+    }
+    li.depth-3 {
+        align-items: center;
+        margin-bottom: 0.05rem;
+    }
+
+    .marker {
+        position: absolute;
+        left: -0.6rem;
+    }
+    .bar {
+        width: 0.1rem;
+        height: 100%;
+    }
+    .dot {
+        width: 0.15rem;
+        height: 0.15rem;
+        border-radius: 50%;
+        /* vertically center within its containing block */
+        top: 0;
+        bottom: 0;
+        margin: auto 0;
+    }
+
+    li.current, li:hover {
+        color: var(--content-color);
+    }
+    .current .marker, li:hover .marker {
+        background-color: var(--accent-color);
+    }
+
+    a {
+        color: inherit;
+        text-decoration: none;
+    }
+</style>
+
+
+<div id="toc">
+    <h5>
+        <span class="heading">Contents</span>
+    </h5>
+    <ul>
+        {#each items as item}
+            {#if item.depth === 2}
+                <li class="depth-2" class:current={item.slug === currentHeadingSlug} style:align-items="stretch">
+                    <span class="marker bar"></span>
+                    <a href="#{item.slug}">{item.text}</a>
+                </li>
+            {:else if item.depth === 3}
+                <li class="depth-3" class:current={item.slug === currentSubheadingSlug} style:align-items="center" style:margin-left="0.75em">
+                    <span class="marker dot"></span>
+                    <a href="#{item.slug}">{item.text}</a>
+                </li>
+            {/if}
+        {/each}
+    </ul>
+</div>
--- a/src/lib/projects/sidenotes/Frame.svelte
+++ b/src/lib/projects/sidenotes/Frame.svelte
@ -1,20 +0,0 @@
-<script>
-    import Step from './Step.svelte';
-    import {onMount} from 'svelte';
-
-    let frame;
-    onMount(() => {
-        frame.setAttribute('srcdoc', frame.innerHTML);
-    })
-</script>
-
-
-<iframe bind:this={frame}>
-    <html>
-        <head></head>
-        <body>
-            <Step />
-            <p>Goodbye world!</p>
-        </body>
-    </html>
-</iframe>
--- a/src/lib/projects/sidenotes/Step.svelte
+++ b/src/lib/projects/sidenotes/Step.svelte
@ -1,7 +0,0 @@
-<script>
-    let count = 0;
-</script>
-
-<p>hello world!</p>
-<button on:click={() => count++}>Increment</button>
-<p>The count is: {count}</p>
--- a/src/lib/slug.js
+++ b/src/lib/slug.js
@ -1,50 +0,0 @@
-const nonAlphaNum = /[^A-Za-z0-9\-]/g;
-const space = /\s/g
-
-export function makeSlug(text) {
-    return text
-        .toLowerCase()
-        .replace(space, '-')
-        .replace(nonAlphaNum, '')
-}
-
-function apply(node, types, fn) {
-    if (typeof types === 'string') {
-        types = new Set([types]);
-    }
-    else if (!(types instanceof Set)) {
-        types = new Set(types)
-        console.log(types)
-    }
-
-    if (types.has(node.type)) {
-        fn(node);
-    }
-    if ('children' in node) {
-        for (let child of node.children) {
-            apply(child, types, fn);
-        }
-    }
-}
-
-function getTextContent(node) {
-    let segments = [];
-    apply(node, 'text', textNode => {
-        // skip all-whitespace strings
-        if (textNode.value.match(/^\s+$/)) return;
-        segments.push(textNode.value.trim());
-    });
-
-    return segments.join(' ');
-}
-
-export default function slug() {
-    return (tree) => {
-        apply(tree, 'element', e => {
-            if (e.tagName.match(/h[1-6]/)) {
-                let text = getTextContent(e);
-                e.properties.id = makeSlug(text);
-            }
-        })
-    }
-}
--- a/src/lib/utils.js
+++ b/src/lib/utils.js
@ -0,0 +1,8 @@
+const nonAlphaNum = /[^A-Za-z0-9\-]/g;
+const space = /\s+/g;
+export function makeSlug(text) {
+    return text
+        .toLowerCase()
+        .replace(space, '-')
+        .replace(nonAlphaNum, '');
+}
--- a/src/lib/xml.js
+++ b/src/lib/xml.js
@ -0,0 +1,94 @@
+// const Node = {
+//     addChild(child) {
+//         this.children.push(child);
+//         return child;
+//     }
+// }
+
+
+export function tag(name, attrs, children) {
+    return {
+        type: 'tag',
+        tag: name,
+        attrs: attrs || {},
+        children: children || [],
+
+        addTag(name, attrs, children) {
+            const child = tag(name, attrs, children);
+            this.children.push(child);
+            return child;
+        },
+    };
+}
+
+
+export function text(content) {
+    return {
+        type: 'text',
+        text: content,
+    };
+}
+
+
+export function serialize(node, depth) {
+    if (!depth) {
+        depth = 0;
+    }
+
+    const indent = ' '.repeat(depth * 4);
+    let fragments = [];
+
+    // version tag, if this is the top level
+    if (depth === 0) {
+        fragments.push('<?xml version="1.0" encoding="UTF-8"?>\n')
+    }
+
+    fragments.push(`${indent}<${node.tag}`);
+
+    // this happens if there are multiple text nodes within the same parent
+    if (node.type === 'text') {
+        return `${indent}${escape(node.text)}`;
+    }
+
+    if (node.children === undefined) {
+        console.log(node);
+    }
+
+    // opening tag <element attr="value">
+    for (const attr in node.attrs) {
+        fragments.push(` ${attr}="${node.attrs[attr]}"`);
+    }
+    if (node.children.length === 0) {
+        fragments.push(' />');
+        return fragments.join('');
+    }
+    fragments.push('>');
+
+    // if the only child is a single text node, skip recursion and just dump contents directly
+    if (node.children.length === 1 && node.children[0].type === 'text') {
+        const text = escape(node.children[0].text);
+        fragments.push(text);
+    }
+    // otherwise, start a new line for each child node, then recurse
+    else {
+        for (const child of node.children) {
+            fragments.push('\n');
+            fragments.push(serialize(child, depth + 1));
+        }
+        // no need to verify that there were children, we already did that
+        fragments.push(`\n${indent}`);
+    }
+
+    fragments.push(`</${node.tag}>`);
+
+    return fragments.join('');
+}
+
+
+function escape(text) {
+    // we aren't going to bother with escaping attributes, so we won't worry about quotes
+    return text
+        .replaceAll('&', '&amp;')
+        .replaceAll('<', '&lt;')
+        .replaceAll('>', '&gt;');
+}
--- a/src/plugins/rehype.js
+++ b/src/plugins/rehype.js
@ -0,0 +1,90 @@
+import { visit, CONTINUE, EXIT, SKIP, } from 'unist-util-visit';
+import { find } from 'unist-util-find';
+import { toText } from 'hast-util-to-text';
+import { makeSlug } from '../lib/utils.js';
+
+
+export function localRehype() {
+    let printed = false;
+
+    return (tree, vfile) => {
+        const needsDropcap = vfile.data.fm.dropcap !== false
+        let dropcapAdded = false;
+
+        let moduleScript;
+        let imports = new Set();
+        if (needsDropcap) {
+            imports.add("import Dropcap from '$lib/Dropcap.svelte';");
+        }
+
+        visit(tree, node => {
+            // add slugs to headings
+            if (isHeading(node)) {
+                processHeading(node);
+                imports.add("import Heading from '$lib/Heading.svelte';");
+                return SKIP;
+            }
+
+            // mdsvex adds a <script context="module"> so we just hijack that for our own purposes
+            if (isModuleScript(node)) {
+                moduleScript = node;
+            }
+
+            // convert first letter/word of first paragraph to <Dropcap word="{whatever}">
+            if (needsDropcap && !dropcapAdded && isParagraph(node)) {
+                addDropcap(node);
+                dropcapAdded = true;
+                return SKIP;
+            }
+        });
+
+        // insert our imports at the top of the `<script context="module">` tag
+        if (imports.size > 0) {
+            const script = moduleScript.value;
+            // split the script where the opening tag ends
+            const i = script.indexOf('>');
+            const openingTag = script.slice(0, i + 1);
+            const remainder = script.slice(i + 1);
+
+            // mdvsex uses tabs so we will as well
+            const importScript = Array.from(imports).join('\n\t');
+
+            moduleScript.value = `${openingTag}\n\t${importScript}${remainder}`;
+        }
+    }
+}
+
+
+function processHeading(node) {
+    const level = node.tagName.slice(1);
+    node.tagName = 'Heading';
+    node.properties.level = level;
+    node.properties.id = makeSlug(toText(node));
+}
+
+
+function addDropcap(par) {
+    let txtNode = find(par, {type: 'text'});
+    const i = txtNode.value.search(/\s/);
+    const firstWord = txtNode.value.slice(0, i);
+    const remainder = txtNode.value.slice(i);
+
+    par.children.unshift({
+        type: 'raw',
+        value: `<Dropcap word="${firstWord}" />`,
+    });
+    txtNode.value = remainder;
+}
+
+
+function isHeading(node) {
+    return node.type === 'element' && node.tagName.match(/h[1-6]/);
+}
+
+function isModuleScript(node) {
+    return node.type === 'raw' && node.value.match(/^<script context="module">/);
+}
+
+function isParagraph(node) {
+    return node.type === 'element' && node.tagName === 'p';
+}
--- a/src/plugins/remark.js
+++ b/src/plugins/remark.js
@ -0,0 +1,48 @@
+import { visit } from 'unist-util-visit';
+import { toString } from 'mdast-util-to-string';
+
+import fs from 'node:fs';
+
+// build table of contents and inject into frontmatter
+export function localRemark() {
+    return (tree, vfile) => {
+        let toc = [];
+        let description = null;
+        
+        visit(tree, ['heading', 'paragraph'], node => {
+            // build table of contents and inject into frontmatter
+            if (node.type === 'heading') {
+                toc.push({
+                    text: toString(node),
+                    depth: node.depth,
+                });
+            }
+
+            // inject description (first 25 words of the first paragraph)
+            if (node.type === 'paragraph' && description === null) {
+                description = summarize(node);
+            }
+        });
+
+        vfile.data.fm.toc = toc;
+        vfile.data.fm.description = description;
+    }
+}
+
+
+// convert paragraph to single string after stripping everything between html tags
+function summarize(par) {
+    let newChildren = [];
+    let push = true;
+    for (const child of par.children) {
+        if (child.type === 'html') {
+            push = !push;
+            continue;
+        }
+        if (push) {
+            newChildren.push(child);
+        }
+    }
+
+    return toString({type: 'paragraph', children: newChildren});
+}
--- a/src/routes/+layout.js
+++ b/src/routes/+layout.js
@ -0,0 +1 @@
+export const prerender = true;
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@ -0,0 +1,37 @@
+<style>
+    .header {
+        background-color: #4f5f68;
+    }
+
+    nav {
+        max-width: 30rem;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-around;
+    }
+
+    nav a {
+        color: white;
+        width: 8rem;
+        min-width: 6rem;
+        font-size: 1.5rem;
+        text-decoration: none;
+        text-align: center;
+        padding: 0.25rem 0;
+    }
+    nav a:hover {
+        background-color: #00000025;
+    }
+</style>
+
+<div class="header">
+    <nav>
+        <a data-sveltekit-preload-data="hover" href="/">Home</a>
+        <a data-sveltekit-preload-data="hover" href="/posts">Posts</a>
+        <a data-sveltekit-preload-data="hover" href="/about">About</a>
+    </nav>
+</div>
+
+<main>
+    <slot></slot>
+</main>
--- a/src/routes/+page.js
+++ b/src/routes/+page.js
@ -0,0 +1,8 @@
+export async function load({ data }) {
+    let post = await import(`./_posts/${data.slug}.svx`);
+    post.metadata.slug = data.slug;
+    post.metadata.next = data.next;
+    return {
+        post: post.default,
+    }
+}
--- a/src/routes/+page.server.js
+++ b/src/routes/+page.server.js
@ -0,0 +1,11 @@
+import { postData, siblingPosts } from './_posts/all.js';
+
+
+// this is in a "servserside" loader so that we don't end up embedding the metadata
+// for every post into the final page
+export function load() {
+    return {
+        slug: postData[0].slug,
+        next: postData[1].slug,
+    };
+}
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -0,0 +1,5 @@
+<script>
+    export let data;
+</script>
+
+<svelte:component this={data.post} />
--- a/src/routes/404/+page.svelte
+++ b/src/routes/404/+page.svelte
@ -0,0 +1,14 @@
+<style>
+    h1 {
+        margin-top: 6rem;
+    }
+
+    h1, p {
+        text-align: center;
+    }
+</style>
+
+
+<h1>404</h1>
+
+<p>That page doesn't exist. Sorry!</p>
--- a/src/routes/[slug].svelte
+++ b/src/routes/[slug].svelte
@ -1,24 +0,0 @@
-<script context="module">
-    export async function load({ url, params }) {
-        try {
-            let post = await import(`./_posts/${params.slug}.svx`);
-            return {
-                props: {
-                    post: post.default
-                }
-            }
-        }
-        catch (err) {
-            return {
-                status: 404,
-                error: `Not found: ${url.pathname}`,
-            }
-        }
-    }
-</script>
-
-<script>
-    export let post;
-</script>
-
-<svelte:component this={post} />
--- a/src/routes/[slug]/+page.js
+++ b/src/routes/[slug]/+page.js
@ -0,0 +1,24 @@
+import { error } from '@sveltejs/kit';
+
+
+export async function load({ url, params, data }) {
+    let post;
+    try {
+        post = await import(`../_posts/${params.slug}.svx`);
+    }
+    catch (err) {
+        if (err.message.match(/Unknown variable dynamic import/)) {
+            throw error(404, `Not found: ${url.pathname}`);
+        }
+        else {
+            throw err;
+        }
+    }
+
+    post.metadata.slug = params.slug;
+    post.metadata.prev = data.prev;
+    post.metadata.next = data.next;
+    return {
+        post: post.default,
+    }
+}
--- a/src/routes/[slug]/+page.server.js
+++ b/src/routes/[slug]/+page.server.js
@ -0,0 +1,10 @@
+import { postData } from '../_posts/all.js';
+
+
+export function load({ params }) {
+    const i = postData.findIndex(p => p.slug === params.slug);
+    return {
+        prev: i > 0 ? postData[i - 1].slug : null,
+        next: i < postData.length - 1 ? postData[i + 1].slug : null,
+    };
+}
--- a/src/routes/[slug]/+page.svelte
+++ b/src/routes/[slug]/+page.svelte
@ -0,0 +1,5 @@
+<script>
+    export let data;
+</script>
+
+<svelte:component this={data.post} />
--- a/src/routes/__layout.svelte
+++ b/src/routes/__layout.svelte
@ -1,45 +0,0 @@
-<style>
-    :global(main) {
-        --content-width: 42rem;
-        box-sizing: border-box;
-        max-width: var(--content-width);
-        margin: 0 auto;
-        padding:  0 15px;
-    }
-
-    #header {
-        background-color: #4f5f68;
-    }
-
-    #nav-main {
-        max-width:  30rem;
-        margin:  0 auto;
-        display:  grid;
-        grid-template-columns:  repeat(3, minmax(6rem, 8rem));
-        justify-content: space-between;
-    }
-
-    #nav-main a {
-        font-size: 1.5rem;
-        color:  white;
-        text-decoration: none;
-        text-align: center;
-        padding:  0.25rem 0;
-    }
-
-    #nav-main a:hover {
-        background-color: #00000025;
-    }
-</style>
-
-<div id="header">
-    <nav id="nav-main">
-        <a sveltekit:prefetch href="/">Home</a>
-        <a sveltekit:prefetch href="/posts">Posts</a>
-        <a sveltekit:prefetch href="/">About</a>
-    </nav>
-</div>
-
-<main>
-    <slot></slot>
-</main>
--- a/src/routes/_posts/all.js
+++ b/src/routes/_posts/all.js
@ -1,28 +1,26 @@
-import { dev } from '$app/env';
-const posts = import.meta.globEager('./_posts/*.svx');
+import { dev } from '$app/environment';
+const posts = import.meta.globEager('./*.svx');

-export let postData = [];

+let postData = [];
 for (const path in posts) {
    // skip draft posts in production mode
    if (!dev && posts[path].metadata.draft) {
        continue;
    }

-    const slug = path.slice(9, -4)
+    // slice off the ./ and the .svx
+    const slug = path.slice(2, -4);
    posts[path].metadata.slug = slug;
    postData.push(posts[path].metadata);
 }
+
+
 postData.sort((a, b) => {
    // sorting in reverse, so we flip the intuitive order
    if (a.date > b.date) return -1;
    if (a.date < b.date) return 1;
    return 0;
-})
-
-export async function get() {
-    return {
-        body: {postData}
-    };
-}
+});

+export { postData };
--- a/src/routes/_posts/exposing-docker-containers-to-your-lan.svx
+++ b/src/routes/_posts/exposing-docker-containers-to-your-lan.svx
@ -31,7 +31,7 @@ docker network create \\
    -o parent=eth0 \\
    lan

-docker run --network lan --ip 192.168.50.24 some/image:version
+docker run --network lan --ip 192.168.50.24 some/image:tag
 ```

 That's it! You're done, congratulations. (Obviously `--subnet`, `--gateway`, and `--parent` should be fed values appropriate to your network.)
--- a/src/routes/_posts/imagining-a-passwordless-future.svx
+++ b/src/routes/_posts/imagining-a-passwordless-future.svx
@ -3,6 +3,7 @@ title: Imagining A Passwordless Future
 description: Can we replace passwords with something more user-friendly?
 date: 2021-04-30
 draft: true
+dropcap: false
 ---
 <script>
    import Sidenote from '$lib/Sidenote.svelte';
--- a/src/routes/_posts/kubernetes-alternative-wishes.svx
+++ b/src/routes/_posts/kubernetes-alternative-wishes.svx
@ -0,0 +1,81 @@
+---
+title: The Kubernetes Alternative I Wish Existed
+date: 2023-10-01
+draft: true
+---
+
+<script>
+    import Sidenote from '$lib/Sidenote.svelte';
+</script>
+
+I use Kubernetes on my personal server, largely because I wanted to get some experience working with it. It's certainly been helpful in that regard, but after a year and a half or so I think I can pretty confidently say that it's not the ideal tool for my use-case. Duh, I guess? But I think it's worth talking about _why_ that's the case, and what exactly _would_ be the ieal tool.
+
+## The Kubernetes Way™
+
+Kubernetes is a very intrusive orchestration system. It would very much like the apps you're running to be doing things _its_ way, and although that's not a _hard_ requirement it tends to make everything subtly more difficult when that isn't the case. In particular, Kubernetes is targeting the situation where you:
+
+* Have a broad variety of applications that you want to support,
+* Have written all or most of those applications yourself,<Sidenote>The "you" here is organizational, not personal.</Sidenote>
+* Need those applications to operate at massive scale, e.g. concurrent users in the millions.
+
+That's great if you're Google, and surprise! Kubernetes is a largely Google-originated project,<Sidenote>I'm told that it's a derivative of Borg, Google's in-house orchestration platform.</Sidenote> but it's absolute _garbage_ if you (like me) are just self-hosting apps for your own personal use and enjoyment. It's garbage because, while you still want to support a broad variety of applications, you typically _didn't_ write them yourself and you _most definitely don't_ need to scale to millions of concurrent users. More particularly, this means that the Kubernetes approach of expecting everything to be aware that it's running in Kubernetes and make use of the platform (via cluster roles, CRD's etc) is very much _not_ going to fly. Instead, you want your orchestration platform to be as absolutely transparent as possible: ideally, a running application should need to behave no differently in this hypothetical self-hosting-focused orchestration system than it would if it were running by itself on a Raspberry Pi in your garage. _Most especially_, all the distributed-systems crap that Kubernetes forces on you is pretty much unnecessary, because you don't need to support millions<Sidenote>In fact, typically your number of concurrent users is going to be either 1 or 0.</Sidenote> of concurrent users, and you don't care if you incur a little downtime when the application needs to be upgraded or whatever.
+
+## But Wait
+
+So then why do you need an orchestration platform at all? Why not just use something like [Harbormaster](https://gitlab.com/stavros/harbormaster) and call it a day? That's a valid question, and maybe you don't! In fact, it's quite likely that you don't - orchestration platforms really only make sense when you want to distribute your workload across multiple physical servers, so if you only have the one then why bother? However, I can still think of a couple of reasons why you'd want a cluster even for your personal stuff:
+
+* You don't want everything you host to become completely unavailable if you bork up your server somehow. Yes, I did say above that you can tolerate some downtime, and that's still true - but especially if you like tinkering around with low-level stuff like filesystems and networking, it's quite possible that you'll break things badly enough<Sidenote>And be sufficiently busy with other things, given that we're assuming this is just a hobby for you.</Sidenote> that it will be days or weeks before you can find the time to fix them. If you have multiple servers to which the workloads can migrate while one is down, that problem goes away.
+
+* You don't want to shell out up front for something hefty enough to run All Your Apps, especially as you add more down the road. Maybe you're starting out with a Raspberry pi, and when that becomes insufficient you'd like to just add more Pis rather than putting together a beefy machine with enough RAM to feed your [Paperless](https://github.com/paperless-ngx/paperless-ngx) installation, your [UniFi controller](https://help.ui.com/hc/en-us/articles/360012282453-Self-Hosting-a-UniFi-Network-Server), your Minecraft server(s), and your [Matrix](https://matrix.org) server.
+
+Okay, sure, maybe this is still a bit niche. But you know what? This is my blog, so I get to be unrealistic if I want to.
+
+## So what's different?
+
+Our hypothetical orchestrator system starts out in the same place as Kubernetes--you have a bunch of containerized applications that need to be run, and a pile of physical servers on which you'd like to run them. You want to be able to specify at a high level in what ways things should run, and how many of them, and so on. You don't want to worry about the fiddly details like deciding which container goes on which host, or manually moving all of `odin`'s containers to `thor` when the Roomba runs over `odin`'s power cable while you're on vacation on the other side of the country.
+
+So that much is the same. But we're going to do everything else differently.
+
+Where Kubernetes is intrusive, we want to be transparent. Where Kubernetes is flexible and pluggable, we will be opinionated. Where Kubernetes wants to proliferate statelessness and distributed-systems-ism, we will be perfectly content with stateful monotliths.<Sidenote>And smaller things, too. Microliths?</Sidenote> Where Kubernetes expects cattle, we will accept pets. And so on.
+
+## The Goods
+
+### Docker-Image Based
+
+It's 2023 and the world has more or less decided on Docker<Sidenote>I know we're supposed to call them "OCI Images" now, but they'll always be Docker images to me. Docker started them, Docker popularized them, and then Docker died because it couldn't figure out how to monetize an infrastructure/tooling product. The least we can do is honor its memory by keeping the name alive.</Sidenote> images as the preferred format for packaging server applications. Are they efficient? Hell no. Are they annoying and fiddly, with plenty of [hidden footguns](https://danaepp.com/finding-api-secrets-in-hidden-layers-within-docker-containers)? You bet. But they _work_, and they've massively simplified the process of getting a server application up and running. As someone who has had to administer a Magento 2 installation, it's hard not to find that appealing.
+
+They're especially attractive to the self-hosting-ly inclined, because a well-maintained Docker image tends to keep _itself_ up to date with a bare minimum of automation. I know "automatic updates" are anathema to some, but remember, we're talking self-hosted stuff here--sure, the occasional upgrade may break your Gitea<Sidenote>Actually, probably not. I've been running Gitea for years now and never had a blip.</Sidenote> server, but I can almost guarantee that you'll spend less time fixing that than you would have manually applying every update to every app you ever wantedt to host, forever.
+
+So our hypothetical orchestrator is going to use Docker images. But there's a complication: It can't use Docker to run them, or even the lower-level components like `containerd` or `cri-o`, because it's going to be doing it all with...
+
+### Firecracker
+
+You didn't write all these apps yourself, and you don't trust them any further than you can throw them. Containers are great and all, but you'd like a little more organization. Enter Firecracker. This does add some complexity where resource management is concerned, especially memory, since by default Firecracker wants you to allocate everything up front. But maybe that's ok, or maybe we can build in some [ballooning](https://github.com/firecracker-microvm/firecracker/blob/main/docs/ballooning.md) to keep things under control.
+
+Now, since we're running Docker images in Firecracker containers, we're going to need a method for converting Docker images _into_ Firecracker containers. Particularly we're going to need to convert a Docker image to a Firecracker rootfs, which is [definitely doable](https://fly.io/blog/docker-without-docker/) but not _completely_ trivial.
+
+### Networking
+
+Locked-down by default. You don't trust these apps, so they don't get access to the soft underbelly of your LAN. So it's principle-of-least-privilege all the way. Ideally it should be possible when specifying a new app that it gets network access to an existing app, rather than having to go back and modify the existing one.
+
+### Storage
+
+Kubernetes tends to work best with stateless applications. It's not entirely devoid of [tools](https://kubernetes.io/docs/concepts/workloads/controllers/statefulset/) for dealing with state, but state requires persistent storage and persistent storage is hard in clusters. I get the sense that for a long time you were almost completely on your own here, although recent options (Longhorn) are improving the situation.
+
+Regardless, we're selfhosting here, which means virtually _everything_ has state. But fear not! Distributed state is hard, yes, but most of our apps aren't going to be truly distributed. That is, typically there's only going to be one instance running at a time, and it's acceptable to shut down the existing instance before spinning up a new one. So this problem becomes a lot more tractable.
+
+* Asynchronous replication
+* Single-writer, multi-reader
+* Does this exist?
+
+### Configuration
+
+YAML, probably? It's fashionable to hate on YAML right now, but I've always found it rather pleasant.<Sidenote>Maybe people hate it because their primary experience of using it has been in Kubernetes manifests, which, fair enough.</Sidenote> JSON is out because no comments. TOML is out because nesting sucks. Weird niche supersets of JSON like HuJSON and JSON5 are out because they've been around long enough that if they were going to catch on, they would have by now. Docker Swarm config files<Sidenote>which are basically just Compose files with a few extra bits.</Sidenote> are my exemplar par excellence here. (comparison of Kubernetes and Swarm YAML?) (Of course they are, DX has always been Docker's Thing.)
+
+We are also _definitely_ going to eschew the Kubernetes model of exposing implementation details in the name of extensibility.<Sidenote>See: ReplicaSets, EndpointSlices. There's no reason for these to be first-class API resources like Deployments or Secrets, other than to enable extensibility. You never want users creating EndpointSlices manually, but you might (if you're Kubernetes) want to allow an "operator" service to fiddle with them, so you make them first-class resources because you have no concept of the distinction between external and internal APIs.</Sidenote>
+
+### Workload Grouping
+
+It's always struck me as odd that Kubernetes doesn't have a native concept for a heterogenous grouping of pods. Maybe it's because Kubernetes assumes it's being used to deploy mostly microservices, which are typically managed by independent teams--so workloads that are independent but in a provider/consumer relationship are being managed by different people, probably in different cluster namespaces anyway, so why bother trying to group them?
+
+Regardless, I think Nomad gets this exactly right with the job/group/task hierarchy. I'd like to just copy that wholesale, but with more network isolation.
--- a/src/routes/_posts/passwords-and-you.svx
+++ b/src/routes/_posts/passwords-and-you.svx
@ -0,0 +1,28 @@
+---
+title: Password Strength, Hackers, and You
+date: 2023-10-21
+draft: true
+---
+<script>
+    import Sidenote from '$lib/Sidenote.svelte';
+</script>
+
+Every once in a while, as my friends and family can attest, I go off on a random screed about passwords, password strength, password cracking, logins, etc. To which they listen with polite-if-increasingly-glassy-eyed expressions, followed by an equally polite change of conversational topic. To avoid falling into this conversational tarpit _quite_ so often, I've decided to write it all up here, so that instead of spewing it into an unsuspecting interlocutor's face I can simply link them here.<Sidenote>Maybe I can get business cards printed, or something.</Sidenote> Whereupon they can say "Thanks, that sounds interesting," and proceed to forget that it ever existed. So it's a win-win: I get to feel like I've Made A Difference, and they don't have to listen to a half-hour of only-marginally-interesting infosec jargon.
+
+So.
+
+## Password Strength
+
+Everyone knows that the "best" password is at least 27 characters long and contains both uppercase and lowercase letters, numbers, a symbol or two, at least one ~~typographical miscue~~, and at least one letter from the ancient Sanskrit, Egyptian, or Sumerian alphabet. What may be slightly less known is exactly _why_ this is the recommended approach to picking passwords, and how the same goal might be accomplished by other, less eye-gougingly awful means.
+
+So what makes a "strong" password? Most people have a pretty good intuition for this, I think: A strong password is one that can't be easily guessed. The absolute _worst_ password is something that might be guessed by someone who knows nothing at all about you, such as `password` or `123456`<Sidenote>This is, in fact, the most common password (or was last I checked), according to [Pwned Passwords](https://haveibeenpwned.com/passwords).</Sidenote> Only slightly stronger is a password that's obvious to anyone who knows the slightest bit about its circumstances, such as your first name or the name of the site/service/etc. to which it logs you in.
+
+Ok, so it's pretty clear what makes a _really_ bad password. But what about an only-sort-of-bad password? This is where intuition starts to veer off the rails a little bit, I think. The "guessability" of a password might be quantified as "how long, on average, would it take to guess"? Unfortuantely, the intuitive situation of "guessing" a password is pretty divergent from the reality of what a password cracker is actually doing when they try to crack passwords. Most people, based on the conversations I've had, envision "password guessing" as someone sitting at a computer, typing in potential passwords one by one. Or, maybe slightly more sophisticatedly, they imagine a computer firing off attempted logins from a list of potential passwords, but critically, _against the live system that is under attack._ This is a problem, because most password cracking (at least, the kind you have to worry about) _doesn't_ take place against live login pages. Instead, it happens in what's known as an "offline" attack, when the password cracker has managed to obtain a copy of the password database and starts testing various candidates against it. To explain this, though, we have to take a little detour into...
+
+## Password storage
+
+Unless the system in question is hopelessly insecure (and there are such systems; we'll talk about that in a bit) it doesn't store a copy of your password in plain text. Instead it stores what's called a _hash_, which is what you get when you run the password through a particular type of data-munging process called a _hashing algorithm_. A good password hashing algorithm has two key properties that make it perfect for this use case: It's _non-reversible_, and it's _computationally expensive_.
+
+### One-way hashing
+
+Suppose your password is `password`, and its hash is something like `X03MO1qnZdYdgyfeuILPmQ`. The non-reversibility of the hashing algorithm means that given the second value, there isn't any direct way to derive the first again. The only way to figure it out is to, essentially, guess-and-check against a list of potential candidate inputs. If that sounds a little bit like black magic, don't worry - I felt the same way when I first encountered the concept. How can a hash be irreversible _even if you know the algorithm_? 
--- a/src/routes/_posts/sidenotes.svx
+++ b/src/routes/_posts/sidenotes.svx
@ -2,12 +2,11 @@
 title: Sidenotes
 description: An entirely-too-detailed dive into how I implemented sidenotes for this blog.
 date: 2023-08-14
+draft: true
 ---
 <script>
-    import Dropcap from '$lib/Dropcap.svelte';
    import Sidenote from '$lib/Sidenote.svelte';
    import UnstyledSidenote from '$lib/UnstyledSidenote.svelte';
-    import Frame from '$lib/projects/sidenotes/Frame.svelte';
 </script>

 <style>
@ -64,7 +63,7 @@ date: 2023-08-14
    }
 </style>

-<Dropcap word="One">of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote></Dropcap>
+One of my major goals when building this blog was to have sidenotes. I've always been a fan of sidenotes on the web, because the most comfortable reading width for a column of text is <em>far</em> less than the absurd amounts of screen width we tend to have available, and what else are we going to use it for?<Sidenote>Some sites use it for ads, of course, which is yet another example of how advertising ruins everything.</Sidenote>

 Footnotes don't really work on the web the way they do on paper, since the web doesn't have page breaks. You _can_ stick your footnotes in a floating box at the bottom of the page, so they're visible at the bottom of the text just like they would be on a printed page, but this sacrifices precious vertical space.<Sidenote>On mobile, it's _horizontal_ space that's at a premium, so I do use this approach there. Although I'm a pretty heavy user of sidenotes, so I have to make them toggleable as well or they'd fill up the entire screen.</Sidenote> Plus, you usually end up with the notes further away from the point of divergence than they would be as sidenotes anyway.

--- a/src/routes/_posts/vue-vs-svelte.svx
+++ b/src/routes/_posts/vue-vs-svelte.svx
@ -4,22 +4,21 @@ description: They're more similar than they are different, but they say the most
 date: 2023-06-29
 ---
 <script>
-    import Dropcap from '$lib/Dropcap.svelte';
    import Sidenote from '$lib/Sidenote.svelte';
 </script>


-<Dropcap word="Recently">I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.</Dropcap>
+Recently I've had a chance to get to know Vue a bit. Since my frontend framework of choice has previously been Svelte (this blog is built in Svelte, for instance) I was naturally interested in how they compared.

-Of course, this is only possible because Vue and Svelte are really much more similar than they are different. Even among frontend frameworks, they share a lot of the same basic ideas and high-level concepts, which means that we get to dive right into the nitpicky details and have fun debating `bind:attr={value}` versus `:attr="value"`. In the meantime, a lot of the building blocks are basically the same or at least have equivalents, such as:
+This is necessarily going to focus on a lot of small differences, because Vue and Svelte are really much more similar than they are different. Even among frontend frameworks, they share a lot of the same basic ideas and high-level concepts, which means that we get to dive right into the nitpicky details and have fun debating `bind:attr={value}` versus `:attr="value"`. In the meantime, a lot of the building blocks are basically the same or at least have equivalents, such as:
 * Single-file components with separate sections for markup, style, and logic
 * Automatically reactive data bindings
 * Two-way data binding (a point of almost religious contention in certain circles)
-* An "HTML-first" mindset, as compared to the "Javascript-first" mindset found in React and its ilk. The best way I can describe this is by saying that in Vue and Svelte, the template<Sidenote>Or single-file component, anyway.</Sidenote> embeds the logic, whereas in React, the logic embeds the template.
+* An "HTML-first" mindset, as compared to the "Javascript-first" mindset found in React and its ilk. The best way I can describe this is by saying that in Vue and Svelte, the template wraps the logic, whereas in React, the logic wraps the template.

 I should also note that everything I say about Vue applies to the Options API unless otherwise noted, because that's all I've used. I've only seen examples of the Composition API (which looks even more like Svelte, to my eyes), I've never used it myself.

-With that said, there are plenty of differences between the two, and naturally I find myself in possession of immediate and vehement Preferences.<Sidenote>I should also clarify that practically everything in this post is just that: a preference. While I obviously plan to explain my preferences and think it would be reasonable for other people to do the same, it's undeniably true that preferences can vary, and in a lot of cases are basically arbitrary. So if you find yourself disagreeing with all or most of what I say, consider it an opportunity to peer into the mindset of The Other Side.</Sidenote> Starting with:
+With that said, there are plenty of differences between the two, and naturally I find myself in possession of immediate and vehement Preferences.<Sidenote>Completely arbitrary, of course, so feel free to disagree!</Sidenote> Starting with:

 ## Template Syntax

@ -53,11 +52,11 @@ While Svelte takes the more common approach of wrapping bits of markup in its ow
 </div>
 ```

-While Vue's approach may be a tad unorthodox, I find that I actually prefer it in practice. It has the killer feature that, by embedding itself inside the existing HTML, it doesn't mess with my indentation - which is something that has always bugged me about Mustache, Liquid, Jinja, etc.<Sidenote>Maybe it's silly of me to spend time worrying<Sidenote>Nested<Sidenote>Doubly-nested sidenote!</Sidenote> sidenote!</Sidenote> about something so trivial,<Sidenote>Second nested sidenote.</Sidenote>  but hey, this whole post is one big bikeshed anyway.</Sidenote>
+While Vue's approach may be a tad unorthodox, I find that I actually prefer it in practice. It has the killer feature that, by embedding itself inside the existing HTML, it doesn't mess with my indentation - which is something that has always bugged me about Mustache, Liquid, Jinja, etc.<Sidenote>Maybe it's silly of me to spend time worrying about something so trivial, but hey, this whole post is one big bikeshed anyway.</Sidenote>

 Additionally (and Vue cites this as the primary advantage of its style, I think) the fact that Vue's custom attributes are all syntactically valid HTML means that you can actually embed Vue templates directly into your page source. Then, when you mount your app to an element containing Vue code, it will automatically figure out what to do with it.<Sidenote>AlpineJS also works this way, but this is the *only* way that it works - it doesn't have an equivalent for Vue's full-fat "app mode" as it were.</Sidenote> This strikes me as a fantastic way to ease the transition between "oh I just need a tiny bit of interactivity on this page, so I'll just sprinkle in some inline components" and "whoops it got kind of complex, guess I have to factor this out into its own app with a build step and all now."

-Detractors of this approach might point out that it's harder to spot things like `v-if` and `v-for` when they're hanging out inside of existing HTML tags, but that seems like a problem that's easily solved with a bit of syntax highlighting.<Sidenote>I'm being unfair here. It's more than just a lack of syntax highlighting, it's a reversal of the typical order in which people are used to reading code, where the control flow is indicated before whatever it's controlling. So you end up with a sort of [garden-path-like](https://xkcd.com/2793/) problem where you have to mentally double back and re-read things in a different light. I still don't think it's a huge issue, though, because in every case I'm come across the control flow bits (so `v-if`, `v-for`, and `v-show`) are specified _immediately_ after the opening tag. So you don't really have to double back by an appreciable amount, and it doesn't take too long to get used to it.</Sidenote>
+Detractors of this approach might point out that it's harder to spot things like `v-if` and `v-for` when they're hanging out inside of existing HTML tags, but that seems like a problem that's easily solved with a bit of syntax highlighting. However I do have to admit that it's a reversal of the typical order in which you read code: normally you see the control-flow constructs _first_, and only _after_ you've processed those do you start to worry about whatever they're controlling. So you end up with a sort of [garden-path-like](https://xkcd.com/2793/) problem where you have to mentally double back and re-read things in a different light. I still don't think it's a huge issue, though, because in every case I'm come across the control flow bits (so `v-if`, `v-for`, and `v-show`) are specified _immediately_ after the opening tag. So you don't really have to double back by an appreciable amount, and it doesn't take too long to get used to it.

 Continuing the exploration of template syntax, Vue has some cute shorthands for its most commonly-used directives, including `:` for `v-bind` and `@` for `v-on`. Svelte doesn't really have an equivalent for this, although it does allow you to shorten `attr={attr}` to `{attr}`, which can be convenient. Which might as well bring us to:

@ -71,7 +70,7 @@ The reason this threw me is that Svelte makes the very intuitive decision that s

 Two-way bindings in Svelte are similarly straightforward, for example: `<input type="checkbox" bind:checked={isChecked}>` In Vue this would be `<input type="checkbox" v-model="isChecked">`, which when you first see it doesn't exactly scream that the value of `isChecked` is going to apply to the `checked` property of the checkbox. On the other hand, this does give Vue the flexibility of doing special things for e.g. the values of `<select>` elements: `<select v-model="selectedOption">` is doing quite a bit of work, since it has to interact with not only the `<select>` but the child `<option>`s as well. Svelte just throws in the towel here and tells you to do `<select bind:value={selectedOption}>`, which looks great until you realize that `value` isn't technically a valid attribute for a `<select>`. So Svelte's vaunted principle of "using the platform" does get a _little_ bent out of shape here.

-Oh, and two-way bindings in Vue get _really_ hairy if it's another Vue component whose attribute you want to bind, rather than a builtin form input. Vue enforces that props be immutable from the inside, i.e. a component isn't supposed to mutate its own props. So from the parent component it doesn't look too bad:
+Oh, and two-way bindings in Vue get _really_ hairy if it's another Vue component whose attribute you want to bind, rather than a built-in form input. Vue enforces that props be immutable from the inside, i.e. a component isn't supposed to mutate its own props. So from the parent component it doesn't look too bad:
 ```markup
 <ChildComponent v-model="childValue" />`
 ```
@ -88,9 +87,9 @@ export default {
 }
 ```

-In Svelte, you just `bind:` on a prop of a child component, and then if the child updates the prop it will be reflected in the parent as well. I don't think there's any denying that's a lot simpler.<Sidenote>I think this is where the "two-way data binding" holy wars start to get involved, but I actually really like the way Svelte does things here. I think most of the furor about two-way data binding refers to bindings that are _implicitly_ two-way, i.e. the child can mutate state that the parent didn't expect or intend it to. In Svelte's case, though, this is only possible if you explicitly pass the state with `bind:`, which signifies that you _do_ want this state to be mutated by the child and that you have made provisions therefor. </Sidenote>
+In Svelte, you just `bind:` on a prop of a child component, and then if the child updates the prop it will be reflected in the parent as well. I don't think there's any denying that's a lot simpler.<Sidenote>I think this is where the "two-way data binding" holy wars start to get involved, but I actually really like the way Svelte does things here. I think most of the furor about two-way data binding refers to bindings that are _implicitly_ two-way, i.e. anyone with a reference tosome stat can mutate it in ways the original owner didn't expect or intend it to. (KnockoutJS observables work this way, I think?) In Svelte's case, though, this is only possible if you explicitly pass the state with `bind:`, which signifies that you _do_ want this state to be mutated by the child and that you have made provisions therefor. My understanding is that in React you'd just be emitting an event from the child component and handling that event up the tree somewhere, so in practice it's basically identical. That said, I haven't used React so perhaps I'm not giving the React Way™ a fair shake here.</Sidenote>

-Vue does have some lovely convenience features for common cases, though. One of my favorites is binding an object to the `class` of an HTML element, for example: `<button :class="{btn: true, primary: false}">` Which doesn't look too useful on its own, but move that object into a data property and you can now toggle classes on the element extremely easily by just setting properties on the object. The closest Svelte comes is `<button class:btn={isBtn} class:primary={isPrimary}>`, which is a lot more verbose. Vue also lets you bind an array to `class` and the elements of the array will be treated as individual class names, which can be convenient in some cases if you have a big list of classes and you're toggling them all as a set.
+Vue does have some lovely convenience features for common cases, though. One of my favorites is binding an object to the `class` of an HTML element, for example: `<button :class="{btn: true, primary: false}">` Which doesn't look too useful on its own, but move that object into a data property and you can now toggle classes on the element extremely easily by just setting properties on the object. The closest Svelte comes is `<button class:btn={isBtn} class:primary={isPrimary}>`, which is a lot more verbose. Vue also lets you bind an array to `class` and the elements of the array will be treated as individual class names, which can be convenient in some cases if you have a big list of classes and you're toggling them all as a set. <Sidenote>Since I'm a fan of TailwindCSS, this tends to come up for me with some regularity.</Sidenote>

 The other area where I vastly prefer Vue's approach over Svelte's is in event handlers. Svelte requires that every event handler be a function, either named or inline, so with simple handlers you end up with a lot of `<button on:click={() => counter += 1}` situations. Vue takes the much more reasonable approach of letting you specify a plain statement as your event handler, e.g. `<button @click="counter += 1">`. For whatever reason this has always particularly annoyed me about Svelte, so Vue's take is very refreshing.

@ -107,7 +106,7 @@ You really only need to access the event when you're doing something more exotic

 In Vue, reactive values (by which I mean "values that can automatically trigger a DOM update when they change") are either passed in as `props`, or declared in `data`. Or derived from either of those sources in `computed`. Then you reference them, either directly in your template or as properties of `this` in your logic. Which works fine, more or less, although you can run into problems if you're doing something fancy with nested objects or functions that get their own `this` scope.<Sidenote>It's worth noting that the Composition API avoids this, at the cost of having to call `ref()` on everything and reference `reactiveVar.value` rather than `reactiveVar` by itself.</Sidenote> The split between how you access something from the template and how you access it from logic was a touch surprising to me at first, though.

-In Svelte, variables are just variables, you reference them the same way from everywhere, and if they need to be reactive it (mostly) just happens automagically. Svelte has a lot more freedom here because it's a compiler, rather than a library, so it can easily insert calls to its special `$$invalidate()` function after any update to a value that needs to be reactive.
+In Svelte, variables are just variables, you reference them the same way from everywhere, and if they need to be reactive it (mostly) just happens automagically.<Sidenote>And of course, after I first wrote this but just before I was finally ready to publish, Svelte went ahead and [changed this on me](https://svelte.dev/blog/runes). I'll leave my comments here as I originally wrote them, just keep in mind that if these changes stick then Svelte becomes even _more_ similar to Vue's composition API.</Sidenote> Svelte has a lot more freedom here because it's a compiler, rather than a library, so it can easily insert calls to its special `$$invalidate()` function after any update to a value that needs to be reactive.

 Both frameworks allow you to either derive reactive values from other values, or just execute arbitrary code in response to data updates. In Vue these are two different concepts - derived reactive values are declared in `computed`, and reactive statements via the `watch` option. In Svelte they're just the same thing: Prefix any statement with `$:` (which is actually valid JS, as it turns out) and it will automatically be re-run any time one of the reactive values that it references gets updated. So both of the following:
 ```js
@ -124,7 +123,7 @@ $: console.log(firstname, lastname);

 I go back and forth on this one, but I _think_ I have a slight preference for Svelte (at least, at the moment.) The major difference is that Vue<Sidenote>If you're using the Options API, at least.</Sidenote> enforces a lot more structure than Svelte: Data is in `props`/`data`/`computed`, logic is in `methods`, reactive stuff is in `watch`, etc. Svelte, by contrast, just lets you do basically whatever you want. It does require that you have only one `<script>` tag, so all your logic ends up being co-located, but that's pretty much it. Everything else is just a convention, like declaring props at the top of your script.

-The advantage of Vue's approach is that it can make it easier to find things when you're jumping from template to logic: you see `someFunction(whatever)`, you know it's going to be under `methods`. With Svelte, `someFunction` could be defined anywhere in the script section. 
+The advantage of Vue's approach is that it can make it easier to find things when you're jumping from template to logic: you see `someFunction(whatever)`, you know it's going to be under `methods`. With Svelte, `someFunction` could be defined anywhere in the script section.<Sidenote>Code structure is actually one area that I think might be improved by the recently-announced Svelte 5 changes: Because you can now declare reactive state anywhere, rather than just at the top level of your script, you can take all the discrete bits of functionality within a single component and bundle each one up in its own function, or even factor them out into different files entirely. I can imagine this being helpful, but I haven't played with it yet so I don't know for sure how it will shake out.</Sidenote>

 On the other hand, this actually becomes a downside once your component gets a little bit complex. Separation of concerns is nice and all, but sometimes it just doesn't work very well to split a given component, and it ends up doing several unrelated or at least clearly distinct things. In Vue-land, the relevant bits of state, logic, etc. are all going to be scattered across `data`/`methods`/etc, meaning you can't really see "all the stuff that pertains to this one bit of functionality" in one place. It's also very clunky to split the logic for a single component across multiple JS files, which you might want to do as another way of managing the complexity of a large component. If you were to try, you'd end up with a big "skeleton" in your main component file, e.g.

@ -146,11 +145,11 @@ export default {

 which doesn't seem very pleasant.

-As a matter of fact, this was one of the primary [motivations](https://web.archive.org/web/20201109010309/https://composition-api.vuejs.org/#logic-reuse-code-organization) for the introduction of the Composition API in the first place.<Sidenote>Archive link, since that url now redirects to the [current Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html).</Sidenote> Unfortunately it also includes the downside that you have to call `ref()` on all your reactive values, and reference them by their `.value` property rather than just using the main variable. It's funny that this bothers me as much as it does, given that `this.someData` is hardly any more concise than `someData.value`, but there's no accounting for taste, I guess. Using `this` just feels more natural to me, although what feels most natural is Svelte's approach where you don't have to adjust how you reference reactive values at all.
+As a matter of fact, this was one of the primary [motivations](https://web.archive.org/web/20201109010309/https://composition-api.vuejs.org/#logic-reuse-code-organization)<Sidenote>Archive link, since that url now redirects to the [current Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html).</Sidenote> for the introduction of the Composition API in the first place. Unfortunately it also includes the downside that you have to call `ref()` on all your reactive values, and reference them by their `.value` property rather than just using the main variable. It's funny that this bothers me as much as it does, given that `this.someData` is hardly any more concise than `someData.value`, but there's no accounting for taste, I guess. Using `this` just feels more natural to me, although what feels most natural is Svelte's approach where you don't have to adjust how you reference reactive values at all.

 Also, as long as we're harping on minor annoyances: For some reason I cannot for the life of me remember to put commas after all my function definitions in `computed`, `methods` etc. in my Vue components. It's such a tiny thing, but it's repeatedly bitten me because my workflow involves Vue automatically rebuilding my app every time I save the file, and I'm not always watching the console output because my screen real estate is in use elsewhere.<Sidenote>E.g. text editor on one screen with two columns of text, web page on one half of the other screen and dev tools on the other half. Maybe I need a third monitor?</Sidenote> So I end up forgetting a comma, the rebuild fails but I don't notice, and then I spend five minutes trying to figure out why my change isn't taking effect before I think to check for syntax errors.

-It would be remiss of me, however, not to point out that one thing the Vue Options API enables<Sidenote>Kind of its initial _raison d'être_, from what I understand.</Sidenote> which is completely impossible with Svelte is at-runtime or "inline" components, where you just stick a blob of JS onto your page that defines a Vue component and where it should go, and Vue does the rest on page load. Svelte can't do this because it's a compiler, so naturally it has to compile your components into a usable form. This has many advantages, but sometimes you don't want to or even _can't_ add a build step, and in those cases Vue can really shine.
+It would be remiss of me, however, not to point out that one thing the Vue Options API enables<Sidenote>Kind of its initial _raison d'être_, from what I understand.</Sidenote> which is more or less impossible<Sidenote>I mean, you could do it, but you'd have to ship the entire Svelte compiler with your page.</Sidenote> with Svelte is at-runtime or "inline" components, where you just stick a blob of JS onto your page that defines a Vue component and where it should go, and Vue does the rest on page load. Svelte can't do this because it's a compiler, so naturally it has to compile your components into a usable form. This has many advantages, but sometimes you don't want to or even _can't_ add a build step, and in those cases Vue can really shine.

 ## Miscellany

@ -158,8 +157,20 @@ It would be remiss of me, however, not to point out that one thing the Vue Optio

 Performance isn't really a major concern for me when it comes to JS frameworks, since I don't tend to build the kind of extremely-complex apps where the overhead of the framework starts to make a difference. For what it's worth, though, the [Big Benchmark List](https://krausest.github.io/js-framework-benchmark/current.html) has Vue slightly ahead of Svelte when it comes to speed.<Sidenote>Although [recent rumors](https://twitter.com/Rich_Harris/status/1688581184018583558) put the next major version of Svelte _very_ close to that of un-framework'd vanilla JS, so this might change in the future.</Sidenote> I don't know how representative this benchmark is of a real-world workload.

-As far as bundle size goes, it's highly dependent on how many components you're shipping - since Svelte compiles everything down to standalone JS and there's no shared framework, the minimum functional bundle can be quite small indeed. The flipside is that it grows faster with each component than Vue, again because there's no shared framework to rely on. So a Svelte app with 10 components will probably be a lot smaller than the equivalent Vue app, but scale that up to 1000 components and the advantage will most likely have flipped.
+As far as bundle size goes, it's highly dependent on how many components you're shipping - since Svelte compiles everything down to standalone JS and there's no shared framework, the minimum functional bundle can be quite small indeed. The flipside is that it grows faster with each component than Vue, again because there's no shared framework to rely on. So a Svelte app with 10 components will probably be a lot smaller than the equivalent Vue app, but scale that up to 1000 components and the advantage will most likely have flipped. The Svelte people say that this problem doesn't tend to crop up a lot in practice, but I have yet to see real-world examples for the bundle size of a non-trivial<Sidenote>Probably because no one wants to bother implementing the exact same app in two different frameworks just to test a theory.</Sidenote> app implemented in Vue vs. Svelte.

 ### Ecosystem

 Vue has been around longer than Svelte, so it definitely has the advantage here. That said, Svelte has been growing pretty rapidly in recent years and there is a pretty decent ecosystem these days. This blog, for instance, uses [SvelteKit](https://kit.svelte.dev) and [mdsvex](https://mdsvex.pngwn.io/). But there are definitely gaps, e.g. I wasn't able to find an RSS feed generator when I went looking.<Sidenote>Arguably this is a lack in the SvelteKit ecosystem rather than the Svelte ecosystem, but I think it's fair to lump it together. SvelteKit is dependent on Svelte, so naturally it inherits all of Svelte's immaturity issues plus more of its own.</Sidenote> If I'd been using Vue/Nuxt it would have been available as a [first-party integration](https://content.nuxtjs.org/v1/community/integrations). All in all I'd say if a robust ecosystem is important to you then Vue is probably the better choice at this point.
+
+### Stability
+
+Not in terms of "will it crash while you're using it," but in terms of "will code that you write today still be usable in five years." This is always a bit of a big ask in the JS world, because everyone is always pivoting to chase the new shiny. As I write this now (and as I referenced above), Svelte has just announced a [change](https://svelte.dev/blog/runes) to how reactivity is done. The new style is opt-in for the moment, but that's never completely reassuring--there are plenty of examples of opt-in features that became required eventually. Vue had a similar moment with their 2-to-3 switch,<Sidenote>Just like Python, hmm. What is it about the 2-to-3 transition? Maybe we should call it Third System Effect?</Sidenote> but to be fair they have so far stuck to their promise to keep the Options API a first-class citizen.
+
+I think that means I have to give Vue the edge on this one, because while both frameworks now have an "old style" vs. a "new style" Vue at least has proven their willingness to continue supporting the old style over the last few years.
+
+## What's Next
+
+I don't think we've reached the "end-game" when it comes to UI paradigms, either on the web or more generally. I _do_ think that eventually, _probably_ within my lifetime, we will see a stable and long-lasting consensus emerge, and the frenetic pace of "framework churn" in the frontend world will slow down somewhat. What exact form this will take is very much up in the air, of course, but I have a sneaking suspicion that WebAssembly will play a key part, if it can ever get support for directly communicating with the DOM (i.e. without needing to pass through the JS layer). _If_ and when that happens, it will unlock a huge new wave of frontend frameworks that don't have to involve on Javascript at all, and won't that be interesting?
+
+But for now I'll stick with Svelte, although I think Vue is pretty good too. Just don't make me use React, please.
--- a/src/routes/about/+page.svelte
+++ b/src/routes/about/+page.svelte
@ -0,0 +1,23 @@
+<style>
+    .content {
+        max-width: var(--content-width);
+        margin: 0 auto;
+    }
+</style>
+
+<svelte:head>
+    <title>About Me | Joe's Blog</title>
+</svelte:head>
+
+
+<div class="content">
+    <h1>About Me</h1>
+
+    <p>(Joe's wife wrote this because Joe feels weird writing about himself.)</p>
+
+    <p>Joe is a quirky, techy Tolkienite with a beautiful singing voice, an uncanny ability to do mental math, a bony, un-cuddleable frame, and a big mushy heart. He enjoys bike riding, computers, watching TV, reading about computers, playing Breath of the Wild, building computers, talking about something called "programming languages", and spending time with his family (which often involves fixing their computers). He graduated with a Liberal Arts degree from Thomas Aquinas College, the school of his forebears. He often remarks that he has greatly benefitted from the critical thinking skills he acquired at his alma mater in his current line of work.</p>
+
+    <p>He has spent, at the current time, about 2 years working on this blog. Most of his posts are about all of the work it took and everything he learned making this blog. Unlike most "bloggers", he has started with many blog posts and no blog, rather than a blog without posts. "Someday",  he says, "I will actually get that blog up". I always nod encouragingly.</p>
+
+    <p>If you are reading this, then that day has arrived.  We hope you enjoy it, and maybe even learn something along the way.</p>
+</div>
--- a/src/routes/feed/+server.js
+++ b/src/routes/feed/+server.js
@ -0,0 +1,53 @@
+import { tag, text, serialize } from '$lib/xml.js';
+import { postData } from '../_posts/all.js';
+
+export const prerender = true;
+
+
+export function GET() {
+    return new Response(renderFeed(), {
+        headers: {'Content-Type': 'application/atom+xml'}
+    });
+}
+
+
+function renderFeed() {
+    const feed = tag('feed', {xmlns: 'http://www.w3.org/2005/Atom'});
+
+    feed.addTag('id', {}, [text('https://blog.jfmonty2.com/')])
+    feed.addTag('title', {}, [text("Joe's Blog")]);
+    feed.addTag('link', {rel: 'alternate', href: 'https://blog.jfmonty2.com/'});
+    feed.addTag('link', {rel: 'self', href: 'https://blog.jfmonty2.com/feed/'});
+
+    const lastUpdate = iso(postData[0].updated || postData[0].date);
+    feed.addTag('updated', {}, [text(lastUpdate)]);
+
+    const author = feed.addTag('author');
+    author.addTag('name', {}, [text('Joseph Montanaro')]);
+
+    for (const post of postData) {
+        const url = `https://blog.jfmonty2.com/${post.slug}`
+        const entry = feed.addTag('entry');
+        entry.addTag('title', {}, [text(post.title)]);
+        entry.addTag('link', {rel: 'alternate', href: url});
+        entry.addTag('id', {}, [text(url)]);
+
+        const publishedDate = iso(post.date);
+        entry.addTag('published', {}, [text(publishedDate)])
+        const updatedDate = iso(post.updated || post.date);
+        entry.addTag('updated', {}, [text(updatedDate)]);
+
+        entry.addTag('content', {type: 'html'}, [text(renderDescription(post))]);
+    }
+    return serialize(feed);
+}
+
+
+function renderDescription(post) {
+    return `<p>${post.description} <a href="https://blog.jfmonty2.com/${post.slug}">Read more</a></p>`;
+}
+
+
+function iso(datetimeStr) {
+    return new Date(datetimeStr).toISOString();
+}
--- a/src/routes/index.svelte
+++ b/src/routes/index.svelte
@ -1,18 +0,0 @@
-<script context="module">
-    export async function load({ fetch }) {
-        const resp = await fetch('/latest.json');
-        const postMeta = await resp.json();
-        const post = await import(`./_posts/${postMeta.slug}.svx`);
-        return {
-            props: {
-                post: post.default,
-            }
-        }
-    }
-</script>
-
-<script>
-    export let post;
-</script>
-
-<svelte:component this={post} />
--- a/src/routes/latest.json.js
+++ b/src/routes/latest.json.js
@ -1,5 +0,0 @@
-import { postData } from './posts.js';
-
-export async function get() {
-    return {body: postData[0]};
-}
--- a/src/routes/posts/+page.svelte
+++ b/src/routes/posts/+page.svelte
@ -1,27 +1,20 @@
 <script>
    import { formatDate } from '$lib/datefmt.js';
-    export let postData;
+    import { postData } from '../_posts/all.js';
 </script>

-<style lang="scss">
+<style>
    #posts {
        /*text-align:  center;*/
-        max-width:  24rem;
-        // margin-top:  1.25rem;
-        margin-left:  auto;
-        margin-right:  auto;
+        max-width:  var(--content-width);
+        margin:  0 auto;
    }

-    .post {
-        border-bottom: 2px solid #eee;
-        margin-top: 1rem;
+    hr {
+        margin: 2rem 0;
+        border-color: #eee;
    }

-/*    .post-title {
-        font-weight: bold;
-        font-size: 1.2rem;
-    }*/
-
    .post-date {
        color: #808080;
    }
@ -44,9 +37,14 @@
        text-decoration: underline;
    }

-    h3 {
-        display: inline;
-        margin:  0;
+    h2 {
+        font-size: 1.25rem;
+        margin-top: 0.5rem;
+        margin-bottom: 0.75rem;
+    }
+
+    h2 a {
+        color: currentcolor;
    }
 </style>

@ -56,18 +54,22 @@

 <div id="posts">
    <h1 style:text-align="center">All Posts</h1>
-    {#each postData as post}
+    {#each postData as post, idx}
        <div class="post">
            <div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
-            <div>
-                <a sveltekit:prefetch class="post-link" href="/{post.slug}">
-                    <h3>{post.title}<h3>
+            <h2>
+                <a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
+                    {post.title}
                </a>
                {#if post.draft}
                    <span class="draft-notice">Draft</span>
                {/if}
-            </div>
+            </h2>
            <p>{post.description}</p>
        </div>
+
+        {#if idx < postData.length - 1}
+        <hr>
+        {/if}
    {/each}
 </div>
--- a/static/favicon.png
+++ b/static/favicon.png
--- a/static/style.css
+++ b/static/style.css
@ -29,10 +29,12 @@ html {
    line-height: var(--content-line-height);
    letter-spacing: -0.005em;
    color: var(--content-color);
+    box-sizing: border-box;
 }

 body {
    margin: 0;
+    --content-width: 42rem;
 }

 h1, h2, h3, h4, h5, h6 {
@ -72,10 +74,6 @@ p {
    margin-bottom: 1rem;
 }

-/*ul, ol {
-    margin: 0.5rem 0;
-}*/
-
 code {
  background: #eee;
  border-radius: 0.2rem;
@ -87,5 +85,3 @@ code {
 pre > code {
    font-size: 0.8rem;
 }
-
-/* TESTING */
--- a/svelte.config.js
+++ b/svelte.config.js
@ -1,24 +1,24 @@
-import { mdsvex } from 'mdsvex';
 import staticAdapter from '@sveltejs/adapter-static';
-import svp from 'svelte-preprocess';
-import slug from './src/lib/slug.js';
+import { mdsvex } from 'mdsvex';

+import { localRemark } from './src/plugins/remark.js';
+import { localRehype } from './src/plugins/rehype.js';

+/** @type {import('@sveltejs/kit').Config} */
 const config = {
    extensions: ['.svelte', '.svx'],
    preprocess: [
        mdsvex({
            layout: './src/lib/Post.svelte',
-            rehypePlugins: [slug],
+            remarkPlugins: [localRemark],
+            rehypePlugins: [localRehype],
        }),
-        svp.scss(),
    ],
    kit: {
-        // hydrate the <div id="svelte"> element in src/app.html
+        // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+        // If your environment is not supported or you settled on a specific environment, switch out the adapter.
+        // See https://kit.svelte.dev/docs/adapters for more information about adapters.
        adapter: staticAdapter(),
-        prerender: {
-            default: true,
-        },
    }
 };

--- a/tmp/crane.svg
+++ b/tmp/crane.svg
@ -1,281 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!-- Created with Inkscape (http://www.inkscape.org/) -->
-<!-- Crane image created by macrovector on Freepik: https://www.freepik.com/free-vector/construction-icons-set_1537228.htm#query=crane&position=3&from_view=keyword -->
-
-<svg
-   width="28.305676mm"
-   height="28.174238mm"
-   viewBox="0 0 28.305676 28.174238"
-   version="1.1"
-   id="svg1392"
-   inkscape:version="1.2 (dc2aedaf03, 2022-05-15)"
-   sodipodi:docname="crane.svg"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:svg="http://www.w3.org/2000/svg">
-  <sodipodi:namedview
-     id="namedview1394"
-     pagecolor="#ffffff"
-     bordercolor="#000000"
-     borderopacity="0.25"
-     inkscape:showpageshadow="2"
-     inkscape:pageopacity="0.0"
-     inkscape:pagecheckerboard="0"
-     inkscape:deskcolor="#d1d1d1"
-     inkscape:document-units="mm"
-     showgrid="false"
-     inkscape:zoom="2.1089995"
-     inkscape:cx="-5.6899017"
-     inkscape:cy="78.710306"
-     inkscape:window-width="1920"
-     inkscape:window-height="1017"
-     inkscape:window-x="-8"
-     inkscape:window-y="-8"
-     inkscape:window-maximized="1"
-     inkscape:current-layer="layer1" />
-  <defs
-     id="defs1389" />
-  <g
-     inkscape:label="Layer 1"
-     inkscape:groupmode="layer"
-     id="layer1"
-     transform="translate(-139.84716,-103.71933)">
-    <path
-       d="m 166.79605,124.82179 h 0.18627 v -20.83188 h -0.18627 v 20.83188"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path324" />
-    <path
-       d="m 166.25101,125.97184 h 1.27635 v -0.51893 c 0,-0.1323 -0.10724,-0.23919 -0.23918,-0.23919 h -0.79763 c -0.13229,0 -0.23954,0.10689 -0.23954,0.23919 v 0.51893"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path326" />
-    <path
-       d="m 166.6934,125.21372 h 0.39193 v -0.64981 h -0.39193 v 0.64981"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path328" />
-    <path
-       d="m 165.62554,126.85626 c 0,0.69814 0.56585,1.26365 1.26365,1.26365 0.69779,0 1.26365,-0.56551 1.26365,-1.26365 0,-0.6978 -0.56586,-1.26365 -1.26365,-1.26365 -0.6978,0 -1.26365,0.56585 -1.26365,1.26365"
-       style="fill:#f9a727;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path330" />
-    <path
-       d="m 143.76637,124.8673 19.84057,-20.49675 -0.0935,-0.0903 -19.84093,20.49639 0.0938,0.0907"
-       style="fill:#100f0d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path332" />
-    <path
-       d="m 149.82885,128.1506 2.90478,-6.56802 10.82675,-17.25718 1.80869,1.13488 -10.81899,17.2466 -4.61751,5.50863 z m 13.67261,-24.08167 -10.93188,17.42652 -2.97638,6.72711 0.37782,0.23707 4.72899,-5.64338 10.92553,-17.41488 -2.12408,-1.33244"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path334" />
-    <path
-       d="m 154.67073,122.68783 -0.0988,0.1577 -1.96638,-1.23367 0.0988,-0.15769 1.96638,1.23366"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path336" />
-    <path
-       d="m 154.712,122.74604 -0.18132,0.0413 -0.71791,-3.13443 0.18168,-0.0416 0.71755,3.13478"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path338" />
-    <path
-       d="m 155.85042,120.93135 -3.13443,0.71755 -0.0416,-0.18132 3.13478,-0.71791 0.0413,0.18168"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path340" />
-    <path
-       d="m 155.87935,120.76167 -0.0991,0.15769 -1.96639,-1.23366 0.0991,-0.1577 1.96639,1.23367"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path342" />
-    <path
-       d="m 155.92062,120.81952 -0.18168,0.0416 -0.71755,-3.13443 0.18133,-0.0416 0.7179,3.13443"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path344" />
-    <path
-       d="m 157.05903,119.00483 -3.13478,0.71791 -0.0413,-0.18133 3.13443,-0.7179 0.0416,0.18132"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path346" />
-    <path
-       d="m 157.08761,118.8355 -0.0988,0.15769 -1.96638,-1.23366 0.0988,-0.15769 1.96638,1.23366"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path348" />
-    <path
-       d="m 157.12888,118.89336 -0.18132,0.0416 -0.71791,-3.13478 0.18168,-0.0413 0.71755,3.13443"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path350" />
-    <path
-       d="m 158.2673,117.07867 -3.13443,0.7179 -0.0416,-0.18168 3.13478,-0.71755 0.0413,0.18133"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path352" />
-    <path
-       d="m 158.29623,116.90898 -0.0991,0.15769 -1.96639,-1.23331 0.0991,-0.15804 1.96639,1.23366"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path354" />
-    <path
-       d="m 158.3375,116.96719 -0.18168,0.0416 -0.71755,-3.13479 0.18133,-0.0413 0.7179,3.13443"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path356" />
-    <path
-       d="m 159.47592,115.1525 -3.13479,0.7179 -0.0413,-0.18168 3.13443,-0.71755 0.0416,0.18133"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path358" />
-    <path
-       d="m 159.50449,114.98282 -0.0988,0.15804 -1.96638,-1.23366 0.0988,-0.15805 1.96638,1.23367"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path360" />
-    <path
-       d="m 159.54577,115.04102 -0.18133,0.0416 -0.71791,-3.13478 0.18169,-0.0413 0.71755,3.13443"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path362" />
-    <path
-       d="m 160.68418,113.22633 -3.13443,0.71791 -0.0416,-0.18168 3.13478,-0.71755 0.0413,0.18132"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path364" />
-    <path
-       d="m 160.71311,113.05665 -0.0991,0.15769 -1.96639,-1.23331 0.0991,-0.15805 1.96639,1.23367"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path366" />
-    <path
-       d="m 160.75438,113.11486 -0.18168,0.0416 -0.7179,-3.13478 0.18168,-0.0413 0.7179,3.13443"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path368" />
-    <path
-       d="m 161.8928,111.30017 -3.13479,0.7179 -0.0413,-0.18168 3.13443,-0.71755 0.0416,0.18133"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path370" />
-    <path
-       d="m 161.92137,111.13048 -0.0991,0.15805 -1.96603,-1.23367 0.0988,-0.15804 1.96638,1.23366"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path372" />
-    <path
-       d="m 161.96265,111.18869 -0.18133,0.0416 -0.71791,-3.13479 0.18169,-0.0416 0.71755,3.13478"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path374" />
-    <path
-       d="m 163.10106,109.374 -3.13443,0.7179 -0.0416,-0.18168 3.13478,-0.7179 0.0413,0.18168"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path376" />
-    <path
-       d="m 163.12999,109.20432 -0.0991,0.15769 -1.96639,-1.23367 0.0991,-0.15769 1.96639,1.23367"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path378" />
-    <path
-       d="m 163.17126,109.26252 -0.18168,0.0413 -0.71755,-3.13443 0.18133,-0.0416 0.7179,3.13478"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path380" />
-    <path
-       d="m 164.30968,107.44783 -3.13479,0.71755 -0.0413,-0.18132 3.13443,-0.71791 0.0416,0.18168"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path382" />
-    <path
-       d="m 164.33825,107.27815 -0.0988,0.15769 -1.96638,-1.23366 0.0988,-0.1577 1.96638,1.23367"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path384" />
-    <path
-       d="m 164.37953,107.33636 -0.18133,0.0413 -0.7179,-3.13443 0.18168,-0.0416 0.71755,3.13479"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path386" />
-    <path
-       d="m 165.51794,105.52167 -3.13443,0.71755 -0.0416,-0.18133 3.13443,-0.7179 0.0416,0.18168"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path388" />
-    <path
-       d="m 153.38944,124.32366 -0.18133,0.0416 -0.64382,-2.81128 0.18133,-0.0416 0.64382,2.81128"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path390" />
-    <path
-       d="m 153.34817,124.26581 -0.0988,0.15769 -1.48908,-0.93415 0.0991,-0.1577 1.48873,0.93416"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path392" />
-    <path
-       d="m 154.64215,122.85752 -2.81163,0.64382 -0.0413,-0.18168 2.81129,-0.64382 0.0416,0.18168"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path394" />
-    <path
-       d="m 152.06476,125.91399 -0.18556,0.012 -0.16228,-2.50931 0.18591,-0.0123 0.16193,2.50966"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path396" />
-    <path
-       d="m 152.02137,125.84096 -0.0988,0.15769 -0.98954,-0.62053 0.0991,-0.15769 0.98919,0.62053"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path398" />
-    <path
-       d="m 153.33405,124.43056 -2.31598,0.95461 -0.0709,-0.17215 2.31599,-0.95462 0.0709,0.17216"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path400" />
-    <path
-       d="m 167.06769,103.88196 c -0.20602,-0.12912 -0.44944,-0.1838 -0.69074,-0.15523 l -2.87549,0.3422 -0.0935,0.16122 2.09691,1.31551 1.58573,-1.32151 c 0.0522,-0.0434 0.0801,-0.10936 0.0759,-0.17709 -0.005,-0.0677 -0.0416,-0.12912 -0.0988,-0.1651"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path402" />
-    <path
-       d="m 163.77733,104.24179 2.71922,-0.33902 c 0.13687,-0.0169 0.27551,0.0138 0.39264,0.0871 l 0.0395,0.0247 c 0.0162,0.0102 0.0265,0.0275 0.0279,0.0466 0.001,0.019 -0.007,0.0378 -0.0215,0.0501 l -1.44533,1.20474 -1.71239,-1.07421"
-       style="fill:#f9a727;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path404" />
-    <path
-       d="m 145.63997,128.61168 h 3.81459 v 0.62547 h -3.81459 v -0.62547"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path406" />
-    <path
-       d="m 140.21425,126.26888 c 0.0783,-0.35489 0.34149,-0.63994 0.68897,-0.74683 l 6.68832,-2.05246 -0.3549,5.14209 h -6.77756 c -0.18556,0 -0.3609,-0.084 -0.47696,-0.2286 -0.11606,-0.14429 -0.16051,-0.33373 -0.12065,-0.5147 l 0.35278,-1.5995"
-       style="fill:#f9a727;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path408" />
-    <path
-       d="m 151.90037,131.89357 c 0.75917,0 1.37689,-0.61771 1.37689,-1.37724 0,-0.75918 -0.61772,-1.3769 -1.37689,-1.3769 -0.0243,-0.002 -3.12667,-0.22013 -4.15961,-0.22013 -1.03293,0 -4.13526,0.21802 -4.1663,0.22049 h -7.1e-4 c -0.75212,0 -1.36948,0.61736 -1.36948,1.37654 0,0.75953 0.61771,1.37724 1.37689,1.37724 h 8.31921"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path410" />
-    <path
-       d="m 143.58116,131.69778 c -0.65158,0 -1.18145,-0.52987 -1.18145,-1.18145 0,-0.65123 0.52669,-1.1811 1.17475,-1.1811 l 0.0141,-7.1e-4 c 0.03,-0.002 3.12667,-0.21943 4.15219,-0.21943 1.03082,0 4.11551,0.21696 4.14338,0.21908 l 0.008,7e-4 h 0.008 c 0.65158,0 1.18145,0.53023 1.18145,1.18146 0,0.65158 -0.52987,1.18145 -1.18145,1.18145 h -8.31921"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path412" />
-    <path
-       d="m 150.71891,130.51633 c 0,-0.65229 0.52882,-1.18146 1.18146,-1.18146 0.65263,0 1.18145,0.52917 1.18145,1.18146 0,0.65263 -0.52882,1.18145 -1.18145,1.18145 -0.65264,0 -1.18146,-0.52882 -1.18146,-1.18145"
-       style="fill:#b8bbb6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path414" />
-    <path
-       d="m 151.90037,131.19507 c 0.37429,0 0.67874,-0.30445 0.67874,-0.67874 0,-0.3743 -0.30445,-0.67875 -0.67874,-0.67875 -0.3743,0 -0.67875,0.30445 -0.67875,0.67875 0,0.37429 0.30445,0.67874 0.67875,0.67874"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path416" />
-    <path
-       d="m 145.53555,129.58146 c 0,-0.19014 0.15416,-0.34431 0.34431,-0.34431 0.19015,0 0.34431,0.15417 0.34431,0.34431 0,0.19015 -0.15416,0.34432 -0.34431,0.34432 -0.19015,0 -0.34431,-0.15417 -0.34431,-0.34432"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path418" />
-    <path
-       d="m 145.54331,131.35311 c 0,-0.19014 0.15416,-0.34431 0.34431,-0.34431 0.19015,0 0.34396,0.15417 0.34396,0.34431 0,0.19015 -0.15381,0.34432 -0.34396,0.34432 -0.19015,0 -0.34431,-0.15417 -0.34431,-0.34432"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path420" />
-    <path
-       d="m 149.25735,131.35311 c 0,-0.19014 0.15417,-0.34431 0.34432,-0.34431 0.19014,0 0.34431,0.15417 0.34431,0.34431 0,0.19015 -0.15417,0.34432 -0.34431,0.34432 -0.19015,0 -0.34432,-0.15417 -0.34432,-0.34432"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path422" />
-    <path
-       d="m 149.94598,129.58146 c 0,-0.19014 -0.15417,-0.34431 -0.34431,-0.34431 -0.19015,0 -0.34432,0.15417 -0.34432,0.34431 0,0.19015 0.15417,0.34432 0.34432,0.34432 0.19014,0 0.34431,-0.15417 0.34431,-0.34432"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path424" />
-    <path
-       d="m 144.76261,130.51633 c 0,-0.65229 -0.52881,-1.18146 -1.18145,-1.18146 -0.65264,0 -1.18145,0.52917 -1.18145,1.18146 0,0.65263 0.52881,1.18145 1.18145,1.18145 0.65264,0 1.18145,-0.52882 1.18145,-1.18145"
-       style="fill:#b8bbb6;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path426" />
-    <path
-       d="m 143.58116,131.19507 c 0.3743,0 0.67874,-0.30445 0.67874,-0.67874 0,-0.3743 -0.30444,-0.67875 -0.67874,-0.67875 -0.3743,0 -0.67874,0.30445 -0.67874,0.67875 0,0.37429 0.30444,0.67874 0.67874,0.67874"
-       style="fill:#252529;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path428" />
-    <path
-       d="m 143.43652,131.0088 h 8.60848 v -0.98495 h -8.60848 v 0.98495"
-       style="fill:#f9a727;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path430" />
-    <path
-       d="m 147.23664,128.61168 h 3.55812 c 0.33761,0 0.61172,-0.27376 0.61172,-0.61172 v -0.73236 c 0,-0.72073 0.11465,-2.63737 -0.76377,-3.69429 -0.0744,-0.0896 -0.18485,-0.14147 -0.30092,-0.14147 h -2.60173 c -0.16158,0 -0.29704,0.12277 -0.31256,0.28364 l -0.19086,1.97943 v 2.91677"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path432" />
-    <path
-       d="m 150.76301,128.2649 c 0.16969,0 0.30797,-0.13794 0.30797,-0.30762 v -0.7165 c 0,-0.066 7.1e-4,-0.14217 0.002,-0.22648 0.01,-0.76165 0.03,-2.34562 -0.68192,-3.20216 -0.0173,-0.0212 -0.0437,-0.0335 -0.0709,-0.0335 h -2.54529 c -0.008,0 -0.0155,0.006 -0.0162,0.0148 l -0.16404,1.69827 c -0.0141,0.14464 0.025,0.28928 0.10971,0.40711 l 1.52153,2.11702 c 0.11219,0.15628 0.29316,0.24906 0.48578,0.24906 h 1.05163"
-       style="fill:#4c5462;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path434" />
-    <path
-       d="m 141.47331,125.91928 h 2.36891 c 0.0723,0 0.13052,0.0924 0.13052,0.20637 h -0.13052 -0.13053 -2.10785 -0.13053 -0.13053 c 0,-0.11394 0.0582,-0.20637 0.13053,-0.20637"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path436" />
-    <path
-       d="m 141.47331,126.34649 h 2.36891 c 0.0723,0 0.13052,0.0924 0.13052,0.20673 h -0.13052 -0.13053 -2.10785 -0.13053 -0.13053 c 0,-0.1143 0.0582,-0.20673 0.13053,-0.20673"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path438" />
-    <path
-       d="m 141.47331,126.77406 h 2.36891 c 0.0723,0 0.13052,0.0924 0.13052,0.20637 h -0.13052 -0.13053 -2.10785 -0.13053 -0.13053 c 0,-0.11394 0.0582,-0.20637 0.13053,-0.20637"
-       style="fill:#e4731a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.0352778"
-       id="path440" />
-  </g>
-</svg>
--- a/tmp/index.html
+++ b/tmp/index.html
@ -1,99 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-    <title>Under Construction</title>
-
-    <style>
-        body {
-            margin: 0;
-        }
-
-        main {
-            background-color: #f2f2f2;
-            padding: 1rem;
-            height: 100vh;
-            width: 100vw;
-            justify-content: center;
-            align-content: center;
-            display: grid;
-        }
-
-        #hero {
-            padding: 4rem;
-            background-color: white;
-            border-radius: 100%;
-        }
-
-        #hero img {
-            width: 16rem;
-        }
-
-        p {
-            font-family: sans-serif;
-            margin-bottom: 2rem;
-            margin-top: 2rem;
-            font-size: 1.5rem;
-            text-align: center;
-        }
-    </style>
-
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/luxon/3.0.4/luxon.min.js" integrity="sha512-XdACFfCJeqqfVU8mvvXReyFR130qjFvfv/PZOFGwVyBz0HC+57fNkSacMPF2Dyek5jqi4D7ykFrx/T7N6F2hwQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
-</head>
-<body>
-    <main>
-        <p style="font-size:2.5rem;color:#505050">Coming Soon&trade;</p>
-        <div id="hero">
-            <img src="/crane.svg">
-        </div>
-        <p>
-            Under Construction for <br />
-            <span id="counter" style="margin-top:0.5rem"></span>
-        </p>
-    </main>
-</body>
-
-<script>
-    function u(v, unit) {
-        if (v === 1) {
-            return `${v} ${unit}`;
-        }
-        else {
-            return `${v} ${unit}s`;
-        }
-    }
-
-    function f(n) {
-        let s = n.toString();
-        if (s.length == 1) {
-            return '0' + s;
-        }
-        return s;
-    }
-
-    const start = luxon.DateTime.fromSeconds(1634529923);
-    function setDuration() {
-        var diff = luxon.DateTime.now().diff(start);
-        const years = Math.floor(diff.as('years'));
-        diff = diff.minus(luxon.Duration.fromObject({years}));
-        const months = Math.floor(diff.as('months'));
-        diff = diff.minus(luxon.Duration.fromObject({months}));
-        const days = Math.floor(diff.as('days'));
-        diff = diff.minus(luxon.Duration.fromObject({days}));
-        const hours = Math.floor(diff.as('hours'))
-        diff = diff.minus(luxon.Duration.fromObject({hours}));
-        const minutes = Math.floor(diff.as('minutes'));
-        diff = diff.minus(luxon.Duration.fromObject({minutes}));
-        const seconds = Math.floor(diff.as('seconds'));
-        diff = diff.minus(luxon.Duration.fromObject({seconds}));
-        const millis = diff.as('milliseconds');
-
-        const timeString = `${u(years, "year")}, ${u(months, "month")}, ${u(days, "day")}, ${f(hours)}:${f(minutes)}:${f(seconds)}.${Math.floor(millis / 100)}`;
-        document.getElementById('counter').innerHTML = timeString;
-
-        window.setTimeout(setDuration, 10);
-    }
-    setDuration();
-    
-</script>
-
-</html>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
Author	SHA1	Message	Date
Joseph Montanaro	7df2de6c15	start writing password strength post	2023-10-23 05:54:11 -07:00
Joseph Montanaro	57476b9d80	start writing kubernetes alternative post	2023-10-23 05:53:58 -07:00
Joseph Montanaro	924706b3b2	start working on kubernetes alternative post	2023-10-01 06:41:33 -07:00
Joseph Montanaro	00300167eb	add 404 page	2023-09-25 06:57:50 -07:00
Joseph Montanaro	859c34fd82	add opengraph meta tags	2023-09-24 13:29:35 -07:00
Joseph Montanaro	15ab47f4d8	fix page titles	2023-09-24 09:46:57 -07:00
Joseph Montanaro	c231ed008d	remove favicon	2023-09-24 09:42:49 -07:00
Joseph Montanaro	705e858170	tweak docker post	2023-09-24 09:38:49 -07:00
Joseph Montanaro	5529bab8a3	finish vue vs svelte post	2023-09-24 09:23:12 -07:00
Joseph Montanaro	5ec147f95f	add about page	2023-09-24 09:20:06 -07:00
Joseph Montanaro	453dad1e0d	add feed link to app.html	2023-09-23 20:20:35 -07:00
Joseph Montanaro	7b3ae4dea8	hide TOC on narrow screens	2023-09-23 20:03:00 -07:00
Joseph Montanaro	ce4ddf5a17	tweak next/prev links	2023-09-23 19:23:40 -07:00
Joseph Montanaro	c1e82ffb2c	finish feed	2023-09-05 17:16:39 -07:00
Joseph Montanaro	7fb1f05a1e	initial feed implementation	2023-09-04 22:07:58 -07:00
Joseph Montanaro	a28ee8b2f0	get footer links working and get rid of unnecessary json route	2023-08-27 08:52:30 -07:00
Joseph Montanaro	1b2d55173a	upgrade to sveltekit 1	2023-08-26 20:55:35 -07:00
Joseph Montanaro	3a59f45e58	rework toc, sidenote fade, and footer	2023-08-26 14:41:58 -07:00
Joseph Montanaro	0519291bda	limit toc to two levels and vary style	2023-08-25 22:22:39 -07:00
Joseph Montanaro	d1aa23e7c7	tweak margin of toc	2023-08-23 07:50:38 -07:00
Joseph Montanaro	25ce1b2d85	only show header anchors on hover	2023-08-23 06:02:12 -07:00
Joseph Montanaro	5817d94043	rework layout and add table of contents	2023-08-21 22:16:17 -07:00
Joseph Montanaro	33d6838dc4	start work on table of contents	2023-08-20 22:04:21 -07:00
Joseph Montanaro	b1dc3ae0ea	add heading anchors	2023-08-20 16:12:04 -07:00
Joseph Montanaro	6431267827	start sidenotes post	2023-08-19 13:11:17 -07:00
Joseph Montanaro	01fce255ac	tweaks	2023-08-19 12:46:00 -07:00
Joseph Montanaro	8272a4bd43	rework rehype plugin	2023-08-19 12:45:02 -07:00
Joseph Montanaro	b68220fa2e	conditionally render remainder of dropcap word	2023-08-19 12:16:23 -07:00
Joseph Montanaro	54bcec280d	fix sidenote width and add partial nesting support	2023-08-19 12:12:12 -07:00