spa(phase 3, tasks 15-22): routing, komponenten, home, postview
Phase 3 komplett: - Task 15: LoadingOrError-Komponente (loading/error-states, Habla-Fallback) - Task 16: app.html mit CSS-Variablen (light/dark), Base-Typography - Task 17: +layout.svelte mit Container + bootstrapReadRelays onMount - Task 18: ProfileCard-Komponente (Avatar, Name, About, NIP-05, Website) - Task 19: PostCard-Komponente (Thumbnail + Titel/Summary/Datum), responsive - Task 20: +page.svelte als Home (Profil + Liste, Promise.all für beides) - Task 21: PostView-Komponente (Titel, Meta, Cover, Summary, Markdown-Body) - Task 22: [...slug]/+page.ts+svelte — Catch-all-Route mit Legacy-301-Redirect Alle $props()-abhängigen Werte via $derived() (Svelte-5-Runes-Konformität). npm run check: 0 errors, 0 warnings, 592 files. npm run build grün. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Jörg Lohrer
parent
dcef74e75c
commit
feb336fc5b
|
|
@ -1,9 +1,51 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="de">
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="text-scale" content="scale" />
|
<meta name="description" content="Jörg Lohrer – Blog (Nostr-basiert)" />
|
||||||
|
<title>Jörg Lohrer</title>
|
||||||
|
<style>
|
||||||
|
:root {
|
||||||
|
--fg: #1f2937;
|
||||||
|
--muted: #6b7280;
|
||||||
|
--bg: #fafaf9;
|
||||||
|
--accent: #2563eb;
|
||||||
|
--code-bg: #f3f4f6;
|
||||||
|
--border: #e5e7eb;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
:root {
|
||||||
|
--fg: #e5e7eb;
|
||||||
|
--muted: #9ca3af;
|
||||||
|
--bg: #18181b;
|
||||||
|
--accent: #60a5fa;
|
||||||
|
--code-bg: #27272a;
|
||||||
|
--border: #3f3f46;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
font:
|
||||||
|
17px/1.55 -apple-system,
|
||||||
|
BlinkMacSystemFont,
|
||||||
|
'Segoe UI',
|
||||||
|
Roboto,
|
||||||
|
sans-serif;
|
||||||
|
color: var(--fg);
|
||||||
|
background: var(--bg);
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
color: var(--accent);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
%sveltekit.head%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,40 @@
|
||||||
|
<script lang="ts">
|
||||||
|
interface Props {
|
||||||
|
loading: boolean;
|
||||||
|
error: string | null;
|
||||||
|
hablaLink?: string;
|
||||||
|
}
|
||||||
|
let { loading, error, hablaLink }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if loading && !error}
|
||||||
|
<p class="status">Lade von Nostr-Relays …</p>
|
||||||
|
{:else if error}
|
||||||
|
<p class="status status-error">
|
||||||
|
{error}
|
||||||
|
{#if hablaLink}
|
||||||
|
<br />
|
||||||
|
<a href={hablaLink} target="_blank" rel="noopener"> In Habla.news öffnen </a>
|
||||||
|
{/if}
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.status {
|
||||||
|
padding: 1rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--code-bg);
|
||||||
|
color: var(--muted);
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.status-error {
|
||||||
|
background: #fee2e2;
|
||||||
|
color: #991b1b;
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
.status-error {
|
||||||
|
background: #450a0a;
|
||||||
|
color: #fca5a5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,94 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { NostrEvent } from '$lib/nostr/loaders';
|
||||||
|
import { canonicalPostPath } from '$lib/url/legacy';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
event: NostrEvent;
|
||||||
|
}
|
||||||
|
let { event }: Props = $props();
|
||||||
|
|
||||||
|
function tagValue(e: NostrEvent, name: string): string {
|
||||||
|
return e.tags.find((t) => t[0] === name)?.[1] ?? '';
|
||||||
|
}
|
||||||
|
|
||||||
|
const dtag = $derived(tagValue(event, 'd'));
|
||||||
|
const title = $derived(tagValue(event, 'title') || '(ohne Titel)');
|
||||||
|
const summary = $derived(tagValue(event, 'summary'));
|
||||||
|
const image = $derived(tagValue(event, 'image'));
|
||||||
|
const publishedAt = $derived(
|
||||||
|
parseInt(tagValue(event, 'published_at') || `${event.created_at}`, 10)
|
||||||
|
);
|
||||||
|
const date = $derived(
|
||||||
|
new Date(publishedAt * 1000).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const href = $derived(canonicalPostPath(dtag));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<a class="card" {href}>
|
||||||
|
<div
|
||||||
|
class="thumb"
|
||||||
|
style:background-image={image ? `url('${image}')` : undefined}
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
<div class="text">
|
||||||
|
<div class="meta">{date}</div>
|
||||||
|
<h2>{title}</h2>
|
||||||
|
{#if summary}<p class="excerpt">{summary}</p>{/if}
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.card {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
padding: 1rem 0;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.card:hover {
|
||||||
|
background: var(--code-bg);
|
||||||
|
}
|
||||||
|
.thumb {
|
||||||
|
flex: 0 0 120px;
|
||||||
|
aspect-ratio: 1 / 1;
|
||||||
|
border-radius: 4px;
|
||||||
|
background: var(--code-bg) center/cover no-repeat;
|
||||||
|
}
|
||||||
|
.text {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
h2 {
|
||||||
|
margin: 0 0 0.3rem;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
color: var(--fg);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
.excerpt {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
margin-bottom: 0.2rem;
|
||||||
|
}
|
||||||
|
@media (max-width: 479px) {
|
||||||
|
.card {
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.5rem;
|
||||||
|
}
|
||||||
|
.thumb {
|
||||||
|
flex: 0 0 auto;
|
||||||
|
width: 100%;
|
||||||
|
aspect-ratio: 2 / 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,148 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { NostrEvent } from '$lib/nostr/loaders';
|
||||||
|
import { renderMarkdown } from '$lib/render/markdown';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
event: NostrEvent;
|
||||||
|
}
|
||||||
|
let { event }: Props = $props();
|
||||||
|
|
||||||
|
function tagValue(e: NostrEvent, name: string): string {
|
||||||
|
return e.tags.find((t) => t[0] === name)?.[1] ?? '';
|
||||||
|
}
|
||||||
|
function tagsAll(e: NostrEvent, name: string): string[] {
|
||||||
|
return e.tags.filter((t) => t[0] === name).map((t) => t[1]);
|
||||||
|
}
|
||||||
|
|
||||||
|
const title = $derived(tagValue(event, 'title') || '(ohne Titel)');
|
||||||
|
const summary = $derived(tagValue(event, 'summary'));
|
||||||
|
const image = $derived(tagValue(event, 'image'));
|
||||||
|
const publishedAt = $derived(
|
||||||
|
parseInt(tagValue(event, 'published_at') || `${event.created_at}`, 10)
|
||||||
|
);
|
||||||
|
const date = $derived(
|
||||||
|
new Date(publishedAt * 1000).toLocaleDateString('de-DE', {
|
||||||
|
year: 'numeric',
|
||||||
|
month: 'long',
|
||||||
|
day: 'numeric'
|
||||||
|
})
|
||||||
|
);
|
||||||
|
const tags = $derived(tagsAll(event, 't'));
|
||||||
|
const bodyHtml = $derived(renderMarkdown(event.content));
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
document.title = `${title} – Jörg Lohrer`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<h1 class="post-title">{title}</h1>
|
||||||
|
<div class="meta">
|
||||||
|
Veröffentlicht am {date}
|
||||||
|
{#if tags.length > 0}
|
||||||
|
<div class="tags">
|
||||||
|
{#each tags as t}
|
||||||
|
<a class="tag" href="/tag/{encodeURIComponent(t)}/">{t}</a>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if image}
|
||||||
|
<p class="cover"><img src={image} alt="Cover-Bild" /></p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
{#if summary}
|
||||||
|
<p class="summary">{summary}</p>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<article>{@html bodyHtml}</article>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.post-title {
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: 1.25;
|
||||||
|
margin: 0 0 0.4rem;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
.post-title {
|
||||||
|
font-size: 2rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.meta {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.92rem;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.tags {
|
||||||
|
margin-top: 0.4rem;
|
||||||
|
}
|
||||||
|
.tag {
|
||||||
|
display: inline-block;
|
||||||
|
background: var(--code-bg);
|
||||||
|
border-radius: 3px;
|
||||||
|
padding: 1px 7px;
|
||||||
|
margin: 0 4px 4px 0;
|
||||||
|
font-size: 0.85em;
|
||||||
|
color: var(--fg);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.tag:hover {
|
||||||
|
background: var(--border);
|
||||||
|
}
|
||||||
|
.cover {
|
||||||
|
max-width: 480px;
|
||||||
|
margin: 1rem auto 1.5rem;
|
||||||
|
}
|
||||||
|
.cover img {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.summary {
|
||||||
|
font-style: italic;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
article :global(img) {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
article :global(a) {
|
||||||
|
color: var(--accent);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
article :global(pre) {
|
||||||
|
background: var(--code-bg);
|
||||||
|
padding: 0.8rem;
|
||||||
|
border-radius: 4px;
|
||||||
|
overflow-x: auto;
|
||||||
|
font-size: 0.88em;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
article :global(code) {
|
||||||
|
background: var(--code-bg);
|
||||||
|
padding: 1px 4px;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 0.92em;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
article :global(pre code) {
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
word-break: normal;
|
||||||
|
}
|
||||||
|
article :global(hr) {
|
||||||
|
border: none;
|
||||||
|
border-top: 1px solid var(--border);
|
||||||
|
margin: 2rem 0;
|
||||||
|
}
|
||||||
|
article :global(blockquote) {
|
||||||
|
border-left: 3px solid var(--border);
|
||||||
|
padding: 0 0 0 1rem;
|
||||||
|
margin: 1rem 0;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,82 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import type { Profile } from '$lib/nostr/loaders';
|
||||||
|
interface Props {
|
||||||
|
profile: Profile | null;
|
||||||
|
}
|
||||||
|
let { profile }: Props = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
{#if profile}
|
||||||
|
<div class="profile">
|
||||||
|
{#if profile.picture}
|
||||||
|
<img class="avatar" src={profile.picture} alt={profile.display_name ?? profile.name ?? ''} />
|
||||||
|
{:else}
|
||||||
|
<div class="avatar"></div>
|
||||||
|
{/if}
|
||||||
|
<div class="info">
|
||||||
|
<div class="name">{profile.display_name ?? profile.name ?? ''}</div>
|
||||||
|
{#if profile.about}
|
||||||
|
<div class="about">{profile.about}</div>
|
||||||
|
{/if}
|
||||||
|
{#if profile.nip05 || profile.website}
|
||||||
|
<div class="meta-line">
|
||||||
|
{#if profile.nip05}<span>{profile.nip05}</span>{/if}
|
||||||
|
{#if profile.nip05 && profile.website}<span class="sep">·</span>{/if}
|
||||||
|
{#if profile.website}
|
||||||
|
<a href={profile.website} target="_blank" rel="noopener">
|
||||||
|
{profile.website.replace(/^https?:\/\//, '')}
|
||||||
|
</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.profile {
|
||||||
|
display: flex;
|
||||||
|
gap: 1rem;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
padding-bottom: 1.5rem;
|
||||||
|
border-bottom: 1px solid var(--border);
|
||||||
|
}
|
||||||
|
.avatar {
|
||||||
|
flex: 0 0 80px;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
border-radius: 50%;
|
||||||
|
object-fit: cover;
|
||||||
|
background: var(--code-bg);
|
||||||
|
}
|
||||||
|
.info {
|
||||||
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin: 0 0 0.2rem;
|
||||||
|
}
|
||||||
|
.about {
|
||||||
|
color: var(--muted);
|
||||||
|
font-size: 0.95rem;
|
||||||
|
margin: 0 0 0.3rem;
|
||||||
|
}
|
||||||
|
.meta-line {
|
||||||
|
font-size: 0.85rem;
|
||||||
|
color: var(--muted);
|
||||||
|
}
|
||||||
|
.meta-line a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.meta-line a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.sep {
|
||||||
|
margin: 0 0.4rem;
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,11 +1,32 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
import favicon from '$lib/assets/favicon.svg';
|
import favicon from '$lib/assets/favicon.svg';
|
||||||
|
import { bootstrapReadRelays } from '$lib/stores/readRelays';
|
||||||
|
|
||||||
let { children } = $props();
|
let { children } = $props();
|
||||||
|
|
||||||
|
onMount(() => {
|
||||||
|
bootstrapReadRelays();
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<svelte:head>
|
||||||
<link rel="icon" href={favicon} />
|
<link rel="icon" href={favicon} />
|
||||||
</svelte:head>
|
</svelte:head>
|
||||||
|
|
||||||
|
<main>
|
||||||
{@render children()}
|
{@render children()}
|
||||||
|
</main>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
main {
|
||||||
|
max-width: 720px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 1.5rem 1rem;
|
||||||
|
}
|
||||||
|
@media (min-width: 640px) {
|
||||||
|
main {
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,2 +1,50 @@
|
||||||
<h1>SvelteKit-SPA bootet</h1>
|
<script lang="ts">
|
||||||
<p>Wird Stück für Stück mit Nostr-Funktionalität gefüllt.</p>
|
import { onMount } from 'svelte';
|
||||||
|
import type { NostrEvent, Profile } from '$lib/nostr/loaders';
|
||||||
|
import { loadPostList, loadProfile } from '$lib/nostr/loaders';
|
||||||
|
import ProfileCard from '$lib/components/ProfileCard.svelte';
|
||||||
|
import PostCard from '$lib/components/PostCard.svelte';
|
||||||
|
import LoadingOrError from '$lib/components/LoadingOrError.svelte';
|
||||||
|
|
||||||
|
let profile: Profile | null = $state(null);
|
||||||
|
let posts: NostrEvent[] = $state([]);
|
||||||
|
let loading = $state(true);
|
||||||
|
let error: string | null = $state(null);
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
try {
|
||||||
|
const [p, list] = await Promise.all([loadProfile(), loadPostList()]);
|
||||||
|
profile = p;
|
||||||
|
posts = list;
|
||||||
|
loading = false;
|
||||||
|
if (list.length === 0) {
|
||||||
|
error = 'Keine Posts gefunden auf den abgefragten Relays.';
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
loading = false;
|
||||||
|
error = e instanceof Error ? e.message : 'Unbekannter Fehler';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$effect(() => {
|
||||||
|
const name = profile?.display_name ?? profile?.name ?? 'Jörg Lohrer';
|
||||||
|
document.title = `${name} – Blog`;
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<ProfileCard {profile} />
|
||||||
|
|
||||||
|
<h1 class="list-title">Beiträge</h1>
|
||||||
|
|
||||||
|
<LoadingOrError {loading} {error} />
|
||||||
|
|
||||||
|
{#each posts as post (post.id)}
|
||||||
|
<PostCard event={post} />
|
||||||
|
{/each}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.list-title {
|
||||||
|
margin: 0 0 1rem;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,61 @@
|
||||||
|
<script lang="ts">
|
||||||
|
import { onMount } from 'svelte';
|
||||||
|
import type { NostrEvent } from '$lib/nostr/loaders';
|
||||||
|
import { loadPost } from '$lib/nostr/loaders';
|
||||||
|
import { AUTHOR_PUBKEY_HEX } from '$lib/nostr/config';
|
||||||
|
import { buildHablaLink } from '$lib/nostr/naddr';
|
||||||
|
import PostView from '$lib/components/PostView.svelte';
|
||||||
|
import LoadingOrError from '$lib/components/LoadingOrError.svelte';
|
||||||
|
|
||||||
|
let { data } = $props();
|
||||||
|
const dtag = $derived(data.dtag);
|
||||||
|
|
||||||
|
let post: NostrEvent | null = $state(null);
|
||||||
|
let loading = $state(true);
|
||||||
|
let error: string | null = $state(null);
|
||||||
|
|
||||||
|
const hablaLink = $derived(
|
||||||
|
buildHablaLink({
|
||||||
|
pubkey: AUTHOR_PUBKEY_HEX,
|
||||||
|
kind: 30023,
|
||||||
|
identifier: dtag
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
onMount(async () => {
|
||||||
|
try {
|
||||||
|
const p = await loadPost(dtag);
|
||||||
|
loading = false;
|
||||||
|
if (!p) {
|
||||||
|
error = `Post "${dtag}" nicht gefunden.`;
|
||||||
|
} else {
|
||||||
|
post = p;
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
loading = false;
|
||||||
|
error = e instanceof Error ? e.message : 'Unbekannter Fehler';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<nav class="breadcrumb"><a href="/">← Zurück zur Übersicht</a></nav>
|
||||||
|
|
||||||
|
<LoadingOrError {loading} {error} {hablaLink} />
|
||||||
|
|
||||||
|
{#if post}
|
||||||
|
<PostView event={post} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.breadcrumb {
|
||||||
|
font-size: 0.9rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.breadcrumb a {
|
||||||
|
color: var(--accent);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.breadcrumb a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,21 @@
|
||||||
|
import { error, redirect } from '@sveltejs/kit';
|
||||||
|
import { parseLegacyUrl, canonicalPostPath } from '$lib/url/legacy';
|
||||||
|
import type { PageLoad } from './$types';
|
||||||
|
|
||||||
|
export const load: PageLoad = async ({ url }) => {
|
||||||
|
const pathname = url.pathname;
|
||||||
|
|
||||||
|
// Legacy-Form /YYYY/MM/DD/<dtag>.html/ → Redirect auf /<dtag>/
|
||||||
|
const legacyDtag = parseLegacyUrl(pathname);
|
||||||
|
if (legacyDtag) {
|
||||||
|
throw redirect(301, canonicalPostPath(legacyDtag));
|
||||||
|
}
|
||||||
|
|
||||||
|
// Kanonisch: /<dtag>/ — erster Segment des Pfades.
|
||||||
|
const segments = pathname.replace(/^\/+|\/+$/g, '').split('/');
|
||||||
|
if (segments.length !== 1 || !segments[0]) {
|
||||||
|
throw error(404, 'Seite nicht gefunden');
|
||||||
|
}
|
||||||
|
|
||||||
|
return { dtag: decodeURIComponent(segments[0]) };
|
||||||
|
};
|
||||||
Loading…
Reference in New Issue