Merge pull request #1511 from SnowCait/fix-ogp

Fix OGP
SnowCait · Nov 12, 2024 · 87c501b · 87c501b
2 parents 1a1f27d + 73b21c9
commit 87c501b
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 34 deletions.
diff --git a/web/src/lib/i18n/locales/en.json b/web/src/lib/i18n/locales/en.json
@@ -1,4 +1,7 @@
 {
+	"app": {
+		"description": "Nostr client for web."
+	},
 	"layout": {
 		"header": {
 			"home": "Home",

diff --git a/web/src/lib/i18n/locales/ja.json b/web/src/lib/i18n/locales/ja.json
@@ -1,4 +1,7 @@
 {
+	"app": {
+		"description": "Web 向け Nostr クライアント。"
+	},
 	"layout": {
 		"header": {
 			"home": "ホーム",

diff --git a/web/src/routes/(app)/[slug=npub]/+layout.server.ts b/web/src/routes/(app)/[slug=npub]/+layout.server.ts
@@ -1,17 +1,23 @@
 import { error } from '@sveltejs/kit';
+import { get } from 'svelte/store';
 import type { Event } from 'nostr-typedef';
 import type { LayoutServerLoad } from './$types';
-import { storeMetadata } from '$lib/cache/Events';
+import { metadataStore, storeMetadata } from '$lib/cache/Events';
 import { checkRestriction } from '$lib/server/Restriction';
 import { fetchMetadata } from '$lib/Api';
-import { defaultRelays } from '$lib/Constants';
+import { appName, defaultRelays } from '$lib/Constants';
 import { User } from '$lib/User';
 
-export const load: LayoutServerLoad<{
+type Data = {
 	pubkey: string;
 	relays: string[];
 	metadataEvent: Event | undefined;
-}> = async ({ params }) => {
+	title: string;
+	description: string;
+	image?: string;
+};
+
+export const load: LayoutServerLoad<Data> = async ({ params }) => {
 	console.log('[npub page load]', params.slug);
 	console.time('[npub decode]');
 	const { pubkey, relays } = await User.decode(params.slug);
@@ -33,5 +39,18 @@ export const load: LayoutServerLoad<{
 		storeMetadata(metadataEvent);
 	}
 
-	return { pubkey, relays, metadataEvent };
+	const $metadataStore = get(metadataStore);
+	const metadata = $metadataStore.get(pubkey);
+
+	const data: Data = {
+		pubkey,
+		relays,
+		metadataEvent,
+		title: `${appName} - ${metadata?.displayName ?? 'ghost'}`,
+		description: metadata?.about ?? ''
+	};
+	if (metadata?.picture) {
+		data.image = metadata.picture;
+	}
+	return data;
 };
diff --git a/web/src/routes/(app)/[slug=npub]/+page.svelte b/web/src/routes/(app)/[slug=npub]/+page.svelte
@@ -10,7 +10,7 @@
 	import { pubkey as authorPubkey, readRelays } from '$lib/stores/Author';
 	import { Timeline } from '$lib/Timeline';
 	import { EventItem } from '$lib/Items';
-	import { appName, minTimelineLength } from '$lib/Constants';
+	import { minTimelineLength } from '$lib/Constants';
 	import { replaceableEvents, replaceableEventsReqEmit } from '$lib/Profile';
 	import type { LayoutData } from './$types';
 	import { developerMode } from '$lib/stores/Preference';
@@ -157,17 +157,6 @@
 	}
 </script>
 
-<svelte:head>
-	{#if metadata !== undefined}
-		<title>{appName} - {metadata.displayName} (@{metadata.name})</title>
-		<meta property="og:title" content={metadata.displayName} />
-		<meta property="og:description" content={metadata.about} />
-		<meta property="og:image" content={metadata.picture} />
-	{:else}
-		<title>{appName} - ghost</title>
-	{/if}
-</svelte:head>
-
 <section class="card profile-wrapper">
 	<Profile {slug} pubkey={data.pubkey} {metadata} {relays} />
 </section>

diff --git a/web/src/routes/(app)/home/+page.svelte b/web/src/routes/(app)/home/+page.svelte
@@ -1,6 +1,5 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
-	import { _ } from 'svelte-i18n';
 	import { uniq, type LazyFilter, createRxBackwardReq } from 'rx-nostr';
 	import { tap } from 'rxjs';
 	import { Kind, type Relay } from 'nostr-tools';
@@ -14,7 +13,6 @@
 	import { referencesReqEmit, rxNostr, storeSeenOn } from '$lib/timelines/MainTimeline';
 	import { hasSubscribed, hometimelineReqEmit } from '$lib/timelines/HomeTimeline';
 	import {
-		appName,
 		notificationsFilterKinds,
 		minTimelineLength,
 		reverseChronologicalItem
@@ -238,10 +236,6 @@
 	}
 </script>
 
-<svelte:head>
-	<title>{appName} - {$_('layout.header.home')}</title>
-</svelte:head>
-
 <HomeTab selected="home" />
 
 {#if $eventsPool.length > 0}

diff --git a/web/src/routes/(app)/home/+page.ts b/web/src/routes/(app)/home/+page.ts
@@ -0,0 +1,11 @@
+import { _ } from 'svelte-i18n';
+import { appName } from '$lib/Constants';
+import type { PageLoad } from './$types';
+import { get } from 'svelte/store';
+
+export const load: PageLoad = () => {
+	const $_ = get(_);
+	return {
+		title: `${appName} - ${$_('layout.header.home')}`
+	};
+};
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
@@ -3,18 +3,16 @@
 	import { page } from '$app/stores';
 	import { appName } from '$lib/Constants';
 	import '../app.css';
-
-	const description = 'Nostr client for web.';
 </script>
 
 <svelte:head>
-	<title>{appName}</title>
-	<meta name="description" content={description} />
-	<meta property="og:title" content={appName} />
+	<title>{$page.data.title}</title>
+	<meta name="description" content={$page.data.description} />
+	<meta property="og:title" content={$page.data.title} />
 	<meta property="og:type" content="website" />
-	<meta property="og:image" content={`${$page.url.origin}/logo.png`} />
+	<meta property="og:image" content={$page.data.image} />
 	<meta property="og:url" content={$page.url.href} />
-	<meta property="og:description" content={description} />
+	<meta property="og:description" content={$page.data.description} />
 	<meta property="og:site_name" content={appName} />
 	<meta name="twitter:card" content="summary" />
 	<style>

diff --git a/web/src/routes/+layout.ts b/web/src/routes/+layout.ts
@@ -1,15 +1,15 @@
 import { get } from 'svelte/store';
-import { locale, waitLocale } from 'svelte-i18n';
+import { _, locale, waitLocale } from 'svelte-i18n';
 import { browser } from '$app/environment';
 import { Login } from '$lib/Login';
 import { WebStorage } from '$lib/WebStorage';
 import '$lib/i18n';
 import { rxNostr } from '$lib/timelines/MainTimeline';
-import { defaultRelays, localizedRelays } from '$lib/Constants';
+import { appName, defaultRelays, localizedRelays } from '$lib/Constants';
 import type { LayoutLoad } from './$types';
 import { readRelays, writeRelays } from '$lib/stores/Author';
 
-export const load: LayoutLoad = async () => {
+export const load: LayoutLoad = async ({ url }) => {
 	console.debug('[layout load]');
 	let authenticated = false;
 	if (browser) {
@@ -32,9 +32,13 @@ export const load: LayoutLoad = async () => {
 		authenticated = await tryLogin();
 	}
 	await waitLocale();
+	const $_ = get(_);
 	return {
 		splash: !browser || authenticated,
-		authenticated
+		authenticated,
+		title: appName,
+		description: $_('app.description'),
+		image: `${url.origin}/logo.png`
 	};
 };