From 486c01a572f50c6db925ca74600ba5d4984752df Mon Sep 17 00:00:00 2001
From: Fuwn <contact@fuwn.me>
Date: Mon, 25 Dec 2023 00:46:05 -0800
Subject: feat(routes): route-specific head title

---
 src/lib/HeadTitle.svelte                   | 18 ++++++++++++++++
 src/routes/+layout.svelte                  |  3 +++
 src/routes/+page.svelte                    |  3 +++
 src/routes/completed/+page.svelte          |  3 +++
 src/routes/schedule/+page.svelte           |  3 +++
 src/routes/settings/+page.svelte           |  3 +++
 src/routes/tools/+page.svelte              | 33 ++++++++++++++++++------------
 src/routes/updates/+page.svelte            |  3 +++
 src/routes/user/+page.svelte               |  3 +++
 src/routes/user/[user]/+page.svelte        |  3 +++
 src/routes/user/[user]/badges/+page.svelte |  3 +++
 11 files changed, 65 insertions(+), 13 deletions(-)
 create mode 100644 src/lib/HeadTitle.svelte

(limited to 'src')

diff --git a/src/lib/HeadTitle.svelte b/src/lib/HeadTitle.svelte
new file mode 100644
index 00000000..892eef48
--- /dev/null
+++ b/src/lib/HeadTitle.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	export let route: string | undefined = undefined;
+	export let path: string | undefined = undefined;
+
+	const title = 'due.moe • 期限' + (route ? ` | ${route}` : '');
+</script>
+
+<svelte:head>
+	<!-- Facebook -->
+	<meta property="og:url" content={`https://due.moe${path}`} />
+	<meta property="og:title" content={title} />
+
+	<!-- Twitter -->
+	<meta property="twitter:url" content={`https://due.moe${path}`} />
+	<meta name="twitter:title" content={title} />
+
+	<title>{title}</title>
+</svelte:head>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 2fdfbc4d..6ab7eff8 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -5,6 +5,7 @@
 	import userIdentity from '../stores/userIdentity';
 	import settings from '../stores/settings';
 	import { browser } from '$app/environment';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	export let data;
 
@@ -33,6 +34,8 @@
 	});
 </script>
 
+<HeadTitle />
+
 <div id="container">
 	<div id="header">
 		<p id={$settings.displayHoverNavigation ? 'hover-header' : ''}>
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 2c750acd..f2f7f039 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -8,6 +8,7 @@
 	import settings from '../stores/settings';
 	import { lastActivityDate } from '$lib/AniList/activity';
 	import ListTitle from '$lib/List/ListTitle.svelte';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	export let data;
 
@@ -69,6 +70,8 @@
 	};
 </script>
 
+<HeadTitle />
+
 {#if !lastActivityWasToday}
 	<p>
 		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
diff --git a/src/routes/completed/+page.svelte b/src/routes/completed/+page.svelte
index 466f993c..8e3e21e6 100644
--- a/src/routes/completed/+page.svelte
+++ b/src/routes/completed/+page.svelte
@@ -7,6 +7,7 @@
 	import { lastActivityDate } from '$lib/AniList/activity';
 	import ListTitle from '$lib/List/ListTitle.svelte';
 	import MangaListTemplate from '$lib/List/Manga/MangaListTemplate.svelte';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	export let data;
 
@@ -68,6 +69,8 @@
 	};
 </script>
 
+<HeadTitle route="Completed" path="/completed" />
+
 {#if !lastActivityWasToday}
 	<p>
 		You don't have any new activity statuses from the past day! Create one within {timeLeftToday()}
diff --git a/src/routes/schedule/+page.svelte b/src/routes/schedule/+page.svelte
index 57d9f4da..362b6a39 100644
--- a/src/routes/schedule/+page.svelte
+++ b/src/routes/schedule/+page.svelte
@@ -11,6 +11,7 @@
 	import { findClosestMedia } from '$lib/Media/Anime/Airing/Subtitled/match';
 	import MediaTitleDisplay from '$lib/List/MediaTitleDisplay.svelte';
 	import { outboundLink } from '$lib/Media/links';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	let subsPleasePromise: Promise<SubsPlease>;
 	let scheduledMediaPromise: Promise<Partial<Media[]>>;
@@ -85,6 +86,8 @@
 		media ? media.title.english || media.title.romaji || media.title.native : null;
 </script>
 
+<HeadTitle route="Schedule" path="/schedule" />
+
 <blockquote>
 	<select
 		bind:value={timeZone}
diff --git a/src/routes/settings/+page.svelte b/src/routes/settings/+page.svelte
index 04d02739..755543b0 100644
--- a/src/routes/settings/+page.svelte
+++ b/src/routes/settings/+page.svelte
@@ -7,6 +7,7 @@
 	import { pruneAllManga } from '$lib/Media/Manga/cache';
 	import Attributions from '$lib/Settings/Attributions.svelte';
 	import { env } from '$env/dynamic/public';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	export let data;
 
@@ -52,6 +53,8 @@
 	};
 </script>
 
+<HeadTitle route="Settings" path="/settings" />
+
 <p>
 	Have feedback or suggestions? Send a private message to
 	<a href="https://anilist.co/user/fuwn" target="_blank">@fuwn</a> on AniList!
