@eox/pages-theme-eox 1.0.0 → 1.1.1

package/src/components/NavBar.vue

@@ -36,7 +36,7 @@
           <li v-for="item in theme.nav.filter((item) => !item.action)">
             <details v-if="item.items">
               <summary>
-                <span class="max">{{ item.text }}</span>
+                <span class="max">{{ t(item.text, theme.i18n) }}</span>
                 <i class="mdi mdi-chevron-down"></i>
               </summary>
               <ul class="list">
@@ -51,9 +51,31 @@
               :rel="item.rel"
               :class="item.action ? 'button large medium-elevate cta' : ''"
             >
-              <span>{{ item.text }}</span>
+              <span>{{ t(item.text, theme.i18n) }}</span>
             </a>
           </li>
+          <li v-if="langs && langs.length > 1">
+            <details>
+              <summary>
+                <i class="mdi mdi-translate small"></i>
+                <span class="max">{{
+                  langs.find((l) => l.active)?.label
+                }}</span>
+                <i class="mdi mdi-chevron-down small"></i>
+              </summary>
+              <ul class="list">
+                <li
+                  v-for="lang in langs.filter((l) => !l.active)"
+                  :key="lang.link"
+                  :class="{ active: lang.active }"
+                >
+                  <a :href="withBase(lang.link)" data-ui="#mobile-menu">
+                    <span>{{ lang.label }}</span>
+                  </a>
+                </li>
+              </ul>
+            </details>
+          </li>
         </ul>
         <div class="grid">
           <div class="s12">
@@ -69,7 +91,7 @@
                     : 'primary-text'
                 "
               >
-                <span>{{ item.text }}</span>
+                <span>{{ t(item.text, theme.i18n) }}</span>
                 <i
                   v-if="
                     item.action === 'primary' || item.action === 'secondary'
@@ -119,7 +141,7 @@
               class="button text"
               :class="{ active: isActive(item, route.path) }"
             >
-              <span>{{ item.text }}</span>
+              <span>{{ t(item.text, theme.i18n) }}</span>
               <i class="mdi mdi-chevron-down"></i>
               <menu class="no-wrap surface-container-lowest">
                 <NavDropdown :items="item.items" />
@@ -132,7 +154,7 @@
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
-              >{{ item.text }}</a
+              >{{ t(item.text, theme.i18n) }}</a
             >
           </li>
         </ul>
@@ -153,7 +175,7 @@
               :rel="item.rel"
               @click="trackEvent(['CTA', 'Click', 'Nav', item.text])"
             >
-              <span>{{ item.text }}</span>
+              <span>{{ t(item.text, theme.i18n) }}</span>
               <i
                 v-if="item.action === 'primary' || item.action === 'secondary'"
                 class="mdi mdi-arrow-right"
@@ -173,20 +195,79 @@
             </a>
           </li>
         </ul>
+        <ul class="left-align no-margin" v-if="langs && langs.length > 1">
+          <li>
+            <button class="button text">
+              <i class="mdi mdi-translate small"></i>
+              <i class="mdi mdi-chevron-down small"></i>
+              <menu class="no-wrap surface-container-lowest">
+                <li
+                  v-for="lang in langs"
+                  :key="lang.link"
+                  :class="{ active: lang.active }"
+                >
+                  <a :href="withBase(lang.link)">
+                    <span>{{ lang.label }}</span>
+                  </a>
+                </li>
+              </menu>
+            </button>
+          </li>
+        </ul>
       </nav>
     </nav>
   </div>
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useData, useRoute, withBase } from "vitepress";
-import { trackEvent, isActive } from "../helpers";
+import { t, trackEvent, isActive } from "../helpers";
 import NavDropdown from "./NavDropdown.vue";
 import MobileNavDropdown from "./MobileNavDropdown.vue";
 
-const { site, theme } = useData();
+const { site, theme, localeIndex } = useData();
 const route = useRoute();
 
+const langs = computed(() => {
+  const locales = site.value.locales;
+  if (!locales || Object.keys(locales).length <= 1) {
+    return [];
+  }
+  return Object.entries(locales).map(([id, locale]) => {
+    const currentPath = route.path;
+    const base = withBase("");
+    let pathRelativeToBase = currentPath;
+    if (base !== "/" && currentPath.startsWith(base)) {
+      pathRelativeToBase = currentPath.substring(base.length);
+    }
+
+    const currentLocaleId = localeIndex.value;
+    const currentLocalePrefix =
+      currentLocaleId === "root" ? "" : `/${currentLocaleId}`;
+
+    let pathWithoutLocale = pathRelativeToBase;
+    if (
+      currentLocalePrefix &&
+      pathRelativeToBase.startsWith(currentLocalePrefix)
+    ) {
+      pathWithoutLocale = pathRelativeToBase.substring(
+        currentLocalePrefix.length,
+      );
+    }
+
+    const targetLocalePrefix = id === "root" ? "" : `/${id}`;
+    let link = `${targetLocalePrefix}${pathWithoutLocale}`.replace(/\/+/g, "/");
+    if (!link) link = "/";
+
+    return {
+      label: locale.label,
+      link: link,
+      active: id === currentLocaleId,
+    };
+  });
+});
+
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
     const nav = document.querySelector(".top-nav");
