📝 Markdown as First-Class Route Content

With WBC-Routes2, you can directly route to Markdown content — whether from local files, external URLs, or even embedded inline Markdown strings. This makes documentation-centric or content-heavy Vue applications lightning fast to build and extend.

---

🔹 Local Markdown File as Route Content

Serve a local .md file from the public/ or src/ directory using:

{
  path: "/markdown/introduction",
  name: "MarkdownIntro",
  component: WBC,
  props: {
    item: "./docs/intro.md"
  }
}

📌 The file path must be relative to your public assets or your Vite/static folder.

---

🔸 Inline Markdown Snippet

Embed Markdown inline using the MD__ prefix:

{
  path: "/markdown/inline",
  name: "MarkdownInline",
  component: WBC,
  props: {
    item: "MD__# This is a Markdown Header"
  }
}

✅ This content will be rendered dynamically as Vue interpretable Markdown.

---

🔸 Array of Markdown Sections

Multiple markdown blocks can be rendered with:

{
  path: "/markdown/array",
  name: "MarkdownArray",
  component: WBC,
  props: {
    item: [
      "MD__# Section 1",
      "MD__- Bullet 1",
      "MD__- Bullet 2",
      "MD__# Section 2",
      "./docs/details.md"
    ]
  }
}

🚀 This is particularly useful for structured pages built from both static and dynamic content.

---

🧪 Markdown with Reactive or Dynamic Logic

You can inject JavaScript logic within Markdown using WBC’s JS-eval compatibility:

{
  path: "/markdown/dynamic",
  name: "MarkdownDynamic",
  component: WBC,
  props: {
    item: {
      comp: "MD",
      dive: true,
      options: {
        html: "MD__## Hello ``{this.userName || 'Guest'}",
        on: {
          mounted: that => {
            that.userName = 'Wissem';
          }
        }
      }
    }
  }
}

🧠 This enables personalization, conditional text, and dynamic labels in Markdown.

---

🔁 Mixed Markdown and HTML

You can mix raw HTML with Markdown using either:

• Markdown src + html fallback
• WBHtml injection blocks (<~div>, li__Text|color, etc.)

Example:

{
  path: "/markdown/mixed",
  name: "MarkdownMixed",
  component: WBC,
  props: {
    item: {
      comp: "MD",
      options: {
        html: [
          "<~ol>", "<li>",
          "MD__### Inline Header",
          "<div class='tip'>Custom HTML block with class</div>"
        ],
        src: "# Top Title\n\n- List item A\n- List item B"
      }
    }
  }
}

---

✅ Summary

Use Case	Method
Load from .md file	Relative file path in item
Inline snippet	String starting with MD__
Multiple fragments	Array of MD__, files, or components
Interactive logic	Use dive:true with dynamic bindings
Markdown + HTML	Combine with src and html in options