@eox/pages-theme-eox 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # Changelog
 
+# [1.1.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.0.0...v1.1.0) (2026-02-16)
+
+### Bug Fixes
+
+- **style:** css adjustments ([f2dc9a1](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/f2dc9a1db294b018e49c07acdb0f030bd98e03bf))
+
+### Features
+
+- i18n support ([27af579](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/27af579611046e81baac7f49e4dd05db8e1cac12))
+- introduce tutorial component ([158c7fd](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/158c7fdeb137f7b5598e0aa9819cf4793a5c8d81))
+
 # [1.0.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v0.11.5...v1.0.0) (2026-01-20)
 
 ### Features

package/README.md

@@ -72,6 +72,45 @@ The following standard VitePress configurations are handled as follows:
 - **Footer**: Supported. The theme uses `theme.footer.copyright` for the copyright text.
 - **Dark Mode**: The theme enforces a specific appearance. `appearance: false` is set in the base config.
 
+### Internationalization (i18n)
+
+This theme leverages VitePress's native [i18n capabilities](https://vitepress.dev/guide/i18n) and extends them with a simplified configuration via `brandConfig`.
+
+#### Multi-language Routing
+
+You can define multiple locales in your `brandConfig`. The theme will automatically generate the corresponding VitePress routes and display a language switcher in the navigation bar.
+
+```javascript
+// brandConfig
+{
+  i18n: {
+    locale: {
+      en: {
+        "Read more about": "Read more about",
+        "Contact us": "Contact us"
+      },
+      de: {
+        "Read more about": "Mehr lesen über",
+        "Contact us": "Kontaktieren Sie uns"
+      }
+    },
+    currentLocale: "en" // This language will be at the root URL (/)
+  }
+}
+```
+
+#### Translation Pattern
+
+The theme uses a "string-as-key" pattern. Most hardcoded UI elements (buttons, footer labels, etc.) use their English text as a lookup key. If a translation is provided in the `brandConfig.i18n.locale` object, it will be used; otherwise, it falls back to the original English text.
+
+Nested keys are also supported via dot-notation if needed (e.g., `legal.privacy`).
+
+#### Language Switcher
+
+- **Desktop**: Appears as a translate icon in the top navigation bar.
+- **Mobile**: Appears as a dedicated section within the mobile menu.
+- The current language is automatically detected based on the URL path (e.g., `/de/` for German).
+
 **Note on Documentation Features**:
 This theme is primarily designed for landing pages and product showcases.
 

package/cypress/support/mocks/helpers.js

@@ -33,6 +33,20 @@ window.__helpersMock = {
     });
     return list;
   },
+  t: (key, i18n) => {
+    if (!i18n) return key;
+    const keys = key.split(".");
+    let result = i18n;
+    for (const k of keys) {
+      if (result && Object.prototype.hasOwnProperty.call(result, k)) {
+        result = result[k];
+      } else {
+        result = null;
+        break;
+      }
+    }
+    return result ? result : key;
+  },
 };
 
 export const trackEvent = (...args) => window.__helpersMock.trackEvent(...args);
@@ -46,3 +60,4 @@ export const showBanner = (...args) => window.__helpersMock.showBanner(...args);
 export const isActive = (...args) => window.__helpersMock.isActive(...args);
 export const getFlatList = (...args) =>
   window.__helpersMock.getFlatList(...args);
+export const t = (...args) => window.__helpersMock.t(...args);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/components/CookieBanner.vue

@@ -3,21 +3,33 @@
     class="cookie-banner card surface medium-margin medium-padding medium-elevate no-round"
   >
     <p class="small-text">
-      We use optional cookies to improve your experience and for marketing. Read
-      our
+      {{
+        t(
+          "We use optional cookies to improve your experience and for marketing. Read our",
+          theme.i18n,
+        )
+      }}
       <a
         :href="theme.theme.brandConfig?.legal?.privacyPolicy"
         target="_blank"
         class="link"
       >
-        privacy policy
+        {{ t("privacy policy", theme.i18n) }}
       </a>
-      or <a class="link" href="/cookie-settings">manage cookies</a>.
+      {{ t("or", theme.i18n) }}
+      <a class="link" href="/cookie-settings">{{
+        t("manage cookies", theme.i18n)
+      }}</a
+      >.
     </p>
     <nav>
       <div class="max"></div>
