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

package/.playground/app.config.ts

@@ -100,7 +100,7 @@ export default defineAppConfig({
         pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/edit/main/content/:path',
         text: 'Edit this page',
         icon: 'lucide:square-pen',
-        placement: ['docsFooter', 'toc'],
+        placement: ['pageFooter', 'toc'],
       },
       codeIcon: {
         'package.json': 'vscode-icons:file-type-node',

package/.playground/content/3.components/2.docs/stack.md

@@ -71,7 +71,6 @@ Stackable components:
 - `div`
 - Code Blocks
 - `alert`
-- `callout`
 - `read-more`
 - `code-group`
 - `card`

package/.playground/content/4.development/1.configuration/1.overview.md

@@ -215,7 +215,7 @@ All configurable icons can be set to iconify icons, emojis and urls, using the [
         ::field{name="icon" type="string" default-value="lucide:square-pen"}
         The icon preceding the link.
         ::
-        ::field{name="placement" type="('docsFooter' | 'toc')[]" default-value="['docsFooter']"}
+        ::field{name="placement" type="('pageFooter' | 'toc')[]" default-value="['pageFooter']"}
         Where to place the edit link.
         ::
       ::

package/.playground/content/4.development/1.configuration/4.edit-link.md

@@ -15,7 +15,7 @@ export default defineAppConfig({
         pattern: 'https://github.com/ZTL-UwU/shadcn-docs-nuxt/edit/main/content/:path',
         text: 'Edit this page on GitHub',
         icon: 'lucide:square-pen',
-        placement: ['docsFooter', 'toc'],
+        placement: ['pageFooter', 'toc'],
       },
     }
   },
@@ -29,7 +29,7 @@ export default defineAppConfig({
 - The `icon` option allows you to customize the icon (default is `lucide:square-pen`)
 
 - The `placement` option controls the places to put the edit link.
-  - `docsFooter`: at the end of the page.
+  - `pageFooter`: at the end of the page.
   - `toc`: in the TOC links section.
 
 ### Front Matter
@@ -57,7 +57,7 @@ editLink: false
   ::field{name="icon" type="string" default-value="lucide:square-pen"}
   The icon preceding the link.
   ::
-  ::field{name="placement" type="('docsFooter' | 'toc')[]" default-value="['docsFooter']"}
+  ::field{name="placement" type="('pageFooter' | 'toc')[]" default-value="['pageFooter']"}
   Where to place the edit link.
   ::
 ::

package/assets/css/mdc-editor.css

@@ -8,7 +8,8 @@
     outline: none;
   }
 
-  & > p:not(:has(span)):not(:first-child) {
+  /* & > p:not(:has(span)):not(:first-child) { */
+  & > p:not(:first-child) {
     margin-top: 1.5rem;
   }
 
@@ -51,7 +52,7 @@
     }
   }
 
-  & p a {
+  & p > a {
     text-underline-offset: 4px;
     text-decoration-line: underline;
     font-weight: 600;
@@ -61,11 +62,13 @@
     padding-top: 0.5rem;
     margin-left: 1.5rem;
 
-    &:first-child,
-    :not(&) + & {
+    &:first-child {
       padding-top: 1.5rem;
     }
   }
+  &:not(.prosemirror-flat-list) + .prosemirror-flat-list {
+    padding-top: 1.5rem;
+  }
 
   /* CodeGroupEditor */
   & .\[\&\:not\(\:first-child\)\]\:mt-5 {
@@ -76,16 +79,20 @@
   }
 }
 
+.underline-none {
+  text-decoration: none !important;
+}
+
 .animate-scroll-fade-in-up {
   animation: fade-in-up linear;
   animation-timeline: view();
   animation-range: 0 25dvh;
 }
 
-.docs-content:not(.EDITOR_CONTENT) > * {
+.page-content:not(.EDITOR_CONTENT) > * {
   --una-enter-translate-y: 5dvh;
   --una-enter-opacity: 0.5;
   animation: una-in linear;
   animation-timeline: view();
   animation-range: 0 25dvh;
-}
+}

package/components/content/Alert.vue

@@ -9,7 +9,10 @@
     ]"
     @click="alertClick"
   >
-    <div class="flex flex-row gap-2">
+    <div
+      v-if="title"
+      class="flex flex-row gap-2"
+    >
       <Icon
         v-if="icon && title"
         :name="icon"
@@ -17,7 +20,6 @@
       />
 
       <UiAlertTitle
-        v-if="title"
         class="font-semibold mb-3"
       >
         {{ title }}

package/components/content/ButtonLink.vue

@@ -2,6 +2,7 @@
   <NuxtLink
     :to="to || href"
     :target="(blank && '_blank') || target"
+    class="button-link block"
   >
     <UiButton
       :variant
@@ -12,6 +13,9 @@
         :name="leftIcon"
         class="mr-1"
       />
+      <span v-if="title">
+        {{ title }}
+      </span>
       <ContentSlot unwrap="p" />
       <Icon
         v-if="rightIcon"
@@ -28,6 +32,7 @@ import type { ButtonVariants } from '../ui/button'
 defineProps<{
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
+  title?: string
   leftIcon?: string
   rightIcon?: string
   to?: string

package/components/content/Card.vue

@@ -10,14 +10,13 @@
         mediaPosition === 'bottom' && 'flex-col-reverse',
         ['cover', 'center'].includes(mediaPosition) && 'bg-opacity-0',
         mediaPosition === 'center' && 'text-center items-center flex-row p-8',
-        $attrs.class,
       ]"
     >
       <div
         v-if="media || $slots.media"
-        class="overflow-hidden"
+        class="card__media overflow-hidden"
         :class="{
-          'w-5/13 shrink-0': media && (mediaPosition === 'left' || mediaPosition === 'right'),
+          'w-5/13 shrink-0': (media || $slots.media) && (mediaPosition === 'left' || mediaPosition === 'right'),
           'absolute inset-0': ['cover', 'center'].includes(mediaPosition),
         }"
       >
@@ -40,6 +39,7 @@
           v-if="
             icon || title || $slots.title || description || $slots.description
           "
+          class="card__header"
           :class="{
             'flex-row gap-5': iconPosition === 'left',
             'items-center': mediaPosition === 'center',
@@ -52,9 +52,18 @@
             :class="{ 'mb-2': iconPosition !== 'left' && (title || $slots.title) }"
           />
 
-          <div class="flex flex-col gap-1.5 w-full">
+          <div class="flex flex-col gap-2 w-full">
+            <div
+              v-if="date"
+              class="card__date text-sm text-muted-foreground"
+              style="text-decoration: none !important"
+            >
+              {{ new Intl.DateTimeFormat(locale, { dateStyle: 'long' }).format(new Date(date)) }}
+            </div>
+
             <UiCardTitle
               v-if="title || $slots.title"
+              class="card__title"
               :class="{ 'group-hover/card:underline': to, 'pr-4': ['left', 'bottom'].includes(mediaPosition) && to }"
             >
               <ContentSlot
@@ -68,7 +77,10 @@
               />
             </UiCardTitle>
 
-            <UiCardDescription v-if="description || $slots.description">
+            <UiCardDescription
+              v-if="description || $slots.description"
+              class="card__description"
+            >
               <ContentSlot
                 :use="$slots.description"
                 unwrap="p"
@@ -86,6 +98,7 @@
 
         <UiCardContent
           v-if="content || $slots.content || $slots.default"
+          class="card__content"
           :class="{ 'py-3': !icon && !(title || $slots.title) && !(description || $slots.description) }"
         >
           <ContentSlot unwrap="p" />
@@ -95,7 +108,10 @@
           />
         </UiCardContent>
 
-        <UiCardFooter v-if="footer || $slots.footer">
+        <UiCardFooter
+          v-if="footer || $slots.footer"
+          class="card__footer"
+        >
           <ContentSlot
             :use="$slots.footer"
             unwrap="p"
@@ -117,7 +133,9 @@
     </UiCard>
   </UseTemplate>
 
-  <div class="group/card group-has-[div]:mt-0 [&:not(:first-child)]:mt-5">
+  <div
+    :class="cn('group/card group-has-[div]:mt-0 [&:not(:first-child)]:mt-5', String($attrs.class || ''))"
+  >
     <NuxtLink
       v-if="to"
       :to
@@ -126,11 +144,14 @@
     >
       <CardInner />
     </NuxtLink>
+
     <CardInner v-else />
   </div>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
+
 defineOptions({
   inheritAttrs: false,
 })
@@ -146,6 +167,7 @@ const {
 } = defineProps<{
   title?: string
   description?: string
+  date?: string
   content?: string
   footer?: string
 
@@ -164,6 +186,8 @@ const {
   inStack?: boolean
 }>()
 
+const { locale } = useI18nDocs()
+
 defineSlots()
 
 const [UseTemplate, CardInner] = createReusableTemplate()

package/components/content/Hero.vue

@@ -93,7 +93,7 @@
               :name="action.leftIcon"
               class="mr-1"
             />
-            {{ action.name }}
+            <span>{{ action.name }}</span>
             <Icon
               v-if="action.rightIcon"
               :name="action.rightIcon"

package/components/content/List.vue

@@ -0,0 +1,60 @@
+<template>
+  <section :class="cn('flex flex-col gap-8 mt-8', String($attrs.class || ''))">
+    <ContentList
+      v-if="path.length || Object.keys(query).length"
+      :path
+      :query
+    >
+      <template #default="{ list }">
+        <component
+          :is="component || 'Card'"
+          v-for="data in sortedList(filterList(list))"
+          :key="data._path"
+          v-bind="itemProps ? { ...data, to: data._path, ...itemProps } : { ...data, to: data._path }"
+          :class="cn('mt-0!', String(itemClass))"
+        />
+      </template>
+
+      <template #not-found>
+        <p>No articles found.</p>
+      </template>
+    </ContentList>
+  </section>
+</template>
+
+<script setup lang="ts">
+import type { QueryBuilderParams, ParsedContent } from '@nuxt/content'
+import { cn } from '@/lib/utils'
+
+type ListQuery = QueryBuilderParams & { sort?: { date?: 'ASC' | 'DESC' | 1 | -1 } }
+
+const {
+  path = '',
+  query = {} as ListQuery,
+  component = 'Card',
+  itemProps = {},
+  itemClass = '',
+} = defineProps<{
+  path?: string
+  query?: ListQuery
+  component?: string
+  itemProps?: object
+  itemClass?: string
+}>()
+
+const filterList = (list: ParsedContent[]) => {
+  return list.filter(item => !item?._file?.includes('index.md'))
+}
+
+const sortedList = (list: ParsedContent[]) => {
+  if (query?.sort && 'date' in query.sort) {
+    return [...list].sort((a, b) =>
+      query.sort!.date === 'DESC' || query.sort!.date === -1
+        ? new Date(b.date).getTime() - new Date(a.date).getTime()
+        : new Date(a.date).getTime() - new Date(b.date).getTime(),
+    )
+  }
+
+  return list
+}
+</script>

package/components/content/ProseA.vue

@@ -3,13 +3,15 @@
     :to="href"
     :target="target"
     :external="external"
-    class="font-semibold underline underline-offset-4"
+    :class="cn('font-semibold underline underline-offset-4', String($attrs.class || ''))"
   >
     <slot />
   </NuxtLink>
 </template>
 
 <script setup lang="ts">
+import { cn } from '@/lib/utils'
+
 const {
   href = '',
   external = false,

package/components/content/ProseSection.vue

@@ -7,21 +7,75 @@ defineOptions({
 })
 
 defineProps<{
-  color?: string
+  title?: string
 }>()
+
+defineSlots()
 </script>
 
 <template>
   <section
+    class="prose-section"
     :class="cn(
       'relative p-6 mt-6',
       classToString($attrs.class),
-      color,
     )"
   >
-    <!-- <span class="absolute bg-muted-foreground/05 -left-2 -top-1 -bottom-1 -right-2 md:-left-3 md:-top-0 md:-bottom-0 md:-right-3 -rotate-1" /> -->
-    <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,auto))] gap-6 [&>*]:mt-0!">
-      <slot />
+    <div>
+      <div
+        v-if="$slots.before"
+        class="prose-section__before"
+      >
+        <ContentSlot
+          :use="$slots.before"
+          unwrap="p"
+        />
+      </div>
+
+      <ProseH2 v-if="title">
+        {{ title }}
+      </ProseH2>
+
+      <!-- <span class="absolute bg-muted-foreground/05 -left-2 -top-1 -bottom-1 -right-2 md:-left-3 md:-top-0 md:-bottom-0 md:-right-3 -rotate-1" /> -->
+      <!-- <div class="grid grid-cols-[repeat(auto-fit,minmax(300px,auto))] gap-6 [&>*]:mt-0!"> -->
+      <div
+        v-if="$slots.default"
+        class="prose-section__content"
+      >
+        <ContentSlot
+          :use="$slots.default"
+          unwrap="p"
+        />
+      </div>
+
+      <div
+        v-if="$slots.after"
+        class="prose-section__after"
+      >
+        <ContentSlot
+          :use="$slots.after"
+          unwrap="p"
+        />
+      </div>
     </div>
   </section>
 </template>
