Initial Docs (#39)

src/content/components/anchor.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import { topics } from '$content/utility/anchor-registry';
+	import { Hashtag } from '@inqling/svelte-icons/heroicon-24-outline';
+
+	export let value: string;
+	$: id = topics.slugify(value || '');
+	topics.add(value);
+</script>
+
+<a href="/#{id}" class="group relative -ml-[1em] hover:text-black">
+	<Hashtag class="h-[1em] w-[1em] -translate-x-1 text-mono-300 group-hover:text-primary-600" /><span
+		class="underline decoration-primary-50/0 decoration-4 group-hover:decoration-primary-500"
+		>{value}</span
+	>
+	<span class="pointer-events-none absolute -top-10 h-px w-px" {id} />
+</a>

src/content/components/content-list-item.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+	export let anchor: boolean = false;
+</script>
+
+<li class="list-item list-disc text-primary-800">
+	<h4 class="text-lg font-medium leading-normal text-primary-600">
+		{#if anchor}
+			<Anchor value={title} />
+		{:else}
+			{title}
+		{/if}
+	</h4>
+	<p class="mt-0 text-mono-600">
+		<slot />
+	</p>
+</li>

src/content/components/content-title.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+	export let subtitle: string | undefined = undefined;
+</script>
+
+<h3 class="text-xl font-medium leading-relaxed text-mono-900"><Anchor value={title} /></h3>
+{#if subtitle}
+	<p class="text-xl font-normal leading-normal text-mono-500">{subtitle}</p>
+{/if}

src/content/components/content.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<article
+	class="section-content my-4 w-full border-t-2 border-mono-100 py-4 text-mono-600 first-of-type:border-t-0 first-of-type:pt-0"
+>
+	<slot />
+</article>

src/content/components/features.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { SvelteIcon } from '@inqling/svelte-icons';
+
+	type Feature = {
+		icon: SvelteIcon;
+		title: string;
+		description: string;
+	};
+
+	export let features: Feature[];
+</script>
+
+<dl
+	class="mx-auto grid max-w-2xl grid-cols-1 gap-6 py-6 text-base leading-7 text-mono-600 sm:grid-cols-2 sm:gap-y-10 lg:mx-0 lg:max-w-none"
+>
+	{#each features as feature}
+		<div class="relative pl-9">
+			<dt class="inline font-semibold text-mono-900">
+				<svelte:component
+					this={feature.icon}
+					class="absolute top-1 left-1 h-5 w-5 text-primary-600"
+				/>
+
+				{feature.title}
+			</dt>
+			<dd class="inline">{feature.description}</dd>
+		</div>
+	{/each}
+</dl>

src/content/components/index.ts

@@ -0,0 +1,6 @@
+export { default as ContentListItem } from './content-list-item.svelte';
+export { default as ContentTitle } from './content-title.svelte';
+export { default as Content } from './content.svelte';
+export { default as Features } from './features.svelte';
+export { default as SectionTitle } from './section-title.svelte';
+export { default as Section } from './section.svelte';

src/content/components/section-title.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import Anchor from './anchor.svelte';
+
+	export let title: string;
+</script>
+
+<h2 class="text-3xl font-normal leading-loose text-primary-600">
+	<Anchor value={title} />
+</h2>

src/content/components/section.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+</script>
+
+<!-- <div class="relative mx-auto w-full max-w-7xl p-4 sm:px-6 lg:px-8"> -->
+<div class="relative mx-auto w-full max-w-prose p-4 text-lg sm:px-6 lg:px-8">
+	<section class="w-full">
+		<slot />
+	</section>
+</div>