-      <button class="small" @click="accept">Accept all</button>
-      <button class="small" @click="decline">Reject all</button>
+      <button class="small" @click="accept">
+        {{ t("Accept all", theme.i18n) }}
+      </button>
+      <button class="small" @click="decline">
+        {{ t("Reject all", theme.i18n) }}
+      </button>
     </nav>
   </div>
 </template>
@@ -30,6 +42,7 @@ import {
   declineCookies,
   enableTracking,
   showBanner,
+  t,
 } from "../helpers";
 
 const { theme } = useData();

package/src/components/CookieSettings.vue

@@ -1,11 +1,13 @@
 <template>
   <div class="VPPage">
-    <h1>Cookie Settings</h1>
+    <h1>{{ t("Cookie Settings", theme.i18n) }}</h1>
     <p>
-      We use cookies and similar technologies to improve your experience and for
-      marketing purposes. Review and manage your cookie settings below to
-      control your privacy. For more information on how we use cookies, please
-      see our
+      {{
+        t(
+          "We use cookies and similar technologies to improve your experience and for marketing purposes. Review and manage your cookie settings below to control your privacy. For more information on how we use cookies, please see our",
+          theme.i18n,
+        )
+      }}
       <a
         class="link"
         :href="
@@ -13,7 +15,7 @@
           'https://eox.at/privacy-notice/'
         "
         target="_blank"
-        >Privacy Policy</a
+        >{{ t("Privacy Policy", theme.i18n) }}</a
       >.
     </p>
     <div
@@ -40,17 +42,19 @@
       <details>
         <summary class="middle-align">
           <p class="primary-text bold">
-            <span class="view">View</span><span class="hide">Hide</span> cookies
+            <span class="view">{{ t("View", theme.i18n) }}</span
+            ><span class="hide">{{ t("Hide", theme.i18n) }}</span>
+            {{ t("cookies", theme.i18n) }}
           </p>
           <i class="small mdi mdi-chevron-down"></i>
         </summary>
         <table>
           <thead>
             <tr>
-              <th class="min">Name</th>
-              <th>Domain</th>
-              <th>Type</th>
-              <th>Duration</th>
+              <th class="min">{{ t("Name", theme.i18n) }}</th>
+              <th>{{ t("Domain", theme.i18n) }}</th>
+              <th>{{ t("Type", theme.i18n) }}</th>
+              <th>{{ t("Duration", theme.i18n) }}</th>
             </tr>
           </thead>
           <tbody>
@@ -59,8 +63,8 @@
                 <code>{{ cookie.Name }}</code>
               </td>
               <td>{{ cookie.Domain }}</td>
-              <td>{{ cookie.Type }}</td>
-              <td>{{ cookie.Duration }}</td>
+              <td>{{ t(cookie.Type, theme.i18n) }}</td>
+              <td>{{ t(cookie.Duration, theme.i18n) }}</td>
             </tr>
           </tbody>
         </table>
