fix: head tags are now fully reactive

the trade off is that I can't use a component for them, which means a ton of boilerplate code was added. Discord sharing of script pages should now include the script banner image theoretically
Torwent · Jun 18, 2023 · a589946 · a589946
1 parent 2b82cd1
commit a589946
Show file tree

Hide file tree

Showing 18 changed files with 470 additions and 115 deletions.
diff --git a/src/lib/components/MetaTags.svelte b/src/lib/components/MetaTags.svelte
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import MetaTags from "$lib/components/MetaTags.svelte"
 	import Discord from "$lib/components/Discord.svelte"
 	import CanvasAnimation from "./CanvasAnimation.svelte"
 	import { fade } from "svelte/transition"
 	import { convertTime, formatRSNumber } from "$lib/utils"
 	import { invalidate } from "$app/navigation"
 	import { browser } from "$app/environment"
+	import { page } from "$app/stores"
 	export let data
 
 	function rerunLoad() {
@@ -14,13 +14,35 @@
 	}
 
 	rerunLoad()
+
+	const headTitle = "WaspScripts"
+	const headDescription =
+		"OldSchool RuneScape Color botting at it's best. Color only and fully open-source Simba scripts for OSRS."
+	const headKeywords = "OldSchool, RuneScape, OSRS, 2007, Color, Bot, Wasp, Scripts"
+	const headAuthor = "Torwent"
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
 <svelte:head>
-	<MetaTags
-		title="WaspScripts"
-		description="OldSchool RuneScape Color botting at it's best. Color only and fully open-source Simba scripts for OSRS."
-	/>
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="all" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
 </svelte:head>
 
 <main

diff --git a/src/routes/devs/+page.svelte b/src/routes/devs/+page.svelte
@@ -3,7 +3,6 @@
 	import { page } from "$app/stores"
 	import { onMount } from "svelte"
 	import { browser } from "$app/environment"
-	import MetaTags from "$lib/components/MetaTags.svelte"
 	import DevCard from "./DevCard.svelte"
 	import Paginator from "$lib/components/Paginator.svelte"
 	export let data
@@ -33,13 +32,36 @@
 
 	$: if (browser) replaceQuery({ page: currentPage.toString() })
 	$: if (browser) replaceQuery({ search: search })
+
+	const headTitle = "Developers - WaspScripts"
+	const headDescription =
+		"List of developers that are behind the project directly and/or indirerectly."
+	const headKeywords =
+		"OldSchool, RuneScape, OSRS, 2007, Color, Colour,  Bot, Wasp, Scripts, Simba, Developers"
+	const headAuthor = "Torwent"
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
 <svelte:head>
-	<MetaTags
-		title="Developers"
-		description="List of developers that are behind the project directly and/or indirerectly."
-	/>
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="all" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
 </svelte:head>
 
 <main>

diff --git a/src/routes/devs/[slug]/+page.svelte b/src/routes/devs/[slug]/+page.svelte
@@ -1,17 +1,43 @@
 <script lang="ts">
 	import Markdown from "$lib/Markdown.svelte"
-	import MetaTags from "$lib/components/MetaTags.svelte"
 	import { Github } from "lucide-svelte"
 	import { fade } from "svelte/transition"
 	import PayPal from "./PayPal.svelte"
 	import EditButton from "$lib/components/EditButton.svelte"
+	import { page } from "$app/stores"
 	export let data
 
-	const { developer, profile } = data
+	const { developer } = data
+
+	const headTitle = developer.username + " - WaspScripts"
+	const headDescription = developer.description
+	const headKeywords =
+		"OldSchool, RuneScape, OSRS, 2007, Color, Colour,  Bot, Wasp, Scripts, Simba, Developer, " +
+		developer.username
+	const headAuthor = developer.username
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
 <svelte:head>
-	<MetaTags title={developer.username} description={developer.description} />
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="all" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
 </svelte:head>
 
 <div

diff --git a/src/routes/devs/[slug]/edit/+page.svelte b/src/routes/devs/[slug]/edit/+page.svelte
@@ -9,6 +9,7 @@
 	import PayPal from "../PayPal.svelte"
 	import { Github } from "lucide-svelte"
 	import { canEdit } from "$lib/backend/data"
+	import { page } from "$app/stores"
 
 	export let data
 
