up

Author: HugoRCD

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;

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                     |
 |---------|-----------|--------------------------|

content/2.essentials/2.code-blacks.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]
+<template>
+  <UApp>
+    <NuxtPage />
+  </UApp>
+</template>
+```
+
+```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.
+::