feat: prose components

Signed-off-by: ZTL-UwU <[email protected]>

.vscode/settings.json

@@ -44,5 +44,6 @@
     "gql",
     "graphql",
     "astro"
-  ]
+  ],
+  "editor.tabSize": 2
 }

assets/css/tailwind.css

@@ -1,77 +1,78 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
- 
+
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 240 10% 3.9%;
- 
+
     --muted: 240 4.8% 95.9%;
     --muted-foreground: 240 3.8% 46.1%;
- 
+
     --popover: 0 0% 100%;
     --popover-foreground: 240 10% 3.9%;
- 
+
     --card: 0 0% 100%;
     --card-foreground: 240 10% 3.9%;
- 
+
     --border: 240 5.9% 90%;
     --input: 240 5.9% 90%;
- 
+
     --primary: 240 5.9% 10%;
     --primary-foreground: 0 0% 98%;
- 
+
     --secondary: 240 4.8% 95.9%;
     --secondary-foreground: 240 5.9% 10%;
- 
+
     --accent: 240 4.8% 95.9%;
     --accent-foreground: 240 5.9% 10%;
- 
+
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --ring: 240 10% 3.9%;
- 
+
     --radius: 0.5rem;
   }
- 
+
   .dark {
     --background: 240 10% 3.9%;
     --foreground: 0 0% 98%;
- 
+
     --muted: 240 3.7% 15.9%;
     --muted-foreground: 240 5% 64.9%;
- 
+
     --popover: 240 10% 3.9%;
     --popover-foreground: 0 0% 98%;
- 
+
     --card: 240 10% 3.9%;
     --card-foreground: 0 0% 98%;
- 
+
     --border: 240 3.7% 15.9%;
     --input: 240 3.7% 15.9%;
- 
+
     --primary: 0 0% 98%;
     --primary-foreground: 240 5.9% 10%;
- 
+
     --secondary: 240 3.7% 15.9%;
     --secondary-foreground: 0 0% 98%;
- 
+
     --accent: 240 3.7% 15.9%;
     --accent-foreground: 0 0% 98%;
- 
+
     --destructive: 0 62.8% 30.6%;
     --destructive-foreground: 0 0% 98%;
- 
+
     --ring: 240 4.9% 83.9%;
   }
 }
- 
+
 @layer base {
   * {
     @apply border-border;
   }
+
   body {
     @apply bg-background text-foreground;
   }

components/darkToggle.vue → components/DarkModeToggle.vue

@@ -1,14 +1,12 @@
 <template>
-  <Button variant="outline" size="sm" @click="switchMode">
-    <Moon class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
-    <Sun class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+  <UiButton variant="outline" size="sm" @click="switchMode">
+    <Icon name="lucide:moon" class="h-4 w-4 rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+    <Icon name="lucide:sun" class="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
     <span class="sr-only">Toggle theme</span>
-  </Button>
+  </UiButton>
 </template>
 
 <script setup lang="ts">
-import { Moon, Sun } from 'lucide-vue-next';
-
 const mode = useColorMode();
 function switchMode() {
   const sys = mode.system.value;

components/content/Alert.vue

@@ -0,0 +1,27 @@
+<template>
+  <UiAlert class="[&:not(:first-child)]:mt-4">
+    <Icon v-if="icon && title" :name="icon" />
+    <UiAlertTitle v-if="title">
+      {{ title }}
+    </UiAlertTitle>
+    <UiAlertDescription>
+      <div class="flex flex-row space-x-2">
+        <Icon v-if="icon && !title" :name="icon" class="self-center mb-[2px]" />
+        <span>
+          <slot />
+        </span>
+      </div>
+    </UiAlertDescription>
+  </UiAlert>
+</template>
+
+<script setup lang="ts">
+defineProps({
+  title: {
+    type: String,
+  },
+  icon: {
+    type: String,
+  },
+});
+</script>

components/content/ProseA.vue

@@ -0,0 +1,25 @@
+<template>
+  <NuxtLink
+    :href="href"
+    :target="target"
+    class="underline-offset-4 underline font-semibold"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  target: {
+    type: String as PropType<'_blank' | '_parent' | '_self' | '_top' | (string & object) | null | undefined>,
+    default: undefined,
+    required: false,
+  },
+});
+</script>

