@wordup-md/nuxt-layer-shadcn-unocss 0.2.10 → 0.2.12

package/.playground/app.config.ts

@@ -1,7 +1,7 @@
 export default defineAppConfig({
   shadcnDocs: {
     site: {
-      name: 'Shadcn Site',
+      name: 'WordUp Demo Site',
       description: 'Beautifully designed Nuxt Content template built with shadcn-vue and unocss.',
       ogImage: '/hero.png',
       ogImageComponent: 'ShadcnDocs',
@@ -25,7 +25,7 @@ export default defineAppConfig({
       border: true,
     },
     header: {
-      title: 'Shadcn Site',
+      title: 'WordUp Demo Site',
       showTitle: true,
       logo: {
         light: '/logo.svg',
@@ -147,7 +147,7 @@ export default defineAppConfig({
       },
     },
     footer: {
-      credits: 'Made with ❤️ by [**Emmanuel Salomon**](https://github.com/ManUtopiK/) with [WordUp](https://wordup.md)',
+      credits: 'Made with ❤️ by [Emmanuel Salomon](https://github.com/ManUtopiK/) with :icon{.rotate-x-180.translate-y-1 name="i-pajamas:markdown-mark-solid"} [WordUp.md](https://wordup.md)',
       links: [
         {
           title: 'shadcn-vue',

package/.playground/content/1.getting-started/2.writing/1.markdown.md

@@ -1,5 +1,5 @@
 ---
-title: Markdown
+title: Markdown is fun!
 description: How to write content with Markdown syntax
 icon: i-pajamas:markdown-mark-solid
 ---
@@ -10,26 +10,14 @@ Its goal is to allow users to write using an easy-to-read and easy-to-write plai
 
 This minimalism makes Markdown ideal for documentation, web writing, collaborative editing, bots and LLMs processing, AI content generation...
 
-::div{.w-full.flex.items-center.gap-2.mt-5}
-:div[:robot:]{.text-3xl.mt--2}
-
-:div[:heart:]{.text-xl}
-
-:icon{name="vscode-icons:file-type-markdown" .text-4xl}
-::
-
-::alert
----
-to: /content-elements
-icon: lucide:box
----
+::alert{icon="lucide:box" to="/content-elements"}
 Learn more about **markdown syntax**, and how to use it.
 ::
 
 ::alert
 ---
-to: https://daringfireball.net/projects/markdown/
 icon: i-pajamas:markdown-mark-solid
+to: https://daringfireball.net/projects/markdown/
 ---
 Open the original **Markdown specification**.
 ::
@@ -40,17 +28,17 @@ MarkDown Components (MDC) supercharges regular Markdown to allow writing interac
 
 ::alert
 ---
-to: /components
 icon: lucide:box
+to: /components
 ---
 Learn more about **MDC components**, and how to use them.
 ::
 
 ::alert
 ---
-to: https://content.nuxt.com/usage/markdown
-target: _blank
 icon: lucide:arrow-big-down
+target: _blank
+to: https://content.nuxt.com/usage/markdown
 ---
 Read the detailed MDC usage guide in the **Nuxt Content** Docs.
 ::

package/.playground/content/test-card.md

@@ -1,6 +1,7 @@
 ---
 title: Card test
 toc: false
+navigation: false
 ---
 
 ## Basic

package/.playground/content/test.md

@@ -1,5 +1,6 @@
 ---
-title: Test
+title: AI
+icon: i-lucide:bot
 layout: editorial
 header:
   position: over

package/.playground/content/test2.md

@@ -1,5 +1,6 @@
 ---
 title: test 2
+navigation: false
 ---
 
 ::mdc-example

package/.playground/content/test3.md

@@ -4,6 +4,7 @@ layout: editorial
 toc: false
 aside: false
 breadcrumb: false
+navigation: false
 ---
 
 ## Basic

package/.playground/nuxt.config.ts

@@ -39,7 +39,7 @@ export default defineNuxtConfig({
   },
 
   i18n: {
-    defaultLocale: 'fr',
+    defaultLocale: 'en',
   },
 
   unocss: {
@@ -47,6 +47,7 @@ export default defineNuxtConfig({
   },
 
   unpress: {
-    // autoMountIfDevMode: false,
+    autoMountIfDevMode: true,
+    allowMountWithoutLogin: true,
   },
 })

package/components/layout/Banner.vue

@@ -11,7 +11,7 @@
       <NuxtLink
         :to
         class="container flex items-stretch w-full md:px-8 h-full"
-        @click.stop="navigate"
+        @click.prevent.stop="navigate"
       >
         <div class="hidden lg:block" />
         <MDC
@@ -20,7 +20,7 @@
         />
       </NuxtLink>
 
-      <div class="absolute right-0 top-0 w-full h-full">
+      <div class="absolute right-0 top-0 h-full">
         <div class="container h-full flex items-stretch justify-end">
           <UiButton
             v-if="showClose"

package/components/ui/combobox/Combobox.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'reka-ui'
+import { ComboboxRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot v-bind="forwarded">
+    <slot />
+  </ComboboxRoot>
+</template>

package/components/ui/combobox/ComboboxAnchor.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>

package/components/ui/combobox/ComboboxEmpty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxEmpty } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxEmpty
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>

package/components/ui/combobox/ComboboxGroup.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel
+      v-if="heading"
+      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
+    >
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

package/components/ui/combobox/ComboboxInput.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxInputEmits, ComboboxInputProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxInput, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxInput
+    v-bind="forwarded"
+    :class="cn('flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxInput>
+</template>

package/components/ui/combobox/ComboboxItem.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default gap-2 select-none justify-between items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

package/components/ui/combobox/ComboboxList.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxContent, ComboboxPortal, ComboboxViewport, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal>
+    <ComboboxContent
+      v-bind="forwarded"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <ComboboxViewport>
+        <slot />
+      </ComboboxViewport>
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>

package/components/ui/combobox/ComboboxSeparator.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>

package/components/ui/combobox/ComboboxTrigger.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxTrigger
+    v-bind="forwarded"
+    :class="cn('', props.class)"
+    tabindex="0"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>

package/components/ui/combobox/index.ts

@@ -0,0 +1,10 @@
+export { default as Combobox } from './Combobox.vue'
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
+export { default as ComboboxGroup } from './ComboboxGroup.vue'
+export { default as ComboboxInput } from './ComboboxInput.vue'
+export { default as ComboboxItem } from './ComboboxItem.vue'
+export { default as ComboboxList } from './ComboboxList.vue'
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
+
+export { ComboboxCancel, ComboboxItemIndicator, ComboboxTrigger } from 'reka-ui'

package/composables/useI18nDocs.ts

@@ -30,7 +30,7 @@ export function useI18nDocs() {
       }
       return nav._path.startsWith(`/${locale.value}`)
     })
-    console.log(locale.value, 'aa', !!defaultLocale, 'pp', filteredNav)
+
     return locale.value === defaultLocale ? filteredNav : filteredNav[0]?.children
   })
 

package/nuxt.config.ts

@@ -14,8 +14,8 @@ export default defineNuxtConfig({
     '@nuxt/icon',
     '@nuxtjs/color-mode',
     '@nuxtjs/i18n',
-    '@unpress/nuxt-module',
-    // '../../../unpress/packages/nuxt-module/src/module',
+    // '@unpress/nuxt-module',
+    '../../../unpress/packages/nuxt-module/src/module',
     // 'nuxt-og-image',
   ],
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@wordup-md/nuxt-layer-shadcn-unocss",
   "type": "module",
-  "version": "0.2.10",
+  "version": "0.2.12",
   "author": "Emmanuel Salomon <emmanuel.salomon@gmail.com>",
   "main": "./nuxt.config.ts",
   "repository": {
@@ -16,6 +16,19 @@
     "wordup-md"
   ],
   "license": "MIT",
+  "scripts": {
+    "dev": "nuxi dev .playground",
+    "dev:root": "nuxi dev",
+    "prepare": "nuxt prepare .playground",
+    "build": "nuxt build .playground",
+    "generate": "nuxt generate .playground",
+    "preview": "nuxt preview .playground",
+    "lint": "eslint .",
+    "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
+    "bump": "pnpm build:json-doc && bumpp --skip-install --commit --push --tag",
+    "release": "pnpm bump && npm publish",
+    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name '.nuxt' -type d -prune -exec rm -rf '{}' + && find . -name '.output' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -prune -exec rm -rf '{}' +"
+  },
   "devDependencies": {
     "@nuxt/eslint": "latest",
     "@nuxt/kit": "^3.17.2",
@@ -54,16 +67,9 @@
     "tailwind-merge": "^3.2.0"
   },
   "packageManager": "pnpm@10.4.1",
-  "scripts": {
-    "dev": "nuxi dev .playground",
-    "dev:root": "nuxi dev",
-    "build": "nuxt build .playground",
-    "generate": "nuxt generate .playground",
-    "preview": "nuxt preview .playground",
-    "lint": "eslint .",
-    "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
-    "bump": "pnpm build:json-doc && bumpp --skip-install --commit --push --tag",
-    "release": "pnpm bump && npm publish",
-    "clean": "find . -name 'node_modules' -type d -prune -exec rm -rf '{}' + && find . -name '.nuxt' -type d -prune -exec rm -rf '{}' + && find . -name '.output' -type d -prune -exec rm -rf '{}' + && find . -name 'dist' -prune -exec rm -rf '{}' +"
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp"
+    ]
   }
-}
+}

package/public/content-doc.json

@@ -15,10 +15,10 @@
         "title": "Writing",
         "children": [
           {
-            "title": "Markdown",
+            "title": "Markdown is fun!",
             "_id": "content:1.getting-started:2.writing:1.markdown.md",
             "_path": "getting-started/writing/markdown",
-            "content": "\n\nMarkdown is a lightweight markup language designed to provide a simple and readable syntax with minimal markup.\n\nIts goal is to allow users to write using an easy-to-read and easy-to-write plain text that can be easily converted to structurally valid HTML or other rich text formats, focusing on content over formatting.\n\nThis minimalism makes Markdown ideal for documentation, web writing, collaborative editing, bots and LLMs processing, AI content generation...\n\n::div{.w-full.flex.items-center.gap-2.mt-5}\n:div[:robot:]{.text-3xl.mt--2}\n\n:div[:heart:]{.text-xl}\n\n:icon{name=\"vscode-icons:file-type-markdown\" .text-4xl}\n::\n\n::alert\n---\nto: /content-elements\nicon: lucide:box\n---\nLearn more about **markdown syntax**, and how to use it.\n::\n\n::alert\n---\nto: https://daringfireball.net/projects/markdown/\nicon: i-pajamas:markdown-mark-solid\n---\nOpen the original **Markdown specification**.\n::\n\n## MarkDown Components (MDC)\n\nMarkDown Components (MDC) supercharges regular Markdown to allow writing interactive components.\n\n::alert\n---\nto: /components\nicon: lucide:box\n---\nLearn more about **MDC components**, and how to use them.\n::\n\n::alert\n---\nto: https://content.nuxt.com/usage/markdown\ntarget: _blank\nicon: lucide:arrow-big-down\n---\nRead the detailed MDC usage guide in the **Nuxt Content** Docs.\n::\n",
+            "content": "\n\nMarkdown is a lightweight markup language designed to provide a simple and readable syntax with minimal markup.\n\nIts goal is to allow users to write using an easy-to-read and easy-to-write plain text that can be easily converted to structurally valid HTML or other rich text formats, focusing on content over formatting.\n\nThis minimalism makes Markdown ideal for documentation, web writing, collaborative editing, bots and LLMs processing, AI content generation...\n\n::alert{icon=\"lucide:box\" to=\"/content-elements\"}\nLearn more about **markdown syntax**, and how to use it.\n::\n\n::alert\n---\nicon: i-pajamas:markdown-mark-solid\nto: https://daringfireball.net/projects/markdown/\n---\nOpen the original **Markdown specification**.\n::\n\n## MarkDown Components (MDC)\n\nMarkDown Components (MDC) supercharges regular Markdown to allow writing interactive components.\n\n::alert\n---\nicon: lucide:box\nto: /components\n---\nLearn more about **MDC components**, and how to use them.\n::\n\n::alert\n---\nicon: lucide:arrow-big-down\ntarget: _blank\nto: https://content.nuxt.com/usage/markdown\n---\nRead the detailed MDC usage guide in the **Nuxt Content** Docs.\n::\n",
             "description": "How to write content with Markdown syntax",
             "icon": "i-pajamas:markdown-mark-solid"
           },