@wordup-md/nuxt-layer-shadcn-unocss 0.2.0

package/components/content/Hero.vue

@@ -0,0 +1,154 @@
+<template>
+  <section
+    class="hero relative mx-auto flex max-w-[980px] items-center gap-6 mb-8 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20"
+    :class="[
+      String($attrs.class).includes('full-width') && 'w-full max-w-full',
+      ['left', 'right'].includes(mediaPosition) && 'flex-row',
+      mediaPosition === 'right' && 'flex-row-reverse',
+      mediaPosition === 'bottom' && 'flex-col-reverse',
+      ['cover', 'center'].includes(mediaPosition) && 'bg-opacity-0',
+      mediaPosition === 'center' && 'text-center items-center flex-row p-8',
+    ]"
+  >
+    <div
+      v-if="media || $slots.media"
+      class="hero__media overflow-hidden"
+      :class="{
+        'w-5/13 shrink-0': media && (mediaPosition === 'left' || mediaPosition === 'right'),
+        'absolute inset-0': ['cover', 'center'].includes(mediaPosition),
+      }"
+    >
+      <NuxtImg
+        v-if="media"
+        :src="media"
+        class="w-full h-full object-cover"
+      />
+      <ContentSlot
+        :use="$slots.media"
+        unwrap="p"
+      />
+    </div>
+
+    <div class="hero__content flex flex-col gap-6 w-full z-1 of-hidden">
+      <NuxtLink
+        v-if="announcement"
+        :to="announcement.to"
+        :target="announcement.target"
+        class="hero__announcement inline-flex items-center rounded-lg bg-muted bg-opacity-80 px-3 py-1 text-sm font-medium mx-auto"
+        :class="String($attrs.class).includes('full-width') && 'w-max'"
+      >
+        <template v-if="announcement.icon">
+          <Icon
+            :name="announcement.icon"
+            :size="16"
+          />
+          <UiSeparator
+            class="mx-2 h-4"
+            orientation="vertical"
+          />
+        </template>
+        <span class="sm:hidden">{{ announcement.title }}</span>
+        <span class="hidden sm:inline">
+          {{ announcement.title }}
+        </span>
+        <NuxtIcon
+          name="lucide:arrow-right"
+          class="ml-1 size-4"
+        />
+      </NuxtLink>
+
+      <h1 class="hero__title text-center text-3xl font-bold md:text-6xl md:leading-[1.25]">
+        <ContentSlot
+          :use="$slots.title"
+          unwrap="p"
+        />
+      </h1>
+
+      <span
+        class="hero__description max-w-[750px] text-center text-lg text-muted-foreground sm:text-2xl"
+        :class="String($attrs.class).includes('full-width') && 'max-w-full'"
+      >
+        <ContentSlot
+          :use="$slots.description"
+          unwrap="p"
+        />
+      </span>
+
+      <section
+        v-if="actions"
+        class="hero__actions flex w-full items-center justify-center space-x-4 py-4 md:pb-10"
+      >
+        <NuxtLink
+          v-for="(action, i) in actions"
+          :key="i"
+          :to="action.to"
+          :target="action.target"
+        >
+          <UiButton
+            :variant="action.variant"
+            size="lg"
+          >
+            <Icon
+              v-if="action.leftIcon"
+              :name="action.leftIcon"
+              class="mr-1"
+            />
+            {{ action.name }}
+            <Icon
+              v-if="action.rightIcon"
+              :name="action.rightIcon"
+              class="ml-1"
+            />
+          </UiButton>
+        </NuxtLink>
+      </section>
+
+      <div
+        v-if="arrowDown"
+        class="hero__arrow-down text-center mt-8"
+      >
+        <Icon
+          name="lucide:chevron-down"
+          size="64"
+          class="animate-bounce"
+        />
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+const {
+  mediaPosition = 'right',
+} = defineProps<{
+  announcement?: {
+    to?: string
+    target?: Target
+    icon?: string
+    title: string
+  }
+
+  actions?: [
+    {
+      name: string
+      leftIcon?: string
+      rightIcon?: string
+      variant?:
+        | 'default'
+        | 'link'
+        | 'destructive'
+        | 'outline'
+        | 'secondary'
+        | 'ghost'
+      to: string
+      target?: Target
+    },
+  ]
+
+  media?: string
+  mediaPosition?: 'left' | 'right' | 'top' | 'bottom' | 'cover' | 'center'
+  arrowDown?: boolean
+}>()
+
+defineSlots()
+</script>