components/content/ProseBlockquote.vue

@@ -0,0 +1,5 @@
+<template>
+  <blockquote class="mt-6 border-l-2 pl-6 italic">
+    <slot />
+  </blockquote>
+</template>

components/content/ProseCode.vue

@@ -0,0 +1,97 @@
+<template>
+  <UiCard class="[&:not(:first-child)]:mt-5 mb-5 overflow-hidden">
+    <div v-if="filename" class="p-3 border-b flex">
+      {{ filename }}
+      <span class="ml-auto mr-1">
+        <Transition name="fade" mode="out-in">
+          <Icon
+            v-if="copied === false"
+            name="lucide:copy"
+            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+            @click="copyCode"
+          />
+          <Icon
+            v-else
+            ref="checkIconRef"
+            name="lucide:check"
+            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+          />
+        </Transition>
+      </span>
+    </div>
+    <div
+      class="p-3 bg-zinc-50 dark:bg-zinc-900 text-sm relative"
+      :class="[`highlight-${language}`]"
+      @mouseenter="hovered = true"
+      @mouseleave="hovered = false"
+    >
+      <span v-if="!filename" class="absolute right-4">
+        <Transition name="fade" mode="out-in">
+          <Icon
+            v-if="copied === false"
+            name="lucide:copy"
+            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+            @click="copyCode"
+          />
+          <Icon
+            v-else
+            ref="checkIconRef"
+            name="lucide:check"
+            class="self-center cursor-pointer text-muted-foreground hover:text-primary"
+          />
+        </Transition>
+      </span>
+      <slot />
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+import type { PropType } from 'vue';
+import { ref } from 'vue';
+import type { BuiltinLanguage } from 'shiki';
+
+const props = defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String as PropType<BuiltinLanguage>,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+});
+const hovered = ref(false);
+
+const { copy } = useClipboard({ source: props.code });
+const copied = ref(false);
+function copyCode() {
+  copy(props.code)
+    .then(
+      () => { copied.value = true; },
+    );
+}
+const checkIconRef = ref<HTMLElement>();
+onClickOutside(checkIconRef, () => {
+  copied.value = false;
+});
+</script>
+
+<style>
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

components/content/ProseCodeInline.vue

@@ -0,0 +1,13 @@
+<template>
+  <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono font-semibold inline-code">
+    <slot />
+  </code>
+</template>
+
+<style scoped>
+.inline-code:not(h1>a>code, h2>a>code, h3>a>code, h4>a>code, h5>a>code, strong>a>code) {
+  /* text-sm */
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+}
+</style>

components/content/ProseEm.vue

@@ -0,0 +1,5 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>

components/content/ProseH1.vue

@@ -0,0 +1,18 @@
+<template>
+  <h1 :id="id" class="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl">
+    <NuxtLink
+      v-if="generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h1>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => props.id && headings?.anchorLinks?.h1);
+</script>

components/content/ProseH2.vue

@@ -0,0 +1,18 @@
+<template>
+  <h2 :id="id" class="scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight transition-colors [&:not(:first-child)]:mt-10">
+    <NuxtLink
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => props.id && headings?.anchorLinks?.h2);
+</script>

components/content/ProseH3.vue

@@ -0,0 +1,18 @@
+<template>
+  <h3 :id="id" class="scroll-m-20 text-2xl font-semibold tracking-tight [&:not(:first-child)]:mt-8">
+    <NuxtLink
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h3>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => props.id && headings?.anchorLinks?.h3);
+</script>

components/content/ProseH4.vue

@@ -0,0 +1,18 @@
+<template>
+  <h4 :id="id" class="scroll-m-20 text-xl font-semibold tracking-tight [&:not(:first-child)]:mt-6">
+    <NuxtLink
+      v-if="id && generate"
+      :href="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h4>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ id?: string }>();
+
+const { headings } = useRuntimeConfig().public.mdc;
+const generate = computed(() => props.id && headings?.anchorLinks?.h4);
+</script>