feat: add basic metadata infos

src/components/index.ts

@@ -12,3 +12,4 @@ export { default as Steps } from "./steps.svelte";
 export { default as Code } from "./markdown/code.svelte";
 export { default as APISection } from "./api-section.svelte";
 export { default as ComponentPreview } from "./component-preview.svelte";
+export { default as Metadata } from "./metadata.svelte";

src/components/metadata.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import { page } from "$app/stores";
+	import { siteConfig } from "@/config";
+
+	export let title: string = siteConfig.name;
+
+	$: title = $page.data?.title ? `${$page.data.title} - ${siteConfig.name}` : 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" />
+</svelte:head>

src/config/site.ts

@@ -1,6 +1,6 @@
 export const siteConfig = {
-	name: "Bit UI",
-	url: "https://bit-ui.com",
+	name: "Bits UI",
+	url: "https://bits-ui.com",
 	description: "Headless components for Svelte built on top of Melt UI.",
 	links: {
 		melt: "https://melt-ui.com",

src/routes/+layout.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { dev } from "$app/environment";
-	import { SidebarNav, SiteHeader, TailwindIndicator } from "@/components";
+	import { Metadata, SidebarNav, SiteHeader, TailwindIndicator } from "@/components";
 	import { setInitialClassState } from "@/components/light-switch/light-switch";
 	import { navigation } from "@/config";
 	import "@/styles/app.postcss";
@@ -10,6 +10,7 @@
 	<!-- This causes the new eslint-plugin-svelte: https://github.com/sveltejs/eslint-plugin-svelte/issues/492 -->
 	{@html `<\u{73}cript nonce="%sveltekit.nonce%">(${setInitialClassState.toString()})();</script>`}
 </svelte:head>
+<Metadata />
 
 <SiteHeader />
 <main class="min-h-[calc(100vh-64px)]">