@@ -289,4 +370,7 @@ nav.nav-desktop {
     display: flex;
   }
 }
+details summary i.mdi-translate {
+  transform: rotate(0deg) !important;
+}
 </style>

package/src/components/NavDropdown.vue

@@ -9,7 +9,7 @@
         class="row max padding"
         :class="{ active: isActive(item, route.path) }"
       >
-        <span class="max">{{ item.text }}</span>
+        <span class="max">{{ t(item.text, theme.i18n) }}</span>
         <i class="mdi mdi-chevron-right"></i>
       </a>
       <a
@@ -17,7 +17,7 @@
         class="row max padding"
         :class="{ active: isActive(item, route.path) }"
       >
-        <span class="max">{{ item.text }}</span>
+        <span class="max">{{ t(item.text, theme.i18n) }}</span>
         <i class="mdi mdi-chevron-right"></i>
       </a>
       <menu class="no-wrap surface-container-lowest">
@@ -34,21 +34,21 @@
         class="row"
         :class="{ active: isActive(item, route.path) }"
       >
-        <span>{{ item.text }}</span>
+        <span>{{ t(item.text, theme.i18n) }}</span>
       </a>
       <span
         v-else
         class="row"
         :class="{ active: isActive(item, route.path) }"
-        >{{ item.text }}</span
+        >{{ t(item.text, theme.i18n) }}</span
       >
     </li>
   </template>
 </template>
 
 <script setup>
