docs: use block component example for code snippets

Signed-off-by: ZTL-UwU <[email protected]>
ZTL-UwU · Jan 19, 2025 · 9aa194c · 9aa194c
1 parent 0ec49fd
commit 9aa194c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 12 deletions.
diff --git a/components/content/CodeSnippet.vue b/components/content/CodeSnippet.vue
@@ -26,7 +26,7 @@ const {
   highlights?: string;
   meta?: string;
   start?: number;
-  offset?: string;
+  offset?: number;
 }>();
 
 const loadedCode = ref('');

diff --git a/content/2.components/2.docs/code-snippet.md b/content/2.components/2.docs/code-snippet.md
@@ -16,51 +16,101 @@ badges:
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+  ::code-snippet
+  ---
+  file: /components/DarkModeToggle.vue
+  language: vue
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/components/DarkModeToggle.vue" language="vue"}
+::code-snippet
+---
+file: /components/DarkModeToggle.vue
+language: vue
+---
+::
 ```
 ::
 
 ### Highlighting Lines
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  title: useBreadcrumb
+  highlights: 9-11
+  meta: line-numbers height=300
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" title="useBreadcrumb" highlights="9-11" meta="line-numbers height=300"}
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+title: useBreadcrumb
+highlights: 9-11
+meta: line-numbers height=300
+---
+::
 ```
 ::
 
 Translates to:
 
-````md
-```ts [useBreadcrumb] {9-11} line-numbers height=300
+`````md
+````ts [useBreadcrumb] {9-11} line-numbers height=300
 // code imported from /composables/useBreadcrumb.ts
-```
 ````
+`````
 
 ### Using Offset Props
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" start="6" offset="4"}
+  ::code-snippet
+  ---
+  file: /composables/useBreadcrumb.ts
+  language: ts
+  start: 6
+  offset: 4
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{file="/composables/useBreadcrumb.ts" language="ts" start="6" offset="4"}
+::code-snippet
+---
+file: /composables/useBreadcrumb.ts
+language: ts
+start: 6
+offset: 4
+---
+::
 ```
 ::
 
 ### Fetching From a Remote URL
 
 ::stack
 ::div{class="p-4"}
-:code-snippet{url="https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue" language="vue"}
+  ::code-snippet
+  ---
+  url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+  language: vue
+  ---
+  ::
 ::
 ```mdc
-:code-snippet{url="https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue" language="vue"}
+::code-snippet
+---
+url: https://raw.githubusercontent.com/ZTL-UwU/shadcn-docs-nuxt/refs/heads/main/pages/index.vue
+language: vue
+---
+::
 ```
 ::