@wordup-md/nuxt-layer-shadcn-unocss 0.2.2 → 0.2.4

package/.playground/app.config.ts

@@ -78,7 +78,7 @@ export default defineAppConfig({
       }],
       links: [{
         icon: 'lucide:twitter',
-        to: 'https://x.com/unpress_dev',
+        to: 'https://x.com/wordup_md',
         target: '_blank',
       }],
     },
@@ -97,7 +97,7 @@ export default defineAppConfig({
       codeCopyToast: true,
       editLink: {
         enable: true,
-        pattern: 'https://github.com/wordup-md/nuxt-layer-shadcn-unocss/edit/main/content/:path',
+        pattern: 'https://github.com/wordup-md/nuxt-layer-shadcn-unocss/edit/main/.playground/content/:path',
         text: 'Edit this page',
         icon: 'lucide:square-pen',
         placement: ['pageFooter', 'toc'],
@@ -147,7 +147,7 @@ export default defineAppConfig({
       },
     },
     footer: {
-      credits: 'Made with ❤️ by [**Emmanuel Salomon**](https://github.com/ManUtopiK/) with [Unpress](https://unpress.dev)',
+      credits: 'Made with ❤️ by [**Emmanuel Salomon**](https://github.com/ManUtopiK/) with [WordUp](https://wordup.md)',
       links: [
         {
           title: 'shadcn-vue',

package/.playground/content/1.getting-started/1.introduction.md

@@ -5,4 +5,10 @@ icon: lucide:info
 toc: false
 ---
 
-:card-group{data="/getting-started/writing"}
+::list
+---
+class: group grid gap-4 md:grid-cols-2 [&:not(:first-child)]:mt-4
+component: card
+path: /getting-started/writing
+---
+::

package/.playground/content/2.content-elements/11.tables.md

@@ -22,4 +22,20 @@ icon: lucide:table
 | 2   | Wonderful | Data                                        |
 | 3   | Wonderful | Website                                     |
 ```
-:: 
+::
+
+## Alignment
+
+::stack
+  :::div{.p-4}
+  | Default (left) | Left              |        Center       |              Right |
+  | -------------- | :---------------- | :-----------------: | -----------------: |
+  | default text   | left aligned text | center aligned text | right aligned text |
+  :::
+
+```md
+| Default (left) | Left              |        Center       |              Right |
+| -------------- | :---------------- | :-----------------: | -----------------: |
+| default text   | left aligned text | center aligned text | right aligned text |
+```
+::

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

@@ -40,7 +40,7 @@ badges:
 
 ### Types
 
-::stack{label="default"}
+::stack
   ::div{class="p-3"}
     :badge[Default]
     :badge[Primary]{type="primary"}
@@ -64,46 +64,24 @@ badges:
 
 ### Variants
 
-::stack{label="default"}
-  ::div{class="p-3"}
-    :badge[Default]{variant="fill"}
-    :badge[Primary]{type="primary" variant="fill"}
-    :badge[Secondary]{type="secondary" variant="fill"}
-    :badge[Info]{type="info" variant="fill"}
-    :badge[Warning]{type="warning" variant="fill"}
-    :badge[Success]{type="success" variant="fill"}
-    :badge[Danger]{type="danger" variant="fill"}
-    :badge[New]{type="new" variant="fill"}
-  ::
+|Default|Fill|Outline|Text|
+|---|---|---|---|
+|:badge[Default]|:badge[Default]{variant="fill"}|:badge[Default]{variant="outline"}|:badge[Default]{variant="text"}|
+|:badge[Primary]{type="primary"}|:badge[Primary]{type="primary" variant="fill"}|:badge[Primary]{type="primary" variant="outline"}|:badge[Primary]{type="primary" variant="text"}|
+|:badge[Secondary]{type="secondary"}|:badge[Secondary]{type="secondary" variant="fill"}|:badge[Secondary]{type="secondary" variant="outline"}|:badge[Secondary]{type="secondary" variant="text"}|
+|:badge[Info]{type="info"}|:badge[Info]{type="info" variant="fill"}|:badge[Info]{type="info" variant="outline"}|:badge[Info]{type="info" variant="text"}|
+|:badge[Warning]{type="warning"}|:badge[Warning]{type="warning" variant="fill"}|:badge[Warning]{type="warning" variant="outline"}|:badge[Warning]{type="warning" variant="text"}|
+|:badge[Success]{type="success"}|:badge[Success]{type="success" variant="fill"}|:badge[Success]{type="success" variant="outline"}|:badge[Success]{type="success" variant="text"}|
+|:badge[Danger]{type="danger"}|:badge[Danger]{type="danger" variant="fill"}|:badge[Danger]{type="danger" variant="outline"}|:badge[Danger]{type="danger" variant="text"}|
+|:badge[New]{type="new"}|:badge[New]{type="new" variant="fill"}|:badge[New]{type="new" variant="outline"}|:badge[New]{type="new" variant="text"}|
 
-  ::div{class="p-3"}
-    :badge[Default]{variant="outline"}
-    :badge[Primary]{type="primary" variant="outline"}
-    :badge[Secondary]{type="secondary" variant="outline"}
-    :badge[Info]{type="info" variant="outline"}
-    :badge[Warning]{type="warning" variant="outline"}
-    :badge[Success]{type="success" variant="outline"}
-    :badge[Danger]{type="danger" variant="outline"}
-    :badge[New]{type="new" variant="outline"}
-  ::
+**Examples:**
 
-  ::div{class="p-3"}
-    :badge[Default]{variant="text"}
-    :badge[Primary]{type="primary" variant="text"}
-    :badge[Secondary]{type="secondary" variant="text"}
-    :badge[Info]{type="info" variant="text"}
-    :badge[Warning]{type="warning" variant="text"}
-    :badge[Success]{type="success" variant="text"}
-    :badge[Danger]{type="danger" variant="text"}
-    :badge[New]{type="new" variant="text"}
-  ::
-
-  ```mdc
-  :badge[...]{type="..." variant="fill"}
-  :badge[...]{type="..." variant="outline"}
-  :badge[...]{type="..." variant="text"}
-  ```
-::
+```mdc
+:badge[Some text]{type="info" variant="fill"}
+:badge[Some text]{type="danger" variant="outline"}
+:badge[Some text]{type="new" variant="text"}
+```
 
 ### Link
 
@@ -123,6 +101,7 @@ badges:
 ## Props
 
 ::field-group
+  :field{name="title" type="string"}[Can be used to set the label of the badge instead of the content]
   :field{name="type" type="'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'" default-value="'default'"}
   :field{name="variant" type="'default' | 'secondary' | 'destructive' | 'outline'" default-value="'default'"}
   :field{name="size" type="'md' | 'sm'" default-value="'md'"}

package/.playground/content/3.components/2.docs/button-link.md

@@ -16,26 +16,26 @@ badges:
 
 ::stack
   ::div{class="p-3 flex gap-4"}
-  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
-    Get Started
-  ::
-  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" target="_blank"}
+  ::button-link{icon="lucide:github" variant="outline" to="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" target="_blank"}
     GitHub
   ::
-  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" blank}
+  ::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" blank}
     Ghost
   ::
-  ::
-  ```mdc
-  ::button-link{right-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+  ::button-link{trailing-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
     Get Started
   ::
-  ::button-link{left-icon="lucide:github" variant="outline" to="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" target="_blank"}
+  ::
+  ```mdc
+  ::button-link{icon="lucide:github" variant="outline" to="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" target="_blank"}
     GitHub
   ::
-  ::button-link{left-icon="lucide:ghost" variant="ghost" href="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" blank}
+  ::button-link{icon="lucide:ghost" variant="ghost" href="https://github.com/wordup-md/nuxt-layer-shadcn-unocss" blank}
     Ghost
   ::
+  ::button-link{trailing-icon="lucide:arrow-up-right" to="/getting-started" target="_blank"}
+    Get Started
+  ::
   ```
 ::
 
@@ -44,8 +44,8 @@ badges:
 ::field-group
   :field{name="variant" type="'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'" default-value="'default'"}
   :field{name="size" type="'default' | 'icon' | 'sm' | 'xs' | 'lg'" default-value="'default'"}
-  :field{name="leftIcon" type="string"}[Icon on the left]
-  :field{name="rightIcon" type="string"}[Icon on the right]
+  :field{name="icon" type="string"}[Icon on the left]
+  :field{name="trailingIcon" type="string"}[Icon on the right]
   :field{name="to" type="string"}[Link URL]
   :field{name="href" type="string"}[Alias to `to`]
   :field{name="target" type="Target"}[A `target` attribute value to apply on the link]

package/.playground/content/3.components/3.page/accordion.md

@@ -1,6 +1,6 @@
 ---
 title: Accordion
-icon: lucide:layout-list
+icon: i-mingcute:list-expansion-line
 badges:
   - value: Source
     icon: lucide:code

package/.playground/content/3.components/3.page/file-download.md

@@ -0,0 +1,6 @@
+---
+title: File Download
+icon: i-mdi-file
+---
+
+:file-download{path="/logo.svg"}

package/.playground/content/3.components/3.page/hero.md

@@ -1,6 +1,6 @@
 ---
 title: Hero
-icon: lucide:align-center
+icon: i-lucide:layout-panel-top
 badges:
   - value: Source
     icon: lucide:code

package/.playground/content/3.components/3.page/list.md

@@ -0,0 +1,42 @@
+---
+title: Dynamic List
+icon: i-lucide:layout-list
+badges:
+  - value: Source
+    icon: lucide:code
+    to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/blob/main/components/content/List.vue
+    target: _blank
+---
+
+## Usage
+
+::stack
+  ::div{class="p-4"}
+  ::list
+  ---
+  path: /components/
+  query:
+    limit: 3
+  component: card
+  ---
+  ::
+  ::
+  ```mdc
+  ::list
+  ---
+  path: /components/
+  query:
+    limit: 3
+  component: card
+  ---
+  ::
+  ```
+::
+
+## Props
+
+::field-group
+  :field{name="path" type="string"}[Path to the list]
+  :field{name="query" type="object"}[Query parameters]
+  :field{name="component" type="string"}[Component to use for each item]
+::

package/.playground/content/index.md

@@ -2,6 +2,7 @@
 title: Home
 description: Effortless and Beautiful Template.
 layout: editorial
+navigation: false
 ---
 
 ::hero

package/.playground/content/layout.md

@@ -1,5 +1,5 @@
 ---
-title: Home
+title: Layout
 navigation: false
 layout: editorial
 header:

package/.playground/content/test.md

@@ -1,8 +1,31 @@
 ---
-title: test
+title: Test
 layout: editorial
 header:
   position: over
+sidebarRight:
+  enable: true
+  components:
+    - ButtonLink:
+        title: GitHub
+        variant: outline
+        to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss
+        icon: lucide:github
+        class: w-full
+    - Menu:
+        title: Menu test
+        items:
+          - /getting-started
+          - title: Menu
+            to: /getting-started
+            icon: lucide:menu
+    - Alert:
+        title: New
+        to: /getting-started
+        icon: lucide:party-popper
+navBadges:
+  - value: New
+    type: new
 ---
 
 ::hero

package/README.md

@@ -12,13 +12,13 @@ npx create-nuxt-app <project-name>
 
 - Install the layer
 ```bash
-pnpm add @unpress/nuxt-layer-shadcn-unocss
+pnpm add @wordup-md/nuxt-layer-shadcn-unocss
 ```
 
 - Extend the layer in your nuxt.config.ts
 ```ts
 defineNuxtConfig({
-  extends: '@unpress/nuxt-layer-shadcn-unocss'
+  extends: '@wordup-md/nuxt-layer-shadcn-unocss'
 })
 ``` 
 

package/components/content/Badge.vue

@@ -14,6 +14,9 @@
           && 'rounded-md px-1.5 py-0.5 text-xs font-normal leading-none',
       ]"
     >
+      <span v-if="title">
+        {{ title }}
+      </span>
       <ContentSlot unwrap="p" />
     </UiBadge>
   </NuxtLink>
@@ -32,6 +35,9 @@
           && 'px-3 text-base',
       ]"
     >
+      <span v-if="title">
+        {{ title }}
+      </span>
       <ContentSlot unwrap="p" />
     </UiBadge>
   </span>
@@ -44,6 +50,7 @@ const {
   size = 'md',
 } = defineProps<{
   type?: 'default' | 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'danger' | 'new'
+  title?: string
   to?: string
   target?: Target
   variant?: 'default' | 'fill' | 'outline' | 'text'

package/components/content/ButtonLink.vue

@@ -7,20 +7,23 @@
     <UiButton
       :variant
       :size
+      :class="String($attrs.class || '')"
     >
       <Icon
-        v-if="leftIcon"
-        :name="leftIcon"
-        class="mr-1"
+        v-if="icon"
+        :name="icon"
+        class="mr-2"
       />
+
       <span v-if="title">
         {{ title }}
       </span>
       <ContentSlot unwrap="p" />
+
       <Icon
-        v-if="rightIcon"
-        :name="rightIcon"
-        class="ml-1"
+        v-if="trailingIcon"
+        :name="trailingIcon"
+        class="ml-2"
       />
     </UiButton>
   </NuxtLink>
@@ -33,8 +36,8 @@ defineProps<{
   variant?: ButtonVariants['variant']
   size?: ButtonVariants['size']
   title?: string
-  leftIcon?: string
-  rightIcon?: string
+  icon?: string
+  trailingIcon?: string
   to?: string
   href?: string
   target?: Target

package/components/content/ButtonLogin.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import { useUnpress } from '#imports'
+
+const { client, logout, login } = useUnpress()
+</script>
+
+<template>
+  <UiButton
+    variant="ghost"
+    class="flex gap-2"
+    @click="!!client ? logout() : login()"
+  >
+    <Icon
+      :name="!!client ? 'lucide:log-out' : 'lucide:log-in'"
+      :size="20"
+    />
+    {{ !!client ? $t('Logout') : $t('Login') }}
+  </UiButton>
+</template>

package/components/content/FileDownload.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+const props = defineProps<{
+  path: string
+  title?: string
+  size?: number
+  icon?: string
+  inStack?: boolean
+  external?: boolean
+}>()
+
+// Get the asset
+const { data } = await useFetch(props.path)
+
+// Compute size
+const size = computed(() => {
+  return props.size ?? data.value?.size
+})
+
+// onMounted(async () => {
+//   // Download the asset and get the size
+//   const size = await fetch(data.value?.url).then(res => res.headers.get('content-length'))
+//   console.log(size.value)
+// })
+
+const files = {
+  pdf: 'i-mdi-file-pdf-outline',
+  jpeg: 'i-mdi-file-image',
+  svg: 'i-mdi-file-image',
+}
+function ext(name: string) {
+  const ext = name.split('.').slice(-1)
+  if (files[ext]) return files[ext]
+  return 'i-mdi-file'
+}
+
+function fileSize(size: number) {
+  if (props.size) return props.size
+  if (!size) return null
+  if (size < 1024)
+    return `${size} octets`
+  if (size < 1024 * 1024)
+    return `${(size / 1024).toFixed(2)} Ko`
+  return `${(size / 1024 / 1024).toFixed(2)} Mo`
+}
+
+const _icon = computed(() => {
+  return props.icon ?? ext(props.path.split('/').pop() ?? '')
+})
+
+const _title = computed(() => {
+  return props.title ?? props.path.split('/').pop()
+})
+</script>
+
+<template>
+  <UiAlert
+    class="transition-all [&:not(:first-child)]:mt-5 group/card"
+    :class="[
+      path && 'hover:bg-muted/50',
+      path && 'cursor-pointer',
+      inStack && 'm-0 rounded-none border-none',
+    ]"
+  >
+    <a
+      :href="path"
+      :target="external ? '_blank' : undefined"
+      :download="external ? undefined : path"
+    >
+      <div
+        v-if="_title"
+        class="flex flex-row gap-2 items-center"
+      >
+        <Icon
+          v-if="_icon && _title"
+          :name="_icon"
+          :size="20"
+        />
+
+        <UiAlertTitle
+          class="mb-0 flex flex-row gap-2"
+        >
+          <span class="font-semibold">{{ _title }}</span>
+          <span
+            v-if="size"
+            class="text-sm font-normal text-muted-foreground"
+          >
+            ( {{ fileSize(size) }} )
+          </span>
+        </UiAlertTitle>
+      </div>
+    </a>
+
+    <div
+      v-if="path"
+      class="absolute right-3 top-3 flex z-1 p-1 transition bg-background/50 rounded group-hover/card:translate-y-1"
+    >
+      <NuxtIcon
+        name="i-mdi-download"
+        :size="20"
+      />
+    </div>
+  </UiAlert>
+</template>

package/components/content/List.vue

@@ -1,14 +1,14 @@
 <template>
-  <section :class="cn('flex flex-col gap-8 mt-8', String($attrs.class || ''))">
+  <section :class="cn('flex flex-col gap-4 mt-4', String($attrs.class || ''))">
     <ContentList
-      v-if="path.length || Object.keys(query).length"
+      v-if="path.length || Object.keys(normalizedQuery).length"
       :path
-      :query
+      :query="normalizedQuery"
     >
       <template #default="{ list }">
         <component
           :is="component || 'Card'"
-          v-for="data in sortedList(filterList(list))"
+          v-for="data in sortedList(list)"
           :key="data._path"
           v-bind="itemProps ? { ...data, to: data._path, ...itemProps } : { ...data, to: data._path }"
           :class="cn('mt-0!', String(itemClass))"
@@ -42,9 +42,28 @@ const {
   itemClass?: string
 }>()
 
-const filterList = (list: ParsedContent[]) => {
-  return list.filter(item => !item?._file?.includes('index.md'))
-}
+// const { data } = await useAsyncData('homeiiii', () =>
+//   queryContent(path)
+//   // regex should exclude .../index.md file
+//     .where({ _type: { $not: 'yaml' }, _id: { $not: { $regex: /index\.md$/ } } })
+//     .find(),
+// )
+// console.log(data.value)
+
+const normalizedQuery = computed(() => {
+  const _query = { ...query }
+  // Extends query.where
+  _query.where = {
+    ..._query.where,
+    _type: { $not: 'yaml' },
+    _id: { $not: { $regex: /index\.md$/ } },
+  }
+
+  return {
+    ..._query,
+    limit: _query.limit ? Number(_query.limit) : undefined,
+  }
+})
 
 const sortedList = (list: ParsedContent[]) => {
   if (query?.sort && 'date' in query.sort) {

package/components/content/Menu.vue

@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import type { NavItem } from '@nuxt/content'
+
+const { items, title } = defineProps<{
+  title?: string
+  items: NavItem[]
+}>()
+
+const { navigation } = useContent()
+
+const _links = computed(() => {
+  return items?.map((link) => {
+    if (typeof link === 'string') {
+      return {
+        ...navigation.value?.find(n => n._path === link),
+        _path: link,
+      }
+    }
+
+    return {
+      ...link,
+      _path: link.to || link._path,
+    }
+  })
+})
+</script>
+
+<template>
+  <div>
+    <p
+      v-if="title"
+      class="mb-2 text-base font-semibold"
+    >
+      {{ title }}
+    </p>
+
+    <MenuItem
+      v-for="link in _links"
+      :key="link._path"
+      :link="link"
+    />
+  </div>
+</template>

package/components/content/MenuItem.vue

@@ -0,0 +1,22 @@
+<template>
+  <NuxtLink
+    :to="link._path"
+    class="flex items-center gap-2 rounded-md p-2 text-sm text-foreground/80 hover:bg-muted hover:text-primary"
+    :class="[
+      isActive && 'bg-muted !text-primary',
+      !!link.navTruncate && 'h-8',
+    ]"
+  >
+    <LayoutAsideTreeItemButton :link />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { NavItem } from '@nuxt/content'
+
+const { link } = defineProps<{
+  link: NavItem
+}>()
+
+const isActive = computed(() => link._path === useRoute().path)
+</script>

package/components/content/global/CardGroupEditor.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="[&:not(:first-child)]:mt-5">
+  <div class="[&:not(:first-child)]:mt-4">
     <UiEditorHorizontalControls class="mb--1">
       <UiEditorInput
         v-model="mdcAttrs.data"