📁 File-based Routing in WBC-Routes2

With WBC-Routes2, you can render static content such as .md, .pdf, .mp4, .png, etc., directly through routes. This is perfect for building documentation sites, tutorials, or demo platforms with minimal Vue code.

---

📄 Load a Markdown File from public/

To load a markdown file located in the public directory (or equivalent):

{
  path: "/guide",
  name: "GuideRoute",
  component: WBC,
  props: {
    item: "./docs/guide.md"
  }
}

VuePress will serve this file statically, and WBC will render it as Markdown.

---

🧠 Use Subfolders

You can structure files into subdirectories. WBC will resolve nested paths:

{
  path: "/features/bootstrap",
  name: "WBCBootstrap",
  component: WBC,
  props: {
    item: "./md/wbcBootstrapGit/wbcBootstrapGit.md"
  }
}

---

🌍 File Routing with Multi-language Support

For multilingual routing based on file content:

{
  path: "/features/localfile",
  name: "WBCLocalFiles",
  component: WBC,
  props: {
    item: {
      en: "./md/features-en.md",
      fr: "./md/features-fr.md",
      ar: "./md/features-ar.md"
    }
  }
}

The correct file will be selected based on the app's current language context.

---

📸 Render Images

You can render an image as the main content:

{
  path: "/image",
  name: "ImageRoute",
  component: WBC,
  props: {
    item: "./assets/logo.png"
  }
}

---

🎬 Display Videos (MP4)

Just pass the video path, and WBC will embed a responsive <video> element:

{
  path: "/video",
  name: "VideoRoute",
  component: WBC,
  props: {
    item: "./media/intro.mp4"
  }
}

---

📄 Display PDFs

For PDFs, WBC provides a built-in PDF viewer wrapper:

{
  path: "/docs/whitepaper",
  name: "Whitepaper",
  component: WBC,
  props: {
    item: "./docs/whitepaper.pdf"
  }
}

WBC automatically uses <embed> or a custom viewer to display PDF content.

---

🧪 Example: File-based Documentation Routes

Here's how you could structure a complete documentation set:

const routes = [
  {
    path: "/docs/introduction",
    name: "DocIntro",
    component: WBC,
    props: {
      item: "./md/docs/introduction.md"
    }
  },
  {
    path: "/docs/setup",
    name: "DocSetup",
    component: WBC,
    props: {
      item: "./md/docs/setup.md"
    }
  },
  {
    path: "/docs/features",
    name: "DocFeatures",
    component: WBC,
    props: {
      item: "./md/docs/features.md"
    }
  }
]

---

✅ Summary

File Type	Supported	Notes
.md	✅	Rendered as Markdown
.pdf	✅	Embedded PDF viewer
.png/.jpg/.svg	✅	Displayed as image
.mp4	✅	Responsive video playback
.json/.html	✅	Rendered as text or styled