docus 1.0.7 → 3.0.0-beta.10

package/theme/components/icons/IconTailwind.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg fill="#06B6D4" role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12.001,4.8c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 C13.666,10.618,15.027,12,18.001,12c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C16.337,6.182,14.976,4.8,12.001,4.8z M6.001,12c-3.2,0-5.2,1.6-6,4.8c1.2-1.6,2.6-2.2,4.2-1.8c0.913,0.228,1.565,0.89,2.288,1.624 c1.177,1.194,2.538,2.576,5.512,2.576c3.2,0,5.2-1.6,6-4.8c-1.2,1.6-2.6,2.2-4.2,1.8c-0.913-0.228-1.565-0.89-2.288-1.624 C10.337,13.382,8.976,12,6.001,12z" /></svg>
+</template>

package/theme/components/icons/IconTocBack.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="0.5"
+      y="0.5"
+      width="23"
+      height="23"
+      rx="5.5"
+      fill="#F1F5F9"
+    />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="23"
+      height="23"
+      rx="5.5"
+      stroke="#F1F5F9"
+    />
+    <path d="M10.756 15.8657C10.8765 15.9461 11.0166 15.9923 11.1612 15.9993C11.3059 16.0063 11.4497 15.9739 11.5774 15.9056C11.7051 15.8373 11.8119 15.7356 11.8863 15.6113C11.9608 15.4871 12.0001 15.345 12 15.2001V12.9617L16.356 15.8657C16.4765 15.9461 16.6166 15.9923 16.7612 15.9993C16.9059 16.0063 17.0497 15.9739 17.1774 15.9056C17.3051 15.8373 17.4119 15.7356 17.4863 15.6113C17.5608 15.4871 17.6001 15.345 17.6 15.2001V8.80012C17.6001 8.65529 17.5608 8.51316 17.4863 8.38891C17.4119 8.26466 17.3051 8.16295 17.1774 8.09462C17.0497 8.02629 16.9059 7.99392 16.7612 8.00094C16.6166 8.00797 16.4765 8.05414 16.356 8.13452L12 11.0385V8.80012C12.0001 8.65529 11.9608 8.51316 11.8863 8.38891C11.8119 8.26466 11.7051 8.16295 11.5774 8.09462C11.4497 8.02629 11.3059 7.99392 11.1612 8.00094C11.0166 8.00797 10.8765 8.05414 10.756 8.13452L5.95603 11.3345C5.84647 11.4076 5.75663 11.5066 5.6945 11.6227C5.63236 11.7388 5.59985 11.8684 5.59985 12.0001C5.59985 12.1318 5.63236 12.2615 5.6945 12.3776C5.75663 12.4937 5.84647 12.5927 5.95603 12.6657L10.756 15.8657Z" fill="#94A3B8" />
+  </svg>
+</template>

package/theme/components/icons/IconTocCurrent.vue

@@ -0,0 +1,21 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect
+      x="0.5"
+      y="0.5"
+      width="23"
+      height="23"
+      rx="5.5"
+      fill="#1E293B"
+    />
+    <rect
+      x="0.5"
+      y="0.5"
+      width="23"
+      height="23"
+      rx="5.5"
+      stroke="#1E293B"
+    />
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.0001 18.4001C13.6975 18.4001 15.3253 17.7258 16.5256 16.5256C17.7258 15.3253 18.4001 13.6975 18.4001 12.0001C18.4001 10.3027 17.7258 8.67485 16.5256 7.47461C15.3253 6.27438 13.6975 5.6001 12.0001 5.6001C10.3027 5.6001 8.67485 6.27438 7.47461 7.47461C6.27438 8.67485 5.6001 10.3027 5.6001 12.0001C5.6001 13.6975 6.27438 15.3253 7.47461 16.5256C8.67485 17.7258 10.3027 18.4001 12.0001 18.4001V18.4001ZM11.6441 9.7345C11.5236 9.65411 11.3836 9.60795 11.2389 9.60092C11.0942 9.59389 10.9504 9.62627 10.8227 9.6946C10.695 9.76293 10.5882 9.86464 10.5138 9.98889C10.4394 10.1131 10.4001 10.2553 10.4001 10.4001V13.6001C10.4001 13.7449 10.4394 13.8871 10.5138 14.0113C10.5882 14.1356 10.695 14.2373 10.8227 14.3056C10.9504 14.3739 11.0942 14.4063 11.2389 14.3993C11.3836 14.3922 11.5236 14.3461 11.6441 14.2657L14.0441 12.6657C14.1537 12.5926 14.2435 12.4937 14.3056 12.3776C14.3678 12.2614 14.4003 12.1318 14.4003 12.0001C14.4003 11.8684 14.3678 11.7388 14.3056 11.6226C14.2435 11.5065 14.1537 11.4076 14.0441 11.3345L11.6441 9.7345V9.7345Z" fill="white" />
+  </svg>
+</template>

package/theme/components/icons/IconTocNext.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="24" height="24" rx="6" fill="#F1F5F9" />
+    <g opacity="0.6">
+      <path d="M7.6439 9.13452C7.52342 9.05414 7.38338 9.00797 7.23872 9.00094C7.09405 8.99392 6.95019 9.02629 6.82249 9.09462C6.69479 9.16295 6.58803 9.26466 6.5136 9.38891C6.43918 9.51316 6.39988 9.65529 6.3999 9.80012V16.2001C6.39988 16.345 6.43918 16.4871 6.5136 16.6113C6.58803 16.7356 6.69479 16.8373 6.82249 16.9056C6.95019 16.9739 7.09405 17.0063 7.23872 16.9993C7.38338 16.9923 7.52342 16.9461 7.6439 16.8657L11.9999 13.9617V16.2001C11.9999 16.345 12.0392 16.4871 12.1136 16.6113C12.188 16.7356 12.2948 16.8373 12.4225 16.9056C12.5502 16.9739 12.6941 17.0063 12.8387 16.9993C12.9834 16.9923 13.1234 16.9461 13.2439 16.8657L18.0439 13.6657C18.1535 13.5927 18.2433 13.4937 18.3054 13.3776C18.3676 13.2615 18.4001 13.1318 18.4001 13.0001C18.4001 12.8684 18.3676 12.7388 18.3054 12.6227C18.2433 12.5066 18.1535 12.4076 18.0439 12.3345L13.2439 9.13452C13.1234 9.05414 12.9834 9.00797 12.8387 9.00094C12.6941 8.99392 12.5502 9.02629 12.4225 9.09462C12.2948 9.16295 12.188 9.26466 12.1136 9.38891C12.0392 9.51316 11.9999 9.65529 11.9999 9.80012V12.0385L7.6439 9.13452Z" fill="#94A3B8" />
+    </g>
+  </svg>
+</template>

package/theme/components/icons/IconTranslate.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    stroke="currentColor"
+    viewBox="0 0 24 24"
+  >
+    <path
+      d="M3 5h12M9 3v2m1.048 9.5A18.022 18.022 0 016.412 9m6.088 9h7M11 21l5-10 5 10M12.751 5C11.783 10.77 8.07 15.61 3 18.129"
+    />
+  </svg>
+</template>

package/theme/components/icons/IconTwitter.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M109 33.1157C105.542 34.6633 101.825 35.7055 97.9237 36.1754C101.907 33.7711 104.966 29.9613 106.403 25.4213C102.678 27.6479 98.5505 29.2665 94.1557 30.139C90.6425 26.3609 85.6252 24 80.0793 24C67.6284 24 58.4788 35.7095 61.2912 47.8651C45.268 47.0558 31.0583 39.3179 21.5448 27.5571C16.4923 36.2938 18.9245 47.723 27.5098 53.5105C24.353 53.4079 21.3763 52.5354 18.7796 51.0787C18.5681 60.0838 24.9718 68.5088 34.2465 70.384C31.5322 71.126 28.5595 71.2999 25.5358 70.7155C27.9877 78.4378 35.1082 84.0555 43.5525 84.2136C35.445 90.6208 25.2303 93.4832 15 92.2674C23.5344 97.7826 33.6747 101 44.563 101C80.3692 101 100.599 70.5181 99.3768 43.1789C103.144 40.4351 106.415 37.0123 109 33.1157Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/theme/components/icons/IconVite.vue

