🌀 Mixed Routing in WBC-Routes2

Mixed routing is the fusion of multiple formats and content types inside a single WBC route configuration.

WBC-Routes2 supports arrays that mix:

• Markdown strings
• Vue/HTML markup
• WBC components
• Local or remote file paths
• Multilingual file maps
• WBC-style object declarations
• Event handlers and reactive logic

---

🔰 Basic Mixed Content Example

{
  path: "/mixed/basic",
  name: "MixedBasic",
  component: WBC,
  props: {
    item: [
      "MD__# Welcome to Mixed Routing",
      "<p>This is raw HTML inside a route.</p>",
      {
        comp: "VAlert",
        options: {
          type: "info",
          text: true,
          html: "This is a Vuetify Alert inside the same route."
        }
      },
      "./assets/example.md",
      {
        en: "./assets/example.en.md",
        fr: "./assets/example.fr.md"
      }
    ]
  }
}

---

🧪 Inline and Wrapped Syntax Mix

Mix ~, MD__, and object styles for cleaner code.

{
  path: "/mixed/wrapped",
  name: "MixedWrapped",
  component: WBC,
  props: {
    item: [
      "<~VContainer|pa-5>",
      "<VCard|ma-5 pa-3 blue lighten-5>",
      "MD__## Mixed Rendering Components",
      "<p>Everything is wrapped!</p>",
      {
        comp: "VBtn",
        options: {
          html: "Click here",
          color: "primary",
          on: {
            click: () => alert("Hello from mixed WBC!")
          }
        }
      },
      "~./assets/logo.png"
    ]
  }
}

---

🌐 Mixing Remote URLs

Include web-based files, images, or markdown links:

{
  path: "/mixed/urls",
  name: "MixedUrls",
  component: WBC,
  props: {
    item: [
      "MD__## External Markdown",
      "https://raw.githubusercontent.com/user/repo/README.md",
      {
        comp: "img",
        options: {
          src: "https://placekitten.com/400/300",
          style: { width: "100%" }
        }
      }
    ]
  }
}

---

🌍 Mixed with Multilingual Support

WBC allows dynamic selection of content by locale:

{
  path: "/mixed/multilang",
  name: "MixedMultiLang",
  component: WBC,
  props: {
    item: [
      "MD__## Bonjour / Hello",
      {
        en: "./locales/content.en.md",
        fr: "./locales/content.fr.md",
        ar: "./locales/content.ar.md"
      },
      {
        comp: "div",
        options: {
          html: {
            en: "This is English block",
            fr: "Ceci est un bloc en français",
            ar: "هذه كتلة بالعربية"
          }
        }
      }
    ]
  }
}

---

🎛 Mixing Interactivity

You can inject handlers, watchers, and more:

{
  path: "/mixed/dynamic",
  name: "MixedDynamic",
  component: WBC,
  props: {
    item: [
      {
        comp: "div",
        dive: true,
        options: {
          html: "Click the button below to toggle color",
          style: { backgroundColor: "lightblue", padding: "10px" }
        }
      },
      {
        comp: "VBtn",
        dive: true,
        options: {
          html: "Toggle Color",
          color: "success",
          on: {
            click: (that) => () => {
              that.data.options.color = that.data.options.color === "success" ? "error" : "success";
            }
          }
        }
      }
    ]
  }
}

---

🔄 Using init and Meta with Mixed

{
  path: "/mixed/full",
  name: "MixedFull",
  component: WBC,
  props: {
    item: [
      {
        comp: "meta",
        title: "Mixed Content Route",
        description: "A WBC route rendering text, HTML, markdown, buttons, and images.",
        keywords: ["mixed", "routing", "wbc", "vuepress", "vue"]
      },
      "MD__# Full Mixed Route",
      "<p>Rendered in multiple formats.</p>",
      "./about.md",
      "~./assets/visual.png",
      {
        comp: "VBtn",
        dive: true,
        options: {
          html: "🎯 Launch",
          color: "teal",
          on: {
            click: () => console.log("Launch triggered")
          }
        }
      },
      {
        comp: "div",
        init: () => console.log("Mixed layout initiated"),
        options: {
          html: "🔧 JS ran successfully"
        }
      }
    ]
  }
}

---

✅ Summary

Mixed routes are ideal for:

• Documentation portals
• Hybrid dashboards
• Language-aware views
• Devtools and viewers
• Tutorials, embedded media, live markdown