🔗 Array-Based Routing

WBC-Routes2 leverages the power of arrays to create complex, multi-part content flows in a clean, structured, and scalable way.

Instead of writing multiple components manually, you can describe a route view using an array of elements. Each array item becomes a block in the rendered output: markdown, file, image, component, or logic.

---

💡 Why Arrays?

• Arrays allow for ordered content definition.
• Easier to generate programmatically.
• Ideal for step-by-step flows, tutorials, or multi-block pages.
• Enable dynamic iteration through lists, APIs, or data-driven layouts.

---

🧱 Simple Static Array Example

{
  path: "/array/static",
  name: "ArrayStatic",
  component: WBC,
  props: {
    item: [
      "MD__## Welcome to Static Array Routing",
      "<p>This is a static HTML block.</p>",
      {
        comp: "VAlert",
        options: {
          type: "success",
          html: "✅ Success message in a card"
        }
      },
      "./docs/intro.md"
    ]
  }
}

---

🧠 Dynamic Markdown with Loops

You can generate content like lists dynamically using JS in an array.

{
  path: "/array/markdown-loop",
  name: "ArrayMarkdownLoop",
  component: WBC,
  props: {
    item: [
      "MD__### Programming Languages",
      "~\"<~ul>,<li>,JavaScript,Python,Go,Rust\".split(',')"
    ]
  }
}

Rendered Output:

• JavaScript
• Python
• Go
• Rust

---

🌍 Multilingual Array Structure

Array entries can adapt to the language of the user by nesting language-specific objects.

{
  path: "/array/multilang",
  name: "ArrayMultilang",
  component: WBC,
  props: {
    item: [
      {
        en: "MD__# Welcome",
        fr: "MD__# Bienvenue",
        ar: "MD__# مرحبا"
      },
      {
        en: "./docs/intro-en.md",
        fr: "./docs/intro-fr.md"
      },
      {
        comp: "div",
        options: {
          html: {
            en: "This is the English message.",
            fr: "Ceci est le message en français.",
            ar: "هذه هي الرسالة باللغة العربية."
          }
        }
      }
    ]
  }
}

---

📚 Nested Component Arrays

WBC allows nesting components inside layout wrappers via array format:

{
  path: "/array/nested",
  name: "ArrayNested",
  component: WBC,
  props: {
    item: [
      "<~VContainer|pa-10>",
      "<VCard|ma-5 pa-3 blue lighten-4>",
      "MD__### Card Content with Markdown",
      {
        comp: "VBtn",
        options: {
          html: "Click Me",
          color: "primary"
        }
      },
      "~./assets/image.jpg"
    ]
  }
}

---

🔀 Mixing Markdown, JSON, Events, and More

{
  path: "/array/advanced",
  name: "ArrayAdvanced",
  component: WBC,
  props: {
    item: [
      "MD__# Complex View",
      "<p>This array holds dynamic and reactive blocks.</p>",
      {
        comp: "JsonViewer",
        options: {
          value: { name: "Alice", age: 30, active: true }
        }
      },
      {
        comp: "VBtn",
        dive: true,
        options: {
          html: "Toggle",
          color: "warning",
          on: {
            click: (that) => () => {
              alert("Dynamic button clicked!");
            }
          }
        }
      },
      {
        comp: "meta",
        title: "Advanced Array Routing",
        description: "Demonstrates mixing multiple formats in WBC-Routes2"
      }
    ]
  }
}

---

📦 Array from External JS/JSON Source

Load content arrays dynamically:

// file: ./routes/data/arrayContent.js
export default [
  "MD__# Dynamic List",
  {
    comp: "div",
    options: {
      html: "Hello from imported array"
    }
  },
  "~./assets/img.png"
];

{
  path: "/array/external",
  name: "ArrayExternal",
  component: WBC,
  props: {
    item: () => import("./routes/data/arrayContent.js")
  }
}

---

🚀 Summary

Array-based routing unlocks:

• Scalable, modular layout systems
• Dynamically computed routing content
• Language-adaptive content via structured arrays
• Clean separation between structure and logic