-import { withBase, useRoute } from "vitepress";
-import { isActive } from "../helpers";
+import { withBase, useRoute, useData } from "vitepress";
+import { isActive, t } from "../helpers";
 
 defineProps({
   items: {
@@ -58,4 +58,5 @@ defineProps({
 });
 
 const route = useRoute();
+const { theme } = useData();
 </script>

package/src/components/NotFound.vue

@@ -1,14 +1,20 @@
 <template>
   <div class="VPPage">
     <h1>404</h1>
-    <p>The page you requested was not found.</p>
+    <p>{{ t("The page you requested was not found.", theme.i18n) }}</p>
     <div class="small-space"></div>
     <nav>
       <a class="button responsive-mobile" href="/">
         <i class="mdi mdi-arrow-left"></i>
-        <span>Back to home</span>
+        <span>{{ t("Back to home", theme.i18n) }}</span>
       </a>
     </nav>
     <div class="large-space"></div>
   </div>
 </template>
+
+<script setup>
+import { useData } from "vitepress";
+import { t } from "../helpers";
+const { theme } = useData();
+</script>

package/src/components/PricingTable.vue

@@ -48,7 +48,7 @@
             :href="addPlanConfig(contactLink, plan)"
             class="button responsive bold margin-top-1 margin-bottom-2"
           >
-            Contact us
+            {{ t("Contact us", theme.i18n) }}
           </a>
         </ClientOnly>
       </div>
@@ -58,7 +58,9 @@
     <!-- Main Plans Table -->
     <div class="wrapper" :style="gridStyle">
       <div class="cell orig-col-1 l top-margin">
-        <h6 v-if="!localDetails.length" class="bold small">Plans:</h6>
+        <h6 v-if="!localDetails.length" class="bold small">
+          {{ t("Plans:", theme.i18n) }}
+        </h6>
       </div>
       <div
         v-for="(plan, index) in localPlans"
@@ -69,7 +71,9 @@
         <h6 class="primary-text bold top-margin">{{ plan.name }}</h6>
       </div>
 
-      <div class="cell orig-col-1 l">Price (per month):</div>
+      <div class="cell orig-col-1 l">
+        {{ t("Price (per month):", theme.i18n) }}
+      </div>
       <div
         v-for="(plan, index) in localPlans"
         :key="'price-' + index"
@@ -142,7 +146,7 @@
         :class="`surface-container-low cell bottom-cell orig-col-${index + 2} center-align`"
       >
         <a v-if="plan.link" :href="plan.link"
-          >See all features
+          >{{ t("See all features", theme.i18n) }}
           <svg
             style="width: 16px; height: 16px"
             xmlns="http://www.w3.org/2000/svg"
@@ -168,7 +172,7 @@
             v-if="showSales"
             :href="addPlanConfig(contactLink, plan)"
             class="button responsive bold"
-            >Contact us</a
+            >{{ t("Contact us", theme.i18n) }}</a
           >
         </ClientOnly>
       </div>
@@ -185,7 +189,7 @@
 
       <div class="wrapper" :style="secondaryGridStyle">
         <div class="cell cell orig-col-1 l">
-          <div class="">Additional price:</div>
+          <div class="">{{ t("Additional price:", theme.i18n) }}</div>
         </div>
         <div
           v-for="(plan, detailPlanIndex) in detail.plans"
@@ -231,15 +235,28 @@
     </template>
 
     <p class="small grey-text m-4" v-if="showVAT">
-      * All prices are given excluding VAT. Prices are valid until
+      *
+      {{
+        t(
+          "All prices are given excluding VAT. Prices are valid until",
+          theme.i18n,
+        )
+      }}
       {{ showVAT }}.
     </p>
   </div>
 </template>
 
 <script>
+import { t } from "../helpers.js";
+import { useData } from "vitepress";
+
 export default {
   name: "PricingTable",
+  setup() {
+    const { theme } = useData();
+    return { theme, t };
+  },
   props: {
     config: {
       type: Object,

package/src/components/Tutorial.cy.js

@@ -0,0 +1,85 @@
+import Tutorial from "./Tutorial.vue";
+
+describe("<Tutorial />", () => {
+  it("renders with all slots provided", () => {
+    cy.mount(Tutorial, {
+      slots: {
+        default: "<p>Learn how to configure the map component.</p>",
+        demo: "<div class='demo-content'>Interactive Map Demo</div>",
+        code: "<pre><code>const map = new Map();</code></pre>",
+        controls: "<button>Reset</button>",
+      },
+    });
+
+    cy.get(".description").should(
+      "contain.text",
+      "Learn how to configure the map component.",
+    );
+    cy.get(".demo-wrapper").should("exist");
+    cy.get(".demo-content").should("contain.text", "Interactive Map Demo");
+    cy.get(".code-view code").should("contain.text", "const map = new Map()");
+    cy.get("button").should("contain.text", "Reset");
+  });
+
+  it("supports both default and named description slot", () => {
+    cy.mount(Tutorial, {
+      slots: {
+        description: "<p>Using named slot</p>",
+        demo: "<div>Demo</div>",
+        code: "<pre>Code</pre>",
+      },
+    });
+
+    cy.get(".description").should("contain.text", "Using named slot");
+  });
+
+  it("renders with only required slots", () => {
+    cy.mount(Tutorial, {
+      slots: {
+        demo: "<div>Demo Only</div>",
+        code: "<pre><code>console.log('test');</code></pre>",
+      },
+    });
+
+    cy.get(".description").should("not.exist");
+    cy.get(".demo-wrapper").should("exist");
+    cy.get(".code-view").should("exist");
+  });
+
+  it("applies custom demoHeight prop", () => {
+    cy.mount(Tutorial, {
+      props: {
+        demoHeight: "700px",
+      },
+      slots: {
+        demo: "<div>Tall Demo</div>",
+        code: "<pre>Code</pre>",
+      },
+    });
+
+    cy.get(".demo-wrapper").should("have.css", "height", "700px");
+  });
+
+  it("renders with code examples correctly", () => {
+    cy.mount(Tutorial, {
+      slots: {
+        default: "<p>Map configuration example</p>",
+        demo: "<div>Map Component</div>",
+        code: `<pre><code>import "@eox/map";
+
+const config = {
+  center: [0, 0],
+  zoom: 5
+};
+
+const map = document.querySelector("eox-map");
+map.setConfig(config);</code></pre>`,
+      },
+    });
+
+    cy.get(".code-view code")
+      .should("contain.text", 'import "@eox/map"')
+      .and("contain.text", "const config =")
+      .and("contain.text", "map.setConfig(config)");
+  });
+});

package/src/components/Tutorial.vue

@@ -0,0 +1,162 @@
+<template>
+  <article class="tutorial card border no-overflow">
+    <!-- Demo Section -->
+    <div>
+      <!-- Description Section -->
+      <div
+        v-if="$slots.default || $slots.description"
+        class="description padding border-bottom"
+      >
+        <slot name="description">
+          <slot></slot>
+        </slot>
+      </div>
+
+      <ClientOnly>
+        <div
+          class="demo-wrapper relative border-bottom"
+          :style="{ height: demoHeight }"
+          v-if="$slots.demo"
+        >
+          <slot name="demo"></slot>
+        </div>
+      </ClientOnly>
+    </div>
+
+    <div v-if="$slots.controls" class="padding">
+      <slot name="controls"></slot>
+    </div>
+
+    <!-- Code Section -->
+    <div class="code-view top-margin">
+      <div v-show="!collapsible || isCodeExpanded">
+        <slot name="code"></slot>
+      </div>
+    </div>
+  </article>
+</template>
+
+<script setup>
+/**
+ * Tutorial component for displaying interactive demos with code examples.
+ * 
+ * @component
+ * @example
+ * <Tutorial demoHeight="600px">
+ *   <p>This tutorial shows how to use the map component.</p>
+ *   
+ *   <template #demo>
+ *     <eox-map></eox-map>
+ *   </template>
+ *   
+ *   <template #code>
+ * 
+ * ::: code-group
+ * ```vue
+ * <template>
+ * first tab content
+ * </template>
+ * ```
+ * ```html
+ * <html>
+ * auto highlighted code content
+ * </html>
+ * ```
+ * ```js
+ * console.log("third tab content");
+ * ```
+ * :::
+ *   </template>
+
+ *   <template #controls>
+ *     <button>Reset Map</button>
+ *   </template>
+ * </Tutorial>
+ */
+
+defineProps({
+  demoHeight: {
+    type: String,
+    default: "500px",
+  },
+});
+</script>
+
+<style scoped>
+.demo-wrapper {
+  overflow: hidden;
+  transition: height 0.3s ease;
+}
+
+/* Code and pre styling - VitePress compatibility */
+:deep(code *),
+:deep(pre *),
+:deep(.vp-code *),
+:deep(.vp-code-group *:not(.tabs *)),
+:deep(.url-display),
+:deep(kbd),
+:deep(samp),
+:deep(var),
+:deep(.monospace) {
+  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas",
+    "Liberation Mono", "Ubuntu Mono", "Courier New", monospace !important;
+}
+
+/* Inline code */
+:deep(code) {
+  background: #f6f8fa;
+  color: #24292e;
+  padding: 2px 4px;
+  border-radius: 16px;
+}
+
+/* Code blocks */
+:deep(pre) {
+  background: #f6f8fa;
+  color: #24292e;
+  padding: 16px;
+  border-radius: 4px;
+  overflow-x: auto;
+  line-height: 1.4;
+  margin: 16px 0;
+  border: 1px solid #e1e4e8;
+}
+
+/* VitePress code groups */
+:deep(.vp-code-group .tabs) {
+  padding: 0;
+  margin-left: 0;
+  margin-right: 0;
+}
+
+:deep(.vp-code-group .tabs label) {
+  flex: 1;
+  text-align: center;
+}
+
+:deep(.vp-code-group .tabs input:checked + label) {
+  color: var(--primary);
+}
+
+:deep(.vp-code-group .tabs label:hover) {
+  background: var(--surface-container-high);
+}
+
+:deep(.vp-code-group .tabs label::after) {
+  left: 0;
+  right: 0;
+  height: 1px;
+}
+:deep(.vp-code-group input:checked + label::after) {
+  height: 2px;
+}
+
+:deep(.vp-code-group .blocks) {
+  margin-top: 0.5rem;
+}
+
+:deep(.code-view div[class*="language-"]) {
+  margin-left: 0;
+  margin-right: 0;
+}
+</style>

package/src/helpers.js

@@ -173,3 +173,28 @@ export const isActive = (item, path) => {
 
   return false;
 };
+
+/**
+ * Get the translation for a given key from an i18n object.
+ * Falls back to the key if no translation is found.
+ * Supports dot notation for nested objects.
+ *
+ * @param {string} key - The key to translate
+ * @param {object} i18n - The translation table
+ * @returns {string} The translated string or the key itself
+ */
+export const t = (key, i18n) => {
+  if (!key) return "";
+  if (!i18n) return key;
+
+  let obj = i18n;
+  const parts = key.split(".");
+  for (const part of parts) {
+    if (obj && typeof obj === "object" && part in obj) {
+      obj = obj[part];
+    } else {
+      return key;
+    }
+  }
+  return typeof obj === "string" ? obj : key;
+};

package/src/index.js

@@ -12,6 +12,7 @@ import CookieBanner from "./components/CookieBanner.vue";
 import CookieSettings from "./components/CookieSettings.vue";
 import NotFound from "./components/NotFound.vue";
 import DataTable from "./components/DataTable.vue";
+import Tutorial from "./components/Tutorial.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -32,6 +33,7 @@ export default {
     app.component("CookieSettings", CookieSettings);
     app.component("NotFound", NotFound);
     app.component("DataTable", DataTable);
+    app.component("Tutorial", Tutorial);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {