Nuxt 초기 세팅 추가

components/content/ContentRenderer.vue

@@ -0,0 +1,5 @@
+<template>
+  <article class="content-renderer post-prose">
+    <slot />
+  </article>
+</template>

components/content/ProseAudio.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose-audio my-8 border border-line bg-surface p-5">
+    <slot />
+  </div>
+</template>

components/content/ProseBlockquote.vue

@@ -0,0 +1,5 @@
+<template>
+  <blockquote class="prose-blockquote my-8 border-l-4 border-ink bg-surface px-5 py-4 text-xl font-medium leading-8">
+    <slot />
+  </blockquote>
+</template>

components/content/ProseButton.vue

@@ -0,0 +1,20 @@
+<script setup>
+defineProps({
+  href: {
+    type: String,
+    default: '#'
+  },
+  align: {
+    type: String,
+    default: 'left'
+  }
+})
+</script>
+
+<template>
+  <p class="prose-button my-8" :class="{ 'text-center': align === 'center' }">
+    <NuxtLink class="prose-button__link inline-flex rounded bg-ink px-5 py-3 text-sm font-semibold text-white hover:bg-muted" :to="href">
+      <slot />
+    </NuxtLink>
+  </p>
+</template>

components/content/ProseCallout.vue

@@ -0,0 +1,5 @@
+<template>
+  <aside class="prose-callout my-8 border border-line bg-surface p-5">
+    <slot />
+  </aside>
+</template>

components/content/ProseEmbed.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose-embed my-8 border border-line bg-paper p-5">
+    <slot />
+  </div>
+</template>

components/content/ProseFile.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose-file my-8 border border-line bg-paper p-5">
+    <slot />
+  </div>
+</template>

components/content/ProseHeaderCard.vue

@@ -0,0 +1,14 @@
+<script setup>
+defineProps({
+  variant: {
+    type: String,
+    default: 'simple'
+  }
+})
+</script>
+
+<template>
+  <header class="prose-header-card my-8 bg-ink p-8 text-white" :class="`prose-header-card--${variant}`">
+    <slot />
+  </header>
+</template>

components/content/ProseHeading.vue

@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  level: {
+    type: Number,
+    default: 2
+  }
+})
+
+const tagName = computed(() => `h${Math.min(Math.max(props.level, 1), 6)}`)
+</script>
+
+<template>
+  <component
+    :is="tagName"
+    class="prose-heading mt-10 font-semibold leading-tight tracking-normal first:mt-0"
+    :class="{
+      'text-5xl': level === 1,
+      'text-4xl': level === 2,
+      'text-3xl': level === 3,
+      'text-2xl': level === 4,
+      'text-xl': level === 5,
+      'text-lg': level === 6
+    }"
+  >
+    <slot />
+  </component>
+</template>

components/content/ProseImage.vue

@@ -0,0 +1,31 @@
+<script setup>
+defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  alt: {
+    type: String,
+    default: ''
+  },
+  variant: {
+    type: String,
+    default: 'regular'
+  }
+})
+</script>
+
+<template>
+  <figure
+    class="prose-image my-8"
+    :class="{
+      'prose-image--wide lg:-mx-10': variant === 'wide',
+      'prose-image--full lg:-mx-20': variant === 'full'
+    }"
+  >
+    <img class="prose-image__media w-full bg-surface object-cover" :src="src" :alt="alt">
+    <figcaption v-if="$slots.default" class="prose-image__caption mt-3 text-center text-sm text-muted">
+      <slot />
+    </figcaption>
+  </figure>
+</template>

components/content/ProseList.vue

@@ -0,0 +1,18 @@
+<script setup>
+defineProps({
+  ordered: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="ordered ? 'ol' : 'ul'"
+    class="prose-list my-6 space-y-2 pl-6"
+    :class="ordered ? 'list-decimal' : 'list-disc'"
+  >
+    <slot />
+  </component>
+</template>

components/content/ProseProduct.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose-product my-8 border border-line bg-surface p-5">
+    <slot />
+  </div>
+</template>

components/content/ProseToggle.vue

@@ -0,0 +1,19 @@
+<script setup>
+defineProps({
+  title: {
+    type: String,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <details class="prose-toggle my-6 border border-line bg-paper p-5">
+    <summary class="prose-toggle__summary cursor-pointer font-semibold">
+      {{ title }}
+    </summary>
+    <div class="prose-toggle__body mt-4 text-muted">
+      <slot />
+    </div>
+  </details>
+</template>

components/content/ProseVideo.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="prose-video my-8 aspect-video bg-ink text-white">
+    <slot />
+  </div>
+</template>