💼 Complex Encrypted Example with WBC-Routes2

WBC-Routes2 isn't just for small payloads or simple Markdown — it can handle full UIs, layouts, interactions, even localized views and SEO metadata, embedded directly in an encrypted string.

---

🧪 What This Example Contains

This example demonstrates:

• 📝 Multiple Markdown sections
• 🎥 Embedded video
• 🖼️ Inline images
• 🧩 Vue components (Vuetify, WBDataViewer)
• 🔁 Click-to-toggle interactions
• 🌍 Multi-language routing
• 🧠 Metadata injection (SEO, social)
• 🔐 All passed as compressed prop

---

📦 Build the Route Payload

Let’s create a large WBC-compatible array:

const fullView = [
  "<~VContainer|pa-10 grey lighten-5>",

  {
    comp: "VCard",
    options: {
      class: "pa-5 mb-3 teal white--text",
      html: "🚀 This entire page is rendered from an encrypted route!"
    }
  },

  {
    comp: "MD",
    options: {
      src: `# Welcome
This Markdown was included **inside** an encrypted prop.
It renders exactly like any local file.`
    }
  },

  {
    comp: "VBtn",
    dive: true,
    options: {
      class: "primary mb-4",
      html: "🎯 Click me to toggle alert below",
      on: {
        click: (that) => () => {
          that.data.alert.options.hide = !that.data.alert.options.hide;
        }
      }
    }
  },

  {
    name: "alert",
    comp: "VAlert",
    options: {
      html: "🔔 Toggled alert content!",
      type: "info",
      hide: true
    }
  },

  {
    comp: "WBDataViewer",
    options: {
      value: {
        user: "Wissem",
        project: "WBC-Routes2",
        status: "Live"
      }
    }
  },

  "./0.mp4", // Sample video file
  "./jp0.jpg", // Sample image
  "./jp1.jpg", // Another image

  {
    comp: "meta",
    title: {
      en: "Encrypted Showcase",
      fr: "Démonstration Chiffrée"
    },
    description: "A powerful encrypted dynamic route with Vue, Markdown and metadata",
    "og:title": "Encrypted Vue View",
    "twitter:card": "summary_large_image",
    "twitter:image": "http://wi-bg.com/assets/wbc-ui2-preview.png"
  }
];

---

🔒 Encode It

Use lz-string to create a secure URL parameter:

import { compressToEncodedURIComponent } from "lz-string";

const encoded = compressToEncodedURIComponent(JSON.stringify(fullView));
const link = `/wbc/route/`{encoded}`;
console.log("🔗 Shareable Route:", link);

---

🌐 Sample Vue Route

WBC will render everything as if it were a local file.

{
  path: "/wbc/route/:item",
  name: "WBCDynamicEncrypted",
  component: WBC,
  props: route => ({
    item: JSON.parse(
      decompressFromEncodedURIComponent(route.params.item)
    )
  }),
}

---

🔁 Trigger it via Button

You can even navigate programmatically from inside a component:

this.`router.push({
  name: "WBCDynamicEncrypted",
  params: {
    item: compressToEncodedURIComponent(JSON.stringify(fullView)),
  }
});

---

📸 Screenshot

The encrypted link would show:

• A VCard
• Markdown block
• A toggleable alert
• A JSON viewer
• A video & images
• Metadata used for SEO and social previews

---

✅ Benefits

• No extra .vue files or build steps
• No custom layout registration needed
• Secure, encoded, and easy to share
• Makes VuePress or Vue-powered dashboards much more dynamic

---

🚀 Final Note

Encrypted dynamic props in WBC-Routes2 are not just a trick — they’re a design strategy. Build modular interfaces that can:

• Render from outside data
• Be previewed live
• Merge content types
• Localize and optimize SEO in one go

Perfect for documentation tools, CMS previews, education platforms, and modern apps.