docs: Updates (#5)

* chore: Add badges to aside items and update sitemap

* update README.md

* add metadata + an og image - because why not

---------

Co-authored-by: Davis SHYAKA <[email protected]>

.vscode/ltex.dictionary.en-GB.txt

@@ -0,0 +1,3 @@
+Geist
+Vercel
+shadcn-svelte

.vscode/settings.json

@@ -7,6 +7,7 @@
 		"nums",
 		"Paperclip",
 		"poppanator",
+		"shadcn",
 		"shiki",
 		"Turborepo",
 		"WAAPI"

README.md

@@ -1,38 +1,11 @@
-# create-svelte
+# Geist
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
+This is a [Svelte](https://svelte.dev/) implementation of the [Geist](https://vercel.com/geist/introduction) Design System by [Vercel](https://vercel.com/).
 
-## Creating a project
+## Notes
 
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+- Work in progress.
+- Not affiliated with Vercel.
+- Not a component library.
+- Will try and keep the API's as close to the original as possible.
+- Built with [shadcn-svelte](https://www.shadcn-svelte.com/)

package.json

@@ -21,6 +21,7 @@
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",
 		"@tailwindcss/typography": "^0.5.13",
 		"autoprefixer": "^10.4.19",
+		"just-extend": "^6.2.0",
 		"mode-watcher": "^0.4.0",
 		"postcss": "^8.4.39",
 		"prettier": "^3.3.2",
@@ -29,6 +30,7 @@
 		"shiki": "^1.10.3",
 		"svelte": "^4.2.18",
 		"svelte-check": "^3.8.4",
+		"svelte-meta-tags": "^3.1.2",
 		"tailwindcss": "^3.4.4",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.3",

src/routes/+layout.svelte

@@ -1,10 +1,18 @@
 <script>
+	import { page } from '$app/stores';
+	import extend from 'just-extend';
 	import { ModeWatcher } from 'mode-watcher';
+	import { MetaTags } from 'svelte-meta-tags';
 	import '../app.css';
 	import Aside from './aside.svelte';
 	import Header from './header.svelte';
+
+	export let data;
+
+	$: metaTags = extend(true, {}, data.baseMetaTags, $page.data.pageMetaTags);
 </script>
 
+<MetaTags {...metaTags} />
 <ModeWatcher />
 <div>
 	<Header />

src/routes/+layout.ts

@@ -1 +1,38 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
 export const prerender = true;
+
+export function load({ url }) {
+	const title = 'Vercel Geist';
+	const description =
+		"Vercel's design system called Geist. Made for building consistent and delightful web experiences.";
+
+	const baseMetaTags = Object.freeze({
+		title,
+		description:
+			"Vercel's design system called Geist. Made for building consistent and delightful web experiences.",
+		canonical: new URL(url.pathname, url.origin).href,
+		openGraph: {
+			type: 'website',
+			url: new URL(url.pathname, url.origin).href,
+			locale: 'en_GB',
+			title,
+			description,
+			siteName: 'Geist',
+			images: [
+				{
+					url: 'https://geist.shyakadavis.me/og.jpg',
+					alt: 'Geist',
+					width: 1200,
+					height: 628,
+					secureUrl: 'https://geist.shyakadavis.me/og.jpg',
+					type: 'image/jpeg'
+				}
+			]
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		baseMetaTags
+	};
+}

src/routes/aside-item.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
+	import { Badge } from '$lib/components/ui/badge';
 	import { cn } from '$lib/utils';
 	import type { Link } from './sitemap';
 
 	export let link: Link;
 	export let active: boolean;
+	export let disabled: boolean | undefined = undefined;
 </script>
 
 <li>
-	<a
-		class="group no-underline outline-none"
+	<svelte:element
+		this={disabled ? 'span' : 'a'}
+		class={cn('group no-underline outline-none', {
+			'pointer-events-none select-none opacity-50': disabled
+		})}
 		href={link.href}
 		aria-current={active ? 'true' : 'false'}
 	>
@@ -26,6 +31,13 @@
 				</span>
 			{/if}
 			<span>{link.title}</span>
+
+			{#if link.status === 'new'}
+				<Badge variant="blue" size="sm">New</Badge>
+			{/if}
+			{#if link.status === 'soon'}
+				<Badge variant="gray-subtle" size="sm">Soon</Badge>
+			{/if}
 		</span>
-	</a>
+	</svelte:element>
 </li>

src/routes/aside.svelte

@@ -38,7 +38,11 @@
 					<dd>
 						<ul class="relative space-y-0.5" style="width:calc(100% + 8px)">
 							{#each links as link}
-								<AsideItem active={is_active(link.href)} {link} />
+								<AsideItem
+									active={is_active(link.href)}
+									{link}
+									disabled={link?.status === 'soon'}
+								/>
 							{/each}
 						</ul>
 					</dd>

src/routes/badge/+page.svelte

@@ -7,12 +7,11 @@
 	import variants_code from './variants.svelte?raw';
 	import WithIcons from './with-icons.svelte';
 	import with_icons_code from './with-icons.svelte?raw';
+
+	export let data;
 </script>
 
-<PageWrapper
-	title="Badge"
-	description="A label that emphasizes an element that requires attention, or helps categorize with other similar elements."
->
+<PageWrapper title={data.title} description={data.description}>
 	<Demo id="variants" class="space-y-2" code={variants_code}>
 		<Variants />
 	</Demo>

src/routes/badge/+page.ts

@@ -0,0 +1,22 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Badge';
+	const description =
+		'A label that emphasizes an element that requires attention, or helps categorize with other similar elements.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}