@eox/pages-theme-eox 0.10.1 → 0.11.0

package/config.mjs

@@ -10,7 +10,9 @@ export default async (brandId = "eox") => {
   register(pathToFileURL(path.join(__dirname, "./src/https-hooks.mjs")));
 
   // Load the remote brand configuration
-  const brand = await import(`https://hub-brands.eox.at/${brandId}/config.mjs`);
+  const brand = await import(
+    `https://cdn-hub-brands.ext.eox.at/${brandId}/config.mjs`
+  );
 
   // Load the base VitePress configuration
   const vitepressConfig = await import("./src/vitepressConfig.mjs");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "0.10.1",
+  "version": "0.11.0",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",
@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@eox/eslint-config": "^2.0.0",
-    "@eox/ui": "^0.3.4",
+    "@eox/ui": "^0.3.7",
     "vitepress": "^1.6.3"
   }
 }

package/src/components/DataTable.vue

@@ -0,0 +1,143 @@
+<script setup>
+import { ref } from "vue";
+
+/**
+ * @typedef {Object} TableRowData
+ * @property {Object.<string, string>} summary - Key-value pairs for each column header
+ * @property {string} content - Detailed content shown when row is expanded
+ */
+
+/**
+ * @typedef {Object} TableProps
+ * @property {string[]} headers - Array of column header names
+ * @property {TableRowData[]} data - Array of row data objects
+ */
+
+// Props
+defineProps({
+  headers: {
+    /** @type {import('vue').PropType<string[]>} Array of column header names */
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+  data: {
+    /** @type {import("vue").PropType<TableRowData[]>} Array of row data objects with summary and content */
+    type: Array,
+    required: true,
+    default: () => [],
+  },
+});
+
+// State for tracking expanded rows
+const expandedRows = ref(new Set());
+/**
+ *
+ * @param {number} index
+ */
+// Toggle row expansion
+const toggleRow = (index) => {
+  if (expandedRows.value.has(index)) {
+    expandedRows.value.delete(index);
+  } else {
+    expandedRows.value.add(index);
+  }
+  // Trigger reactivity
+  expandedRows.value = new Set(expandedRows.value);
+};
+</script>
+<template>
+  <table class="medium-space">
+    <thead>
+      <tr>
+        <th v-for="header in headers" :key="header">
+          {{ header }}
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <template v-for="(row, index) in data" :key="index">
+        <!-- Main row -->
+        <tr
+          class="clickable hover"
+          @click="toggleRow(index)"
+          :class="{ active: expandedRows.has(index) }"
+        >
+          <td
+            v-for="header in headers"
+            :key="header"
+            v-html="row.summary[header] || ''"
+          ></td>
+        </tr>
+        <!-- Expanded content row -->
+        <tr v-if="expandedRows.has(index)">
+          <td :colspan="headers.length">
+            <div v-html="row.content"></div>
+          </td>
+        </tr>
+      </template>
+    </tbody>
+  </table>
+</template>
+
+<style scoped>
+/**
+* Undo Vitepress missing with @eox/ui styles
+*/
+.vp-doc table {
+  display: table;
+}
+.vp-doc th {
+  background: initial;
+}
+.vp-doc tr:nth-child(2n) {
+  background-color: initial;
+}
+.vp-doc table,
+.vp-doc th,
+.vp-doc tr,
+.vp-doc td {
+  background: transparent;
+  border: none;
+  color: initial;
+}
+.vp-doc tr,
+.vp-doc td {
+  font-size: 1rem;
+}
+table.border > tbody > tr:not(:last-child) > td,
+thead > tr > th {
+  border-block-end: 0.0625rem solid var(--outline) !important;
+}
+
+/**
+ * Custom styles
+ */
+table th {
+  font-size: 1.25rem;
+}
+.clickable {
+  cursor: pointer;
+  transition: background-color 0.2s ease;
+  font-weight: 600;
+}
+
+.clickable:hover {
+  background-color: var(--surface-variant) !important;
+}
+
+.clickable.active {
+  background-color: var(--surface-variant) !important;
+  border-bottom: none;
+}
+.clickable.active > td {
+  border: none;
+}
+.clickable.active + tr {
+  background-color: var(--surface-variant) !important;
+}
+
+.expanded-content {
+  background-color: var(--surface-container);
+}
+</style>

package/src/components/FeatureCard.vue

@@ -0,0 +1,69 @@
+<script setup>
+const { title, content, link, icon } = defineProps({
+  title: String,
+  content: String,
+  link: {
+    /** @type {import('vue').PropType<{ text:string ,href: string,target?: string }>} */
+    type: Object,
+    required: false,
+  },
+  icon: {
+    /** @type {import('vue').PropType<{ html: string, width?: number, height?: number }>} */
+    type: Object,
+    required: false,
+  },
+});
+const iconStyle = {
+  width: (icon?.width ?? 40) + "px",
+  height: (icon?.height ?? 40) + "px",
+};
+</script>
+<template>
+  <article class="surface-container-lowest vertical large-padding">
+    <div>
+      <div v-if="icon" :style="iconStyle" v-html="icon.html" class="icon"></div>
+      <h5 class="small">{{ title }}</h5>
+      <p>
+        <slot>{{ content }}</slot>
+      </p>
+    </div>
+    <nav>
+      <a
+        v-if="link"
+        :href="link.href"
+        :target="link.target ?? '_blank'"
+        class="button transparent bold primary-text no-padding"
+      >
+        <span>
+          {{ link.text }}
+        </span>
+        <i class="mdi mdi-chevron-right arrow"></i>
+      </a>
+    </nav>
+  </article>
+</template>
+<style scoped>
+/**
+* Undo Vitepress missing with @eox/ui styles
+*/
+.VPHome .vp-doc a.button.bold {
+  font-weight: bold;
+}
+.VPHome .vp-doc h5.small {
+  font-size: 1.25rem;
+}
+
+/**
+ * Custom styles
+ */
+article {
+  justify-content: space-between;
+  transition: all 0.3s ease-in-out;
+}
+.arrow {
+  transition: transform 0.2s;
+}
+.button:hover .arrow {
+  transform: translateX(4px);
+}
+</style>

package/src/components/FeaturesGallery.vue

@@ -1,65 +1,91 @@
 <script setup>
 import { useData, withBase } from "vitepress";
 import { data as features } from "../features.data.js";
+import FeatureCard from "./FeatureCard.vue";
+
+const { cards, sectionTitle, background } = defineProps({
+  sectionTitle: {
+    type: String,
+  },
+  cards: {
+    /** 
+     * @type {import('vue').PropType<Array<{
+            id: number | string,
+            title: string,
+            content: string,
+            link?: { text: string, href: string,target?: string },
+            icon?: {
+              html: string,
+              width?: number,
+              height?: number,
+            }
+        }>>} 
+      */
+    type: Array,
+  },
+  background: {
+    type: String,
+    default: "primary primary-gradient-bg",
+  },
+});
 
 const { page, site } = useData();
 
-const featuresExcerpts = features.map((f) => {
-  if (import.meta.env.SSR) {
-    return false;
-  }
-  const el = document.createElement("html");
-  el.innerHTML = f.html;
-  const featureSection = el.querySelector("featuresection");
-  return featureSection &&
-    !page.value.relativePath.includes(f.url.replace("/", ""))
-    ? {
-        title: featureSection.title,
-        description: featureSection.textContent,
-        image: featureSection.getAttribute("image"),
-        link: f.url,
-      }
-    : false;
-});
+const featuresExcerpts =
+  cards && cards.length
+    ? cards
+    : features.map((f) => {
+        if (import.meta.env.SSR) {
+          return [];
+        }
+        const el = document.createElement("html");
+        el.innerHTML = f.html;
+        /** @type {HTMLElement} */
+        const featureSection = el.querySelector("featuresection");
+        return featureSection &&
+          !page.value.relativePath.includes(f.url.replace("/", ""))
+          ? {
+              id: Symbol(),
+              title: featureSection.title,
+              content: featureSection.textContent,
+              icon: featureSection.getAttribute("image")
+                ? {
+                    html: `<img src="${withBase(featureSection.getAttribute("image"))}" alt="Feature icon" />`,
+                    width: 64,
+                    height: 64,
+                  }
+                : undefined,
+              link: {
+                href: f.url,
+                text: "Read more",
+                target: "_self",
+              },
+            }
+          : [];
+      });
+const siteTitle = sectionTitle || `More ${site.value.title} features:`;
 </script>
 
 <template>
-  <section class="primary primary-gradient-bg full-width">
+  <section :class="`${background} full-width`">
     <div class="large-space"></div>
     <div class="large-space"></div>
     <div class="holder large-padding">
-      <h5>More {{ site.title }} features:</h5>
+      <h5>{{ siteTitle }}</h5>
       <div class="medium-space"></div>
-      <div class="grid">
-        <ClientOnly>
-          <a
-            v-for="(feature, index) in featuresExcerpts.filter((f) => f)"
-            class="feature s12 m4 wave"
-            :href="withBase(feature.link)"
-          >
-            <article class="large-padding">
-              <div class="row top-align">
-                <img
-                  v-if="feature.image"
-                  class="round extra"
-                  :src="withBase(feature.image)"
-                />
-                <div class="max">
-                  <h6 class="small">
-                    <strong>{{ feature.title }}</strong>
-                  </h6>
-                  <p>{{ feature.description }}</p>
-                  <div class="max"></div>
-                  <nav>
-                    <a class="link" :href="withBase(feature.link)">
-                      <span>Read more</span>
-                    </a>
-                  </nav>
-                </div>
-              </div>
-            </article>
-          </a>
-        </ClientOnly>
+      <div class="cards-gallery">
+        <div
+          v-for="feature in featuresExcerpts"
+          :key="feature.id"
+          class="card-wrapper"
+        >
+          <FeatureCard
+            :title="feature.title"
+            :content="feature.content"
+            :icon="feature.icon"
+            :link="feature.link"
+          />
+        </div>
       </div>
     </div>
     <div class="large-space"></div>
@@ -68,11 +94,33 @@ const featuresExcerpts = features.map((f) => {
 </template>
 
 <style scoped>
-.grid > a,
-.grid > a > article {
-  height: 100%;
+.cards-gallery {
   display: flex;
-  flex-direction: column;
-  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 24px;
+  margin-top: 16px;
+}
+
+.card-wrapper {
+  display: flex;
+  flex: 0 0 calc(25% - 18px);
+}
+
+@media (max-width: 1200px) {
+  .card-wrapper {
+    flex: 0 0 calc(33.333% - 16px);
+  }
+}
+
+@media (max-width: 960px) {
+  .card-wrapper {
+    flex: 0 0 calc(50% - 12px);
+  }
+}
+
+@media (max-width: 640px) {
+  .card-wrapper {
+    flex: 0 0 100%;
+  }
 }
 </style>

package/src/index.js

@@ -11,6 +11,7 @@ import NewsBanner from "./components/NewsBanner.vue";
 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 Layout from "./Layout.vue";
 import "./style.css";
 
@@ -30,6 +31,7 @@ export default {
     app.component("CookieBanner", CookieBanner);
     app.component("CookieSettings", CookieSettings);
     app.component("NotFound", NotFound);
+    app.component("DataTable", DataTable);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {