fix: fully support YAML structure inside directives (#311)

docs/pages/templates/pre-launch.md

@@ -3,10 +3,12 @@ template: pre-launch
 title: Pre-launch template
 ---
 
+
 :::pre-launch-hero{yml}
 title: Awesome startup
 description: Pretty long awesome startup description
-ctaDescription: Request an invite
-ctaPlaceholder: Your email
-ctaLabel: Get Invite
+cta:
+    description: Request an invite
+    placeholder: Your email
+    label: Get Invite
 :::

src/core/parser/markdown/plugin/directive.ts

@@ -1,4 +1,3 @@
-import hastToMarkdown from 'mdast-util-to-markdown'
 import visit from 'unist-util-visit'
 import h from 'hastscript'
 import { useMarkdownParser } from '../'
@@ -8,24 +7,11 @@ ${yamlString}
 ---`
 
 export default function htmlDirectives({ directives, dataComponents }) {
-  const toMarkdownExtensions = this.data().toMarkdownExtensions
   const parser = useMarkdownParser()
 
-  function toMarkdown(node) {
-    return node.children
-      .map(child =>
-        hastToMarkdown(child, {
-          bullet: '-',
-          extensions: toMarkdownExtensions
-        })
-      )
-      .join('')
-  }
-
-  function toData(node) {
-    const markdown = toMarkdown(node)
-      // fix issue with toMarkdown autolinker
-      .replace(/<(https?:[^>]*)>/g, '$1')
+  function toData(raw) {
+    const lines = raw.split('\n')
+    const markdown = lines.slice(1, lines.length - 1).join('\n')
 
     const { data } = parser.parseFrontMatter(toFrontMatter(markdown))
 
@@ -45,7 +31,7 @@ export default function htmlDirectives({ directives, dataComponents }) {
     return Object.fromEntries(enteries)
   }
 
-  return async (tree, { data: pageData }) => {
+  return async (tree, { data: pageData, contents }) => {
     const jobs = []
     visit(tree, ['textDirective', 'leafDirective', 'containerDirective'], visitor)
 
@@ -55,10 +41,11 @@ export default function htmlDirectives({ directives, dataComponents }) {
       const hast = h(node.name, node.attributes)
 
       if (dataComponents.includes(node.name) || typeof node.attributes.yml !== 'undefined') {
+        const { start, end } = node.position
         hast.properties = bindData(
           {
             ...hast.properties,
-            ...toData(node)
+            ...toData(contents.substr(start.offset, end.offset - start.offset))
           },
           pageData
         )

src/defaultTheme/components/organisms/PreLaunchHero.vue

@@ -22,20 +22,20 @@
       <div class="w-full">
         <div class="flex flex-col max-w-md mx-auto md:mx-0">
           <p class="text-sm mb-2 font-medium text-center md:text-left text-gray-600 dark:text-gray-500">
-            {{ ctaDescription }}
+            {{ cta.description }}
           </p>
           <div
             class="flex flex-col md:flex-row border border-gray-300 placeholder-gray-900 dark:border-gray-700 rounded-md p-1 w-full mb-2"
           >
             <input
               type="text"
-              :placeholder="ctaPlaceholder"
+              :placeholder="cta.placeholder"
               class="flex-1 py-3 px-3 focus:outline-none bg-transparent dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-600"
             />
             <button
               class="inline-block font-semibold text-center items-center flex-none px-6 py-3 text-lg leading-6 rounded-md text-white transition-colors duration-200 border border-transparent border-l-0 bg-primary-500 hover:bg-primary-600 focus:outline-none"
             >
-              {{ ctaLabel }}
+              {{ cta.label }}
             </button>
           </div>
           <SocialIcons padding="p-1.5" />
@@ -67,17 +67,13 @@ export default defineComponent({
       type: String,
       default: 'I am the Hero description, with some text useful to go with the title.'
     },
-    ctaDescription: {
-      type: String,
-      default: 'CTA description'
-    },
-    ctaPlaceholder: {
-      type: String,
-      default: 'CTA placeholder'
-    },
-    ctaLabel: {
-      type: String,
-      default: 'CTA label'
+    cta: {
+      type: Object,
+      default: () => ({
+        label: 'CTA label',
+        description: 'CTA description',
+        placeholder: 'CTA placeholder'
+      })
     },
     imageUrl: {
       type: String,