init

docs/components/content/Callout.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { computed } from "#imports";
+
+const props = withDefaults(
+  defineProps<{
+    type?: "note" | "warning";
+    title: string;
+  }>(),
+  {
+    type: "note",
+  }
+);
+
+const styles = computed(() => {
+  return {
+    note: {
+      container:
+        "bg-sky-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
+      title: "text-sky-900 dark:text-sky-400",
+      body: "text-sky-800 [--tw-prose-background:theme(colors.sky.50)] prose-a:text-sky-900 prose-code:text-sky-900 dark:text-slate-300 dark:prose-code:text-slate-300",
+    },
+    warning: {
+      container:
+        "bg-amber-50 dark:bg-slate-800/60 dark:ring-1 dark:ring-slate-300/10",
+      title: "text-amber-900 dark:text-amber-500",
+      body: "text-amber-800 [--tw-prose-underline:theme(colors.amber.400)] [--tw-prose-background:theme(colors.amber.50)] prose-a:text-amber-900 prose-code:text-amber-900 dark:text-slate-300 dark:[--tw-prose-underline:theme(colors.sky.700)] dark:prose-code:text-slate-300",
+    },
+  }[props.type];
+});
+</script>
+
+<template>
+  <div :class="['my-8 flex rounded-3xl p-6', styles.container]">
+    <!--    <IconComponent class="h-8 w-8 flex-none" />-->
+    <div class="ml-4 flex-auto">
+      <p :class="['m-0 font-display text-xl', styles.title]">
+        {{ title }}
+      </p>
+      <div :class="['prose mt-2.5', styles.body]">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

docs/components/content/Lead.vue

@@ -0,0 +1,3 @@
+<template>
+  <p class="lead"><Markdown :use="$slots.default" unwrap="p" /></p>
+</template>

docs/components/content/ProseH2.vue

@@ -0,0 +1,7 @@
+<template>
+  <h2 :id="id"><slot /></h2>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>();
+</script>

docs/components/content/ProseH3.vue

@@ -0,0 +1,7 @@
+<template>
+  <h3 :id="id"><slot /></h3>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>();
+</script>

docs/components/content/ProseH4.vue

@@ -0,0 +1,7 @@
+<template>
+  <h4 :id="id"><slot /></h4>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>();
+</script>

docs/components/content/ProseH5.vue

@@ -0,0 +1,7 @@
+<template>
+  <h5 :id="id"><slot /></h5>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>();
+</script>

docs/components/content/ProseH6.vue

@@ -0,0 +1,7 @@
+<template>
+  <h6 :id="id"><slot /></h6>
+</template>
+
+<script setup lang="ts">
+defineProps<{ id: string }>();
+</script>

docs/components/content/QuickLink.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+defineProps<{
+  icon: string;
+  href: string;
+  title: string;
+}>();
+</script>
+
+<template>
+  <div
+    class="group relative rounded-xl border border-slate-200 dark:border-slate-800"
+  >
+    <div
+      class="absolute -inset-px rounded-xl border-2 border-transparent opacity-0 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
+    />
+    <div class="relative overflow-hidden rounded-xl p-6">
+      <!--      <Icon :icon="icon" class="h-8 w-8" />-->
+      <h2 class="mt-4 font-display text-base text-slate-900 dark:text-white">
+        <NuxtLink :href="href">
+          <span class="absolute -inset-px rounded-xl" />
+          {{ title }}
+        </NuxtLink>
+      </h2>
+      <p class="mt-1 text-sm text-slate-700 dark:text-slate-400">
+        <Markdown :use="$slots.default" unwrap="p" />
+      </p>
+    </div>
+  </div>
+</template>

docs/components/content/QuickLinks.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="not-prose my-12 grid grid-cols-1 gap-6 sm:grid-cols-2">
+    <slot> </slot>
+  </div>
+</template>