@@ -31,8 +32,38 @@
 	$: $form.content = developer.content
 	$: $form.github = developer.github
 	$: $form.paypal_id = developer.paypal_id
+
+	const headTitle = "Edit " + developer.username + " - WaspScripts"
+	const headDescription = "Edit " + developer.username + " developer page."
+	const headKeywords =
+		"OldSchool, RuneScape, OSRS, 2007, Color, Colour, Bot, Wasp, Scripts, Simba, Developer, " +
+		developer.username
+	const headAuthor = developer.username
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
+<svelte:head>
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="noindex" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
+</svelte:head>
+
 <div class="container mx-auto my-6 max-w-2xl flex-grow">
 	{#if show}
 		<div

diff --git a/src/routes/faq/+page.svelte b/src/routes/faq/+page.svelte
@@ -1,24 +1,45 @@
 <script lang="ts">
 	import { fade } from "svelte/transition"
-	import MetaTags from "$lib/components/MetaTags.svelte"
 	import DropDown from "./DropDown.svelte"
 	import Discord from "$lib/components/Discord.svelte"
 
 	export let data
 
 	import type { FAQEntry } from "$lib/backend/types.js"
+	import { page } from "$app/stores"
 
 	const { questions, errors } = data
 
 	const questionsData = questions.data as FAQEntry[]
 	const errorsData = errors.data as FAQEntry[]
+
+	const headTitle = "FAQs and Errors - WaspScripts"
+	const headDescription = "Need help botting osrs? See if what you are looking for is in this list."
+	const headKeywords = "OldSchool, RuneScape, OSRS, 2007, Color, Bot, Wasp, Scripts, Simba"
+	const headAuthor = "Torwent"
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
 <svelte:head>
-	<MetaTags
-		title="FAQ and Errors"
-		description="Need help botting osrs? See if what you are looking for is in this list."
-	/>
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="all" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
 </svelte:head>
 
 <main

diff --git a/src/routes/premium/+page.svelte b/src/routes/premium/+page.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
-	import MetaTags from "$lib/components/MetaTags.svelte"
 	import { fade } from "svelte/transition"
 	import { modalStore, type ModalSettings } from "@skeletonlabs/skeleton"
 	import { canDownload } from "$lib/backend/data.js"
+	import { page } from "$app/stores"
 
 	export let data
 
@@ -50,16 +50,38 @@
 	function handleClick() {
 		modalStore.trigger(confirm)
 	}
+
+	const headTitle = "Premium - WaspScripts"
+	const headDescription =
+		"Get WaspScripts premium role and gain access to exclusive scripts. With premium you have scripts for nearly all skills in OSRS."
+	const headKeywords = "OldSchool, RuneScape, OSRS, 2007, Color, Colour, Bot, Wasp, Scripts, Simba"
+	const headAuthor = "Torwent"
+	const headImage =
+		"https://enqlpchobniylwpsjcqc.supabase.co/storage/v1/object/public/imgs/logos/logo.png"
 </script>
 
 <svelte:head>
-	<MetaTags
-		title="Premium"
-		description="Get WaspScripts premium role and gain access to exclusive scripts. With premium you have scripts for nearly all skills in OSRS."
-	/>
+	<title>{headTitle}</title>
+	<meta name="description" content={headDescription} />
+	<meta name="keywords" content={headKeywords} />
+	<meta name="author" content={headAuthor} />
+	<meta name="robots" content="all" />
+
+	<!-- OpenGraph tags -->
+	<meta property="og:type" content="website" />
+	<meta property="og:title" content={headTitle} />
+	<meta property="og:url" content={$page.url.href} />
+	<meta property="og:image" content={headImage} />
+	<meta property="og:description" content={headDescription} />
+
+	<!-- Twitter tags -->
+	<meta name="twitter:card" content="summary" />
+	<meta name="twitter:title" content={headTitle} />
+	<meta name="twitter:description" content={headDescription} />
+	<meta name="twitter:image" content={headImage} />
 </svelte:head>
 
-<div
+<main
 	class="container mx-auto my-6 max-w-5xl flex-grow text-center"
 	in:fade={{ duration: 300, delay: 300 }}
 	out:fade={{ duration: 300 }}
@@ -141,4 +163,4 @@
 		</button>
 		before making any purchase.
 	</h4>
-</div>
+</main>