@@ -101,11 +105,11 @@ details[open] summary .hide {
 <script setup>
 import { onMounted } from "vue";
 import { useData, useRouter } from "vitepress";
-import { enableTracking, showBanner } from "../helpers.js";
+import { enableTracking, showBanner, t } from "../helpers.js";
 const { theme } = useData();
 const router = useRouter();
 
-router.route.data.title = "Cookie Settings";
+router.route.data.title = t("Cookie Settings", theme.value.i18n);
 router.onBeforeRouteChange = (to) => {
   if (to === "/cookie-settings") {
     showBanner(false);
@@ -118,40 +122,44 @@ router.onBeforeRouteChange = (to) => {
 };
 
 const cookies = {
-  Essential: {
-    description:
+  [t("Essential", theme.value.i18n)]: {
+    description: t(
       "Cookies that are strictly necessary for basic website or app functionality.",
+      theme.value.i18n,
+    ),
     required: true,
     cookies: [
       {
         Name: "mtm_consent_removed",
         Domain: `.${window.location.host}`,
-        Type: "Opt-out management",
-        Duration: "13 months",
+        Type: t("Opt-out management", theme.value.i18n),
+        Duration: t("13 months", theme.value.i18n),
       },
       {
         Name: "mtm_consent",
         Domain: `.${window.location.host}`,
-        Type: "Consent management",
-        Duration: "13 months",
+        Type: t("Consent management", theme.value.i18n),
+        Duration: t("13 months", theme.value.i18n),
       },
     ],
   },
-  Analytics: {
-    description:
+  [t("Analytics", theme.value.i18n)]: {
+    description: t(
       "Cookies that are required for analyzing website or app usage.",
+      theme.value.i18n,
+    ),
     cookies: [
       {
         Name: "_pk_id",
         Domain: `.${window.location.host}`,
-        Type: "First-party website analytics",
-        Duration: "13 months",
+        Type: t("First-party website analytics", theme.value.i18n),
+        Duration: t("13 months", theme.value.i18n),
       },
       {
         Name: "_pk_ses",
         Domain: `.${window.location.host}`,
-        Type: "First-party website analytics",
-        Duration: "30 minutes",
+        Type: t("First-party website analytics", theme.value.i18n),
+        Duration: t("30 minutes", theme.value.i18n),
       },
     ],
   },

package/src/components/DataTable.vue

@@ -1,5 +1,9 @@
 <script setup>
 import { ref } from "vue";
+import { useData } from "vitepress";
+import { t } from "../helpers";
+
+const { theme } = useData();
 
 /**
  * @typedef {Object} TableRowData
@@ -51,7 +55,7 @@ const toggleRow = (index) => {
     <thead>
       <tr>
         <th v-for="header in headers" :key="header">
-          {{ header }}
+          {{ t(header, theme.i18n) }}
         </th>
       </tr>
     </thead>

package/src/components/FeatureSection.vue

@@ -25,7 +25,9 @@
             :class="`button primary medium-elevate no-margin responsive-mobile`"
             style="margin-right: 12px !important"
           >
-            <span>{{ primaryButton || `Read more about ${title}` }}</span>
+            <span>{{
+              primaryButton || `${t("Read more about", theme.i18n)} ${title}`
+            }}</span>
             <i class="mdi mdi-arrow-right"></i>
           </a>
           <a
@@ -35,7 +37,7 @@
             class="button secondary medium-elevate no-margin responsive-mobile"
             style="color: var(--on-surface); margin-top: 12px !important"
           >
-            <span>{{ secondaryButton || "Contact sales" }}</span>
+            <span>{{ secondaryButton || t("Contact sales", theme.i18n) }}</span>
             <i class="mdi mdi-arrow-right"></i>
           </a>
           <a
@@ -45,7 +47,7 @@
             class="button border no-margin responsive-mobile"
             style="color: var(--on-surface); margin-top: 12px !important"
           >
-            <span>{{ altButton || "Contact sales" }}</span>
+            <span>{{ altButton || t("Contact sales", theme.i18n) }}</span>
           </a>
         </div>
       </div>
@@ -68,7 +70,9 @@
 </template>
 
 <script setup>
-import { withBase } from "vitepress";
+import { withBase, useData } from "vitepress";
+import { t } from "../helpers.js";
+const { theme } = useData();
 const props = defineProps([
   "dark",
   "icon",

package/src/components/Footer.cy.js

@@ -49,4 +49,29 @@ describe("<Footer />", () => {
     );
     cy.contains("a", "Privacy").should("have.attr", "href", "/privacy");
   });
+
+  it("renders i18n overrides", () => {
+    __setMockData({
+      site: { title: "EOX Site" },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [],
+        footer: {
+          copyright: "© 2026 EOX",
+        },
+        i18n: {
+          About: "Über uns",
+          Legal: "Rechtliches",
+          "Powered by": "Unterstützt von",
+        },
+        theme: {
+          brandConfig: {},
+        },
+      },
+    });
+    cy.mount(Footer);
+    cy.contains("Über uns").should("exist");
+    cy.contains("Rechtliches").should("exist");
+    cy.contains("Unterstützt von").should("exist");
+  });
 });

package/src/components/Footer.vue

@@ -24,7 +24,7 @@
           >
           <p v-html="theme.footer.copyright"></p>
           <p class="middle-align">
-            Powered by
+            {{ t("Powered by", theme.i18n) }}
             <a
               href="https://hub.eox.at"
               target="_blank"
@@ -41,7 +41,7 @@
               class="s6 l4"
               v-if="theme.nav.filter((i) => !i.action && i.link).length"
             >
-              <p class="bold">About</p>
+              <p class="bold">{{ t("About", theme.i18n) }}</p>
               <p v-for="item in theme.nav.filter((i) => !i.action && i.link)">
                 <a
                   :href="withBase(item.link)"
@@ -65,7 +65,7 @@
               </p>
             </div>
             <div class="s6 l4">
-              <p class="bold">Legal</p>
+              <p class="bold">{{ t("Legal", theme.i18n) }}</p>
               <p>
                 <a
                   :href="
@@ -74,7 +74,7 @@
                   "
                   target="_blank"
                   class="link"
-                  >About</a
+                  >{{ t("About", theme.i18n) }}</a
                 >
               </p>
               <p>
@@ -85,7 +85,7 @@
                   "
                   target="_blank"
                   class="link"
-                  >Terms & Conditions</a
+                  >{{ t("Terms & Conditions", theme.i18n) }}</a
                 >
               </p>
               <p>
@@ -96,11 +96,13 @@
                   "
                   target="_blank"
                   class="link"
-                  >Privacy</a
+                  >{{ t("Privacy", theme.i18n) }}</a
                 >
               </p>
               <p v-if="theme.theme.brandConfig?.analytics">
-                <a href="/cookie-settings" class="link">Cookie settings</a>
+                <a href="/cookie-settings" class="link">{{
+                  t("Cookie settings", theme.i18n)
+                }}</a>
               </p>
             </div>
           </div>
@@ -113,7 +115,7 @@
 
 <script setup>
 import { useData, withBase } from "vitepress";
-import { trackEvent, getFlatList } from "../helpers";
+import { trackEvent, getFlatList, t } from "../helpers";
 const { site, theme } = useData();
 </script>
 

package/src/components/MobileNavDropdown.vue

@@ -4,7 +4,7 @@
       <details>
         <summary>
           <span class="max" :class="{ active: isActive(item, route.path) }">{{
-            item.text
+            t(item.text, theme.i18n)
           }}</span>
           <i class="mdi mdi-chevron-down"></i>
         </summary>
@@ -23,18 +23,18 @@
         data-ui="#mobile-menu"
         :class="{ active: isActive(item, route.path) }"
       >
-        <span>{{ item.text }}</span>
+        <span>{{ t(item.text, theme.i18n) }}</span>
       </a>
       <span v-else :class="{ active: isActive(item, route.path) }">{{
-        item.text
+        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: {
@@ -44,4 +44,5 @@ defineProps({
 });
 
 const route = useRoute();
+const { theme } = useData();
 </script>

package/src/components/NavBar.cy.js

@@ -103,4 +103,41 @@ describe("<NavBar />", () => {
     cy.get("dialog#mobile-menu .social-links").should("exist");
     cy.get("dialog#mobile-menu .social-links a").should("have.length", 2);
   });
+
+  it("renders language switcher when multiple locales are defined", () => {
+    __setMockData({
+      site: {
+        title: "EOX",
+        locales: {
+          root: { label: "English", lang: "en" },
+          de: { label: "German", lang: "de" },
+        },
+        localeIndex: "root",
+      },
+      theme: {
+        logo: { light: "/logo.png" },
+        nav: [],
+      },
+    });
+
+    cy.viewport(1920, 1080);
+    cy.mount(NavBar);
+
+    // Desktop
+    cy.get(".nav-desktop .mdi-translate").should("exist");
+    cy.get(".nav-desktop menu li").should("have.length", 2);
+    cy.get(".nav-desktop menu li").contains("English").should("exist");
+    cy.get(".nav-desktop menu li").contains("German").should("exist");
+    cy.get(".nav-desktop menu li.active").contains("English").should("exist");
+
+    // Mobile
+    cy.viewport(375, 667);
+    cy.get("#mobile-menu details summary").contains("English").should("exist");
+    cy.get("#mobile-menu details summary .mdi-translate").should("exist");
+    cy.get("#mobile-menu details ul li").should("have.length", 1);
+    cy.get("#mobile-menu details ul li").contains("German").should("exist");
+    cy.get("#mobile-menu details ul li")
+      .contains("English")
+      .should("not.exist");
+  });
 });