diff --git a/src/routes/tools/+page.svelte b/src/routes/tools/+page.svelte
index 8a500d41..a6a33aa4 100644
--- a/src/routes/tools/+page.svelte
+++ b/src/routes/tools/+page.svelte
@@ -7,6 +7,7 @@
 	import { page } from '$app/stores';
 	import SequelSpy from '$lib/Tools/SequelSpy.svelte';
 	import { closest } from '$lib/Error/path';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	export let data;
 
@@ -14,7 +15,7 @@
 	let tool =
 		browser && urlParameters?.size !== 0 ? urlParameters?.get('tool') || 'default' : 'default';
 	const tools: { [key: string]: string } = {
-		default: 'Default',
+		default: 'Tools',
 		todays_character_birthdays: "Today's Character Birthdays",
 		activity_history: 'Activity History',
 		wrapped: 'Wrapped',
@@ -43,6 +44,8 @@
 </blockquote>
 
 {#if !Object.keys(tools).includes(tool)}
+	<HeadTitle route="Tools" path="/tools" />
+
 	<p>Tool not found.</p>
 
 	<blockquote>
@@ -53,16 +56,20 @@
 			{suggestion === '...' ? '...' : tools[suggestion]}</a
 		>"?
 	</blockquote>
-{:else if tool === 'default'}
-	Select a tool to continue.
-{:else if tool === 'activity_history'}
-	<ActivityHistory user={data.user} />
-{:else if tool === 'wrapped'}
-	<Wrapped user={data.user} />
-{:else if tool === 'episode_discussion_collector'}
-	<EpisodeDiscussionCollector />
-{:else if tool === 'todays_character_birthdays'}
-	<CharacterBirthdays />
-{:else if tool === 'sequel_spy'}
-	<SequelSpy user={data.user} />
+{:else}
+	<HeadTitle route={tools[tool]} path={`/tools?tool=${tool}`} />
+
+	{#if tool === 'default'}
+		Select a tool to continue.
+	{:else if tool === 'activity_history'}
+		<ActivityHistory user={data.user} />
+	{:else if tool === 'wrapped'}
+		<Wrapped user={data.user} />
+	{:else if tool === 'episode_discussion_collector'}
+		<EpisodeDiscussionCollector />
+	{:else if tool === 'todays_character_birthdays'}
+		<CharacterBirthdays />
+	{:else if tool === 'sequel_spy'}
+		<SequelSpy user={data.user} />
+	{/if}
 {/if}
diff --git a/src/routes/updates/+page.svelte b/src/routes/updates/+page.svelte
index 565505d3..2b3f6284 100644
--- a/src/routes/updates/+page.svelte
+++ b/src/routes/updates/+page.svelte
@@ -2,6 +2,7 @@
 	/* eslint svelte/no-at-html-tags: "off" */
 
 	import { browser } from '$app/environment';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 	import { onMount } from 'svelte';
 
 	let feed: { items: { title: string; link: string; content: string }[] } | null | undefined =
@@ -47,6 +48,8 @@
 	const chapterTitle = (title: string) => title.replace(/^(.*?) (Vol\.|Ch\.|\bOneshot\b)/, '$2');
 </script>
 
+<HeadTitle route="Updates" path="/updates" />
+
 <div id="list-container">
 	<div>
 		<details open>
diff --git a/src/routes/user/+page.svelte b/src/routes/user/+page.svelte
index b6c63f35..f3c5894a 100644
--- a/src/routes/user/+page.svelte
+++ b/src/routes/user/+page.svelte
@@ -4,6 +4,7 @@
 	import type { UserIdentity } from '$lib/AniList/identity';
 	import { onMount } from 'svelte';
 	import { env } from '$env/dynamic/public';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 
 	const user =
 		browser && localStorage.getItem('userIdentity')
@@ -20,3 +21,5 @@
 		}
 	});
 </script>
+
+<HeadTitle route="Profile" path="/user" />
diff --git a/src/routes/user/[user]/+page.svelte b/src/routes/user/[user]/+page.svelte
index 9f55aa8b..b365127a 100644
--- a/src/routes/user/[user]/+page.svelte
+++ b/src/routes/user/[user]/+page.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { user, type User } from '$lib/AniList/user';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 	import { estimatedDayReading } from '$lib/Media/Manga/time';
 	import { onMount } from 'svelte';
 
@@ -16,6 +17,8 @@
 	// 8.5827814569536423841e0
 </script>
 
+<HeadTitle route={`${data.username}'s Profile'`} path={`/user/${data.username}`} />
+
 {#if userData === null}
 	Could not load user profile for <a
 		href={`https://anilist.co/user/${data.username}`}
diff --git a/src/routes/user/[user]/badges/+page.svelte b/src/routes/user/[user]/badges/+page.svelte
index c29be045..dde0523b 100644
--- a/src/routes/user/[user]/badges/+page.svelte
+++ b/src/routes/user/[user]/badges/+page.svelte
@@ -5,6 +5,7 @@
 	import type { Badge } from '$lib/Database/badges';
 	import { domToBlob } from 'modern-screenshot';
 	import { onMount } from 'svelte';
+	import HeadTitle from '$lib/HeadTitle.svelte';
 	// import { io } from 'socket.io-client';
 
 	export let data;
@@ -129,6 +130,8 @@
 	};
 </script>
 
+<HeadTitle route={`${data.username}'s Badge Wall`} path={`/user/${data.username}`} />
+
 {#await currentUserIdentity}
 	Loading user identity ... 50%
 {:then identity}
-- 
cgit v1.2.3