@wordup-md/nuxt-layer-shadcn-unocss 0.2.3 → 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/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/file-download.md

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

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/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/layout/Block404.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+
+</script>
+
+<template>
+  <div class="col-span-3 mt-[20vh] flex flex-col items-center justify-center">
+    <div class="col-span-3 mb-12 flex items-center justify-center">
+      <h3 class="scroll-m-20 border-r px-4 py-3 text-2xl font-semibold">
+        404
+      </h3>
+      <span class="scroll-m-20 px-4"> {{ $t('This page could not be found.') }} </span>
+    </div>
+
+    <slot>
+      <ButtonLink
+        to="/"
+        as="a"
+        icon="lucide:home"
+      >
+        {{ $t('Go to home') }}
+      </ButtonLink>
+    </slot>
+  </div>
+</template>

package/components/layout/Footer.vue

@@ -1,6 +1,6 @@
 <template>
   <footer
-    class="site-footer border-t"
+    class="site-footer border-t relative"
     :class="footer.class"
   >
     <div
@@ -33,16 +33,7 @@
         </UiButton>
       </NuxtLink>
 
-      <CmsAuth>
-        <template #default="{ login }">
-          <UiButton
-            variant="ghost"
-            @click="login()"
-          >
-            Admin
-          </UiButton>
-        </template>
-      </CmsAuth>
+      <ButtonLogin />
     </div>
 
     <MDCRenderer

package/i18n/i18n.config.ts

@@ -50,6 +50,14 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': 'required',
+
+      // 404
+      'This page could not be found.': 'This page could not be found.',
+      'Go to home': 'Go to home',
+
+      // Footer
+      'Login': 'Login',
+      'Logout': 'Logout',
     },
     'fr': {
       // Breadcrumb
@@ -98,6 +106,126 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': 'requis',
+
+      // 404
+      'This page could not be found.': 'Cette page n\'existe pas.',
+      'Go to home': 'Retour à l\'accueil',
+
+      // Footer
+      'Login': 'Se connecter',
+      'Logout': 'Se déconnecter',
+    },
+    'es': {
+      // Breadcrumb
+      'Home': 'Inicio',
+
+      // Search
+      'Search...': 'Buscar...',
+      'Search documentation...': 'Buscar en la documentación...',
+      'No results found.': 'No se encontraron resultados.',
+
+      // TOC
+      'On This Page': 'En esta página',
+
+      // Search command
+      'Light': 'Claro',
+      'Dark': 'Oscuro',
+      'System': 'Sistema',
+
+      // Doc footer
+      'Edit this page': 'Editar esta página',
+      'Back to Top': 'Volver al inicio',
+
+      // Collapse Code
+      'Expand': 'Expandir',
+      'Collapse': 'Colapsar',
+
+      // Language Switcher
+      'Language': 'Idioma',
+      'Choose your language': 'Elegir tu idioma',
+
+      // Theme Switcher
+      'Customize': 'Personalizar',
+      'Pick a style and color for the docs.': 'Elige un estilo y color para la documentación.',
+      'Color': 'Color',
+      'Radius': 'Radio',
+      'Theme': 'Tema',
+
+      // Copy Code
+      'Copied to clipboard!': 'Copiado al portapapeles!',
+
+      // Carbon Ads
+      'Please support us by disabling your ad blocker.': 'Por favor, apoyanos desactivando tu bloqueador de publicidad.',
+
+      // Read More
+      'Read more at': 'Leer más en',
+
+      // Field
+      'required': 'requerido',
+
+      // 404
+      'This page could not be found.': 'Esta página no existe.',
+      'Go to home': 'Ir a la página de inicio',
+
+      // Footer
+      'Login': 'Iniciar sesión',
+      'Logout': 'Cerrar sesión',
+    },
+    'de': {
+      // Breadcrumb
+      'Home': 'Startseite',
+
+      // Search
+      'Search...': 'Suchen...',
+      'Search documentation...': 'Dokumentation suchen...',
+      'No results found.': 'Keine Ergebnisse gefunden.',
+
+      // TOC
+      'On This Page': 'In dieser Seite',
+
+      // Search command
+      'Light': 'Hell',
+      'Dark': 'Dunkel',
+      'System': 'System',
+
+      // Doc footer
+      'Edit this page': 'Diese Seite bearbeiten',
+      'Back to Top': 'Nach oben',
+
+      // Collapse Code
+      'Expand': 'Erweitern',
+      'Collapse': 'Einklappen',
+
+      // Language Switcher
+      'Language': 'Sprache',
+      'Choose your language': 'Sprache auswählen',
+
+      // Theme Switcher
+      'Customize': 'Anpassen',
+      'Pick a style and color for the docs.': 'Wählen Sie ein Stil und eine Farbe für die Dokumentation.',
+      'Color': 'Farbe',
+      'Radius': 'Radius',
+      'Theme': 'Thema',
+
+      // Copy Code
+      'Copied to clipboard!': 'In Zwischenablage kopiert!',
+
+      // Carbon Ads
+      'Please support us by disabling your ad blocker.': 'Bitte unterstützen Sie uns, indem Sie Ihren Werbeblocker deaktivieren.',
+
+      // Read More
+      'Read more at': 'Mehr erfahren auf',
+
+      // Field
+      'required': 'erforderlich',
+
+      // 404
+      'This page could not be found.': 'Diese Seite existiert nicht.',
+      'Go to home': 'Zurück zur Startseite',
+
+      // Footer
+      'Login': 'Anmelden',
+      'Logout': 'Abmelden',
     },
     'zh-CN': {
       // Breadcrumb
@@ -146,6 +274,14 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': '必填',
+
+      // 404
+      'This page could not be found.': '此页面不存在。',
+      'Go to home': '返回首页',
+
+      // Footer
+      'Login': '登录',
+      'Logout': '退出',
     },
     'zh-TW': {
       // Breadcrumb
@@ -194,6 +330,14 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': '必填',
+
+      // 404
+      'This page could not be found.': '此页面不存在。',
+      'Go to home': '返回首页',
+
+      // Footer
+      'Login': '登錄',
+      'Logout': '登出',
     },
     'ja': {
       // Breadcrumb
@@ -242,6 +386,10 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': '必須',
+
+      // 404
+      'This page could not be found.': '此页面不存在。',
+      'Go to home': '返回首页',
     },
     'ru': {
       // Breadcrumb
@@ -290,8 +438,15 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': 'обязательно',
-    },
 
