blog/src/lib/Post.svelte

<script context="module">
    import { onMount } from 'svelte';
    import { formatDate } from './datefmt.js';
    import { makeSlug } from '$lib/slug.js';
    import Link from './Link.svelte';
    export { Link as a };
</script>

<script>
    export let title, date;

    // deal with sidenote collisions
    onMount(async () => {
        const minNoteGap = 15;
        let sidenotes = Array.from(document.getElementsByClassName('sidenote'));
        var prev = 0;
        for (var i=0; i < sidenotes.length; i++) {
            let note = sidenotes[i];
            let {y, height} = note.getBoundingClientRect();
            y += window.scrollY; // getBoundingClientRect is relative to viewport
            if (y < prev + minNoteGap) {
                note.style.top = `${prev + minNoteGap}px`;
                prev = prev + minNoteGap + height;
            }
            else {
                prev = y + height;
            }
        }
    })
</script>

<svelte:head>
    <title>{title}</title>
</svelte:head>

<div id="post">
    <h1 id="{makeSlug(title)}">{title}</h1>
    <p><em>{formatDate(date)}</em></p>
    <slot></slot>
</div>