137 lines
3.2 KiB
Svelte
137 lines
3.2 KiB
Svelte
<script context="module">
|
|
import { onMount } from 'svelte';
|
|
import { formatDate } from './datefmt.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 const draft = false;
|
|
export let toc = null;
|
|
|
|
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>
|
|
<link rel="stylesheet" href="/prism-dracula.css" />
|
|
</svelte:head>
|
|
|
|
<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>
|