+      // 404
+      'This page could not be found.': 'Эта страница не существует.',
+      'Go to home': 'На главную',
+
+      // Footer
+      'Login': 'Войти',
+      'Logout': 'Выйти',
+    },
     'ko': {
       // Breadcrumb
       'Home': '홈',
@@ -339,8 +494,15 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': '필수',
-    },
 
+      // 404
+      'This page could not be found.': '이 페이지는 존재하지 않습니다.',
+      'Go to home': '홈으로 이동',
+
+      // Footer
+      'Login': '로그인',
+      'Logout': '로그아웃',
+    },
     'hi': {
       // Breadcrumb
       'Home': 'होम',
@@ -388,6 +550,14 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': 'आवश्यक',
+
+      // 404
+      'This page could not be found.': 'यह पृष्ठ मौजूद नहीं है।',
+      'Go to home': 'होम पर जाएं',
+
+      // Footer
+      'Login': 'लॉग इन',
+      'Logout': 'लॉग आउट',
     },
     'bn': {
       // Breadcrumb
@@ -436,6 +606,14 @@ export default defineI18nConfig(() => ({
 
       // Field
       'required': 'অবশ্যক',
+
+      // 404
+      'This page could not be found.': 'এই পাতাটি অনুপস্থিত।',
+      'Go to home': 'হোম পর যান',
+
+      // Footer
+      'Login': 'লগ ইন',
+      'Logout': 'লগ আউট',
     },
   },
 }))

package/index.d.ts