@@ -0,0 +1,30 @@
+<template>
+  <svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 410 404">
+    <defs>
+      <linearGradient id="paint0_linear" x1="6" y1="33" x2="235" y2="344" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#41D1FF" />
+        <stop offset="1" stop-color="#BD34FE" />
+      </linearGradient>
+      <linearGradient
+        id="paint1_linear"
+        x1="194.651"
+        y1="8.818"
+        x2="236.076"
+        y2="292.989"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stop-color="#FFEA83" />
+        <stop offset=".083" stop-color="#FFDD35" />
+        <stop offset="1" stop-color="#FFA800" />
+      </linearGradient>
+    </defs>
+    <path
+      d="M399.641 59.525l-183.998 329.02c-3.799 6.793-13.559 6.833-17.415.073L10.582 59.556C6.38 52.19 12.68 43.266 21.028 44.76l184.195 32.923c1.175.21 2.378.208 3.553-.006l180.343-32.87c8.32-1.517 14.649 7.337 10.522 14.719z"
+      fill="url(#paint0_linear)"
+    />
+    <path
+      d="M292.965 1.574L156.801 28.255a5 5 0 00-4.03 4.611l-8.376 141.464c-.197 3.332 2.863 5.918 6.115 5.168l37.91-8.749c3.547-.818 6.752 2.306 6.023 5.873l-11.263 55.153c-.758 3.712 2.727 6.886 6.352 5.785l23.415-7.114c3.63-1.102 7.118 2.081 6.35 5.796l-17.899 86.633c-1.12 5.419 6.088 8.374 9.094 3.728l2.008-3.103 110.954-221.428c1.858-3.707-1.346-7.935-5.418-7.15l-39.022 7.532c-3.667.707-6.787-2.708-5.752-6.296l25.469-88.291c1.036-3.594-2.095-7.012-5.766-6.293z"
+      fill="url(#paint1_linear)"
+    />
+  </svg>
+</template>

package/theme/components/icons/IconVue.vue

@@ -0,0 +1,6 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="currentColor">
+    <polygon fill="#81c784" points="23.987,17 18.734,8 2.974,8 23.987,44 45,8 29.24,8" />
+    <polygon fill="#455a64" points="29.24,8 23.987,17 18.734,8 11.146,8 23.987,30 36.828,8" />
+  </svg>
+</template>

package/theme/components/icons/IconVueTelescope.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg viewBox="0 0 124 124" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M48 82.5887L57.1066 98.175C59.3073 101.942 64.8092 101.942 67.0102 98.175L101 40H72.8834L48 82.5887Z"
+      fill="currentColor"
+    />
+    <path d="M77 33H104.936L105.23 32.4924C107.417 28.718 104.684 24 100.31 24H82.2142L77 33Z" fill="currentColor" />
+    <path d="M74 24L68.7601 33H19.0689L18.7734 32.4924C16.5759 28.718 19.3228 24 23.7177 24H74Z" fill="currentColor" />
+    <path d="M65 40L44 76L23 40H65Z" fill="currentColor" />
+  </svg>
+</template>

package/theme/components/icons/IconWindi.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg viewBox="0 0 128 128" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M67.0788 31.5813C67.0788 21.8864 59.1923 14 49.4975 14C39.2803 14 33.1721 21.6604 33.1721 29.0696H43.2185C43.2185 26.985 45.1675 24.0464 49.4975 24.0464C53.6517 24.0464 57.0323 27.4271 57.0323 31.5813C57.0323 35.7355 54 39.1161 46.3533 39.1161H19V49.1625H46.3533C59.259 49.1625 67.0788 41.2761 67.0788 31.5813ZM67.0788 31.5813C67.0788 21.8864 59.1923 14 49.4975 14C39.2803 14 33.1721 21.6604 33.1721 29.0696H43.2185C43.2185 26.985 45.1675 24.0464 49.4975 24.0464C53.6517 24.0464 57.0323 27.4271 57.0323 31.5813C57.0323 35.7355 54 39.1161 46.3533 39.1161H19V49.1625H46.3533C59.259 49.1625 67.0788 41.2761 67.0788 31.5813Z"
+      fill="#42A4EF"
+    />
+    <path
+      d="M89.3666 96.4187C89.3666 106.114 81.4801 114 71.7853 114C61.5681 114 55.4598 106.34 55.4598 98.9304H65.5063C65.5063 101.015 67.4553 103.954 71.7853 103.954C75.9395 103.954 79.3201 100.573 79.3201 96.4187C79.3201 92.2645 75.4999 88.8839 68.6411 88.8839H38.2878V78.8375H68.6411C81.5468 78.8375 89.3666 86.7239 89.3666 96.4187ZM89.3666 96.4187C89.3666 106.114 81.4801 114 71.7853 114C61.5681 114 55.4598 106.34 55.4598 98.9304H65.5063C65.5063 101.015 67.4553 103.954 71.7853 103.954C75.9395 103.954 79.3201 100.573 79.3201 96.4187C79.3201 92.2645 75.4999 88.8839 68.6411 88.8839H38.2878V78.8375H68.6411C81.5468 78.8375 89.3666 86.7239 89.3666 96.4187Z"
+      fill="#42A4EF"
+    />
+    <path
+      d="M92 29.5C80.9188 29.5 73.102 37.9269 73.102 49.0081H82C82 43.5 86 39.5 92 39.5C98 39.5 101 43.5 101 49.0081C101 54.5162 97.1036 59.0545 86.5 59.0545H19V69.101H88C103.703 69.101 111 59.0081 111 49.0081C111 37.9269 103.5 29.5 92 29.5Z"
+      fill="#42A4EF"
+    />
+    <path d="M32.1701 78.8375H19V88.9683H32.1701V78.8375Z" fill="#42A4EF" />
+  </svg>
+</template>

