From 72ca91bf74a2bd49b439a4cba4d636efe4a143b1 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 11:46:24 +0100 Subject: [PATCH 01/15] feat: add prose components documentation --- content/2.essentials/.navigation.yml | 1 + content/2.essentials/markdown-syntax.md | 12 ++++++++++++ 2 files changed, 13 insertions(+) create mode 100644 content/2.essentials/.navigation.yml create mode 100644 content/2.essentials/markdown-syntax.md diff --git a/content/2.essentials/.navigation.yml b/content/2.essentials/.navigation.yml new file mode 100644 index 0000000..399490d --- /dev/null +++ b/content/2.essentials/.navigation.yml @@ -0,0 +1 @@ +title: Essential diff --git a/content/2.essentials/markdown-syntax.md b/content/2.essentials/markdown-syntax.md new file mode 100644 index 0000000..491e0c9 --- /dev/null +++ b/content/2.essentials/markdown-syntax.md @@ -0,0 +1,12 @@ +--- +title: Markdown Syntax +description: Text, title, and styling in standard markdown. +--- + +## Titles + +Best used for page titles, headers, and sidebars. + +```md +## Title +``` From dfbe53885bb0197148a68ab01466fa2fe2e991e7 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 12:09:07 +0100 Subject: [PATCH 02/15] up --- content/2.essentials/1.markdown-syntax.md | 126 ++++++++++++++++++++++ content/2.essentials/2.code-blacks.md | 4 + content/2.essentials/3.images-embeds.md | 4 + content/2.essentials/markdown-syntax.md | 12 --- 4 files changed, 134 insertions(+), 12 deletions(-) create mode 100644 content/2.essentials/1.markdown-syntax.md create mode 100644 content/2.essentials/2.code-blacks.md create mode 100644 content/2.essentials/3.images-embeds.md delete mode 100644 content/2.essentials/markdown-syntax.md diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md new file mode 100644 index 0000000..43f7bb0 --- /dev/null +++ b/content/2.essentials/1.markdown-syntax.md @@ -0,0 +1,126 @@ +--- +title: Markdown Syntax +description: Text, title, and styling in standard markdown. +--- + +## Titles + +Best used for page titles, headers, and sidebars. + +::code-preview{class="[&>div]:*:my-0"} + +## Titles + +#code + +```mdc +## Titles +``` + +:: + +### Subtitles + +Best used for page titles, headers, and sidebars. + +::code-preview{class="[&>div]:*:my-0"} + +### Subtitles + +#code + +```mdc +### Subtitles +``` + +:: + +::tip +Each title and subtitle creates an anchor and shows up automatically in the table of contents. +:: + +## Text Formatting + +Nuxt UI Pro supports most markdown formatting options. + +| Style | How to use | Result | +|--------|--------------|------------| +| Bold | `**bold**` | **Bold** | +| Italic | `*italic*` | *Italic* | +| Strike | `~~strike~~` | ~~Strike~~ | + +You can also combine them: + +| Style | How to use | Result | +|---------------|---------------------|-------------------| +| Bold Italic | `**_bold italic_**` | **_Bold Italic_** | +| Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | +| Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | + +## Blockquotes + +### Singleline + +To create a blockquote, add a `>` in front of a paragraph. + +::code-preview{class="[&>div]:*:my-0"} + +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. + +#code + +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +``` + +:: + +### Multiline + +::code-preview{class="[&>div]:*:my-0"} + +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. + +#code + +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. +``` + +:: + +## Links + +To create a link, wrap the link text in brackets `[]()`. + +::code-preview{class="[&>div]:*:my-0"} + +[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) + +#code + +```mdc +[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) +``` + +:: + +### Links to other pages + +Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`. + +::code-preview{class="[&>div]:*:my-0"} + +[Installation](/getting-started/installation) + +#code + +```mdc +[Installation](/getting-started/installation) +``` + +:: diff --git a/content/2.essentials/2.code-blacks.md b/content/2.essentials/2.code-blacks.md new file mode 100644 index 0000000..79f0cf1 --- /dev/null +++ b/content/2.essentials/2.code-blacks.md @@ -0,0 +1,4 @@ +--- +title: Code Blocks +description: Display inline code and code blocks +--- diff --git a/content/2.essentials/3.images-embeds.md b/content/2.essentials/3.images-embeds.md new file mode 100644 index 0000000..c0a8c16 --- /dev/null +++ b/content/2.essentials/3.images-embeds.md @@ -0,0 +1,4 @@ +--- +title: Images and Embeds +description: Add image, video, and other HTML elements +--- diff --git a/content/2.essentials/markdown-syntax.md b/content/2.essentials/markdown-syntax.md deleted file mode 100644 index 491e0c9..0000000 --- a/content/2.essentials/markdown-syntax.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: Markdown Syntax -description: Text, title, and styling in standard markdown. ---- - -## Titles - -Best used for page titles, headers, and sidebars. - -```md -## Title -``` From 8e27415a03060a5df5d620c126fc5d92e96c9139 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 12:09:49 +0100 Subject: [PATCH 03/15] update nuxt content --- package.json | 2 +- pnpm-lock.yaml | 235 +++++++++++++++++++++++++++++++++++-------------- 2 files changed, 171 insertions(+), 66 deletions(-) diff --git a/package.json b/package.json index c7bdc2c..fc9a6b9 100644 --- a/package.json +++ b/package.json @@ -15,7 +15,7 @@ "@iconify-json/lucide": "^1.2.26", "@iconify-json/simple-icons": "^1.2.24", "@iconify-json/vscode-icons": "^1.2.14", - "@nuxt/content": "^3.1.1", + "@nuxt/content": "^3.2.2", "@nuxt/image": "^1.9.0", "@nuxt/ui-pro": "3.0.0-alpha.13", "nuxt": "^3.15.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7311d3a..19da9b4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -18,8 +18,8 @@ importers: specifier: ^1.2.14 version: 1.2.14 '@nuxt/content': - specifier: ^3.1.1 - version: 3.1.1(@libsql/client@0.14.0)(magicast@0.3.5)(typescript@5.7.3) + specifier: ^3.2.2 + version: 3.2.2(@libsql/client@0.14.0)(magicast@0.3.5)(typescript@5.7.3) '@nuxt/image': specifier: ^1.9.0 version: 1.9.0(db0@0.2.3(@libsql/client@0.14.0)(better-sqlite3@11.8.1))(ioredis@5.4.2)(magicast@0.3.5) @@ -776,8 +776,8 @@ packages: engines: {node: ^16.10.0 || >=18.0.0} hasBin: true - '@nuxt/content@3.1.1': - resolution: {integrity: sha512-mq4hGq4W/vnPDjquaM6NyXxY7w5irEdw92JfjcgOoSLkFFW3S3ikN9G33zkBwOP35vGReFj8ckiiovYLHFfZUg==} + '@nuxt/content@3.2.2': + resolution: {integrity: sha512-ug3UadxHTXXfaQpgBAA3OkrLidjxDi4XdLRjeoFfGhx2sWT77YzbytEWYA2VkxtqkZ9y4BzCs9xfum9m1/AcKg==} peerDependencies: '@electric-sql/pglite': '*' '@libsql/client': '*' @@ -1260,32 +1260,32 @@ packages: '@shikijs/core@1.29.1': resolution: {integrity: sha512-Mo1gGGkuOYjDu5H8YwzmOuly9vNr8KDVkqj9xiKhhhFS8jisAtDSEWB9hzqRHLVQgFdA310e8XRJcW4tYhRB2A==} - '@shikijs/core@2.3.2': - resolution: {integrity: sha512-s7vyL3LzUKm3Qwf36zRWlavX9BQMZTIq9B1almM63M5xBuSldnsTHCmsXzoF/Kyw4k7Xgas7yAyJz9VR/vcP1A==} + '@shikijs/core@2.5.0': + resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==} '@shikijs/engine-javascript@1.29.1': resolution: {integrity: sha512-Hpi8k9x77rCQ7F/7zxIOUruNkNidMyBnP5qAGbLFqg4kRrg1HZhkB8btib5EXbQWTtLb5gBHOdBwshk20njD7Q==} - '@shikijs/engine-javascript@2.3.2': - resolution: {integrity: sha512-w3IEMu5HfL/OaJTsMbIfZ1HRPnWVYRANeDtmsdIIEgUOcLjzFJFQwlnkckGjKHekEzNqlMLbgB/twnfZ/EEAGg==} + '@shikijs/engine-javascript@2.5.0': + resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==} '@shikijs/engine-oniguruma@1.29.1': resolution: {integrity: sha512-gSt2WhLNgEeLstcweQOSp+C+MhOpTsgdNXRqr3zP6M+BUBZ8Md9OU2BYwUYsALBxHza7hwaIWtFHjQ/aOOychw==} - '@shikijs/engine-oniguruma@2.3.2': - resolution: {integrity: sha512-vikMY1TroyZXUHIXbMnvY/mjtOxMn+tavcfAeQPgWS9FHcgFSUoEtywF5B5sOLb9NXb8P2vb7odkh3nj15/00A==} + '@shikijs/engine-oniguruma@2.5.0': + resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==} '@shikijs/langs@1.29.1': resolution: {integrity: sha512-iERn4HlyuT044/FgrvLOaZgKVKf3PozjKjyV/RZ5GnlyYEAZFcgwHGkYboeBv2IybQG1KVS/e7VGgiAU4JY2Gw==} - '@shikijs/langs@2.3.2': - resolution: {integrity: sha512-UqI6bSxFzhexIJficZLKeB1L2Sc3xoNiAV0yHpfbg5meck93du+EKQtsGbBv66Ki53XZPhnR/kYkOr85elIuFw==} + '@shikijs/langs@2.5.0': + resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==} '@shikijs/themes@1.29.1': resolution: {integrity: sha512-lb11zf72Vc9uxkl+aec2oW1HVTHJ2LtgZgumb4Rr6By3y/96VmlU44bkxEb8WBWH3RUtbqAJEN0jljD9cF7H7g==} - '@shikijs/themes@2.3.2': - resolution: {integrity: sha512-QAh7D/hhfYKHibkG2tti8vxNt3ekAH5EqkXJeJbTh7FGvTCWEI7BHqNCtMdjFvZ0vav5nvUgdvA7/HI7pfsB4w==} + '@shikijs/themes@2.5.0': + resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==} '@shikijs/transformers@1.29.1': resolution: {integrity: sha512-jVzJhriZ0t9y8TvsV4AzBm74BCLUoK6Bf41aIjJkZc1hKeL0PQtsNL096b1AxgZRwJwTfQalWZ+jBkRAuqVMPw==} @@ -1293,12 +1293,15 @@ packages: '@shikijs/types@1.29.1': resolution: {integrity: sha512-aBqAuhYRp5vSir3Pc9+QPu9WESBOjUo03ao0IHLC4TyTioSsp/SkbAZSrIH4ghYYC1T1KTEpRSBa83bas4RnPA==} - '@shikijs/types@2.3.2': - resolution: {integrity: sha512-CBaMY+a3pepyC4SETi7+bSzO0f6hxEQJUUuS4uD7zppzjmrN4ZRtBqxaT+wOan26CR9eeJ5iBhc4qvWEwn7Eeg==} + '@shikijs/types@2.5.0': + resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==} '@shikijs/vscode-textmate@10.0.1': resolution: {integrity: sha512-fTIQwLF+Qhuws31iw7Ncl1R3HUDtGwIipiJ9iU+UsDUwMhegFcQKQHd51nZjb7CArq0MvON8rbgCGQYWHUKAdg==} + '@shikijs/vscode-textmate@10.0.2': + resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==} + '@shuding/opentype.js@1.4.0-beta.0': resolution: {integrity: sha512-3NgmNyH3l/Hv6EvsWJbsvpcpUba6R8IREQ83nH83cyakCw7uM1arZKNfHwv1Wz6jgqrF/j4x5ELvR6PnK9nTcA==} engines: {node: '>= 8.0.0'} @@ -1319,8 +1322,8 @@ packages: '@socket.io/component-emitter@3.1.2': resolution: {integrity: sha512-9BCxFwvbGg/RsZK9tjXd8s4UcwR0MWeFQ1XEKIQVVvAGJyINdrqKMcTRyLoK8Rse1GjzLV9cwjWV1olXRWEXVA==} - '@sqlite.org/sqlite-wasm@3.48.0-build4': - resolution: {integrity: sha512-hI6twvUkzOmyGZhQMza1gpfqErZxXRw6JEsiVjUbo7tFanVD+8Oil0Ih3l2nGzHdxPI41zFmfUQG7GHqhciKZQ==} + '@sqlite.org/sqlite-wasm@3.49.0-build3': + resolution: {integrity: sha512-Dfbkybv7AIfDKAbIA5jjupT/mqFWyIMcgAwqR1qVyfHuidmEpPL48PWaOga/l4Elnty5RATzOY9U9P1yeUgjGQ==} hasBin: true '@stylistic/eslint-plugin@3.0.1': @@ -1958,6 +1961,14 @@ packages: magicast: optional: true + c12@2.0.4: + resolution: {integrity: sha512-3DbbhnFt0fKJHxU4tEUPmD1ahWE4PWPMomqfYsTJdrhpmEnRKJi3qSC4rO5U6E6zN1+pjBY7+z8fUmNRMaVKLw==} + peerDependencies: + magicast: ^0.3.5 + peerDependenciesMeta: + magicast: + optional: true + cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -2262,6 +2273,29 @@ packages: sqlite3: optional: true + db0@0.2.4: + resolution: {integrity: sha512-hIzftLH1nMsF95zSLjDLYLbE9huOXnLYUTAQ5yKF5amp0FpeD+B15XJa8BvGYSOeSCH4gl2WahB/y1FcUByQSg==} + peerDependencies: + '@electric-sql/pglite': '*' + '@libsql/client': '*' + better-sqlite3: '*' + drizzle-orm: '*' + mysql2: '*' + sqlite3: '*' + peerDependenciesMeta: + '@electric-sql/pglite': + optional: true + '@libsql/client': + optional: true + better-sqlite3: + optional: true + drizzle-orm: + optional: true + mysql2: + optional: true + sqlite3: + optional: true + de-indent@1.0.2: resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==} @@ -2850,6 +2884,10 @@ packages: resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==} hasBin: true + giget@1.2.5: + resolution: {integrity: sha512-r1ekGw/Bgpi3HLV3h1MRBIlSAdHoIMklpaQ3OQLFcRw9PwAj2rqigvIbg+dBUI51OxVI2jsEtDywDBjSiuf7Ug==} + hasBin: true + git-config-path@2.0.0: resolution: {integrity: sha512-qc8h1KIQbJpp+241id3GuAtkdyJ+IK+LIVtkiFTRKRrmddDzs3SI9CvP1QYmWBFvm1I/PWRwj//of8bgAc0ltA==} engines: {node: '>=4'} @@ -3850,12 +3888,20 @@ packages: engines: {node: ^14.16.0 || >=16.10.0} hasBin: true + nypm@0.5.4: + resolution: {integrity: sha512-X0SNNrZiGU8/e/zAB7sCTtdxWTMSIO73q+xuKgglm2Yvzwlo8UoC5FNySQFCvl84uPaeADkqHUZUkWy4aH4xOA==} + engines: {node: ^14.16.0 || >=16.10.0} + hasBin: true + ofetch@1.4.1: resolution: {integrity: sha512-QZj2DfGplQAr2oj9KzceK9Hwz6Whxazmn85yYeVuS3u9XTMOGMRx0kO95MQ+vLsj/S/NwBDMMLU5hpxvI6Tklw==} ohash@1.1.4: resolution: {integrity: sha512-FlDryZAahJmEF3VR3w1KogSEdWX3WhA5GPakFx4J81kEAiHyLMpdLLElS8n8dfNadMgAne/MywcvmogzscVt4g==} + ohash@2.0.4: + resolution: {integrity: sha512-ac+SFwzhdHb0hp48/dbR7Jta39qfbuj7t3hApd9uyHS8bisHTfVzSEvjOVgV0L3zG7VR2/7JjkSGimP75D+hOQ==} + on-finished@2.4.1: resolution: {integrity: sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==} engines: {node: '>= 0.8'} @@ -4539,8 +4585,8 @@ packages: shiki@1.29.1: resolution: {integrity: sha512-TghWKV9pJTd/N+IgAIVJtr0qZkB7FfFCUrrEJc0aRmZupo3D1OCVRknQWVRVA7AX/M0Ld7QfoAruPzr3CnUJuw==} - shiki@2.3.2: - resolution: {integrity: sha512-UZhz/gsUz7DHFbQBOJP7eXqvKyYvMGramxQiSDc83M/7OkWm6OdVHAReEc3vMLh6L6TRhgL9dvhXz9XDkCDaaw==} + shiki@2.5.0: + resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==} signal-exit@3.0.7: resolution: {integrity: sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==} @@ -5381,6 +5427,18 @@ packages: utf-8-validate: optional: true + ws@8.18.1: + resolution: {integrity: sha512-RKW2aJZMXeMxVpnZ6bck+RswznaxmzdULiBr6KY7XkTnW8uvt0iT9H5DkHUChXrc+uurzwa0rVI16n/Xzjdz1w==} + engines: {node: '>=10.0.0'} + peerDependencies: + bufferutil: ^4.0.1 + utf-8-validate: '>=5.0.2' + peerDependenciesMeta: + bufferutil: + optional: true + utf-8-validate: + optional: true + xml-name-validator@4.0.0: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} @@ -5446,8 +5504,8 @@ packages: resolution: {integrity: sha512-zK7YHHz4ZXpW89AHXUPbQVGKI7uvkd3hzusTdotCg1UxyaVtg0zFJSTfW/Dq5f7OBBVnq6cZIaC8Ti4hb6dtCA==} engines: {node: '>= 14'} - zod-to-json-schema@3.24.1: - resolution: {integrity: sha512-3h08nf3Vw3Wl3PK+q3ow/lIil81IT2Oa7YpQyUUDsEWbXveMesdfK1xBd2RhCkynwZndAxixji/7SYJJowr62w==} + zod-to-json-schema@3.24.3: + resolution: {integrity: sha512-HIAfWdYIt1sssHfYZFCXp4rU1w2r8hVVXYIlmoa0r0gABLs5di3RCqPU5DDROogVz1pAdYBaz7HK5n9pSUNs3A==} peerDependencies: zod: ^3.24.1 @@ -5457,8 +5515,8 @@ packages: typescript: ^4.9.4 || ^5.0.2 zod: ^3 - zod@3.24.1: - resolution: {integrity: sha512-muH7gBL9sI1nciMZV67X5fTKKBLtwpZ5VBp1vsOQzj1MhrBZ4wlVCm3gedKZWLp0Oyel8sIGfeiz54Su+OVT+A==} + zod@3.24.2: + resolution: {integrity: sha512-lY7CDW43ECgW9u1TcT3IoXHflywfVqDYze4waEz812jR/bZ8FHDsl7pFQoSZTz5N+2NqRXs8GBwnAwo3ZNxqhQ==} zwitch@2.0.4: resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==} @@ -6196,18 +6254,18 @@ snapshots: transitivePeerDependencies: - magicast - '@nuxt/content@3.1.1(@libsql/client@0.14.0)(magicast@0.3.5)(typescript@5.7.3)': + '@nuxt/content@3.2.2(@libsql/client@0.14.0)(magicast@0.3.5)(typescript@5.7.3)': dependencies: '@nuxt/kit': 3.15.4(magicast@0.3.5) '@nuxtjs/mdc': 0.13.5(magicast@0.3.5) - '@shikijs/langs': 2.3.2 - '@sqlite.org/sqlite-wasm': 3.48.0-build4 + '@shikijs/langs': 2.5.0 + '@sqlite.org/sqlite-wasm': 3.49.0-build3 '@webcontainer/env': 1.1.1 better-sqlite3: 11.8.1 - c12: 2.0.1(magicast@0.3.5) + c12: 2.0.4(magicast@0.3.5) chokidar: 4.0.3 consola: 3.4.0 - db0: 0.2.3(@libsql/client@0.14.0)(better-sqlite3@11.8.1) + db0: 0.2.4(@libsql/client@0.14.0)(better-sqlite3@11.8.1) defu: 6.1.4 destr: 2.0.3 fast-glob: 3.3.3 @@ -6231,7 +6289,7 @@ snapshots: pkg-types: 1.3.1 remark-mdc: 3.5.3 scule: 1.3.0 - shiki: 2.3.2 + shiki: 2.5.0 slugify: 1.6.6 socket.io-client: 4.8.1 tar: 7.4.3 @@ -6239,10 +6297,10 @@ snapshots: unified: 11.0.5 unist-util-stringify-position: 4.0.0 unist-util-visit: 5.0.0 - ws: 8.18.0 - zod: 3.24.1 - zod-to-json-schema: 3.24.1(zod@3.24.1) - zod-to-ts: 1.2.0(typescript@5.7.3)(zod@3.24.1) + ws: 8.18.1 + zod: 3.24.2 + zod-to-json-schema: 3.24.3(zod@3.24.2) + zod-to-ts: 1.2.0(typescript@5.7.3)(zod@3.24.2) optionalDependencies: '@libsql/client': 0.14.0 transitivePeerDependencies: @@ -7135,12 +7193,12 @@ snapshots: '@types/hast': 3.0.4 hast-util-to-html: 9.0.4 - '@shikijs/core@2.3.2': + '@shikijs/core@2.5.0': dependencies: - '@shikijs/engine-javascript': 2.3.2 - '@shikijs/engine-oniguruma': 2.3.2 - '@shikijs/types': 2.3.2 - '@shikijs/vscode-textmate': 10.0.1 + '@shikijs/engine-javascript': 2.5.0 + '@shikijs/engine-oniguruma': 2.5.0 + '@shikijs/types': 2.5.0 + '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 hast-util-to-html: 9.0.4 @@ -7150,10 +7208,10 @@ snapshots: '@shikijs/vscode-textmate': 10.0.1 oniguruma-to-es: 2.2.0 - '@shikijs/engine-javascript@2.3.2': + '@shikijs/engine-javascript@2.5.0': dependencies: - '@shikijs/types': 2.3.2 - '@shikijs/vscode-textmate': 10.0.1 + '@shikijs/types': 2.5.0 + '@shikijs/vscode-textmate': 10.0.2 oniguruma-to-es: 3.1.0 '@shikijs/engine-oniguruma@1.29.1': @@ -7161,26 +7219,26 @@ snapshots: '@shikijs/types': 1.29.1 '@shikijs/vscode-textmate': 10.0.1 - '@shikijs/engine-oniguruma@2.3.2': + '@shikijs/engine-oniguruma@2.5.0': dependencies: - '@shikijs/types': 2.3.2 - '@shikijs/vscode-textmate': 10.0.1 + '@shikijs/types': 2.5.0 + '@shikijs/vscode-textmate': 10.0.2 '@shikijs/langs@1.29.1': dependencies: '@shikijs/types': 1.29.1 - '@shikijs/langs@2.3.2': + '@shikijs/langs@2.5.0': dependencies: - '@shikijs/types': 2.3.2 + '@shikijs/types': 2.5.0 '@shikijs/themes@1.29.1': dependencies: '@shikijs/types': 1.29.1 - '@shikijs/themes@2.3.2': + '@shikijs/themes@2.5.0': dependencies: - '@shikijs/types': 2.3.2 + '@shikijs/types': 2.5.0 '@shikijs/transformers@1.29.1': dependencies: @@ -7192,13 +7250,15 @@ snapshots: '@shikijs/vscode-textmate': 10.0.1 '@types/hast': 3.0.4 - '@shikijs/types@2.3.2': + '@shikijs/types@2.5.0': dependencies: - '@shikijs/vscode-textmate': 10.0.1 + '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 '@shikijs/vscode-textmate@10.0.1': {} + '@shikijs/vscode-textmate@10.0.2': {} + '@shuding/opentype.js@1.4.0-beta.0': dependencies: fflate: 0.7.4 @@ -7212,7 +7272,7 @@ snapshots: '@socket.io/component-emitter@3.1.2': {} - '@sqlite.org/sqlite-wasm@3.48.0-build4': {} + '@sqlite.org/sqlite-wasm@3.49.0-build3': {} '@stylistic/eslint-plugin@3.0.1(eslint@9.20.1(jiti@2.4.2))(typescript@5.7.3)': dependencies: @@ -7963,6 +8023,23 @@ snapshots: optionalDependencies: magicast: 0.3.5 + c12@2.0.4(magicast@0.3.5): + dependencies: + chokidar: 4.0.3 + confbox: 0.1.8 + defu: 6.1.4 + dotenv: 16.4.7 + giget: 1.2.5 + jiti: 2.4.2 + mlly: 1.7.4 + ohash: 2.0.4 + pathe: 2.0.3 + perfect-debounce: 1.0.0 + pkg-types: 1.3.1 + rc9: 2.1.2 + optionalDependencies: + magicast: 0.3.5 + cac@6.7.14: {} callsites@3.1.0: {} @@ -8255,6 +8332,11 @@ snapshots: '@libsql/client': 0.14.0 better-sqlite3: 11.8.1 + db0@0.2.4(@libsql/client@0.14.0)(better-sqlite3@11.8.1): + optionalDependencies: + '@libsql/client': 0.14.0 + better-sqlite3: 11.8.1 + de-indent@1.0.2: {} debug@2.6.9: @@ -8936,6 +9018,16 @@ snapshots: pathe: 1.1.2 tar: 6.2.1 + giget@1.2.5: + dependencies: + citty: 0.1.6 + consola: 3.4.0 + defu: 6.1.4 + node-fetch-native: 1.6.6 + nypm: 0.5.4 + pathe: 2.0.3 + tar: 6.2.1 + git-config-path@2.0.0: {} git-up@8.0.0: @@ -10443,6 +10535,15 @@ snapshots: tinyexec: 0.3.2 ufo: 1.5.4 + nypm@0.5.4: + dependencies: + citty: 0.1.6 + consola: 3.4.0 + pathe: 2.0.3 + pkg-types: 1.3.1 + tinyexec: 0.3.2 + ufo: 1.5.4 + ofetch@1.4.1: dependencies: destr: 2.0.3 @@ -10451,6 +10552,8 @@ snapshots: ohash@1.1.4: {} + ohash@2.0.4: {} + on-finished@2.4.1: dependencies: ee-first: 1.1.1 @@ -11291,15 +11394,15 @@ snapshots: '@shikijs/vscode-textmate': 10.0.1 '@types/hast': 3.0.4 - shiki@2.3.2: + shiki@2.5.0: dependencies: - '@shikijs/core': 2.3.2 - '@shikijs/engine-javascript': 2.3.2 - '@shikijs/engine-oniguruma': 2.3.2 - '@shikijs/langs': 2.3.2 - '@shikijs/themes': 2.3.2 - '@shikijs/types': 2.3.2 - '@shikijs/vscode-textmate': 10.0.1 + '@shikijs/core': 2.5.0 + '@shikijs/engine-javascript': 2.5.0 + '@shikijs/engine-oniguruma': 2.5.0 + '@shikijs/langs': 2.5.0 + '@shikijs/themes': 2.5.0 + '@shikijs/types': 2.5.0 + '@shikijs/vscode-textmate': 10.0.2 '@types/hast': 3.0.4 signal-exit@3.0.7: {} @@ -12153,6 +12256,8 @@ snapshots: ws@8.18.0: {} + ws@8.18.1: {} + xml-name-validator@4.0.0: {} xmlhttprequest-ssl@2.1.2: {} @@ -12203,15 +12308,15 @@ snapshots: compress-commons: 6.0.2 readable-stream: 4.7.0 - zod-to-json-schema@3.24.1(zod@3.24.1): + zod-to-json-schema@3.24.3(zod@3.24.2): dependencies: - zod: 3.24.1 + zod: 3.24.2 - zod-to-ts@1.2.0(typescript@5.7.3)(zod@3.24.1): + zod-to-ts@1.2.0(typescript@5.7.3)(zod@3.24.2): dependencies: typescript: 5.7.3 - zod: 3.24.1 + zod: 3.24.2 - zod@3.24.1: {} + zod@3.24.2: {} zwitch@2.0.4: {} From 2dedfd2883ee6bc26281668b0ff0ebec5ca3dce8 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 12:24:44 +0100 Subject: [PATCH 04/15] up --- content/2.essentials/1.markdown-syntax.md | 140 ++++++++++++++++++---- 1 file changed, 116 insertions(+), 24 deletions(-) diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md index 43f7bb0..2b3d2d1 100644 --- a/content/2.essentials/1.markdown-syntax.md +++ b/content/2.essentials/1.markdown-syntax.md @@ -5,8 +5,6 @@ description: Text, title, and styling in standard markdown. ## Titles -Best used for page titles, headers, and sidebars. - ::code-preview{class="[&>div]:*:my-0"} ## Titles @@ -21,8 +19,6 @@ Best used for page titles, headers, and sidebars. ### Subtitles -Best used for page titles, headers, and sidebars. - ::code-preview{class="[&>div]:*:my-0"} ### Subtitles @@ -57,70 +53,166 @@ You can also combine them: | Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | | Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | -## Blockquotes +You need to use HTML to write superscript and subscript text. Add `sup` or `sub` around your text to create superscript or subscript. -### Singleline +| Style | How to use | Result | +|-------------|--------------------------|------------------------| +| Superscript | `superscript` | superscript | +| Subscript | `subscript` | subscript | -To create a blockquote, add a `>` in front of a paragraph. +## Links + +To create a link, wrap the link text in brackets `[]()`. ::code-preview{class="[&>div]:*:my-0"} -> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) #code ```mdc -> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) ``` :: -### Multiline +### Links to other pages + +Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`. ::code-preview{class="[&>div]:*:my-0"} -> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. -> -> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. +[Installation](/getting-started/installation) #code ```mdc -> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. -> -> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. +[Installation](/getting-started/installation) ``` :: -## Links +## Lists -To create a link, wrap the link text in brackets `[]()`. +### Unordered + +To create an unordered list, start each item with a `-`. ::code-preview{class="[&>div]:*:my-0"} -[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) +- I'm a list item. +- I'm another list item. +- I'm the last list item. #code ```mdc -[Nuxt UI Pro](https://ui3.nuxt.dev/getting-started/installation/pro/nuxt) +- I'm a list item. +- I'm another list item. +- I'm the last list item. ``` :: -### Links to other pages +### Ordered -Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`. +To create an ordered list, start each item with a number. ::code-preview{class="[&>div]:*:my-0"} -[Installation](/getting-started/installation) +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. #code ```mdc -[Installation](/getting-started/installation) +1. I'm a list item. +2. I'm another list item. +3. I'm the last list item. +``` + +:: + +### Nested + +To create a nested list, indent each item with four spaces. + +::code-preview{class="[&>div]:*:my-0"} + +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. + +#code + +```mdc +- I'm a list item. + - I'm a nested list item. + - I'm another nested list item. +- I'm another list item. +``` + +:: + +## Tables + +To create a table, use three or more hyphens (`---`) to separate each column. + +::code-preview{class="[&>div]:*:my-0"} + +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | + +#code + +```mdc +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | ``` :: + +## Blockquotes + +### Singleline + +To create a blockquote, add a `>` in front of a paragraph. + +::code-preview{class="[&>div]:*:my-0"} + +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. + +#code + +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +``` + +:: + +### Multiline + +::code-preview{class="[&>div]:*:my-0"} + +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. + +#code + +```mdc +> Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. +> +> Create beautiful, responsive, and accessible Vue applications with Nuxt UI Pro. +``` + +:: + From 2cce8a215dbeef2f0797618ed194cb59576349a2 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 12:42:18 +0100 Subject: [PATCH 05/15] up --- app/assets/css/main.css | 2 +- content/2.essentials/1.markdown-syntax.md | 2 +- content/2.essentials/2.code-blacks.md | 4 - content/2.essentials/2.code-blocks.md | 325 ++++++++++++++++++++++ 4 files changed, 327 insertions(+), 6 deletions(-) delete mode 100644 content/2.essentials/2.code-blacks.md create mode 100644 content/2.essentials/2.code-blocks.md diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 96e9c73..e944752 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -1,7 +1,7 @@ @import "tailwindcss"; @import "@nuxt/ui-pro"; -@source "../../../content"; +@source "../../../content/**/*"; @theme { --font-sans: 'Public Sans', sans-serif; diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md index 2b3d2d1..f7bb42c 100644 --- a/content/2.essentials/1.markdown-syntax.md +++ b/content/2.essentials/1.markdown-syntax.md @@ -160,7 +160,7 @@ To create a nested list, indent each item with four spaces. To create a table, use three or more hyphens (`---`) to separate each column. -::code-preview{class="[&>div]:*:my-0"} +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} | Prop | Default | Type | |---------|-----------|--------------------------| diff --git a/content/2.essentials/2.code-blacks.md b/content/2.essentials/2.code-blacks.md deleted file mode 100644 index 79f0cf1..0000000 --- a/content/2.essentials/2.code-blacks.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Code Blocks -description: Display inline code and code blocks ---- diff --git a/content/2.essentials/2.code-blocks.md b/content/2.essentials/2.code-blocks.md new file mode 100644 index 0000000..c2d4d20 --- /dev/null +++ b/content/2.essentials/2.code-blocks.md @@ -0,0 +1,325 @@ +--- +title: Code Blocks +description: Display inline code and code blocks +--- + +## Basic + +### Inline Code + +To display a word or phrase as code, enclose it in backticks (\`). + +::code-preview{class="[&>div]:*:my-0"} + +`inline code` + +#code + +```mdc +`inline code` +``` + +:: + +### Code Blocks + +To display a block of code, with syntax highlighting, use three backticks (\`\`\`). + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#code + +````mdc +```ts +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` +```` + +:: + +When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#code + +````mdc +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` +```` + +:: + +::tip +Some icons are already defined by default, but you can add more in your `app.config.ts` through the `uiPro.prose.codeIcon` key: + +```ts [app.config.ts] +export default defineAppConfig({ + uiPro: { + prose: { + codeIcon: { + terminal: 'i-ph-terminal-window-duotone' + } + } + } +}) +``` + +:: + +Every code-block has a built-in copy button that will copy the code to your clipboard. + +::tip +You can change the icon in your `app.config.ts` through the `ui.icons.copy` and `ui.icons.copyCheck` keys: + +```ts [app.config.ts] +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` + +:: + +## Advanced + +### Code Group + +Wrap your code-blocks around a `code-group` component to group them together in a tabbed interface. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +:::code-group{class="w-full"} + +```bash [pnpm] +pnpm add @nuxt/ui-pro@next +``` + +```bash [yarn] +yarn add @nuxt/ui-pro@next +``` + +```bash [npm] +npm install @nuxt/ui-pro@next +``` + +```bash [bun] +bun add @nuxt/ui-pro@next +``` + +::: + +#code + +````mdc +:::code-group + +```bash [pnpm] +pnpm add @nuxt/ui-pro@next +``` + +```bash [yarn] +yarn add @nuxt/ui-pro@next +``` + +```bash [npm] +npm install @nuxt/ui-pro@next +``` + +```bash [bun] +bun add @nuxt/ui-pro@next +``` + +:: +```` + +:: + +::note{to="#pre"} +Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button. +:: + +### Code Tree + +Wrap your code-blocks with a `code-tree` component in any particular order to display a tree view of your files. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +::code-tree{defaultValue="app/app.config.ts"} + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'], + + future: { + compatibilityVersion: 4 + }, + + css: ['~/assets/css/main.css'] +}) + +``` + +```css [app/assets/css/main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; +``` + +```ts [app/app.config.ts] +export default defineAppConfig({ + ui: { + colors: { + primary: 'sky', + colors: 'slate' + } + } +}) +``` + +```vue [app/app.vue] + +``` + +```json [package.json] +{ + "name": "nuxt-app", + "private": true, + "type": "module", + "scripts": { + "build": "nuxt build", + "dev": "nuxt dev", + "generate": "nuxt generate", + "preview": "nuxt preview", + "postinstall": "nuxt prepare", + "lint": "eslint .", + "lint:fix": "eslint --fix ." + }, + "dependencies": { + "@iconify-json/lucide": "^1.2.18", + "@nuxt/ui-pro": "3.0.0-alpha.10", + "nuxt": "^3.15.1" + }, + "devDependencies": { + "eslint": "9.20.1", + "typescript": "^5.7.2", + "vue-tsc": "^2.2.0" + } +} +``` + +```json [tsconfig.json] +{ + "extends": "./.nuxt/tsconfig.json" +} +``` + +````md [README.md] +# Nuxt 3 Minimal Starter + +Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more. + +## Setup + +Make sure to install the dependencies: + +```bash +# npm +npm install + +# pnpm +pnpm install + +# yarn +yarn install + +# bun +bun install +``` + +## Development Server + +Start the development server on `http://localhost:3000`: + +```bash +# npm +npm run dev + +# pnpm +pnpm run dev + +# yarn +yarn dev + +# bun +bun run dev +``` + +## Production + +Build the application for production: + +```bash +# npm +npm run build + +# pnpm +pnpm run build + +# yarn +yarn build + +# bun +bun run build +``` + +Locally preview production build: + +```bash +# npm +npm run preview + +# pnpm +pnpm run preview + +# yarn +yarn preview + +# bun +bun run preview +``` + +Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information. +```` + +:: + +:: + +::note{to="https://ui3.nuxt.dev/getting-started/typography#codetree" target="_blank"} +Learn more about the `code-tree` component. +:: From 60e2032c65898ce444237ede55581cf90f4a2487 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 14:11:10 +0100 Subject: [PATCH 06/15] up --- content/2.essentials/1.markdown-syntax.md | 2 +- content/2.essentials/2.code-blocks.md | 137 +++++++++++++++++++++- content/2.essentials/3.images-embeds.md | 4 - content/2.essentials/4.images-embeds.md | 66 +++++++++++ 4 files changed, 202 insertions(+), 7 deletions(-) delete mode 100644 content/2.essentials/3.images-embeds.md create mode 100644 content/2.essentials/4.images-embeds.md diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md index f7bb42c..8c1d6ec 100644 --- a/content/2.essentials/1.markdown-syntax.md +++ b/content/2.essentials/1.markdown-syntax.md @@ -37,7 +37,7 @@ Each title and subtitle creates an anchor and shows up automatically in the tabl ## Text Formatting -Nuxt UI Pro supports most markdown formatting options. +Nuxt UI Pro supports most Markdown formatting options. | Style | How to use | Result | |--------|--------------|------------| diff --git a/content/2.essentials/2.code-blocks.md b/content/2.essentials/2.code-blocks.md index c2d4d20..84747e7 100644 --- a/content/2.essentials/2.code-blocks.md +++ b/content/2.essentials/2.code-blocks.md @@ -102,9 +102,44 @@ export default defineAppConfig({ :: +#### Highlight Line + +To highlight lines of code, add `{}` around the line numbers you want to highlight. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +```ts [nuxt.config.ts]{4-5} +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` + +#code + +````mdc +```ts [nuxt.config.ts]{4-5} +export default defineAppConfig({ + ui: { + icons: { + copy: 'i-lucide-copy', + copyCheck: 'i-lucide-copy-check' + } + } +}) +``` +```` + +:: + + ## Advanced -### Code Group +### CodeGroup Wrap your code-blocks around a `code-group` component to group them together in a tabbed interface. @@ -160,7 +195,7 @@ bun add @nuxt/ui-pro@next Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy button. :: -### Code Tree +### CodeTree Wrap your code-blocks with a `code-tree` component in any particular order to display a tree view of your files. @@ -323,3 +358,101 @@ Check out the [deployment documentation](https://nuxt.com/docs/getting-started/d ::note{to="https://ui3.nuxt.dev/getting-started/typography#codetree" target="_blank"} Learn more about the `code-tree` component. :: + +### `CodePreview` + +To display a code block with he's preview, use the `code-preview` component. Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full" label="Preview"} + +::code-preview{class="[&>div]:*:my-0"} +`inline code` + +#code + +```mdc +`inline code` +``` + +:: + +#code + +````mdc +::code-preview +`inline code` + +#code +```mdc +`inline code` +``` +:: +```` + +:: + +### `CodeCollapse` + +Use the `code-collapse` component to display a long code block in a collapsible format. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +::code-collapse{class="[&>div]:my-0"} + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; +} +``` + +:: + +#code + +````mdc +::code-collapse + +```css [main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; + +@theme { + --font-sans: 'Public Sans', sans-serif; + + --breakpoint-3xl: 1920px; + + --color-green-50: #EFFDF5; + --color-green-100: #D9FBE8; + --color-green-200: #B3F5D1; + --color-green-300: #75EDAE; + --color-green-400: #00DC82; + --color-green-500: #00C16A; + --color-green-600: #00A155; + --color-green-700: #007F45; + --color-green-800: #016538; + --color-green-900: #0A5331; + --color-green-950: #052E16; +} +``` + +:: +```` + +:: diff --git a/content/2.essentials/3.images-embeds.md b/content/2.essentials/3.images-embeds.md deleted file mode 100644 index c0a8c16..0000000 --- a/content/2.essentials/3.images-embeds.md +++ /dev/null @@ -1,4 +0,0 @@ ---- -title: Images and Embeds -description: Add image, video, and other HTML elements ---- diff --git a/content/2.essentials/4.images-embeds.md b/content/2.essentials/4.images-embeds.md new file mode 100644 index 0000000..a4e18c3 --- /dev/null +++ b/content/2.essentials/4.images-embeds.md @@ -0,0 +1,66 @@ +--- +title: Images and Embeds +description: Add image, video, and other HTML elements +--- + +## Image + +### Using Markdown + +::code-preview +![Nuxt Social Image](https://nuxt.com/new-social.jpg) + +#code + +```mdc +![Nuxt Social Image](https://nuxt.com/new-social.jpg) +``` + +:: + +Or with your local images + +::code-preview +![Social Card](/social-card.png) + +#code + +```mdc +![Social Card](/social-card.png) +``` + +:: + +::note +If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed, the `` component will be used instead of the native `img` tag. +:: + +### Using Embeds + +To get more customizability with images, you can also use embeds to add images + +::code-preview +Nuxt Social Image + +#code + +```mdc +Nuxt Social Image +``` + +:: + +## Embeds and HTML elements + +You can also use embeds to add videos, iframes, etc. + +::code-preview{class="[&>div]:*:w-full"} + + +#code + +```mdc + +``` + +:: From 036f76752db3c5a3eb50e81d90eaeb6ff642eeab Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 14:55:15 +0100 Subject: [PATCH 07/15] up --- content/1.getting-started/.navigation.yml | 3 +- content/1.getting-started/1.index.md | 1 + content/1.getting-started/2.installation.md | 1 + content/1.getting-started/3.usage.md | 1 + content/2.essentials/1.markdown-syntax.md | 1 + content/2.essentials/2.code-blocks.md | 1 + content/2.essentials/3.prose-components.md | 137 ++++++++++++++++++++ content/2.essentials/4.images-embeds.md | 1 + 8 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 content/2.essentials/3.prose-components.md diff --git a/content/1.getting-started/.navigation.yml b/content/1.getting-started/.navigation.yml index 8ce8605..6dca48e 100644 --- a/content/1.getting-started/.navigation.yml +++ b/content/1.getting-started/.navigation.yml @@ -1 +1,2 @@ -title: Getting Started \ No newline at end of file +title: Getting Started +icon: false diff --git a/content/1.getting-started/1.index.md b/content/1.getting-started/1.index.md index 61bc5ec..b4e7507 100644 --- a/content/1.getting-started/1.index.md +++ b/content/1.getting-started/1.index.md @@ -1,6 +1,7 @@ --- title: Introduction description: Welcome to Nuxt UI Pro documentation template. +navigation.icon: i-lucide-house --- This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes. diff --git a/content/1.getting-started/2.installation.md b/content/1.getting-started/2.installation.md index 7133103..c00d12d 100644 --- a/content/1.getting-started/2.installation.md +++ b/content/1.getting-started/2.installation.md @@ -1,6 +1,7 @@ --- title: Installation description: Get started with Nuxt UI Pro documentation template. +navigation.icon: i-lucide-download --- ::tip{target="_blank" to="https://content.nuxt.com/templates/docs"} diff --git a/content/1.getting-started/3.usage.md b/content/1.getting-started/3.usage.md index cc57e51..c4e451a 100644 --- a/content/1.getting-started/3.usage.md +++ b/content/1.getting-started/3.usage.md @@ -1,6 +1,7 @@ --- title: Usage description: Learn how to write and customize your documentation. +navigation.icon: i-lucide-settings --- This is only a basic example of what you can achieve with [Nuxt UI Pro](https://ui.nuxt.com/pro/guide), you can tweak it to match your needs. The template uses several Nuxt modules underneath like [`@nuxt/content`](https://content.nuxt.com) for the content, [`@nuxtjs/fontaine`](https://github.com/nuxt-modules/fontaine) and [`@nuxtjs/google-fonts`](https://github.com/nuxt-modules/google-fonts) to change the font and [`nuxt-og-image`](https://nuxtseo.com/og-image/getting-started/installation) for social previews. diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md index 8c1d6ec..7d43f98 100644 --- a/content/2.essentials/1.markdown-syntax.md +++ b/content/2.essentials/1.markdown-syntax.md @@ -1,6 +1,7 @@ --- title: Markdown Syntax description: Text, title, and styling in standard markdown. +navigation.icon: i-lucide-heading-1 --- ## Titles diff --git a/content/2.essentials/2.code-blocks.md b/content/2.essentials/2.code-blocks.md index 84747e7..380ac9c 100644 --- a/content/2.essentials/2.code-blocks.md +++ b/content/2.essentials/2.code-blocks.md @@ -1,6 +1,7 @@ --- title: Code Blocks description: Display inline code and code blocks +navigation.icon: i-lucide-code-xml --- ## Basic diff --git a/content/2.essentials/3.prose-components.md b/content/2.essentials/3.prose-components.md new file mode 100644 index 0000000..83a4f94 --- /dev/null +++ b/content/2.essentials/3.prose-components.md @@ -0,0 +1,137 @@ +--- +title: Prose Components +description: Components to help you structure your content. +navigation.icon: i-lucide-component +--- + +### Accordion + +Use the `accordion` and `accordion-item` components to display an [Accordion](/components/accordion) in your content. + +::code-preview{class="[&>div]:*:my-0"} + +:::accordion + +::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"} +The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. +:: + +::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} +Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started. +:: + +::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"} +We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components. +:: + +::: + +#code + +```mdc +::accordion + +::accordion-item{label="What are the main considerations when upgrading to Nuxt UI v3?" icon="i-lucide-circle-help"} +The transition to v3 involves significant changes, including new component structures, updated theming approaches, and revised TypeScript definitions. We recommend a careful, incremental upgrade process, starting with thorough testing in a development environment. +:: + +::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} +Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started. +:: + +::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"} +We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` package but it only contains the components to build this documentation yet. This will be a free update, so the license you buy now will be valid for v3. We're actively working to finish the rewrite of all Nuxt UI Pro components. +:: + +:: +``` + +:: + +### Badge + +Use markdown in the default slot of the `badge` component to display a [Badge](/components/badge) in your content. + +::code-preview{label="Preview"} + +:::badge +**v3.0.0-alpha.10** +::: + +#code + +```mdc +::badge +**v3.0.0-alpha.10** +:: +``` + +:: + +### Callout + +Use markdown in the default slot of the `callout` component to add eye-catching context to your content. + +Use the `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link) component. + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +::callout +This is a `callout` with full **markdown** support. +:: + +#code + +```mdc +::callout +This is a `callout` with full **markdown** support. +:: +``` + +:: + +You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors. + +::code-preview{label="Preview"} + +:::div{class="flex flex-col gap-4 w-full"} + +::note{class="w-full my-0"} +Here's some additional information for you. +:: + +::tip{class="w-full my-0"} +Here's a helpful suggestion. +:: + +::warning{class="w-full my-0"} +Be careful with this action as it might have unexpected results. +:: + +::caution{class="w-full my-0"} +This action cannot be undone. +:: + +::: + +#code + +```mdc +::note +Here's some additional information. +:: + +::tip +Here's a helpful suggestion. +:: + +::warning +Be careful with this action as it might have unexpected results. +:: + +::caution +This action cannot be undone. +:: +``` + +:: diff --git a/content/2.essentials/4.images-embeds.md b/content/2.essentials/4.images-embeds.md index a4e18c3..a6ed8e1 100644 --- a/content/2.essentials/4.images-embeds.md +++ b/content/2.essentials/4.images-embeds.md @@ -1,6 +1,7 @@ --- title: Images and Embeds description: Add image, video, and other HTML elements +navigation.icon: i-lucide-image --- ## Image From 2390f8e1ba6148c6f3919f6d16cd54cae2e08a7a Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 15:03:58 +0100 Subject: [PATCH 08/15] fix build --- content/2.essentials/3.prose-components.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/content/2.essentials/3.prose-components.md b/content/2.essentials/3.prose-components.md index 83a4f94..d04c15e 100644 --- a/content/2.essentials/3.prose-components.md +++ b/content/2.essentials/3.prose-components.md @@ -6,7 +6,7 @@ navigation.icon: i-lucide-component ### Accordion -Use the `accordion` and `accordion-item` components to display an [Accordion](/components/accordion) in your content. +Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui3.nuxt.dev/components/accordion) in your content. ::code-preview{class="[&>div]:*:my-0"} @@ -17,7 +17,7 @@ The transition to v3 involves significant changes, including new component struc :: ::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} -Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started. +Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. :: ::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"} @@ -36,7 +36,7 @@ The transition to v3 involves significant changes, including new component struc :: ::accordion-item{label="Is Nuxt UI v3 compatible with standalone Vue projects?" icon="i-lucide-circle-help"} -Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation/vue) to get started. +Nuxt UI is now compatible with Vue! You can follow the [installation guide](/getting-started/installation) to get started. :: ::accordion-item{label="What about Nuxt UI Pro?" icon="i-lucide-circle-help"} From 145868cc59f47fe891b19ad556e8ff04175a961a Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 15:21:34 +0100 Subject: [PATCH 09/15] up --- content/1.getting-started/1.index.md | 90 +++++++++----- content/2.essentials/3.prose-components.md | 134 +++++++++++++++++++++ content/2.essentials/4.images-embeds.md | 8 +- 3 files changed, 199 insertions(+), 33 deletions(-) diff --git a/content/1.getting-started/1.index.md b/content/1.getting-started/1.index.md index b4e7507..0a2c81c 100644 --- a/content/1.getting-started/1.index.md +++ b/content/1.getting-started/1.index.md @@ -8,47 +8,79 @@ This template is a ready-to-use documentation template made with [Nuxt UI Pro](h There are already many websites based on this template: -- [Nuxt](https://nuxt.com) - The Nuxt website -- [Nuxt UI](https://ui.nuxt.com) - The documentation of `@nuxt/ui` and `@nuxt/ui-pro` -- [Nuxt Image](https://image.nuxt.com) - The documentation of `@nuxt/image` -- [Nuxt Content](https://content.nuxt.com) - The documentation of `@nuxt/content` -- [Nuxt Devtools](https://devtools.nuxt.com) - The documentation of `@nuxt/devtools` -- [Nuxt Studio](https://content.nuxt.com/docs/studio) - The pro version of Nuxt Content +::card-group -## Features +::card +--- +title: Nuxt +icon: i-simple-icons-nuxtdotjs +to: https://nuxt.com +target: _blank +--- +The Nuxt website +:: -- Powered by [Nuxt 3](https://nuxt.com) -- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro) -- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com) -- Compatible with [Nuxt Studio](https://content.nuxt.com/docs/studio) -- Auto-generated sidebar navigation -- Full-Text Search out of the box -- Beautiful Typography styles -- Dark mode support -- And more... +::card +--- +title: Nuxt UI +icon: i-simple-icons-nuxtdotjs +to: https://ui3.nuxt.dev +target: _blank +--- +The documentation of `@nuxt/ui` and `@nuxt/ui-pro` +:: -## Play online +::card +--- +title: Nuxt Image +icon: i-simple-icons-nuxtdotjs +to: https://image.nuxt.com +target: _blank +--- +The documentation of `@nuxt/image` +:: -You can start playing with this template in your browser using our online sandboxes: +::card +--- +title: Nuxt Content +icon: i-simple-icons-nuxtdotjs +to: https://content.nuxt.com +target: _blank +--- +The documentation of `@nuxt/content` +:: -::u-button +::card --- -class: mr-4 -icon: i-simple-icons-stackblitz -label: Play on StackBlitz +title: Nuxt Devtools +icon: i-simple-icons-nuxtdotjs +to: https://devtools.nuxt.com target: _blank -to: https://stackblitz.com/github/nuxt-ui-pro/docs/ --- +The documentation of `@nuxt/devtools` :: -::u-button +::card --- -class: mt-2 sm:mt-0 -icon: i-simple-icons-codesandbox -label: Play on CodeSandbox +title: Nuxt Hub +icon: i-simple-icons-nuxtdotjs +to: https://hub.nuxt.com target: _blank -to: https://codesandbox.io/s/github/nuxt-ui-pro/docs/ --- +The best place to manage your projects, environments and variables. +:: + :: -Or open [Nuxt UI playground](https://ui.nuxt.com/playground). +## Features + +- Powered by [Nuxt 3](https://nuxt.com) +- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro) +- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com) +- Compatible with [Nuxt Studio](https://content.nuxt.com/docs/studio) +- Auto-generated sidebar navigation +- Full-Text Search out of the box +- Beautiful Typography styles +- Dark mode support +- And more... + diff --git a/content/2.essentials/3.prose-components.md b/content/2.essentials/3.prose-components.md index d04c15e..f59dc4b 100644 --- a/content/2.essentials/3.prose-components.md +++ b/content/2.essentials/3.prose-components.md @@ -135,3 +135,137 @@ This action cannot be undone. ``` :: + +### Card + +Use markdown in the default slot of the `card` component to highlight your content. + +Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link). + +::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} + +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: + +#code + +```mdc +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: +``` + +:: + +### CardGroup + +Wrap your `card` components with the `card-group` component to group them together in a grid layout. + +::code-preview + +:::card-group{class="w-full"} + +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: + +::card +--- +title: SaaS +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/saas +target: _blank +--- +A template with landing, pricing, docs and blog. +:: + +::card +--- +title: Docs +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/docs +target: _blank +--- +A documentation with `@nuxt/content`. +:: + +::card +--- +title: Landing +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/landing +target: _blank +--- +A landing page you can use as starting point. +:: + +::: + +#code + +```mdc +::card-group + +::card +--- +title: Dashboard +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/dashboard +target: _blank +--- +A dashboard with multi-column layout. +:: + +::card +--- +title: SaaS +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/saas +target: _blank +--- +A template with landing, pricing, docs and blog. +:: + +::card +--- +title: Docs +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/docs +target: _blank +--- +A documentation with `@nuxt/content`. +:: + +::card +--- +title: Landing +icon: i-simple-icons-github +to: https://github.com/nuxt-ui-pro/landing +target: _blank +--- +A landing page you can use as starting point. +:: + +:: +``` + +:: diff --git a/content/2.essentials/4.images-embeds.md b/content/2.essentials/4.images-embeds.md index a6ed8e1..ffb3f0f 100644 --- a/content/2.essentials/4.images-embeds.md +++ b/content/2.essentials/4.images-embeds.md @@ -41,12 +41,12 @@ If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed To get more customizability with images, you can also use embeds to add images ::code-preview -Nuxt Social Image +:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} #code ```mdc -Nuxt Social Image +:img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} ``` :: @@ -56,12 +56,12 @@ To get more customizability with images, you can also use embeds to add images You can also use embeds to add videos, iframes, etc. ::code-preview{class="[&>div]:*:w-full"} - +:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} #code ```mdc - +:iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} ``` :: From 522d4f9402e92f0125ee3c49c0fe16eff2e87968 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 15:25:53 +0100 Subject: [PATCH 10/15] up --- content/2.essentials/3.prose-components.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/2.essentials/3.prose-components.md b/content/2.essentials/3.prose-components.md index f59dc4b..6bf3ee1 100644 --- a/content/2.essentials/3.prose-components.md +++ b/content/2.essentials/3.prose-components.md @@ -50,7 +50,7 @@ We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` pack ### Badge -Use markdown in the default slot of the `badge` component to display a [Badge](/components/badge) in your content. +Use markdown in the default slot of the `badge` component to display a [Badge](https://ui3.nuxt.dev/components/badge) in your content. ::code-preview{label="Preview"} From e87f236edac66c5d50fadf2cb39d5b800891c385 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 16:15:49 +0100 Subject: [PATCH 11/15] improve content --- content/2.essentials/1.markdown-syntax.md | 29 ++- content/2.essentials/2.code-blocks.md | 15 +- content/2.essentials/3.prose-components.md | 255 ++++++++++++++++++++- content/2.essentials/4.images-embeds.md | 6 +- 4 files changed, 278 insertions(+), 27 deletions(-) diff --git a/content/2.essentials/1.markdown-syntax.md b/content/2.essentials/1.markdown-syntax.md index 7d43f98..9fc55de 100644 --- a/content/2.essentials/1.markdown-syntax.md +++ b/content/2.essentials/1.markdown-syntax.md @@ -6,6 +6,8 @@ navigation.icon: i-lucide-heading-1 ## Titles +Use titles to introduce main sections. They structure your documentation and help users navigate content. + ::code-preview{class="[&>div]:*:my-0"} ## Titles @@ -20,6 +22,8 @@ navigation.icon: i-lucide-heading-1 ### Subtitles +Use subtitles to divide sections further. They create a more detailed content hierarchy for better readability. + ::code-preview{class="[&>div]:*:my-0"} ### Subtitles @@ -46,7 +50,7 @@ Nuxt UI Pro supports most Markdown formatting options. | Italic | `*italic*` | *Italic* | | Strike | `~~strike~~` | ~~Strike~~ | -You can also combine them: +Combine formatting for richer text styles and visual emphasis. | Style | How to use | Result | |---------------|---------------------|-------------------| @@ -54,7 +58,7 @@ You can also combine them: | Bold Strike | `~~**bold**~~` | ~~**Bold**~~ | | Italic Strike | `~~*italic*~~` | ~~*Italic*~~ | -You need to use HTML to write superscript and subscript text. Add `sup` or `sub` around your text to create superscript or subscript. +For exponents, indices, or mathematical notations, use HTML `` and `` tags. | Style | How to use | Result | |-------------|--------------------------|------------------------| @@ -63,6 +67,7 @@ You need to use HTML to write superscript and subscript text. Add `sup` or `sub` ## Links +Links connect different parts of your documentation and external resources, essential for user navigation and providing references. To create a link, wrap the link text in brackets `[]()`. ::code-preview{class="[&>div]:*:my-0"} @@ -77,9 +82,9 @@ To create a link, wrap the link text in brackets `[]()`. :: -### Links to other pages +### Internal links -Links to other pages of your documentation needs to be root-relative. For example, if you have a page called `getting-started/installation`, the link to that page should be `[Installation](/getting-started/installation)`. +For linking within your documentation, use root-relative paths like `/getting-started/installation`. ::code-preview{class="[&>div]:*:my-0"} @@ -95,9 +100,11 @@ Links to other pages of your documentation needs to be root-relative. For exampl ## Lists +Organize related items in a structured, readable format. Markdown supports unordered, ordered, and nested lists for various content needs. + ### Unordered -To create an unordered list, start each item with a `-`. +Use unordered lists for items without a specific sequence. Start each item with a `-` symbol. ::code-preview{class="[&>div]:*:my-0"} @@ -117,7 +124,7 @@ To create an unordered list, start each item with a `-`. ### Ordered -To create an ordered list, start each item with a number. +Use ordered lists when item order matters, like steps in a process. Start each item with a number. ::code-preview{class="[&>div]:*:my-0"} @@ -137,7 +144,7 @@ To create an ordered list, start each item with a number. ### Nested -To create a nested list, indent each item with four spaces. +Create hierarchical lists with sub-items for complex structures. Indent sub-items by four spaces for nesting. ::code-preview{class="[&>div]:*:my-0"} @@ -159,7 +166,7 @@ To create a nested list, indent each item with four spaces. ## Tables -To create a table, use three or more hyphens (`---`) to separate each column. +Present structured data in rows and columns clearly. Tables are ideal for comparing data or listing properties. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -183,9 +190,11 @@ To create a table, use three or more hyphens (`---`) to separate each column. ## Blockquotes +Highlight important quotations, citations, or emphasized text. Blockquotes visually distinguish quoted content. + ### Singleline -To create a blockquote, add a `>` in front of a paragraph. +Single-line blockquotes are best for short, impactful quotes or citations that fit within a single line. To create a single-line blockquote, add a `>` in front of a paragraph. Ideal for short and impactful quotes. ::code-preview{class="[&>div]:*:my-0"} @@ -201,6 +210,8 @@ To create a blockquote, add a `>` in front of a paragraph. ### Multiline +Multi-line blockquotes are suitable for longer quotes or when you need to include multiple paragraphs within a single quotation. + ::code-preview{class="[&>div]:*:my-0"} > Nuxt UI Pro is a collection of Vue components, composables and utils built on top of Nuxt UI, oriented on structure and layout and designed to be used as building blocks for your app. diff --git a/content/2.essentials/2.code-blocks.md b/content/2.essentials/2.code-blocks.md index 380ac9c..9f8908a 100644 --- a/content/2.essentials/2.code-blocks.md +++ b/content/2.essentials/2.code-blocks.md @@ -8,7 +8,7 @@ navigation.icon: i-lucide-code-xml ### Inline Code -To display a word or phrase as code, enclose it in backticks (\`). +Use inline code to display code snippets within text paragraphs. It's ideal for referencing code elements directly in sentences. ::code-preview{class="[&>div]:*:my-0"} @@ -24,7 +24,7 @@ To display a word or phrase as code, enclose it in backticks (\`). ### Code Blocks -To display a block of code, with syntax highlighting, use three backticks (\`\`\`). +Use code blocks to display multi-line code snippets with syntax highlighting. Code blocks are essential for presenting code examples clearly. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -47,6 +47,7 @@ export default defineNuxtConfig({ :: When writing a code-block, you can specify a filename that will be displayed on top of the code block. An icon will be automatically displayed based on the extension or the name. +Filenames help users understand the code's location and purpose within a project. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -106,6 +107,7 @@ export default defineAppConfig({ #### Highlight Line To highlight lines of code, add `{}` around the line numbers you want to highlight. +Line highlighting is useful for focusing users on important parts of code examples. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -142,7 +144,7 @@ export default defineAppConfig({ ### CodeGroup -Wrap your code-blocks around a `code-group` component to group them together in a tabbed interface. +Group code blocks in tabs using `code-group`. `code-group` is perfect for showing code examples in multiple languages or package managers. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -198,7 +200,7 @@ Like the `ProsePre` component, the `CodeGroup` handles filenames, icons and copy ### CodeTree -Wrap your code-blocks with a `code-tree` component in any particular order to display a tree view of your files. +Display code blocks in a file tree view using `code-tree`. `code-tree` is excellent for showcasing project structures and file relationships. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -362,7 +364,8 @@ Learn more about the `code-tree` component. ### `CodePreview` -To display a code block with he's preview, use the `code-preview` component. Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. +Use `code-preview` to show code output alongside the code. `code-preview` is ideal for interactive examples and demonstrating code results. +Write the code to be previewed in a the `default` slot and the actual code in the `code` slot. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full" label="Preview"} @@ -394,7 +397,7 @@ To display a code block with he's preview, use the `code-preview` component. Wri ### `CodeCollapse` -Use the `code-collapse` component to display a long code block in a collapsible format. +Use `code-collapse` for long code blocks to keep pages clean. `code-collapse` allows users to expand code blocks only when needed, improving readability. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} diff --git a/content/2.essentials/3.prose-components.md b/content/2.essentials/3.prose-components.md index 6bf3ee1..cb6c44d 100644 --- a/content/2.essentials/3.prose-components.md +++ b/content/2.essentials/3.prose-components.md @@ -6,7 +6,7 @@ navigation.icon: i-lucide-component ### Accordion -Use the `accordion` and `accordion-item` components to display an [Accordion](https://ui3.nuxt.dev/components/accordion) in your content. +Use `accordion` and `accordion-item` to create collapsible content sections. Accordions are useful for organizing FAQs, expandable details, or grouped information in an interactive way. ::code-preview{class="[&>div]:*:my-0"} @@ -50,7 +50,7 @@ We've also rebuilt Nuxt UI Pro from scratch and released a `v3.0.0-alpha.x` pack ### Badge -Use markdown in the default slot of the `badge` component to display a [Badge](https://ui3.nuxt.dev/components/badge) in your content. +Use badge to display status indicators or labels. Badges are great for highlighting version numbers, statuses, or categories within your content. ::code-preview{label="Preview"} @@ -70,9 +70,9 @@ Use markdown in the default slot of the `badge` component to display a [Badge](h ### Callout -Use markdown in the default slot of the `callout` component to add eye-catching context to your content. +Use callout to emphasize important contextual information. Callouts draw attention to notes, tips, warnings, or cautions, making key information stand out. -Use the `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link) component. +Customize with `icon` and `color` props or use `note`, `tip`, `warning`, `caution` shortcuts for pre-defined semantic styles. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -90,9 +90,7 @@ This is a `callout` with full **markdown** support. :: -You can also use the `note`, `tip`, `warning` and `caution` shortcuts with pre-defined icons and colors. - -::code-preview{label="Preview"} +::code-preview :::div{class="flex flex-col gap-4 w-full"} @@ -138,9 +136,9 @@ This action cannot be undone. ### Card -Use markdown in the default slot of the `card` component to highlight your content. +Use `card` to highlight content blocks. Cards are useful for showcasing features, resources, or related information in visually distinct and interactive containers. -Use the `title`, `icon` and `color` props to customize it. You can also pass any property from the [``](https://nuxt.com/docs/api/components/nuxt-link). +Customize with `title`, `icon`, and `color` props. Cards can also act as links using `` properties for navigation. ::code-preview{class="[&>div]:*:my-0 [&>div]:*:w-full"} @@ -172,7 +170,7 @@ A dashboard with multi-column layout. ### CardGroup -Wrap your `card` components with the `card-group` component to group them together in a grid layout. +Use `card-group` to arrange cards in a grid layout. `card-group` is ideal for displaying collections of cards in a structured, visually appealing, and responsive grid. ::code-preview @@ -269,3 +267,240 @@ A landing page you can use as starting point. ``` :: + +### Collapsible + +Use `collapsible` to hide and reveal content sections. `collapsible` is ideal for showing optional details, technical specifications, or less frequently needed information. + +::code-preview{class="[&>div]:*:w-full"} +::collapsible + +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | + +:: + +#code + +```mdc +::collapsible + +| Prop | Default | Type | +|---------|-----------|--------------------------| +| `name` | | `string`{lang="ts-type"} | +| `size` | `md` | `string`{lang="ts-type"} | +| `color` | `neutral` | `string`{lang="ts-type"} | + +:: +``` + +:: + +### Field + +Use `field` to describe a specific field, property, or parameter. `field` components are perfect for documenting API parameters, component props, or configuration options. + +::code-preview +::field{name="name" type="string" required class="w-full"} +The `description` can be set as prop or in the default slot with full **markdown** support. +:: + +#code + +```mdc +::field{name="name" type="string" required} +The `description` can be set as prop or in the default slot with full **markdown** support. +:: +``` + +:: + +### FieldGroup + +Use `field-group` to group related fields together in a list. `field-group` helps organize and structure documentation for multiple related fields or properties. + +::code-preview + +:::field-group + +::field{name="analytics" type="boolean"} +Default to `false` - Enables analytics for your project (coming soon). +:: + +::field{name="blob" type="boolean"} +Default to `false` - Enables blob storage to store static assets, such as images, videos and more. +:: + +::field{name="cache" type="boolean"} +Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` +:: + +::field{name="database" type="boolean"} +Default to `false` - Enables SQL database to store your application's data. +:: + +::: + +#code + +```mdc +::field-group + ::field{name="analytics" type="boolean"} + Default to `false` - Enables analytics for your project (coming soon). + :: + + ::field{name="blob" type="boolean"} + Default to `false` - Enables blob storage to store static assets, such as images, videos and more. + :: + + ::field{name="cache" type="boolean"} + Default to `false` - Enables cache storage to cache your server route responses or functions using Nitro's `cachedEventHandler` and `cachedFunction` + :: + + ::field{name="database" type="boolean"} + Default to `false` - Enables SQL database to store your application's data. + :: +:: +``` + +:: + +### Icon + +Use `icon` to insert icons from icon libraries. Icons provide visual cues and enhance the user interface of your documentation. + +::code-preview +:icon{name="i-simple-icons-nuxtdotjs"} + +#code + +```mdc +:icon{name="i-simple-icons-nuxtdotjs"} +``` + +:: + +### Kbd + +Use `kbd` to display keyboard keys or shortcuts. `kbd` components clearly indicate keyboard inputs for instructions or command references. + +::code-preview{class="[&>div]:*:my-0"} +:kbd{value="meta"} :kbd{value="K"} + +#code + +```mdc +:kbd{value="meta"} :kbd{value="K"} +``` + +:: + +### Tabs + +Use `tabs` and `tabs-item` to organize content into tabbed interfaces. Tabs are effective for separating content into logical sections, improving content discoverability and organization. + +::code-preview{class="[&>div]:*:my-0"} + +:::tabs{class="w-full"} + +:::tabs-item{label="Code" icon="i-lucide-code"} + +```mdc +::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:: +``` + +::: + +:::tabs-item{label="Preview" icon="i-lucide-eye"} + +::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:: + +::: + +::: + +#code + +````mdc +::tabs + +:::tabs-item{label="Code" icon="i-lucide-code"} + +```mdc +::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:: +``` + +::: + +:::tabs-item{label="Preview" icon="i-lucide-eye"} + +::callout +Lorem velit voluptate ex reprehenderit ullamco et culpa. +:: + +::: + +:: +```` + +:: + +### Steps + +Use `steps` to create step-by-step guides from document headings. `steps` component automatically numbers headings, creating a numbered guide for processes and tutorials. + +Set the `level` prop to define the heading level to include in the step-by-step guide. + +:::code-preview{class="[&>div]:*:w-full"} + +::steps{level="4"} + +#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"} + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#### Import Tailwind CSS and Nuxt UI Pro in your CSS + +```css [assets/css/main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; +``` + +:: +#code + +````mdc +::steps{level="4"} + +#### Add the Nuxt UI Pro module in your `nuxt.config.ts`{lang="ts-type"} + +```ts [nuxt.config.ts] +export default defineNuxtConfig({ + modules: ['@nuxt/ui-pro'] +}) +``` + +#### Import Tailwind CSS and Nuxt UI Pro in your CSS + +```css [assets/css/main.css] +@import "tailwindcss"; +@import "@nuxt/ui-pro"; +``` + +:: +```` + +::: diff --git a/content/2.essentials/4.images-embeds.md b/content/2.essentials/4.images-embeds.md index ffb3f0f..01fef6a 100644 --- a/content/2.essentials/4.images-embeds.md +++ b/content/2.essentials/4.images-embeds.md @@ -8,6 +8,8 @@ navigation.icon: i-lucide-image ### Using Markdown +Display images using standard Markdown syntax. Markdown images are simple to implement for basic image display. + ::code-preview ![Nuxt Social Image](https://nuxt.com/new-social.jpg) @@ -38,7 +40,7 @@ If [`@nuxt/image`](https://image.nuxt.com/get-started/installation) is installed ### Using Embeds -To get more customizability with images, you can also use embeds to add images +Use embeds for more image customization. Embeds offer greater control over image attributes like size and styling. ::code-preview :img{src="https://nuxt.com/new-social.jpg" alt="Nuxt Social Image" height="150"} @@ -53,7 +55,7 @@ To get more customizability with images, you can also use embeds to add images ## Embeds and HTML elements -You can also use embeds to add videos, iframes, etc. +Embeds allow adding various HTML elements like videos and iframes. This feature extends documentation capabilities to include interactive and multimedia content. ::code-preview{class="[&>div]:*:w-full"} :iframe{src="https://www.youtube-nocookie.com/embed/_eQxomah-nA?si=pDSzchUBDKb2NQu7" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen style="aspect-ratio: 16/9;"} From 55a392c2de9eab71a8bdb0be15e5bc70fa23f8a0 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 16:33:31 +0100 Subject: [PATCH 12/15] up --- content/1.getting-started/1.index.md | 23 ++++++++++++----------- 1 file changed, 12 insertions(+), 11 deletions(-) diff --git a/content/1.getting-started/1.index.md b/content/1.getting-started/1.index.md index 0a2c81c..f72667c 100644 --- a/content/1.getting-started/1.index.md +++ b/content/1.getting-started/1.index.md @@ -4,7 +4,7 @@ description: Welcome to Nuxt UI Pro documentation template. navigation.icon: i-lucide-house --- -This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui.nuxt.com/pro), a collection of premium components built on top of [Nuxt UI](https://ui.nuxt.com) to create beautiful & responsive Nuxt applications in minutes. +This template is a ready-to-use documentation template made with [Nuxt UI Pro](https://ui3.nuxt.dev/pro), a collection of premium components built on top of [Nuxt UI](https://ui3.nuxt.dev) to create beautiful & responsive Nuxt applications in minutes. There are already many websites based on this template: @@ -72,15 +72,16 @@ The best place to manage your projects, environments and variables. :: -## Features +## Key Features -- Powered by [Nuxt 3](https://nuxt.com) -- Built with [Nuxt UI](https://ui.nuxt.com) and [Nuxt UI Pro](https://ui.nuxt.com/pro) -- Write content with [MDC syntax](https://content.nuxt.com/usage/markdown) thanks to [Nuxt Content](https://content.nuxt.com) -- Compatible with [Nuxt Studio](https://content.nuxt.com/docs/studio) -- Auto-generated sidebar navigation -- Full-Text Search out of the box -- Beautiful Typography styles -- Dark mode support -- And more... +This template includes a range of features designed to streamline documentation management: +- **Powered by [Nuxt 3](https://nuxt.com)**: Utilizes the latest Nuxt framework for optimal performance. +- **Built with [Nuxt UI](https://ui3.nuxt.dev) and [Nuxt UI Pro](https://ui3.nuxt.dev/pro)**: Integrates a comprehensive suite of UI components. +- **[MDC Syntax](https://content.nuxt.com/usage/markdown) via [Nuxt Content](https://content.nuxt.com)**: Supports Markdown with component integration for dynamic content. +- **[Nuxt Studio](https://content.nuxt.com/docs/studio) Compatible**: Offers integration with Nuxt Studio for content editing. +- **Auto-generated Sidebar Navigation**: Automatically generates navigation from content structure. +- **Full-Text Search**: Includes built-in search functionality for content discovery. +- **Optimized Typography**: Features refined typography for enhanced readability. +- **Dark Mode**: Offers dark mode support for user preference. +- **Extensive Functionality**: Explore the template to fully appreciate its capabilities. From 3e5a0687ae06aeee49864ebc7cb2635a9d22fc29 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Tue, 25 Feb 2025 17:53:00 +0100 Subject: [PATCH 13/15] add nuxt-llms --- content/2.essentials/.navigation.yml | 2 +- nuxt.config.ts | 29 +++++++++++++++++++++++++++- package.json | 5 ++++- pnpm-lock.yaml | 15 +++++++++++++- 4 files changed, 47 insertions(+), 4 deletions(-) diff --git a/content/2.essentials/.navigation.yml b/content/2.essentials/.navigation.yml index 399490d..b82ae3f 100644 --- a/content/2.essentials/.navigation.yml +++ b/content/2.essentials/.navigation.yml @@ -1 +1 @@ -title: Essential +title: Essentials diff --git a/nuxt.config.ts b/nuxt.config.ts index 8d22074..f465065 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -5,7 +5,8 @@ export default defineNuxtConfig({ '@nuxt/image', '@nuxt/ui-pro', '@nuxt/content', - 'nuxt-og-image' + 'nuxt-og-image', + 'nuxt-llms' ], devtools: { @@ -40,5 +41,31 @@ export default defineNuxtConfig({ icon: { provider: 'iconify' + }, + + llms: { + domain: 'https://docs-template.nuxt.dev/', + title: 'Nuxt UI Pro - Docs template', + description: 'A template for building documentation with Nuxt UI Pro and Nuxt Content', + full: { + title: 'Nuxt UI Pro - Docs template Full Documentation', + description: 'This is the full documentation for the Nuxt UI Pro - Docs template' + }, + sections: [ + { + title: 'Getting Started', + contentCollection: 'docs', + contentFilters: [ + { field: 'path', operator: 'LIKE', value: '/getting-started%' } + ] + }, + { + title: 'Essentials', + contentCollection: 'docs', + contentFilters: [ + { field: 'path', operator: 'LIKE', value: '/essentials%' } + ] + } + ] } }) diff --git a/package.json b/package.json index fc9a6b9..0714eac 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@nuxt/image": "^1.9.0", "@nuxt/ui-pro": "3.0.0-alpha.13", "nuxt": "^3.15.2", + "nuxt-llms": "0.1.0", "nuxt-og-image": "^4.1.2" }, "devDependencies": { @@ -28,7 +29,9 @@ "vue-tsc": "^2.2.0" }, "pnpm": { - "onlyBuiltDependencies": ["better-sqlite3"] + "onlyBuiltDependencies": [ + "better-sqlite3" + ] }, "packageManager": "pnpm@10.4.1" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 19da9b4..e0e82cf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -29,6 +29,9 @@ importers: nuxt: specifier: ^3.15.2 version: 3.15.2(@libsql/client@0.14.0)(@parcel/watcher@2.5.0)(@types/node@22.10.7)(better-sqlite3@11.8.1)(db0@0.2.3(@libsql/client@0.14.0)(better-sqlite3@11.8.1))(eslint@9.20.1(jiti@2.4.2))(ioredis@5.4.2)(lightningcss@1.29.1)(magicast@0.3.5)(optionator@0.9.4)(rollup@4.31.0)(terser@5.37.0)(typescript@5.7.3)(vite@6.0.9(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.7.3))(yaml@2.7.0) + nuxt-llms: + specifier: 0.1.0 + version: 0.1.0(magicast@0.3.5) nuxt-og-image: specifier: ^4.1.2 version: 4.1.2(magicast@0.3.5)(vite@6.0.9(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)) @@ -3850,6 +3853,9 @@ packages: resolution: {integrity: sha512-iq7hbSnfp4Ff/PTMYBF8pYabTQuF3u7HVN66Kb3hOnrnaPEdXEn/q6HkAn5V8UjOVSgXYpvycM0wSnwyADYNVA==} hasBin: true + nuxt-llms@0.1.0: + resolution: {integrity: sha512-sMH3s2wZrFKxnM+PRG7PY5AApxrv7LJAKoDVk0SJyjGlQa20I6d1cJpMx4J6AayrGA/GdBtqObzFodIhOPDJoQ==} + nuxt-og-image@4.1.2: resolution: {integrity: sha512-TeBsI9Ic/ETD4fTpycKW9lYp5Q2hd5ozE5Bt22opTsIuqzSx20ZKzonj0yiHRgShMhGE+YMZhFzk7YvDaNNWGA==} engines: {node: '>=18.0.0'} @@ -6154,7 +6160,7 @@ snapshots: '@libsql/isomorphic-ws@0.1.5': dependencies: '@types/ws': 8.5.13 - ws: 8.18.0 + ws: 8.18.1 transitivePeerDependencies: - bufferutil - utf-8-validate @@ -10319,6 +10325,13 @@ snapshots: - magicast - supports-color + nuxt-llms@0.1.0(magicast@0.3.5): + dependencies: + '@nuxt/kit': 3.15.4(magicast@0.3.5) + transitivePeerDependencies: + - magicast + - supports-color + nuxt-og-image@4.1.2(magicast@0.3.5)(vite@6.0.9(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0))(vue@3.5.13(typescript@5.7.3)): dependencies: '@nuxt/devtools-kit': 2.0.0-beta.3(magicast@0.3.5)(vite@6.0.9(@types/node@22.10.7)(jiti@2.4.2)(lightningcss@1.29.1)(terser@5.37.0)(yaml@2.7.0)) From 14b706968c2d3c134b0774be487f7a1046e9fca0 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Wed, 26 Feb 2025 10:45:07 +0100 Subject: [PATCH 14/15] fix toc --- nuxt.config.ts | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/nuxt.config.ts b/nuxt.config.ts index f465065..5eb658c 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -15,6 +15,16 @@ export default defineNuxtConfig({ css: ['~/assets/css/main.css'], + content: { + build: { + markdown: { + toc: { + searchDepth: 1 + } + } + } + }, + future: { compatibilityVersion: 4 }, From f995d0bf639d364f6b2e65d2d036873fb5cc7ef7 Mon Sep 17 00:00:00 2001 From: HugoRCD Date: Wed, 26 Feb 2025 11:25:49 +0100 Subject: [PATCH 15/15] updage usage content and og image --- app/app.vue | 2 - app/components/OgImage/OgImageDocs.vue | 83 ++++++++++++++++++++------ app/pages/[...slug].vue | 8 ++- app/pages/index.vue | 4 +- content/1.getting-started/3.usage.md | 80 +++++++++++-------------- 5 files changed, 109 insertions(+), 68 deletions(-) diff --git a/app/app.vue b/app/app.vue index fc71682..be86519 100644 --- a/app/app.vue +++ b/app/app.vue @@ -21,8 +21,6 @@ useHead({ useSeoMeta({ titleTemplate: `%s - ${seo?.siteName}`, ogSiteName: seo?.siteName, - ogImage: 'https://docs-template.nuxt.dev/social-card.png', - twitterImage: 'https://docs-template.nuxt.dev/social-card.png', twitterCard: 'summary_large_image' }) diff --git a/app/components/OgImage/OgImageDocs.vue b/app/components/OgImage/OgImageDocs.vue index 4b5f790..dadabc9 100644 --- a/app/components/OgImage/OgImageDocs.vue +++ b/app/components/OgImage/OgImageDocs.vue @@ -1,27 +1,74 @@ -