package/components/content/HeroAlt.vue

@@ -0,0 +1,116 @@
+<template>
+  <div
+    class="gap-8 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10"
+    :class="{ 'grid md:grid-cols-3': $slots.right }"
+  >
+    <section
+      class="flex flex-col items-start gap-2"
+      :class="{ 'md:col-span-2': $slots.right }"
+    >
+      <NuxtLink
+        v-if="announcement"
+        :to="announcement.to"
+        :target="announcement.target"
+        class="inline-flex items-center px-0.5 text-sm font-medium"
+      >
+        <template v-if="announcement.icon">
+          <Icon
+            :name="announcement.icon"
+            :size="16"
+          />
+          <UiSeparator
+            class="mx-2 h-4"
+            orientation="vertical"
+          />
+        </template>
+        <span class="underline-offset-4 hover:underline">{{
+          announcement.title
+        }}</span>
+        <NuxtIcon
+          name="lucide:arrow-right"
+          class="ml-1 size-4"
+        />
+      </NuxtLink>
+
+      <h1
+        class="text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]"
+      >
+        <ContentSlot
+          :use="$slots.title"
+          unwrap="p"
+        />
+      </h1>
+      <p class="max-w-2xl text-lg font-light text-foreground">
+        <ContentSlot
+          :use="$slots.description"
+          unwrap="p"
+        />
+      </p>
+
+      <div class="flex w-full items-center justify-start gap-2 py-2">
+        <NuxtLink
+          v-for="(action, i) in actions"
+          :key="i"
+          :to="action.to"
+          :target="action.target"
+        >
+          <UiButton
+            :variant="action.variant"
+            size="sm"
+          >
+            <Icon
+              v-if="action.leftIcon"
+              :name="action.leftIcon"
+              class="mr-1"
+            />
+            {{ action.name }}
+            <Icon
+              v-if="action.rightIcon"
+              :name="action.rightIcon"
+              class="ml-1"
+            />
+          </UiButton>
+        </NuxtLink>
+      </div>
+    </section>
+    <div
+      class="mx-auto"
+      :class="{ 'order-first md:order-last': mobileRight === 'top' }"
+    >
+      <ContentSlot
+        :use="$slots.right"
+        unwrap="p"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  announcement?: {
+    to?: string
+    target?: Target
+    icon?: string
+    title: string
+  }
+  actions: [
+    {
+      name: string
+      leftIcon?: string
+      rightIcon?: string
+      variant?:
+        | 'default'
+        | 'link'
+        | 'destructive'
+        | 'outline'
+        | 'secondary'
+        | 'ghost'
+      to: string
+      target?: Target
+    },
+  ]
+  mobileRight?: 'top' | 'bottom'
+}>()
+
+defineSlots()
+</script>

package/components/content/Icon.vue

@@ -0,0 +1,69 @@
+<template>
+  <span
+    v-if="name?.endsWith('.svg')"
+    class="svg-icon"
+    :style="`--svg: url(${name}); width: ${size}px; height: ${size}px;`"
+    v-bind="$attrs"
+  />
+  <!-- Iconify Icons -->
+  <NuxtIcon
+    v-else-if="isValidIcon"
+    :name
+    :size="+size"
+    :style="`min-width: ${+size + 1}px; min-height: ${+size + 1}px;`"
+    :class="$attrs.class"
+  />
+
+  <!-- Emojis // Need v-bind to apply class in ssr mode -->
+  <span
+    v-else-if="isValidEmoji"
+    :style="`font-size: ${+size - 2}px;line-height: ${size}px;`"
+    v-bind="$attrs"
+  >
+    {{ name }}
+  </span>
+
+  <!-- Link -->
+  <NuxtImg
+    v-else
+    :src="name"
+    :style="`width: ${size}px; height: ${size}px;`"
+    :class="$attrs.class"
+  />
+</template>
+
+<script setup lang="ts">
+import { stringToIcon, validateIconName } from '@iconify/utils'
+
+const { name, size = 16 } = defineProps<{
+  name: string
+  size?: number | string
+}>()
+
+const isValidIcon = computed(() => {
+  if (!name) return false
+  if (name.startsWith('http')) return false
+  return validateIconName(stringToIcon(name))
+})
+
+const isValidEmoji = computed(() =>
+  /(\u00a9|\u00ae|[\u2000-\u3300]|\ud83c[\ud000-\udfff]|\ud83d[\ud000-\udfff]|\ud83e[\ud000-\udfff])/g.test(
+    name,
+  ),
+)
+</script>
+
+<style scoped>
+.svg-icon {
+  display: inline-block;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  -webkit-mask-image: var(--svg);
+  mask-image: var(--svg);
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-size: 100% 100%;
+  mask-size: 100% 100%;
+}
+</style>