package/theme/components/icons/IconX.vue

@@ -0,0 +1,12 @@
+<template>
+  <svg
+    fill="none"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path d="M6 18L18 6M6 6l12 12" />
+  </svg>
+</template>

package/theme/components/icons/IconXCircle.vue

@@ -0,0 +1,10 @@
+<template>
+  <svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M0.877075 7.49988C0.877075 3.84219 3.84222 0.877045 7.49991 0.877045C11.1576 0.877045 14.1227 3.84219 14.1227 7.49988C14.1227 11.1575 11.1576 14.1227 7.49991 14.1227C3.84222 14.1227 0.877075 11.1575 0.877075 7.49988ZM7.49991 1.82704C4.36689 1.82704 1.82708 4.36686 1.82708 7.49988C1.82708 10.6329 4.36689 13.1727 7.49991 13.1727C10.6329 13.1727 13.1727 10.6329 13.1727 7.49988C13.1727 4.36686 10.6329 1.82704 7.49991 1.82704ZM9.85358 5.14644C10.0488 5.3417 10.0488 5.65829 9.85358 5.85355L8.20713 7.49999L9.85358 9.14644C10.0488 9.3417 10.0488 9.65829 9.85358 9.85355C9.65832 10.0488 9.34173 10.0488 9.14647 9.85355L7.50002 8.2071L5.85358 9.85355C5.65832 10.0488 5.34173 10.0488 5.14647 9.85355C4.95121 9.65829 4.95121 9.3417 5.14647 9.14644L6.79292 7.49999L5.14647 5.85355C4.95121 5.65829 4.95121 5.3417 5.14647 5.14644C5.34173 4.95118 5.65832 4.95118 5.85358 5.14644L7.50002 6.79289L9.14647 5.14644C9.34173 4.95118 9.65832 4.95118 9.85358 5.14644Z"
+      fill="currentColor"
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+    />
+  </svg>
+</template>

package/theme/components/icons/IconZap.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 48 48" width="64" height="64">
+    <polygon
+      fill="#ffae0b"
+      points="16.828,5.828 29.966,5.828 25.172,19.414 33.966,19.414 18.621,43.138 21.034,26.379 12.828,26.379"
+    />
+  </svg>
+</template>

