@eox/pages-theme-eox 1.8.0 → 2.0.0-alpha.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+# [1.9.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.8.0...v1.9.0) (2026-06-11)
+
+### Features
+
+- new components (ImageCarousel, ImageElement, ImageGallery, SingleTweet) and automated loaders (team) ([8ce5f28](https://gitlab.eox.at/eox/hub/eoxhub-portal/commit/8ce5f289f06c1d4ebd7ff4871008f0dec31dabcc))
+
 # [1.8.0](https://gitlab.eox.at/eox/hub/eoxhub-portal/compare/v1.7.0...v1.8.0) (2026-06-08)
 
 ### Bug Fixes

package/README.md

@@ -239,6 +239,19 @@ A Call-to-Action section typically placed at the bottom of a page to encourage u
 />
 ```
 
+#### Section Header
+
+A standardized three-tier header block for page sections, matching EOX design tokens with a tag badge, a large display title, and an optional subtitle description. Supports light/dark context modes automatically.
+
+```html
+<SectionHeader
+  tag="Viewing Ready & Basic"
+  icon="mdi-star-check-outline"
+  title="What our users say about Viewing Products"
+  subtitle="Optional paragraph providing context and detail for this section."
+/>
+```
+
 #### Logo Section
 
 Displays a grid of client or partner logos. It automatically handles logo sizing.
@@ -379,6 +392,76 @@ An image-overlay card where a background image fills the card and text is render
 />
 ```
 
+#### Image Element
+
+Displays standard images with optional caption and width, and supports interactive side-by-side comparison slider when a `compare` prop is provided.
+
+```html
+<!-- Standard Image -->
+<ImageElement
+  src="/images/someimage.jpg"
+  caption="Standard view"
+  width="450px"
+/>
+
+<!-- Image Comparison Slider -->
+<ImageElement
+  src="/images/eoxcloudless2024.jpg"
+  compare="/images/eoxcloudless2023.jpg"
+  caption="2024 vs. 2023 comparison"
+/>
+```
+
+#### Image Gallery
+
+A unified, responsive image grid and lightbox gallery. Supports both plain link/grid layouts and touch-friendly lightbox galleries.
+
+##### Properties
+
+| Prop       | Type            | Default     | Description                                                                                           |
+| :--------- | :-------------- | :---------- | :---------------------------------------------------------------------------------------------------- |
+| `images`   | `String\|Array` | —           | Comma-separated image paths string, array of paths, or array of image objects with caption and links. |
+| `columns`  | `Number`        | `2`         | Number of columns (1, 2, 3, 4, 5).                                                                    |
+| `layout`   | `String`        | `"gallery"` | Layout mode: `"gallery"` (featured image + thumbnails) or `"grid"` (regular grid of images).          |
+| `lightbox` | `Boolean`       | `true`      | Enable fullscreen lightbox overlay when clicking an image.                                            |
+
+```html
+<!-- Gallery with Lightbox -->
+<ImageGallery images="/img1.jpg, /img2.jpg, /img3.jpg" layout="gallery" />
+
+<!-- Direct Image Grid with Captions & Links -->
+<ImageGallery
+  layout="grid"
+  :columns="3"
+  :images="[
+    { src: '/img1.jpg', caption: 'Link to A', link: '/page-a' },
+    { src: '/img2.jpg', caption: 'Only Caption' },
+    { src: '/img3.jpg', caption: 'Link to B', link: '/page-b' }
+  ]"
+/>
+```
+
+#### Image Carousel
+
+A simple CSS-driven accessible image slideshow.
+
+```html
+<ImageCarousel
+  :images="[
+    { src: '/slide1.jpg', caption: 'Slide 1 Caption' },
+    { src: '/slide2.jpg', caption: 'Slide 2 Caption' }
+  ]"
+/>
+```
+
+#### Single Tweet
+
+A privacy-respecting Twitter/X embed wrapper that checks Matomo cookie consent before rendering.
+
+```html
+<SingleTweet id="1276442045352226817" />
+```
+
 #### Feedback Form
 
 **Feedback Form** for collecting user feedback can be enabled by configuring the theme:

package/cypress/support/mocks/vitepress.js

@@ -1,4 +1,11 @@
-import { reactive, ref } from "vue";
+import { reactive, ref, defineComponent, h } from "vue";
+
+export const VPNavBarSearch = defineComponent({
+  name: "VPNavBarSearch",
+  render() {
+    return h("div", { class: "VPNavBarSearch" }, "Search");
+  },
+});
 
 const site = ref({
   title: "Test Site",

package/cypress.config.js

@@ -10,6 +10,11 @@ export default defineConfig({
       viteConfig: {
         resolve: {
           alias: {
+            // Alias vitepress/theme to our mock
+            "vitepress/theme": path.resolve(
+              __dirname,
+              "cypress/support/mocks/vitepress.js",
+            ),
             // Alias vitepress to our mock
             vitepress: path.resolve(
               __dirname,

package/package.json

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

package/src/Layout.vue

@@ -1,5 +1,53 @@
 <template>
-  <Layout :class="`layout-${frontmatter.layout}`">
+  <div
+    v-if="frontmatter.layout === 'blog'"
+    class="layout-blog min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <main class="flex-grow">
+      <BlogList />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'tags'"
+    class="layout-tags min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <main class="flex-grow">
+      <TagList />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'team'"
+    class="layout-team min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <main class="flex-grow">
+      <TeamPage />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <div
+    v-else-if="frontmatter.layout === 'post' || isBlogPost"
+    class="layout-post min-h-screen flex flex-col"
+  >
+    <NavBar />
+    <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <main class="flex-grow">
+      <BlogPost />
+    </main>
+    <Footer v-if="frontmatter.footer !== false" />
+    <CookieBanner v-if="theme.theme.brandConfig?.analytics"></CookieBanner>
+  </div>
+  <Layout v-else :class="`layout-${frontmatter.layout}`">
     <template #layout-top>
       <slot name="layout-top"></slot>
       <NavBar />
@@ -33,11 +81,20 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
 import DefaultTheme from "vitepress/theme";
 import { useData, useRouter } from "vitepress";
 const { Layout } = DefaultTheme;
 const { frontmatter, page, theme } = useData();
 const router = useRouter();
+
+const isBlogPost = computed(() => {
+  return (
+    frontmatter.value.layout === "post" ||
+    page.value.relativePath.startsWith("_posts/") ||
+    /^\d{4}\/\d{2}\//.test(page.value.relativePath)
+  );
+});
 </script>
 
 <style>

package/src/authors.data.js

@@ -0,0 +1,14 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("_team/*.md", {
+  transform(rawData) {
+    return rawData.map((page) => {
+      return {
+        id: page.frontmatter.id || "",
+        name: page.frontmatter.title || "",
+        url: page.url,
+        guest: page.frontmatter.guest || false,
+      };
+    });
+  },
+});