add metadata (#10)

huntabyte · Jan 1, 2024 · 718f9c1 · 718f9c1
1 parent 14c6b82
commit 718f9c1
Show file tree

Hide file tree

Showing 8 changed files with 80 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
+![](static/og.jpg)
+
 Vaul-Svelte is an unstyled drawer component for Svelte that can be used as a Dialog replacement on tablet and mobile devices. It uses [Bits' Dialog primitive](https://www.bits-ui.com/docs/components/dialog) under the hood and is inspired by [this tweet](https://twitter.com/devongovett/status/1674470185783402496).
 
 This is a port of [Vaul](https://github.com/emilkowalski/vaul) for React, which was created by [Emil Kowalski](https://twitter.com/emilkowalski_).

diff --git a/src/app.html b/src/app.html
@@ -1,8 +1,17 @@
 <!doctype html>
 <html lang="en">
 	<head>
+		<link
+			href="%sveltekit.assets%/favicon-light.svg"
+			rel="icon"
+			media="(prefers-color-scheme: light)"
+		/>
+		<link
+			href="%sveltekit.assets%/favicon-dark.svg"
+			rel="icon"
+			media="(prefers-color-scheme: dark)"
+		/>
 		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>

diff --git a/src/config/site.ts b/src/config/site.ts
@@ -0,0 +1,13 @@
+export const siteConfig = {
+	name: 'Vaul Svelte',
+	url: 'https://www.vaul-svelte.com',
+	description: 'Unstyled drawer for Svelte.',
+	ogImage: 'https://www.vaul-svelte.com/og.jpg',
+	links: {
+		twitter: 'https://twitter.com/huntabyte',
+		github: 'https://github.com/huntabyte/vaul-svelte'
+	},
+	keywords: `Svelte,SvelteKit,Svelte Components,Headless Svelte Components,Headless UI Svelte,Drawer for Svelte,SvelteKit Drawer,Svelte Drawer,Vaul Svelte`
+};
+
+export type SiteConfig = typeof siteConfig;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
@@ -1,7 +1,10 @@
 <script lang="ts">
 	import '../app.pcss';
+	import Metadata from './metadata.svelte';
 </script>
 
+<Metadata />
+
 <main data-vaul-drawer-wrapper="">
 	<slot />
 </main>
diff --git a/src/routes/metadata.svelte b/src/routes/metadata.svelte
@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { page } from '$app/stores';
+	import { siteConfig } from '../config/site.js';
+
+	export let title: string = siteConfig.name;
+</script>
+
+<svelte:head>
+	<title>{title}</title>
+	<meta name="description" content={siteConfig.description} />
+	<meta name="keywords" content={siteConfig.keywords} />
+	<meta name="author" content="huntabyte" />
+	<meta name="twitter:card" content="summary_large_image" />
+	<meta name="twitter:site" content={siteConfig.url} />
+	<meta name="twitter:title" content={title} />
+	<meta name="twitter:description" content={siteConfig.description} />
+	<meta name="twitter:image" content="https://www.vaul-svelte.com/og.jpg" />
+	<meta name="twitter:image:alt" content={siteConfig.name} />
+	<meta name="twitter:creator" content="huntabyte" />
+	<meta property="og:title" content={title} />
+	<meta property="og:type" content="website" />
+	<meta property="og:url" content={siteConfig.url + $page.url.pathname} />
+	<meta property="og:image" content="https://www.vaul-svelte.com/og.jpg" />
+	<meta property="og:image:alt" content={siteConfig.name} />
+	<meta property="og:image:width" content="1200" />
+	<meta property="og:image:height" content="630" />
+	<meta property="og:description" content={siteConfig.description} />
+	<meta property="og:site_name" content={siteConfig.name} />
+	<meta property="og:locale" content="EN_US" />
+</svelte:head>
diff --git a/static/favicon-dark.svg b/static/favicon-dark.svg
diff --git a/static/favicon-light.svg b/static/favicon-light.svg
diff --git a/static/og.jpg b/static/og.jpg