feat: add default value to variable binding

docs/content/0.index.md

@@ -229,7 +229,7 @@ title: Nuxt Architecture.
 
 ### `{{}}` Binding Variables
 
-The `{{ $doc.variable }}` syntax allows you to bind variables in your Markdown content. This is especially useful when you want to dynamically insert values into your document.
+The `{{ $doc.variable || 'defaultValue' }}` syntax allows you to bind variables in your Markdown content. This is especially useful when you want to dynamically insert values into your document.
 
 To use this syntax, simply enclose the variable name within double curly braces, like so:
 
@@ -238,7 +238,7 @@ To use this syntax, simply enclose the variable name within double curly braces,
 color: blue
 ---
 
-# The color is {{ $doc.color }}.
+# The color is {{ $doc.color || 'red' }}.
 ```
 
 ## Contributing

playground/pages/index.vue

@@ -15,6 +15,8 @@
 const mdcOptions = ref({ experimental: { autoUnwrap: true } })
 const markdown = ref(`# Hello World
 
+{{ $doc.name || 'Nuxt' }}
+
 [span]
 
 - [ ] Task 1 [span]

src/from-markdown.ts

@@ -81,11 +81,15 @@ export default (opts: RemarkMDCOptions = {}) => {
 
   // Bindings
   function enterBindingContent (this: CompileContext, token: Token) {
+    const regex = /([^|]*)(?:\|\|\s*'(.*)')?/
+    const values = regex.exec(this.sliceSerialize(token))
+
     this.enter({
       type: 'textComponent',
       name: 'binding',
       attributes: {
-        value: this.sliceSerialize(token).trim()
+        value: values[1].trim(),
+        defaultValue: values[2]
       }
     }, token)
   }