@@ -309,7 +309,7 @@ interface DefaultConfig {
      *
      * @default []
      */
-    components: string[]
+    components: string[] | Record<string, unknown>[]
   }
   /**
    * Main content area configuration

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordup-md/nuxt-layer-shadcn-unocss",
   "type": "module",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "author": "Emmanuel Salomon <emmanuel.salomon@gmail.com>",
   "main": "./nuxt.config.ts",
   "repository": {

package/pages/[...slug].vue

@@ -14,15 +14,7 @@
         <LayoutAside :is-mobile="false" />
       </aside>
 
-      <div
-        v-if="!page?.body"
-        class="col-span-3 mt-[20vh] flex items-center justify-center"
-      >
-        <h3 class="scroll-m-20 border-r px-4 py-3 text-2xl font-semibold">
-          404
-        </h3>
-        <span class="scroll-m-20 px-4"> This page could not be found. </span>
-      </div>
+      <LayoutBlock404 v-if="!page?.body" />
 
       <main
         v-else
@@ -76,11 +68,34 @@
         </article>
 
         <div
-          v-if="showToc"
+          v-if="showToc || showSidebarRight"
           class="text-sm hidden lg:block lg:sticky lg:top-[calc(var(--header-height)+var(--banner-height)+1.75rem)] h-min max-h-[calc(100vh-var(--header-height)-var(--banner-height)-6rem)]"
         >
-          <div class="overflow-hidden">
-            <LayoutToc :is-small="false" />
+          <div class="overflow-hidden flex flex-col gap-5">
+            <LayoutToc
+              v-if="showToc"
+              :is-small="false"
+            />
+
+            <div
+              v-if="showSidebarRight && sidebarRightComponents.length"
+              class="border-t pt-5 flex flex-col gap-5"
+            >
+              <!-- <LayoutSubmenuTree
+                  :level="1"
+                /> -->
+
+              <div
+                v-for="component in sidebarRightComponents"
+                :key="component.name"
+              >
+                <Component
+                  :is="component.name"
+                  v-bind="component.props || {}"
+                />
+                <!-- <Component :is="sidebarComponents[component as keyof typeof sidebarComponents]" /> -->
+              </div>
+            </div>
           </div>
         </div>
       </main>
@@ -100,6 +115,26 @@ const showToc = computed(() => {
   return (config.value.toc.enable && page.value?.toc !== false) || !!page.value?.toc
 })
 
+const showSidebarRight = computed(() => {
+  return (config.value.sidebarRight.enable && page.value?.sidebarRight !== false) || !!page.value?.sidebarRight
+})
+
+const sidebarRightComponents = computed(() => {
+  return config.value.sidebarRight.components.map((component) => {
+    if (typeof component === 'string') {
+      return {
+        name: component,
+      }
+    }
+
+    const [name, props] = Object.entries(component)[0]
+    return {
+      name,
+      props,
+    }
+  })
+})
+
 useSeoMeta({
   title: `${page.value?.title ?? '404'} - ${config.value.site.name}`,
   ogTitle: page.value?.title,

package/public/content-doc.json

@@ -209,7 +209,7 @@
             "title": "Badge",
             "_id": "content:3.components:2.docs:badge.md",
             "_path": "components/docs/badge",
-            "content": "\n\n## Usage\n\n::stack\n  ::div{class=\"p-3\"}\n  ::badge\n    Default\n  ::\n  ::badge{size=\"sm\"}\n    Small\n  ::\n  ::badge{size=\"lg\"}\n    Large\n  ::\n  ::\n  ```mdc\n  ::badge\n    Default\n  ::\n  ::badge{size=\"sm\"}\n    Small\n  ::\n  ::badge{size=\"lg\"}\n    Large\n  ::\n  ```\n::\n\n### Types\n\n::stack{label=\"default\"}\n  ::div{class=\"p-3\"}\n    :badge[Default]\n    :badge[Primary]{type=\"primary\"}\n    :badge[Secondary]{type=\"secondary\"}\n    :badge[Info]{type=\"info\"}\n    :badge[Warning]{type=\"warning\"}\n    :badge[Success]{type=\"success\"}\n    :badge[Danger]{type=\"danger\"}\n    :badge[New]{type=\"new\"}\n  ::\n\n  ```mdc\n  :badge[Default]\n  :badge[Info]{type=\"info\"}\n  :badge[Warning]{type=\"warning\"}\n  :badge[Success]{type=\"success\"}\n  :badge[Danger]{type=\"danger\"}\n  :badge[New]{type=\"new\"}\n  ```\n::\n\n### Variants\n\n::stack{label=\"default\"}\n  ::div{class=\"p-3\"}\n    :badge[Default]{variant=\"fill\"}\n    :badge[Primary]{type=\"primary\" variant=\"fill\"}\n    :badge[Secondary]{type=\"secondary\" variant=\"fill\"}\n    :badge[Info]{type=\"info\" variant=\"fill\"}\n    :badge[Warning]{type=\"warning\" variant=\"fill\"}\n    :badge[Success]{type=\"success\" variant=\"fill\"}\n    :badge[Danger]{type=\"danger\" variant=\"fill\"}\n    :badge[New]{type=\"new\" variant=\"fill\"}\n  ::\n\n  ::div{class=\"p-3\"}\n    :badge[Default]{variant=\"outline\"}\n    :badge[Primary]{type=\"primary\" variant=\"outline\"}\n    :badge[Secondary]{type=\"secondary\" variant=\"outline\"}\n    :badge[Info]{type=\"info\" variant=\"outline\"}\n    :badge[Warning]{type=\"warning\" variant=\"outline\"}\n    :badge[Success]{type=\"success\" variant=\"outline\"}\n    :badge[Danger]{type=\"danger\" variant=\"outline\"}\n    :badge[New]{type=\"new\" variant=\"outline\"}\n  ::\n\n  ::div{class=\"p-3\"}\n    :badge[Default]{variant=\"text\"}\n    :badge[Primary]{type=\"primary\" variant=\"text\"}\n    :badge[Secondary]{type=\"secondary\" variant=\"text\"}\n    :badge[Info]{type=\"info\" variant=\"text\"}\n    :badge[Warning]{type=\"warning\" variant=\"text\"}\n    :badge[Success]{type=\"success\" variant=\"text\"}\n    :badge[Danger]{type=\"danger\" variant=\"text\"}\n    :badge[New]{type=\"new\" variant=\"text\"}\n  ::\n\n  ```mdc\n  :badge[...]{type=\"...\" variant=\"fill\"}\n  :badge[...]{type=\"...\" variant=\"outline\"}\n  :badge[...]{type=\"...\" variant=\"text\"}\n  ```\n::\n\n### Link\n\n::stack\n  ::div{class=\"p-3\"}\n  ::badge{variant=\"outline\" type=\"info\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n  Link\n  ::\n  ::\n  ```mdc\n  ::badge{variant=\"outline\" type=\"info\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n  Link\n  ::\n  ```\n::\n\n## Props\n\n::field-group\n  :field{name=\"type\" type=\"'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'\" default-value=\"'default'\"}\n  :field{name=\"variant\" type=\"'default' | 'secondary' | 'destructive' | 'outline'\" default-value=\"'default'\"}\n  :field{name=\"size\" type=\"'md' | 'sm'\" default-value=\"'md'\"}\n  :field{name=\"to\" type=\"string\"}[Link URL]\n  :field{name=\"target\" type=\"Target\"}[A `target` attribute value to apply on the link]\n::\n",
+            "content": "\n\n## Usage\n\n::stack\n  ::div{class=\"p-3\"}\n  ::badge\n    Default\n  ::\n  ::badge{size=\"sm\"}\n    Small\n  ::\n  ::badge{size=\"lg\"}\n    Large\n  ::\n  ::\n  ```mdc\n  ::badge\n    Default\n  ::\n  ::badge{size=\"sm\"}\n    Small\n  ::\n  ::badge{size=\"lg\"}\n    Large\n  ::\n  ```\n::\n\n### Types\n\n::stack\n  ::div{class=\"p-3\"}\n    :badge[Default]\n    :badge[Primary]{type=\"primary\"}\n    :badge[Secondary]{type=\"secondary\"}\n    :badge[Info]{type=\"info\"}\n    :badge[Warning]{type=\"warning\"}\n    :badge[Success]{type=\"success\"}\n    :badge[Danger]{type=\"danger\"}\n    :badge[New]{type=\"new\"}\n  ::\n\n  ```mdc\n  :badge[Default]\n  :badge[Info]{type=\"info\"}\n  :badge[Warning]{type=\"warning\"}\n  :badge[Success]{type=\"success\"}\n  :badge[Danger]{type=\"danger\"}\n  :badge[New]{type=\"new\"}\n  ```\n::\n\n### Variants\n\n|Default|Fill|Outline|Text|\n|---|---|---|---|\n|:badge[Default]|:badge[Default]{variant=\"fill\"}|:badge[Default]{variant=\"outline\"}|:badge[Default]{variant=\"text\"}|\n|:badge[Primary]{type=\"primary\"}|:badge[Primary]{type=\"primary\" variant=\"fill\"}|:badge[Primary]{type=\"primary\" variant=\"outline\"}|:badge[Primary]{type=\"primary\" variant=\"text\"}|\n|:badge[Secondary]{type=\"secondary\"}|:badge[Secondary]{type=\"secondary\" variant=\"fill\"}|:badge[Secondary]{type=\"secondary\" variant=\"outline\"}|:badge[Secondary]{type=\"secondary\" variant=\"text\"}|\n|:badge[Info]{type=\"info\"}|:badge[Info]{type=\"info\" variant=\"fill\"}|:badge[Info]{type=\"info\" variant=\"outline\"}|:badge[Info]{type=\"info\" variant=\"text\"}|\n|:badge[Warning]{type=\"warning\"}|:badge[Warning]{type=\"warning\" variant=\"fill\"}|:badge[Warning]{type=\"warning\" variant=\"outline\"}|:badge[Warning]{type=\"warning\" variant=\"text\"}|\n|:badge[Success]{type=\"success\"}|:badge[Success]{type=\"success\" variant=\"fill\"}|:badge[Success]{type=\"success\" variant=\"outline\"}|:badge[Success]{type=\"success\" variant=\"text\"}|\n|:badge[Danger]{type=\"danger\"}|:badge[Danger]{type=\"danger\" variant=\"fill\"}|:badge[Danger]{type=\"danger\" variant=\"outline\"}|:badge[Danger]{type=\"danger\" variant=\"text\"}|\n|:badge[New]{type=\"new\"}|:badge[New]{type=\"new\" variant=\"fill\"}|:badge[New]{type=\"new\" variant=\"outline\"}|:badge[New]{type=\"new\" variant=\"text\"}|\n\n**Examples:**\n\n```mdc\n:badge[Some text]{type=\"info\" variant=\"fill\"}\n:badge[Some text]{type=\"danger\" variant=\"outline\"}\n:badge[Some text]{type=\"new\" variant=\"text\"}\n```\n\n### Link\n\n::stack\n  ::div{class=\"p-3\"}\n  ::badge{variant=\"outline\" type=\"info\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n  Link\n  ::\n  ::\n  ```mdc\n  ::badge{variant=\"outline\" type=\"info\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n  Link\n  ::\n  ```\n::\n\n## Props\n\n::field-group\n  :field{name=\"title\" type=\"string\"}[Can be used to set the label of the badge instead of the content]\n  :field{name=\"type\" type=\"'default' | 'info' | 'warning' | 'success' | 'danger' | 'lime'\" default-value=\"'default'\"}\n  :field{name=\"variant\" type=\"'default' | 'secondary' | 'destructive' | 'outline'\" default-value=\"'default'\"}\n  :field{name=\"size\" type=\"'md' | 'sm'\" default-value=\"'md'\"}\n  :field{name=\"to\" type=\"string\"}[Link URL]\n  :field{name=\"target\" type=\"Target\"}[A `target` attribute value to apply on the link]\n::\n",
             "icon": "lucide:badge",
             "badges": [
               {
@@ -229,7 +229,7 @@
             "title": "Button Link",
             "_id": "content:3.components:2.docs:button-link.md",
             "_path": "components/docs/button-link",
-            "content": "\n\n## Usage\n\n::stack\n  ::div{class=\"p-3 flex gap-4\"}\n  ::button-link{right-icon=\"lucide:arrow-up-right\" to=\"/getting-started\" target=\"_blank\"}\n    Get Started\n  ::\n  ::button-link{left-icon=\"lucide:github\" variant=\"outline\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n    GitHub\n  ::\n  ::button-link{left-icon=\"lucide:ghost\" variant=\"ghost\" href=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" blank}\n    Ghost\n  ::\n  ::\n  ```mdc\n  ::button-link{right-icon=\"lucide:arrow-up-right\" to=\"/getting-started\" target=\"_blank\"}\n    Get Started\n  ::\n  ::button-link{left-icon=\"lucide:github\" variant=\"outline\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n    GitHub\n  ::\n  ::button-link{left-icon=\"lucide:ghost\" variant=\"ghost\" href=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" blank}\n    Ghost\n  ::\n  ```\n::\n\n## Props\n\n::field-group\n  :field{name=\"variant\" type=\"'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'\" default-value=\"'default'\"}\n  :field{name=\"size\" type=\"'default' | 'icon' | 'sm' | 'xs' | 'lg'\" default-value=\"'default'\"}\n  :field{name=\"leftIcon\" type=\"string\"}[Icon on the left]\n  :field{name=\"rightIcon\" type=\"string\"}[Icon on the right]\n  :field{name=\"to\" type=\"string\"}[Link URL]\n  :field{name=\"href\" type=\"string\"}[Alias to `to`]\n  :field{name=\"target\" type=\"Target\"}[A `target` attribute value to apply on the link]\n  :field{name=\"blank\" type=\"boolean\"}[Alias to `target='_blank'`]\n::\n",
+            "content": "\n\n## Usage\n\n::stack\n  ::div{class=\"p-3 flex gap-4\"}\n  ::button-link{icon=\"lucide:github\" variant=\"outline\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n    GitHub\n  ::\n  ::button-link{icon=\"lucide:ghost\" variant=\"ghost\" href=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" blank}\n    Ghost\n  ::\n  ::button-link{trailing-icon=\"lucide:arrow-up-right\" to=\"/getting-started\" target=\"_blank\"}\n    Get Started\n  ::\n  ::\n  ```mdc\n  ::button-link{icon=\"lucide:github\" variant=\"outline\" to=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" target=\"_blank\"}\n    GitHub\n  ::\n  ::button-link{icon=\"lucide:ghost\" variant=\"ghost\" href=\"https://github.com/wordup-md/nuxt-layer-shadcn-unocss\" blank}\n    Ghost\n  ::\n  ::button-link{trailing-icon=\"lucide:arrow-up-right\" to=\"/getting-started\" target=\"_blank\"}\n    Get Started\n  ::\n  ```\n::\n\n## Props\n\n::field-group\n  :field{name=\"variant\" type=\"'default' | 'secondary' | 'link' | 'destructive' | 'outline' | 'ghost'\" default-value=\"'default'\"}\n  :field{name=\"size\" type=\"'default' | 'icon' | 'sm' | 'xs' | 'lg'\" default-value=\"'default'\"}\n  :field{name=\"icon\" type=\"string\"}[Icon on the left]\n  :field{name=\"trailingIcon\" type=\"string\"}[Icon on the right]\n  :field{name=\"to\" type=\"string\"}[Link URL]\n  :field{name=\"href\" type=\"string\"}[Alias to `to`]\n  :field{name=\"target\" type=\"Target\"}[A `target` attribute value to apply on the link]\n  :field{name=\"blank\" type=\"boolean\"}[Alias to `target='_blank'`]\n::\n",
             "icon": "lucide:external-link",
             "badges": [
               {
@@ -578,6 +578,13 @@
               }
             ]
           },
+          {
+            "title": "File Download",
+            "_id": "content:3.components:3.page:file-download.md",
+            "_path": "components/page/file-download",
+            "content": "\n\n:file-download{path=\"/logo.svg\"}",
+            "icon": "i-mdi-file"
+          },
           {
             "title": "HeroAlt",
             "_id": "content:3.components:3.page:hero-alt.md",
@@ -794,7 +801,7 @@
     "_path": "development"
   },
   {
-    "title": "Home",
+    "title": "Layout",
     "_id": "content:layout.md",
     "_path": "layout",
     "content": "\n\n::hero\n---\nactions:\n  - name: Get Started\n    to: /getting-started/introduction\n  - name: GitHub\n    variant: outline\n    to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss\n    leftIcon: lucide:github\nannouncement:\n  title: Release v0.8.13\n  icon: 🎉\n  to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/releases/latest\n  target: _blank\nclass: bg-gradient-to-b from-primary/20 to-transparent full-width full-content\n---\n#title\nEffortless and Beautiful Template.\n\n#description\nBeautifully designed Nuxt Content template built with :br\n[shadcn-vue](https://www.shadcn-vue.com) and [unocss](https://unocss.dev).\n::\n\n::div{.bg-gray-100}\ntest div\n::\n\n::section{.bg-gray-100}\ntest section\n::\n\n::prose-section{.bg-gray-100}\n  :::card\n  lorem ipsum\n  :::\n\n  :::card\n  auiea\n  :::\n::\n\nlatuinerst nrst auiea Quisque rutrum. Praesent congue erat at massa. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Duis vel nibh at velit scelerisque suscipit. Praesent nec nisl a purus blandit viverra.\n\n::prose-section{.wide-content.bg-gray-100}\nsection wide-content\n::\n\n::prose-section{.full-width.bg-gray-100}\nsection full-width\n::\n\n::prose-section{.bg-gray-100.full-width.wide-content}\nsection full-width wide-content\n::\n\n::prose-section{.bg-gray-100.full-width.full-content}\nsection full-width full-content\n::\n",

package/.playground/content/_menu-footer.md

@@ -1,12 +0,0 @@
----
-title: test
----
-
-::div{class="hidden justify-between gap-2 w-full"}
-[Shadcn Site](/)
-[Shadcn Site](/)
-::
-
-::div
-Made with ❤️ by [**Emmanuel Salomon**](https://github.com/ManUtopiK/)
-::