+
+<style scoped>
+.grid-flex {
+  display: grid;
+  gap: 1rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(var(--min-column-size, 15ch), 100%), 1fr));
+  background: #f7f7f7;
+  border: 1px solid #e5e5e5;
+  padding: 0.25rem;
+}
+
+.grid-flex > div {
+  background-color: #ffdc00;
+  border: 1px solid #665800;
+  color: #665800;
+  padding: 1rem 2rem;
+  text-align: center;
+}
+</style>

package/components/content/Steps.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="[&>li]:step ml-4 border-l pl-8 [counter-reset:step] [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-12"
+    class="steps [&>li]:step ml-4 border-l-2 pl-8 [counter-reset:step] [&:not(:first-child)]:mt-6 [&:not(:last-child)]:mb-12"
     :class="levelClass[level]"
   >
     <slot />

package/components/content/global/AlertEditor.vue

@@ -12,7 +12,10 @@
     </UiEditorDropdown>
 
     <Alert v-bind="model">
-      <div :ref="props.contentRef" />
+      <p
+        :ref="props.contentRef"
+        class="[&>div]:min-h-5.5"
+      />
     </Alert>
   </div>
 </template>

package/components/content/global/ListEditor.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import type { VueNodeViewProps } from 'prosekit/vue'
+
+const props = defineProps<VueNodeViewProps>()
+const { getComponentProps } = useMdcEditor()
+
+const { model, mdcAttrs } = getComponentProps(props, {
+  id: {
+    type: String,
+  },
+  class: {
+    type: String,
+  },
+  path: {
+    type: String,
+  },
+  query: {
+    type: Object,
+  },
+  component: {
+    type: String,
+  },
+})
+</script>
+
+<template>
+  <div class="relative mt-8">
+    <UiEditorHorizontalControls>
+      <UiEditorInput
+        v-model="mdcAttrs.path"
+        flex-1
+        placeholder="Path to folder"
+        label="Chemin"
+      />
+    </UiEditorHorizontalControls>
+
+    <List
+      v-if="model.path || model.query"
+      :path="model.path"
+      :query="model.query"
+      :component="model.component"
+      contenteditable="false"
+    />
+  </div>
+</template>

