feat(dashboard): add link previews (#4)

BastiDood · Dec 4, 2024 · 2fa85ea · 2fa85ea
2 parents 576cf98 + 37aa5eb
commit 2fa85ea
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 0 deletions.
diff --git a/src/app.html b/src/app.html
@@ -5,6 +5,13 @@
         %sveltekit.head%
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width,initial-scale=1" />
+        <meta property="og:title" content="Spectro - Discord bot dashboard" />
+        <meta property="og:type" content="website" />
+        <meta
+            property="og:description"
+            content="Spectro is a Discord bot that supports multi-channel anonymous confessions, replies and moderation."
+        />
+        <meta name="twitter:card" content="summary_large_image" />
     </head>
     <body data-sveltekit-preload-data="hover">
         <div class="contents">%sveltekit.body%</div>

diff --git a/src/lib/brand/favicon.ico b/src/lib/brand/favicon.ico
diff --git a/src/lib/brand/link-preview.png b/src/lib/brand/link-preview.png
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -4,10 +4,17 @@
     import GitHub from '@iconify/icons-simple-icons/github';
     import Icon from '@iconify/svelte';
     import LogoMark from '$lib/brand/logomark/logomark.svg';
+    import banner from '$lib/brand/link-preview.png?url';
+    import favicon from '$lib/brand/favicon.ico?url';
 
     const { children } = $props();
 </script>
 
+<svelte:head>
+    <link rel="icon" href={favicon} />
+    <meta property="og:image" content="https://spectro.fly.dev{banner}" />
+</svelte:head>
+
 <header class="sticky top-0 bg-base-100 p-1 pl-4 pr-10 shadow-sm">
     <nav class="navbar">
         <div class="navbar-start">