@wordup-md/nuxt-layer-shadcn-unocss 0.3.2 → 0.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -67,7 +67,7 @@ Or inline:
67
67
  ```md
68
68
  ---
69
69
  title: Front Matter
70
- description: Front matter attributes used in shadcn-docs-nuxt.
70
+ description: Front matter attributes used in the page.
71
71
  icon: lucide:book-type
72
72
 
73
73
  navTruncate: false
@@ -5,26 +5,25 @@
5
5
  class="space-y-2"
6
6
  >
7
7
  <div class="flex items-center justify-between space-x-4">
8
- <h4 class="text-sm font-semibold">
9
- <ContentSlot
10
- :use="$slots.title"
11
- unwrap="p"
12
- />
13
- {{ title }}
14
- </h4>
15
8
  <UiCollapsibleTrigger as-child>
16
9
  <UiButton
17
10
  variant="ghost"
18
- size="sm"
19
- class="w-9 p-0"
11
+ class="flex justify-between w-full"
20
12
  >
13
+ <h4 class="collapsible__title text-sm font-semibold">
14
+ <ContentSlot
15
+ :use="$slots.title"
16
+ unwrap="p"
17
+ />
18
+ {{ title }}
19
+ </h4>
21
20
  <NuxtIcon name="lucide:chevrons-up-down" />
22
21
  <span class="sr-only">Toggle</span>
23
22
  </UiButton>
24
23
  </UiCollapsibleTrigger>
25
24
  </div>
26
25
 
27
- <UiCollapsibleContent class="space-y-2">
26
+ <UiCollapsibleContent class="collapsible__content space-y-2">
28
27
  <div class="rounded-md border px-4 py-3 font-mono text-sm">
29
28
  <ContentSlot
30
29
  :use="$slots.content"
@@ -40,7 +39,7 @@
40
39
  v-model:open="isOpen"
41
40
  >
42
41
  <UiCollapsibleTrigger class="w-full text-left">
43
- <div class="flex w-full gap-1">
42
+ <div class="collapsible__title flex w-full gap-1">
44
43
  <NuxtIcon
45
44
  name="lucide:chevron-down"
46
45
  class="self-center transition-all"
@@ -55,7 +54,7 @@
55
54
  </span>
56
55
  </div>
57
56
  </UiCollapsibleTrigger>
58
- <UiCollapsibleContent>
57
+ <UiCollapsibleContent class="collapsible__content">
59
58
  <div class="ml-2 border-l py-2 pl-4">
60
59
  <ContentSlot
61
60
  :use="$slots.content"
@@ -77,15 +77,15 @@ const _title = computed(() => {
77
77
  />
78
78
 
79
79
  <UiAlertTitle
80
- class="mb-0 flex flex-row gap-2"
80
+ class="mb-0 flex flex-row gap-2 mr-8 justify-between w-full"
81
81
  >
82
- <span class="font-semibold">{{ _title }}</span>
83
- <span
82
+ <div class="font-semibold leading-snug">{{ _title }}</div>
83
+ <div
84
84
  v-if="size"
85
- class="text-sm font-normal text-muted-foreground"
85
+ class="text-sm font-normal text-muted-foreground whitespace-nowrap"
86
86
  >
87
87
  ( {{ fileSize(size) }} )
88
- </span>
88
+ </div>
89
89
  </UiAlertTitle>
90
90
  </div>
91
91
  </a>
@@ -4,7 +4,7 @@
4
4
  class="app__aside relative overflow-hidden text-sm mt-6 pr-6 md:pr-4 h-[calc(100vh-var(--header-height)-var(--banner-height)-7rem)]"
5
5
  type="hover"
6
6
  >
7
- <template v-if="!tree?.children.length">
7
+ <template v-if="!tree?.children.length && !useMd">
8
8
  <LayoutHeaderNavMobile
9
9
  v-if="isMobile"
10
10
  class="mb-5 border-b pb-2"
@@ -49,10 +49,11 @@ import type { NavItem } from '@nuxt/content'
49
49
  import AsideMenuItem from './AsideMenuItem.vue'
50
50
  import AsideTree2 from './AsideTree2.vue'
51
51
 
52
- const { isMobile, navigation, level = 0 } = defineProps<{
52
+ const { isMobile, navigation, level = 0, useMd = true } = defineProps<{
53
53
  isMobile: boolean
54
54
  navigation?: NavItem[]
55
55
  level?: number
56
+ useMd?: boolean
56
57
  }>()
57
58
 
58
59
  const { navDirFromPath } = useContentHelpers()
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@wordup-md/nuxt-layer-shadcn-unocss",
3
3
  "type": "module",
4
- "version": "0.3.2",
4
+ "version": "0.3.3",
5
5
  "author": "Emmanuel Salomon <emmanuel.salomon@gmail.com>",
6
6
  "main": "./nuxt.config.ts",
7
7
  "repository": {
@@ -16,6 +16,20 @@
16
16
  "wordup-md"
17
17
  ],
18
18
  "license": "MIT",
19
+ "scripts": {
20
+ "dev": "nuxt dev .playground",
21
+ "dev:unpress": "UNPRESS=true nuxt dev .playground",
22
+ "dev:root": "nuxt dev",
23
+ "prepare": "npx nuxt prepare .playground",
24
+ "build": "npx nuxt build .playground",
25
+ "generate": "npx nuxt generate .playground",
26
+ "preview": "npx nuxt preview .playground",
27
+ "lint": "eslint .",
28
+ "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
29
+ "bump": "pnpm build:json-doc && git add public/content-doc.json && bumpp --skip-install --commit --push --tag",
30
+ "release": "pnpm bump && npm publish",
31
+ "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 '{}' +"
32
+ },
19
33
  "devDependencies": {
20
34
  "@nuxt/eslint": "latest",
21
35
  "@nuxt/kit": "^3.17.2",
@@ -55,17 +69,9 @@
55
69
  "tailwind-merge": "^3.2.0"
56
70
  },
57
71
  "packageManager": "pnpm@10.4.1",
58
- "scripts": {
59
- "dev": "nuxt dev .playground",
60
- "dev:unpress": "UNPRESS=true nuxt dev .playground",
61
- "dev:root": "nuxt dev",
62
- "build": "npx nuxt build .playground",
63
- "generate": "npx nuxt generate .playground",
64
- "preview": "npx nuxt preview .playground",
65
- "lint": "eslint .",
66
- "build:json-doc": "tsx scripts/buildContentDoc-cli.ts",
67
- "bump": "pnpm build:json-doc && git add public/content-doc.json && bumpp --skip-install --commit --push --tag",
68
- "release": "pnpm bump && npm publish",
69
- "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 '{}' +"
72
+ "pnpm": {
73
+ "onlyBuiltDependencies": [
74
+ "sharp"
75
+ ]
70
76
  }
71
- }
77
+ }
@@ -61,11 +61,21 @@ const page = computed(() => {
61
61
  }
62
62
  })
63
63
 
64
+ // const parsedMd = ref()
64
65
  watch(page, async (newVal) => {
65
66
  if (newVal?.['navigation.redirect']) {
66
67
  await navigateTo(newVal['navigation.redirect'])
67
68
  }
69
+
70
+ // const { parseMarkdown } = await import('@nuxtjs/mdc/runtime')
71
+ // // console.log(page.value)
72
+ // parsedMd.value = await parseMarkdown(page.value?.content, {
73
+ // // ...props.parserOptions,
74
+ // // toc: props.partial ? false : props.parserOptions?.toc,
75
+ // // contentHeading: props.partial ? false : props.parserOptions?.contentHeading,
76
+ // })
68
77
  }, { immediate: true })
78
+ // const body = computed(() => parsedMd.value?.body)
69
79
  </script>
70
80
 
71
81
  <template>
@@ -86,6 +96,7 @@ watch(page, async (newVal) => {
86
96
  :level="1"
87
97
  :navigation="tree"
88
98
  :is-mobile="false"
99
+ :use-md="false"
89
100
  />
90
101
  </aside>
91
102
 
@@ -26,7 +26,7 @@
26
26
  "title": "Pages",
27
27
  "_id": "content:1.getting-started:2.writing:2.pages.md",
28
28
  "_path": "getting-started/writing/pages",
29
- "content": "\n\n## `^-` Frontmatter\n\nFront-matter is a convention of Markdown-based CMS to provide metadata to documents, like description or title. Remark MDC uses the YAML syntax with `key: value` pairs.\n\nTo define frontmatter, start your document with `---\\n---` section and put your desired data in YAML format within this section.\n\n```md\n---\ntitle: Title of the page\ndescription: meta description of the page\n---\n\n<!-- Content of the page -->\n```\n\nYou can reuse the same frontmatter attributes in the content or in the components props.\\\nAdd `:` before the key to bind the frontmatter value to the component.\\\nOr use the `{{ $doc.key }}` syntax to bind the value of the frontmatter.\n\n::stack\n :::div{.p-4}\n This is the title from the frontmatter: **Title of the page**.\n \n ::::alert\n ---\n :type: key\n ---\n With the property `:type: key`, it displays a **{{ $doc.key }} alert**.\n ::::\n \n Or inline:\n \n :alert[Title of the page]{:icon=\"icon\" :type=\"key\"}\n :::\n\n```mdc\n---\ntitle: Title of the page\nicon: lucide:file\nkey: example\n---\n\nThis is the title from the frontmatter: **{{ $doc.title }}**.\n\n::alert\n---\n:type: key\n---\nWith the property `:type: key`, it displays a **{{ $doc.key }} alert**.\n::\n\nOr inline:\n\n:alert[{{ $doc.title }}]{:type=\"key\" :icon=\"icon\"}\n```\n::\n\n## Available Frontmatter Attributes\n\n```md\n---\ntitle: Front Matter\ndescription: Front matter attributes used in shadcn-docs-nuxt.\nicon: lucide:book-type\n\nnavTruncate: false\nnavBadges:\n - value: New\n type: lime\n\nbadges:\n - value: Docus\n to: https://docus.dev/api/components#alert\n target: _blank\n - value: Source\n icon: lucide:code\n to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/blob/main/components/content/Alert.vue\n target: _blank\n\nauthors:\n - name: Tony Zhang\n username: ZTL-UwU\n avatar: https://www.github.com/ZTL-UwU.png\n to: https://github.com/ZTL-UwU\n target: _blank\n---\n\n<!-- Content of the page -->\n```\n\n## Showcases\n\n::tabs{variant=\"line\"}\n :::stack{label=\"badges\"}\n ![badges-showcase](/front-matter-showcase/badges.png){.w-full}\n \n ```yml\n badges:\n - value: 0.8.10\n - value: Source\n icon: lucide:code\n to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/blob/main/components/content/FileTree.vue\n target: _blank\n ```\n :::\n\n :::stack{label=\"authors\"}\n ![authors-showcase](/front-matter-showcase/authors.png){.w-full}\n \n ```yml\n authors:\n - name: Tony Zhang\n username: ZTL-UwU\n avatar: https://www.github.com/ZTL-UwU.png\n to: https://github.com/ZTL-UwU\n target: _blank\n ```\n :::\n\n :::stack{label=\"navBadges\"}\n ![nav-badges-showcase](/front-matter-showcase/nav-badges.png){.w-full}\n \n ```yml\n navBadges:\n - value: New\n type: lime\n ```\n :::\n::\n\n## Parameters\n\n::field-group\n :::field{name=\"title\" type=\"string\"}\n Title of the page. Defaults to the filename.\n :::\n\n :::field{name=\"description\" type=\"string\"}\n Description of the page. Defaults to the first `<p>` of the page.\n :::\n\n :::field{default-value=\"true\" name=\"navigation\" type=\"boolean\"}\n Define if the page is included in the sidebar. Set it to `false` in `index.md`.\n :::\n\n :::field{name=\"icon\" type=\"string\"}\n The icon shown in the sidebar for the page.\n :::\n\n :::field{name=\"navBadges\" type=\"[]\"}\n A list of badges appended to the end of the sidebar link.\n :::\n\n :::field{default-value=\"true\" name=\"navTruncate\" type=\"boolean\"}\n Whether to truncate the sidebar title.\n :::\n\n :::field{name=\"badges\" type=\"[]\"}\n A list of badges shown at the bottom of page title.\n :::\n\n :::field{name=\"authors\" type=\"[]\"}\n A list of authors shown at the bottom of page title.\n :::\n\n :::field{default-value=\"true\" name=\"toc\" type=\"boolean\"}\n Whether to show the toc section for this page.\n :::\n\n :::field{default-value=\"true\" name=\"aside\" type=\"boolean\"}\n Whether to show the aside section for this page.\n :::\n\n :::field{default-value=\"true\" name=\"editLink\" type=\"boolean\"}\n Whether to show the edit link for this page.\n :::\n\n :::field{default-value=\"true\" name=\"prevNext\" type=\"boolean\"}\n Whether to show the previous & next page buttons.\n :::\n\n :::field{default-value=\"true\" name=\"breadcrumb\" type=\"boolean\"}\n Whether to show the breadcrumb.\n :::\n::\n",
29
+ "content": "\n\n## `^-` Frontmatter\n\nFront-matter is a convention of Markdown-based CMS to provide metadata to documents, like description or title. Remark MDC uses the YAML syntax with `key: value` pairs.\n\nTo define frontmatter, start your document with `---\\n---` section and put your desired data in YAML format within this section.\n\n```md\n---\ntitle: Title of the page\ndescription: meta description of the page\n---\n\n<!-- Content of the page -->\n```\n\nYou can reuse the same frontmatter attributes in the content or in the components props.\\\nAdd `:` before the key to bind the frontmatter value to the component.\\\nOr use the `{{ $doc.key }}` syntax to bind the value of the frontmatter.\n\n::stack\n :::div{.p-4}\n This is the title from the frontmatter: **Title of the page**.\n \n ::::alert\n ---\n :type: key\n ---\n With the property `:type: key`, it displays a **{{ $doc.key }} alert**.\n ::::\n \n Or inline:\n \n :alert[Title of the page]{:icon=\"icon\" :type=\"key\"}\n :::\n\n```mdc\n---\ntitle: Title of the page\nicon: lucide:file\nkey: example\n---\n\nThis is the title from the frontmatter: **{{ $doc.title }}**.\n\n::alert\n---\n:type: key\n---\nWith the property `:type: key`, it displays a **{{ $doc.key }} alert**.\n::\n\nOr inline:\n\n:alert[{{ $doc.title }}]{:type=\"key\" :icon=\"icon\"}\n```\n::\n\n## Available Frontmatter Attributes\n\n```md\n---\ntitle: Front Matter\ndescription: Front matter attributes used in the page.\nicon: lucide:book-type\n\nnavTruncate: false\nnavBadges:\n - value: New\n type: lime\n\nbadges:\n - value: Docus\n to: https://docus.dev/api/components#alert\n target: _blank\n - value: Source\n icon: lucide:code\n to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/blob/main/components/content/Alert.vue\n target: _blank\n\nauthors:\n - name: Tony Zhang\n username: ZTL-UwU\n avatar: https://www.github.com/ZTL-UwU.png\n to: https://github.com/ZTL-UwU\n target: _blank\n---\n\n<!-- Content of the page -->\n```\n\n## Showcases\n\n::tabs{variant=\"line\"}\n :::stack{label=\"badges\"}\n ![badges-showcase](/front-matter-showcase/badges.png){.w-full}\n \n ```yml\n badges:\n - value: 0.8.10\n - value: Source\n icon: lucide:code\n to: https://github.com/wordup-md/nuxt-layer-shadcn-unocss/blob/main/components/content/FileTree.vue\n target: _blank\n ```\n :::\n\n :::stack{label=\"authors\"}\n ![authors-showcase](/front-matter-showcase/authors.png){.w-full}\n \n ```yml\n authors:\n - name: Tony Zhang\n username: ZTL-UwU\n avatar: https://www.github.com/ZTL-UwU.png\n to: https://github.com/ZTL-UwU\n target: _blank\n ```\n :::\n\n :::stack{label=\"navBadges\"}\n ![nav-badges-showcase](/front-matter-showcase/nav-badges.png){.w-full}\n \n ```yml\n navBadges:\n - value: New\n type: lime\n ```\n :::\n::\n\n## Parameters\n\n::field-group\n :::field{name=\"title\" type=\"string\"}\n Title of the page. Defaults to the filename.\n :::\n\n :::field{name=\"description\" type=\"string\"}\n Description of the page. Defaults to the first `<p>` of the page.\n :::\n\n :::field{default-value=\"true\" name=\"navigation\" type=\"boolean\"}\n Define if the page is included in the sidebar. Set it to `false` in `index.md`.\n :::\n\n :::field{name=\"icon\" type=\"string\"}\n The icon shown in the sidebar for the page.\n :::\n\n :::field{name=\"navBadges\" type=\"[]\"}\n A list of badges appended to the end of the sidebar link.\n :::\n\n :::field{default-value=\"true\" name=\"navTruncate\" type=\"boolean\"}\n Whether to truncate the sidebar title.\n :::\n\n :::field{name=\"badges\" type=\"[]\"}\n A list of badges shown at the bottom of page title.\n :::\n\n :::field{name=\"authors\" type=\"[]\"}\n A list of authors shown at the bottom of page title.\n :::\n\n :::field{default-value=\"true\" name=\"toc\" type=\"boolean\"}\n Whether to show the toc section for this page.\n :::\n\n :::field{default-value=\"true\" name=\"aside\" type=\"boolean\"}\n Whether to show the aside section for this page.\n :::\n\n :::field{default-value=\"true\" name=\"editLink\" type=\"boolean\"}\n Whether to show the edit link for this page.\n :::\n\n :::field{default-value=\"true\" name=\"prevNext\" type=\"boolean\"}\n Whether to show the previous & next page buttons.\n :::\n\n :::field{default-value=\"true\" name=\"breadcrumb\" type=\"boolean\"}\n Whether to show the breadcrumb.\n :::\n::\n",
30
30
  "description": "Front matter attributes.",
31
31
  "icon": "lucide:file",
32
32
  "key": "example"
@@ -331,6 +331,13 @@
331
331
  }
332
332
  ]
333
333
  },
334
+ {
335
+ "title": "File Download",
336
+ "_id": "content:3.components:2.docs:file-download.md",
337
+ "_path": "components/docs/file-download",
338
+ "content": "\n\n:file-download{path=\"/logo.svg\"}",
339
+ "icon": "i-mdi-file"
340
+ },
334
341
  {
335
342
  "title": "File Tree",
336
343
  "_id": "content:3.components:2.docs:file-tree.md",
@@ -578,13 +585,6 @@
578
585
  }
579
586
  ]
580
587
  },
581
- {
582
- "title": "File Download",
583
- "_id": "content:3.components:3.page:file-download.md",
584
- "_path": "components/page/file-download",
585
- "content": "\n\n:file-download{path=\"/logo.svg\"}",
586
- "icon": "i-mdi-file"
587
- },
588
588
  {
589
589
  "title": "HeroAlt",
590
590
  "_id": "content:3.components:3.page:hero-alt.md",