package/theme/components/prose/ProseA.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+defineProps({
+  href: {
+    type: String,
+    default: '',
+  },
+  blank: {
+    type: Boolean,
+    default: false,
+  },
+  /**
+     * `true` if `href` points to a static file
+     */
+  static: {
+    type: Boolean,
+    default: false,
+  },
+})
+</script>
+
+<template>
+  <NuxtLink :to="href" :blank="blank" :static="static">
+    <slot />
+  </NuxtLink>
+</template>
+
+<style lang="postcss" scoped>
+:not(h1, h2, h3, h4) > a {
+  @apply font-medium no-underline text-primary-500 border-b border-transparent hover:border-primary-500 transition-colors;
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a {
+  @apply relative;
+  &::after {
+    @apply absolute pl-2 w-6 h-6 opacity-0;
+    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23111827"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
+  }
+  &:hover {
+    &::after {
+      @apply opacity-100;
+    }
+  }
+
+  /* Hover underline */
+  &:before {
+    @apply absolute top-0 left-0 w-full;
+    content: '';
+    height: calc(100% + 4px);
+  }
+  &:hover:before {
+    @apply border-b border-dashed border-gray-900 dark:border-gray-100;
+  }
+}
+
+.dark h1 a,
+.dark h2 a,
+.dark h3 a,
+.dark h4 a {
+  &::after {
+    content: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="white"%3E%3Cpath stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" /%3E%3C/svg%3E');
+  }
+}
+</style>

package/theme/components/prose/ProseBlockquote.vue

@@ -0,0 +1,21 @@
+<template>
+  <blockquote>
+    <slot />
+  </blockquote>
+</template>
+
+<style lang="postcss" scoped>
+blockquote {
+  @apply text-base mt-[1.5em] mb-[1.5em] font-medium pl-4 text-secondary border-l-2 border-gray-200 dark:border-gray-700;
+
+  quotes: '201C' '201D' '2018' '2019';
+}
+
+blockquote p:first-of-type::before {
+  content: '';
+}
+
+blockquote p:last-of-type::after {
+  content: '';
+}
+</style>

package/theme/components/prose/ProseCode.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import type { Lang } from 'shiki-es'
+
+defineProps({
+  code: {
+    type: String,
+    default: '',
+  },
+  language: {
+    type: String as PropType<Lang>,
+    default: null,
+  },
+  filename: {
+    type: String,
+    default: null,
+  },
+  highlights: {
+    type: Array as () => number[],
+    default: () => [],
+  },
+})
+</script>
+
+<template>
+  <div class="prose-code text-gray-50 w-full group">
+    <span v-if="filename" class="filename transition-base top-2 right-2 opacity-100 absolute right-0 z-0 m-1 py-1.5 px-2 text-gray-400 bg-gray-900 rounded-lg font-mono text-xs leading-none tracking-tight">
+      {{ filename }}
+    </span>
+
+    <slot />
+
+    <CopyButton class="copy-button opacity-0 transition-base" />
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+div {
+  @apply relative rounded-lg overflow-hidden my-4;
+}
+
+:deep(pre) {
+  @apply flex flex-1 p-4 my-0 overflow-x-auto leading-relaxed text-sm code-background;
+}
+
+:deep(code) {
+  @apply flex flex-col;
+}
+
+:deep(.line) {
+  @apply inline-table min-h-[1rem];
+}
+
+:deep(.line.highlight) {
+  background-color: #3f3f46;
+}
+
+.group:hover {
+  .filename {
+    @apply opacity-0;
+  }
+
+  .copy-button {
+    @apply opacity-100;
+  }
+}
+</style>

package/theme/components/prose/ProseCodeInline.vue

@@ -0,0 +1,38 @@
+<template>
+  <code>
+    <slot />
+  </code>
+</template>
+
+<style lang="postcss" scoped>
+code {
+  @apply font-normal text-sm py-[3px] px-[6px] rounded-lg bg-gray-100 text-gray-800 dark:text-gray-100 dark:bg-gray-800;
+}
+
+a code {
+  &:hover {
+    @apply border-primary-500;
+  }
+}
+
+tbody code {
+  @apply text-[12px];
+}
+
+h1 a,
+h2 a,
+h3 a,
+h4 a {
+  code {
+    @apply relative;
+    font-size: inherit;
+  }
+
+  & code:before {
+    @apply absolute top-[-2px] left-[-2px] -z-[1] rounded-lg pointer-events-none;
+    content: '';
+    width: calc(100% + 4px);
+    height: calc(100% + 4px);
+  }
+}
+</style>

package/theme/components/prose/ProseEm.vue

@@ -0,0 +1,11 @@
+<template>
+  <em>
+    <slot />
+  </em>
+</template>
+
+<style lang="postcss" scoped>
+em {
+  @apply italic text-current;
+}
+</style>

package/theme/components/prose/ProseH1.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h1 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h1>
+</template>>
+
+<style lang="postcss" scoped>
+h1 {
+  font-size: 2rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1em] mb-[0.5em];
+}
+
+h1 + * {
+  @apply mt-0;
+}
+</style>