package/components/content/global/ReadMoreEditor.vue

@@ -34,7 +34,7 @@ import type { VueNodeViewProps } from 'prosekit/vue'
 const props = defineProps<VueNodeViewProps>()
 const { getComponentProps } = useMdcEditor()
 
-const { model } = getComponentProps(props, {
+const { mdcAttrs, model } = getComponentProps(props, {
   id: {
     type: String,
   },
@@ -62,9 +62,9 @@ const { model } = getComponentProps(props, {
 
 function updatePrefix(event: Event) {
   const target = event.target as HTMLDivElement
-  model.prefix = target.innerHTML
+  mdcAttrs.prefix = target.innerHTML
 }
 function updateLink(to: string) {
-  model.to = to
+  mdcAttrs.to = to
 }
 </script>

package/components/content/global/StepsEditor.vue

@@ -1,21 +1,24 @@
 <template>
   <div class="relative">
     <UiEditorDropdown
-      v-model="mdcAttrs.level"
+      v-model="levelModel"
       chevron
       tooltip="Level"
       placement="bottom-end"
-      :items="levels"
+      :items="levels.map(level => `H${level}`)"
       class="absolute right-1 top-1 z-10 opacity-25 transition-opacity group-hover:opacity-100"
     >
-      <span class="text-xs font-mono capitalize">h{{ model.level }}</span>
+      <span class="text-xs font-mono capitalize">{{ levelModel }}</span>
     </UiEditorDropdown>
 
     <Steps
       v-bind="model"
-      :class="levelClass[model.level]"
+      :class="levelClass[model.level as keyof typeof levelClass]"
     >
-      <div :ref="props.contentRef" />
+      <div
+        :ref="props.contentRef"
+        class="[&>div]:min-h-5.5 [&_p]:mt-6"
+      />
     </Steps>
   </div>
 </template>
@@ -52,4 +55,13 @@ const { model, mdcAttrs } = getComponentProps(props, {
     },
   },
 })
+
+const levelModel = computed({
+  get() {
+    return `H${model.level}`
+  },
+  set(value) {
+    mdcAttrs.level = value.replace('H', '')
+  },
+})
 </script>

package/components/layout/Banner.vue

@@ -2,39 +2,39 @@
   <Transition>
     <div
       v-if="open === true"
-      class="app__banner block transition-colors bg-primary/10"
+      class="app__banner block relative h-[var(--banner-height)] transition-colors bg-primary/10"
       :class="{
         'hover:cursor-pointer hover:bg-primary/25': to,
         'border-b': border,
       }"
     >
-      <div class="container h-10 flex items-center justify-between px-4 md:px-8">
-        <NuxtLink
+      <NuxtLink
+        :to
+        class="container flex items-stretch w-full md:px-8 h-full"
+        @click.stop="navigate"
+      >
+        <div class="hidden lg:block" />
+        <MDC
+          :value="content"
+          class="flex items-center justify-center text-primary text-lg w-full"
+        />
+      </NuxtLink>
 
-          :to
-          @click.prevent="navigate"
-        >
-          <div class="hidden lg:block" />
-          <div class="text-sm">
-            <MDC
-              :value="content"
-              class="flex items-center text-primary text-lg"
+      <div class="absolute right-0 top-0 w-full h-full">
+        <div class="container h-full flex items-stretch justify-end">
+          <UiButton
+            v-if="showClose"
+            variant="ghost"
+            class="z-40 h-auto px-3 [--accent:var(--primary)] !bg-opacity-25 rounded-none"
+            aria-label="Close banner"
+            @click.stop="open = Date.now()"
+          >
+            <NuxtIcon
+              name="lucide:x"
+              size="24"
             />
-          </div>
-        </NuxtLink>
-
-        <UiButton
-          v-if="showClose"
-          variant="ghost"
-          class="z-40 size-10 p-2 [--accent:var(--primary)] !bg-opacity-25 rounded-none"
-          aria-label="Close banner"
-          @click.prevent="open = Date.now()"
-        >
-          <NuxtIcon
-            name="lucide:x"
-            size="36"
-          />
-        </UiButton>
+          </UiButton>
+        </div>
       </div>
     </div>
   </Transition>

package/components/layout/Breadcrumb.vue

@@ -16,6 +16,11 @@
               :size="breadcrumb.iconSize || config.main.breadCrumb.iconSize || 14"
               :name="breadcrumb.icon"
             />
+            <Icon
+              v-if="(breadcrumb.media && showImage)"
+              :size="breadcrumb.iconSize || config.main.breadCrumb.iconSize || 14"
+              :name="breadcrumb.media"
+            />
             {{ breadcrumb.title }}
           </NuxtLink>
         </UiBreadcrumbItem>
@@ -27,6 +32,10 @@
 </template>
 
 <script setup lang="ts">
+const { showImage = false } = defineProps<{
+  showImage?: boolean
+}>()
+
 const route = useRoute()
 const config = useConfig()