Import drizzle replacing prisma

Signed-off-by: Arthur DANJOU <arthurdanjou@outlook.fr>

components/content/GridSection.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Section title'
+  }
+})
+
+const appConfig = useAppConfig()
+
+const getColor = computed(() => `text-${appConfig.ui.primary}-500`)
+</script>
+
+<template>
+  <section class="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40 mb-24 px-4">
+    <div class="grid max-w-3xl grid-cols-1 items-baseline gap-y-8 md:grid-cols-4">
+      <h2
+        :class="getColor"
+        class="relative text-sm font-semibold pl-3.5"
+      >
+        <span class="md:hidden absolute inset-y-0 left-0 flex items-center">
+          <span class="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" />
+        </span>
+        {{ title }}
+      </h2>
+      <div class="md:col-span-3">
+        <ul class="space-y-8">
+          <slot />
+        </ul>
+      </div>
+    </div>
+  </section>
+</template>

components/content/GridSlot.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+    default: 'Uses Slot title'
+  }
+})
+</script>
+
+<template>
+  <li class="group relative flex flex-col items-start">
+    <h3 class="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
+      {{ title }}
+    </h3>
+    <p class="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400">
+      <slot />
+    </p>
+  </li>
+</template>

components/content/ProseA.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: ''
+  },
+  target: {
+    type: String,
+    default: undefined,
+    required: false
+  }
+})
+
+const appConfig = useAppConfig()
+</script>
+
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+    class="border-b border-zinc-200 dark:border-zinc-700/70 duration-300"
+    :class="`hover:border-${appConfig.ui.primary}-500 dark:hover:border-${appConfig.ui.primary}-500`"
+  >
+    <slot />
+  </NuxtLink>
+</template>

components/content/ProseH2.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed, useRuntimeConfig } from '#imports'
+
+const props = defineProps<{ id?: string }>()
+
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => props.id && headings?.anchorLinks?.h2)
+</script>
+
+<template>
+  <h2 :id="id">
+    <a
+      v-if="id && generate"
+      :href="`#${id}`"
+      class="pl-6 border-l border-zinc-200 dark:border-zinc-700/70 duration-300"
+    >
+      <slot />
+    </a>
+    <slot v-else />
+  </h2>
+</template>