package/theme/components/prose/ProseH2.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h2 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h2>
+</template>
+
+<style lang="postcss" scoped>
+h2 {
+  font-size: 1.5rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h2 + * {
+  @apply mt-0;
+}
+</style>

package/theme/components/prose/ProseH3.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h3 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h3>
+</template>
+
+<style lang="postcss" scoped>
+h3 {
+  /* TODO */
+  /* extend.fontSize do not work in Windi */
+  font-size: 1.25rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h3 + * {
+  @apply mt-0;
+}
+</style>

package/theme/components/prose/ProseH4.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+defineProps<{ id: string }>()
+</script>
+
+<template>
+  <h4 :id="id">
+    <NuxtLink :href="`#${id}`">
+      <slot />
+    </NuxtLink>
+  </h4>
+</template>
+
+<style lang="postcss" scoped>
+h4 {
+  /* TODO */
+  /* extend.fontSize do not work in Windi */
+  font-size: 1.125rem;
+  @apply tracking-tight leading-snug font-semibold mt-[1.25em] mb-[0.5em];
+}
+
+h4 + * {
+  @apply mt-0;
+}
+</style>

package/theme/components/prose/ProseHr.vue

@@ -0,0 +1,13 @@
+<template>
+  <hr>
+</template>
+
+<style lang="postcss" scoped>
+hr {
+  @apply border-t border-gray-100 dark:border-gray-800 my-8;
+}
+
+hr + * {
+  @apply mt-0;
+}
+</style>

package/theme/components/prose/ProseImg.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+defineProps({
+  src: {
+    type: String,
+    default: '',
+  },
+  alt: {
+    type: String,
+    default: '',
+  },
+  width: {
+    type: [String, Number],
+    default: undefined,
+  },
+  height: {
+    type: [String, Number],
+    default: undefined,
+  },
+})
+</script>
+
+<template>
+  <NuxtImg :src="src" :alt="alt" :width="width" :height="height" />
+</template>
+
+<style lang="postcss" scoped>
+:deep(img) {
+  @apply my-[1em];
+}
+</style>

package/theme/components/prose/ProseLi.vue

@@ -0,0 +1,31 @@
+<template>
+  <li><slot /></li>
+</template>
+
+<style lang="postcss" scoped>
+li {
+  @apply relative my-[0.25em] pl-4;
+  p {
+    @apply my-[0.75em];
+  }
+}
+
+ul > li {
+  &::before {
+    @apply absolute left-0 top-[0.5em] surface-secondary rounded-full w-1.5 h-1.5;
+    content: '';
+  }
+}
+
+ol > li {
+  &::before {
+    @apply absolute left-0 top-0 text-secondary;
+    content: counter(list-item, decimal) '.';
+    content: counter(list-item, var(--list-counter-style, decimal)) '.';
+  }
+}
+
+:deep(.nuxt-content-highlight) {
+  @apply m-0;
+}
+</style>

package/theme/components/prose/ProseOl.vue

@@ -0,0 +1,16 @@
+<template>
+  <ol>
+    <slot />
+  </ol>
+</template>
+
+<style lang="postcss" scoped>
+ol {
+  @apply mx-0 p-0 my-[1.25em] list-none;
+
+  :deep(ul),
+  :deep(ol) {
+    @apply !my-[0.5em];
+  }
+}
+</style>

package/theme/components/prose/ProseP.vue

@@ -0,0 +1,14 @@
+<template>
+  <p><slot /></p>
+</template>
+
+<style lang="postcss" scoped>
+p {
+  @apply leading-relaxed my-4;
+
+  :deep(br) {
+    @apply block mt-4;
+    content: '';
+  }
+}
+</style>

package/theme/components/prose/ProseStrong.vue

@@ -0,0 +1,14 @@
+<template>
+  <strong>
+    <slot />
+  </strong>
+</template>
+
+<style lang="postcss" scoped>
+strong {
+  @apply font-semibold;
+}
+a strong {
+  @apply text-current;
+}
+</style>

package/theme/components/prose/ProseTable.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="max-w-full my-6 overflow-x-auto">
+    <table>
+      <slot />
+    </table>
+  </div>
+</template>
+
+<style lang="postcss" scoped>
+table {
+  @apply leading-5 text-sm w-full table-auto text-left;
+}
+</style>

package/theme/components/prose/ProseTbody.vue

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

package/theme/components/prose/ProseTd.vue

@@ -0,0 +1,11 @@
+<template>
+  <td>
+    <slot />
+  </td>
+</template>
+
+<style lang="postcss" scoped>
+tbody td {
+  @apply align-top first:pl-0 last:pr-0 p-[0.5em];
+}
+</style>