my website at ewancroft.uk
fix(og): pages render own MetaTags for dynamic OG images
SvelteKit layouts don't receive child page load returns directly.
Each page now renders its own MetaTags component, overriding layout defaults.
Fixed Svelte 5 $derived() usage in github page.
👾 Generated with [Letta Code](https://letta.com)
Co-Authored-By: Letta Code <noreply@letta.com>
+21
-29
+6
-8
src/routes/+layout.svelte
+6
-8
src/routes/+layout.svelte
···
3
3
import { Header, Footer, ScrollToTop } from '$lib/components/layout';
4
4
import HappyMacEasterEgg from '$lib/components/HappyMacEasterEgg.svelte';
5
5
import { MetaTags } from '$lib/components/seo';
6
-
import { createSiteMeta, type SiteMetadata } from '$lib/helper/siteMeta';
6
+
import { type SiteMetadata } from '$lib/helper/siteMeta';
7
7
import type { ProfileData, SiteInfoData } from '$lib/services/atproto';
8
8
import type { Snippet } from 'svelte';
9
9
import { onMount } from 'svelte';
···
44
44
};
45
45
});
46
46
47
-
// Reactive meta updates on navigation
48
-
let headMeta = $derived(
49
-
createSiteMeta({
50
-
...data.siteMeta,
51
-
...data.meta
52
-
})
53
-
);
47
+
// Reactive meta updates on navigation - merge page meta with site defaults
48
+
let headMeta = $derived({
49
+
...data.siteMeta,
50
+
...data.meta
51
+
});
54
52
55
53
// Compute fediverse:creator from AP instance and username
56
54
const fediverseCreator = $derived.by(() => {
+3
-8
src/routes/+page.svelte
+3
-8
src/routes/+page.svelte
···
1
1
<script lang="ts">
2
2
import { DynamicLinks } from '$lib/components/layout';
3
+
import { MetaTags } from '$lib/components/seo';
3
4
import {
4
5
ProfileCard,
5
6
PostCard,
···
10
11
SupportersCard,
11
12
PopfeedCard
12
13
} from '$lib/components/layout/main/card';
13
-
import { createSiteMeta } from '$lib/helper/siteMeta';
14
14
import type { PageData } from './$types';
15
15
16
16
let { data }: { data: PageData } = $props();
17
+
</script>
17
18
18
-
// Use $derived for reactive metadata
19
-
const meta = $derived(
20
-
createSiteMeta({
21
-
...data.siteMeta
22
-
})
23
-
);
24
-
</script>
19
+
<MetaTags meta={data.meta} siteMeta={data.meta} />
25
20
26
21
<div class="mx-auto max-w-6xl">
27
22
<div class="mb-8 text-center">
+5
src/routes/archive/+page.svelte
+5
src/routes/archive/+page.svelte
···
1
1
<script lang="ts">
2
2
import { Card, SearchBar, Pagination, Tabs, Dropdown } from '$lib/components/ui';
3
3
import { DocumentCard } from '$lib/components/ui';
4
+
import { MetaTags } from '$lib/components/seo';
4
5
import type { StandardSiteDocument } from '$lib/services/atproto';
6
+
import type { SiteMetadata } from '$lib/helper/siteMeta';
5
7
import { getUserLocale } from '$lib/utils/locale';
6
8
import { getAllTags } from '$lib/helper/posts';
7
9
8
10
interface Props {
9
11
data: {
10
12
documents: StandardSiteDocument[];
13
+
meta: SiteMetadata;
11
14
};
12
15
}
13
16
···
147
150
selectedYear = yearId;
148
151
}
149
152
</script>
153
+
154
+
<MetaTags meta={data.meta} siteMeta={data.meta} />
150
155
151
156
<div class="mx-auto max-w-4xl">
152
157
<!-- Page Header -->
+4
-13
src/routes/github/+page.svelte
+4
-13
src/routes/github/+page.svelte
···
1
1
<script lang="ts">
2
2
import { Card, NoiseImage } from '$lib/components/ui';
3
3
import { ExternalLink, MapPin, Link as LinkIcon, Calendar, Users, GitBranch, Star, Eye } from '@lucide/svelte';
4
+
import { MetaTags } from '$lib/components/seo';
4
5
import type { PageData } from './$types';
5
6
import { formatCompactNumber } from '$lib/utils/formatNumber';
6
7
import { formatLocalizedDate, getUserLocale } from '$lib/utils/locale';
7
-
import { createSiteMeta, defaultSiteMeta } from '$lib/helper/siteMeta';
8
+
8
9
let { data }: { data: PageData } = $props();
9
-
const { profile, repos, contributions } = data;
10
10
11
11
const locale = getUserLocale();
12
-
13
-
const siteMeta = createSiteMeta({
14
-
...defaultSiteMeta,
15
-
title: `GitHub @${profile.login}`,
16
-
description: profile.bio || `${profile.name || profile.login}'s GitHub profile`,
17
-
url: `${defaultSiteMeta.url}/github`
18
-
});
12
+
const { profile, repos, contributions, meta } = $derived(data);
19
13
20
14
// Language colours for common languages
21
15
const languageColors: Record<string, string> = {
···
52
46
}
53
47
</script>
54
48
55
-
<svelte:head>
56
-
<title>{siteMeta.title}</title>
57
-
<meta name="description" content={siteMeta.description} />
58
-
</svelte:head>
49
+
<MetaTags {meta} siteMeta={meta} />
59
50
60
51
<div class="mx-auto max-w-6xl space-y-8">
61
52
<!-- Profile Hero -->
+3
src/routes/site/meta/+page.svelte
+3
src/routes/site/meta/+page.svelte
···
1
1
<script lang="ts">
2
2
import { LinkCard } from '$lib/components/layout/main/card';
3
+
import { MetaTags } from '$lib/components/seo';
3
4
import type { SiteInfoData } from '$lib/services/atproto';
4
5
import type { SiteMetadata } from '$lib/helper/siteMeta';
5
6
···
16
17
<title>{meta.title}</title>
17
18
<meta name="description" content={meta.description} />
18
19
</svelte:head>
20
+
21
+
<MetaTags {meta} siteMeta={meta} />
19
22
20
23
<div class="mx-auto max-w-5xl space-y-8">
21
24
<div class="mb-8 text-center">