chore: website seo

Author: willin

apps/web/src/components/AdSlot.svelte

@@ -1,8 +1,11 @@
 <script lang="ts">
-  $effect(() => {
-    // @ts-ignore
-    (adsbygoogle = window.adsbygoogle || []).push({});
-  });
+  import { navigating } from '$app/stores';
+  $: if ($navigating) {
+    try {
+      // @ts-ignore
+      (adsbygoogle = window.adsbygoogle || []).push({});
+    } catch (e) {}
+  }
 </script>
 
 <ins

apps/web/src/components/SEO.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  let siteData = {
+    title: 'Svelte Turbo',
+    desc: "A Willin Wang's Work"
+  };
+  const {
+    formatTitle = true,
+    title = '',
+    desc = siteData.desc
+  } = $props<{ formatTitle?: boolean; title?: string; desc?: string }>();
+  const formattedTitle = $derived(
+    formatTitle ? (title ? `${title} — ${siteData.title}` : `${siteData.title}`) : title
+  );
+</script>
+
+<svelte:head>
+  <title>{formattedTitle}</title>
+  <meta name="description" content={desc} />
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:title" content={formattedTitle} />
+  <meta name="twitter:description" content={desc} />
+  <meta property="og:title" content={formattedTitle} />
+  <meta property="og:description" content={desc} />
+</svelte:head>

apps/web/src/components/mdsvex.svelte

@@ -1,9 +1,10 @@
-<script>
+<script lang="ts">
   import { createTableOfContents } from '@melt-ui/svelte';
   import Toc from './toc.svelte';
   import AdSlot from './AdSlot.svelte';
+  import SEO from './SEO.svelte';
 
-  const { title, desc } = $props();
+  const { title, desc } = $props<{ title: string; desc: string }>();
 
   const {
     elements: { item },
@@ -14,6 +15,10 @@
   });
 </script>
 
+{#if title}
+  <SEO {title} {desc} />
+{/if}
+
 <div
   class="hero min-h-screen bg-neutral"
   style="background-image: url(https://willin.wang/images/bg.jpg);">

apps/web/src/routes/[[lang=locale]]/+page.svelte

@@ -4,6 +4,8 @@
   import { getPossibleLocales, locales } from '@svelte-dev/i18n';
   import { fallbackLng } from '$lib/i8n';
   import { page } from '$app/stores';
+  import SEO from '$components/SEO.svelte';
+  import { goto } from '$app/navigation';
 
   $effect(() => {
     const isInit = !!localStorage.getItem('lang');
@@ -20,6 +22,7 @@
   });
 </script>
 
+<SEO />
 <div class="hero min-h-screen" style="background-image: url(https://willin.wang/images/bg.jpg);">
   <div class="hero-overlay bg-opacity-60"></div>
   <div class="hero-content text-center text-neutral-content">