package/components/content/Kbd.vue

@@ -0,0 +1,20 @@
+<template>
+  <kbd
+    class="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border bg-muted font-sans font-medium"
+    :class="sizeClasses[size]"
+  >
+    <slot />
+  </kbd>
+</template>
+
+<script setup lang="ts">
+const { size = 'sm' } = defineProps<{
+  size?: 'xs' | 'sm' | 'md'
+}>()
+
+const sizeClasses = {
+  xs: 'min-h-4 text-[10px] h-4 px-1',
+  sm: 'min-h-5 text-[11px] h-5 px-1',
+  md: 'min-h-6 text-[12px] h-6 px-1.5',
+}
+</script>

package/components/content/PmInstall.vue

@@ -0,0 +1,35 @@
+<template>
+  <MDC
+    :value="md"
+    class="[&:not(:first-child)]:mt-5"
+  />
+</template>
+
+<script setup lang="ts">
+const {
+  inStack = false,
+  name,
+  sync = '_pm',
+  saveDev = false,
+  noSync,
+} = defineProps<{
+  inStack?: boolean
+  name?: string
+  sync?: string
+  saveDev?: boolean
+  noSync?: boolean
+}>()
+
+const md = `
+::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}}
+${
+  usePm().packageManagers.value.map((pm) => {
+    const code = name
+      ? `${pm.command}${pm.install}${saveDev ? pm.saveDev : ''}${name}`
+      : `${pm.command}${pm.installEmpty}`
+    return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`
+  }).join('\n')
+}
+::
+`
+</script>

package/components/content/PmRun.vue

@@ -0,0 +1,31 @@
+<template>
+  <MDC
+    :value="md"
+    class="[&:not(:first-child)]:mt-5"
+  />
+</template>
+
+<script setup lang="ts">
+const {
+  inStack = false,
+  script,
+  sync = '_pm',
+  noSync,
+} = defineProps<{
+  inStack?: boolean
+  script: string
+  sync?: string
+  noSync?: boolean
+}>()
+
+const md = `
+::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}}
+${
+  usePm().packageManagers.value.map((pm) => {
+    const code = `${pm.command}${pm.run}${script}`
+    return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`
+  }).join('\n')
+}
+::
+`
+</script>

package/components/content/PmX.vue

@@ -0,0 +1,31 @@
+<template>
+  <MDC
+    :value="md"
+    class="[&:not(:first-child)]:mt-5"
+  />
+</template>
+
+<script setup lang="ts">
+const {
+  inStack = false,
+  command,
+  sync = '_pm',
+  noSync,
+} = defineProps<{
+  inStack?: boolean
+  command: string
+  sync?: string
+  noSync?: boolean
+}>()
+
+const md = `
+::code-group{${inStack ? 'in-stack' : ''} ${noSync ? '' : `sync="${sync}"`}}
+${
+  usePm().packageManagers.value.map((pm) => {
+    const code = `${pm.x}${command}`
+    return `\`\`\`bash [${pm.name}]\n${code}\n\`\`\`\n`
+  }).join('\n')
+}
+::
+`
+</script>

package/components/content/ProseA.vue

@@ -0,0 +1,21 @@
+<template>
+  <NuxtLink
+    :to="href"
+    :target="target"
+    :external="external"
+    class="font-semibold underline underline-offset-4"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+const {
+  href = '',
+  external = false,
+} = defineProps<{
+  href?: string
+  target?: Target
+  external?: boolean
+}>()
+</script>

package/components/content/ProseBlockquote.vue

@@ -0,0 +1,5 @@
+<template>
+  <blockquote class="border-l-2 pl-6 italic [&:not(:first-child)]:mt-6">
+    <slot />
+  </blockquote>
+</template>

package/components/content/ProseCode.vue

@@ -0,0 +1,121 @@
+<template>
+  <UiCard
+    class="relative overflow-hidden [&:not(:first-child)]:mt-5 [&:not(:last-child)]:mb-5"
+    :class="[
+      inGroup && 'mb-0 rounded-t-none border-none shadow-none',
+      inStack && 'mb-0 rounded-none border-none shadow-none',
+    ]"
+  >
+    <div
+      v-if="!inGroup && filename"
+      class="flex items-center border-b p-3 font-mono text-sm"
+    >
+      <Icon
+        v-if="icon"
+        :name="icon"
+        class="mr-1.5"
+      />
+      <span>{{ filename }}</span>
+      <CodeCopy
+        :code
+        class="ml-auto mr-1"
+      />
+    </div>
+
+    <span
+      v-if="!filename"
+      class="absolute right-3 top-3 z-10"
+    >
+      <CodeCopy :code />
+    </span>
+    <div class="bg-muted/30">
+      <UiScrollArea :style="[parsedMeta.has('height') && `height: ${parsedMeta.get('height')}px`]">
+        <div
+          class="overflow-x-auto py-3 text-sm"
+          :class="[
+            !inGroup && !filename && 'inline-copy',
+            !language && 'pl-3', !inGroup,
+            parsedMeta.has('line-numbers') && 'show-line-number',
+          ]"
+        >
+          <slot />
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </UiScrollArea>
+    </div>
+  </UiCard>
+</template>
+
+<script setup lang="ts">
+import type { BuiltinLanguage } from 'shiki'
+import ScrollBar from '../ui/scroll-area/ScrollBar.vue'
+
+const {
+  code = '',
+  inGroup = false,
+  inStack = false,
+  language,
+  filename,
+  meta,
+} = defineProps<{
+  code?: string
+  language?: BuiltinLanguage
+  filename?: string
+  inGroup?: boolean
+  inStack?: boolean
+  highlights?: number[]
+  meta?: string
+}>()
+
+const parsedMeta = computed(() => {
+  const split = meta?.split(' ') ?? []
+  const params = new Map<string, string | undefined>()
+
+  for (const param of split) {
+    const [key, val] = param.split('=')
+    params.set(key, val)
+  }
+
+  return params
+})
+
+const iconMap = new Map(Object.entries(useConfig().value.main.codeIcon))
+const icon = computed(() => {
+  const filenameLow = filename?.toLowerCase()
+  return parsedMeta.value.get('icon') || (filenameLow && iconMap.get(filenameLow)) || (language && iconMap.get(language))
+})
+
+// const _slots: SetupContext['slots'] = useSlots()
+
+// const slots = _slots?.default?.() ?? []
+// console.log(slots)
+</script>
+
+<style>
+.fade-enter-active {
+  transition: opacity 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.shiki .line.highlight {
+  background-color: hsl(var(--muted) / 0.9);
+}
+
+.shiki .line {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.inline-copy .line {
+  padding-right: 2.75rem;
+}
+
+.show-line-number .line::before {
+  content: attr(line);
+  @apply text-sm w-5 inline-block text-right mr-4 text-muted-foreground;
+}
+</style>

package/components/content/ProseCodeInline.vue

@@ -0,0 +1,24 @@
+<template>
+  <code class="inline-code relative rounded bg-muted px-[0.3rem] pt-[0.2rem] font-mono">
+    <slot />
+  </code>
+</template>
+
+<style scoped>
+.inline-code {
+  /* :not(h1>code, 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;*/
+  font-size: 0.875em;
+  line-height: 1.25rem;
+}
+
+p .inline-code {
+  vertical-align: -0.05rem;
+}
+
+strong .inline-code {
+  font-weight: inherit;
+}
+</style>

package/components/content/ProseEm.vue

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

package/components/content/ProseH1.vue

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

package/components/content/ProseH2.vue

@@ -0,0 +1,22 @@
+<template>
+  <h2
+    :id
+    class="prose-h2 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"
+      :to="`#${id}`"
+    >
+      <slot />
+    </NuxtLink>
+    <slot v-else />
+  </h2>
+</template>
+
+<script setup lang="ts">
+const { id } = defineProps<{ id?: string }>()
+
+// TODO: keep id of the heading in mdcEditor
+const { headings } = useRuntimeConfig().public.mdc
+const generate = computed(() => id && ((typeof headings?.anchorLinks === 'boolean' && headings?.anchorLinks === true) || (typeof headings?.anchorLinks === 'object' && headings?.anchorLinks?.h2)))
+</script>