🌐 Remote URL Routing in WBC-Routes2

WBC-Routes2 doesn’t just work with local files — it can fetch and render content directly from remote URLs. This allows seamless integration with external APIs, documentation sites, GitHub files, or headless CMS content.

---

🔹 Basic Example: Load Remote Markdown

You can load a remote .md file using the item prop:

{
  path: "/docs/remote-readme",
  name: "RemoteReadme",
  component: WBC,
  props: {
    item: "https://raw.githubusercontent.com/user/repo/main/README.md"
  }
}

WBC will fetch and render the Markdown dynamically.

---

🔸 Load JSON or Text Content

If the URL returns raw JSON, HTML, or even plain text, WBC can still process and display it:

{
  path: "/news/live",
  name: "NewsAPI",
  component: WBC,
  props: {
    item: {
      comp: "JsonViewer",
      options: {
        src: "https://api.example.com/latest-news"
      }
    }
  }
}

Use the comp key to define how to render the content — here, we use JsonViewer as a custom component.

---

🌍 Multi-language URLs

You can define URLs per language to support localization:

{
  path: "/docs/api",
  name: "APIDocs",
  component: WBC,
  props: {
    item: {
      en: "https://example.com/api/docs-en.md",
      fr: "https://example.com/api/docs-fr.md",
      ar: "https://example.com/api/docs-ar.md"
    }
  }
}

WBC will automatically select the correct URL based on the app's language.

---

📥 PDF or Binary Resources

You can load remote PDFs for direct display or download:

{
  path: "/resources/whitepaper",
  name: "WhitepaperURL",
  component: WBC,
  props: {
    item: "https://example.com/assets/whitepaper.pdf"
  }
}

For a richer experience, use a wrapper component like PDF viewer or embed it in an iframe.

---

🎛️ Advanced: Remote HTML & Vue-Compatible Snippets

Suppose your backend serves HTML snippets from a CMS:

{
  path: "/cms/about",
  name: "RemoteCMSAbout",
  component: WBC,
  props: {
    item: {
      comp: "div",
      options: {
        src: "https://cms.example.com/page/about-us",
        class: "pa-5",
        dive: true
      }
    }
  }
}

This loads the HTML and enables event handling, styling, and interactivity.

---

🧠 Tips for URL-based Routing

Use Case	Suggestion
Markdown URLs	Use as-is in item
HTML/JSON	Wrap with comp and options.src
Language support	Use object with language keys
CORS Issues	Make sure your backend supports CORS for public content
Security Consideration	Avoid user-generated URLs or sanitize them first

---

🚀 Dynamic with Fallback

You can mix static and remote in an array for rich dynamic pages:

{
  path: "/blended/remote",
  name: "BlendedRemote",
  component: WBC,
  props: {
    item: [
      "## This is a local heading",
      {
        comp: "MD",
        options: {
          src: "https://raw.githubusercontent.com/org/docs/master/tutorial.md",
          class: "blue pa-3"
        }
      },
      {
        comp: "div",
        options: {
          html: "This is static HTML after the remote Markdown"
        }
      }
    ]
  }
}