Merge pull request #4 from Friends-of-Monika/feature/page-title

Add title, description and OGP
Friends-of-Monika · Mar 29, 2024 · bc76c06 · bc76c06
2 parents b3e41ee + 0adf003
commit bc76c06
Show file tree

Hide file tree

Showing 8 changed files with 95 additions and 1 deletion.
diff --git a/src/app.html b/src/app.html
@@ -2,7 +2,7 @@
 <html lang="en">
 	<head>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.svg" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/components/OpenGraph.svelte b/src/components/OpenGraph.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+
+	// OpenGraph generic parameters
+	export let ogpTitle: string = $page.data.ogp?.title ?? $page.data.meta?.title;
+	export let ogpUrl = $page.url.toString();
+	export let ogpType = "website";
+	export let ogpDescription: string = $page.data.ogp?.description ?? $page.data.meta?.description;
+	export let ogpImage: string = $page.data.ogp?.image ?? $page.data.meta?.image;
+
+	// Twitter-specific parameters
+	export let twiCard: string | undefined = undefined;
+	export let twiDomain = $page.url.hostname;
+	export let twiUrl = ogpUrl;
+	export let twiTitle = ogpTitle;
+	export let twiDescription = ogpDescription;
+	export let twiImage = ogpImage;
+</script>
+
+<svelte:head>
+	<meta property="og:url" content={ogpUrl} />
+	<meta property="og:type" content={ogpType} />
+	{#if ogpTitle}<meta property="og:title" content={ogpTitle} />{/if}
+	{#if ogpDescription}<meta property="og:description" content={ogpDescription} />{/if}
+	{#if ogpImage}<meta property="og:image" content={ogpImage} />{/if}
+
+	{#if twiCard}<meta name="twitter:card" content={twiCard} />{/if}
+	<meta property="twitter:domain" content={twiDomain} />
+	<meta property="twitter:url" content={twiUrl} />
+	{#if twiTitle}<meta name="twitter:title" content={twiTitle} />{/if}
+	{#if twiDescription}<meta name="twitter:description" content={twiDescription} />{/if}
+	{#if twiImage}<meta name="twitter:image" content={twiImage} />{/if}
+</svelte:head>
diff --git a/src/components/PageMeta.svelte b/src/components/PageMeta.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+
+	export let title: string = $page.data.meta?.title ?? $page.data.ogp?.title;
+	export let description: string = $page.data.meta?.description ?? $page.data.ogp?.description;
+	export let keywords: string[] = $page.data.meta?.keywords ?? [];
+</script>
+
+<svelte:head>
+	{#if title}
+		<title>{title} &bull; MAS Web Utils</title>
+	{:else}
+		<title>MAS Web Utils</title>
+	{/if}
+
+	{#if description}<meta name="description" content={description} />{/if}
+	{#if keywords?.length}<meta name="keywords" content={keywords.join(", ")} />{/if}
+</svelte:head>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -2,10 +2,21 @@
 	// Include CSS (+ Tailwind)
 	import "../app.css";
 
+	// Components
+	import PageMeta from "../components/PageMeta.svelte";
+	import OpenGraph from "../components/OpenGraph.svelte";
+
+	// Svelte transitions
 	import { fly } from "svelte/transition";
+
+	// Layout/page data
 	export let data: Record<string, unknown>;
 </script>
 
+<!-- Include SEO metadata -->
+<PageMeta />
+<OpenGraph />
+
 {#key data.url}
 	<div in:fly={{ x: -200, duration: 300, delay: 300 }} out:fly={{ x: 200, duration: 300 }}>
 		<slot />

diff --git a/src/routes/+page.ts b/src/routes/+page.ts
@@ -0,0 +1,11 @@
+export function load() {
+	return {
+		meta: {
+			title: "Home",
+			description: "🧰 A collection of useful tools for Monika After Story you can use online!"
+		},
+		ogp: {
+			title: "Monika After Story Web Utils"
+		}
+	};
+}
diff --git a/src/routes/validator/+page.ts b/src/routes/validator/+page.ts
@@ -0,0 +1,8 @@
+export function load() {
+	return {
+		meta: {
+			title: "JSON Validator",
+			description: "🔧 An online tool to quickly check your spritepack JSON files"
+		}
+	};
+}
diff --git a/static/favicon.png b/static/favicon.png
diff --git a/static/favicon.svg b/static/favicon.svg