41 lines
1.1 KiB
Svelte
41 lines
1.1 KiB
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>
|