@eox/pages-theme-eox 2.0.0-alpha.6 → 2.0.0-alpha.8

package/README.md

@@ -145,26 +145,40 @@ The theme provides several built-in components and layout features. Some are dri
 
 ### Hero Section
 
-To add a Hero section to the top of a page, use the `hero` frontmatter object.
+To add a Hero section to the top of a page, use the `hero` frontmatter object. Heros feature a dark gradient transitioning from **DARK (top) to LIGHT (bottom)** (`.hero-gradient-bg`), allowing the top navigation bar to seamlessly sit transparently over the hero. On the landing page, the hero is larger and incorporates an isometric line pattern.
 
 ```yaml
 ---
 hero:
-  title: "Welcome to My Site"
-  tagline: "Building the future of things"
+  text: "Welcome to My Site" # or title: "Welcome to My Site"
+  tagline: "Building the future of geospatial engineering"
   image:
     src: "/hero-image.png"
     alt: "Hero Image"
   actions:
     - text: "Get Started"
       link: "/start"
-      type: "primary"
+      theme: "brand" # "brand" (primary surface), "secondary", or "alt" (bordered)
     - text: "Learn More"
       link: "/about"
-      type: "secondary"
+      theme: "secondary"
 ---
 ```
 
+#### Hero on Aggregator Pages (`blog`, `team`, `tags`)
+
+Pages using aggregator layouts (`layout: team`, `layout: blog`, or `layout: tags`) support optional heroes:
+
+- **Without Hero (when `hero` is omitted or `hero: false`)**: The page renders a standard in-page header title beneath the solid top navigation bar.
+- **With Hero (`hero: true` or custom `hero: { text, tagline, ... }`)**: The page renders the full dark hero with the `#000C14` → `#004170` gradient spanning seamlessly behind the transparent navigation bar. Setting `hero: true` automatically supplies appropriate layout titles (including dynamic `Tag: <tag>` and `Author: <author>` for filtered blog listings). Custom text, taglines, images, and actions can also be provided via the `hero` frontmatter object.
+
+#### Gradient Design Standards
+
+The theme standardizes two distinct gradient directions for dark visual elements using `#000C14` and `#004170`:
+
+- **Hero Gradient (`.hero-gradient-bg`)**: Always transitions from **DARK (top) to LIGHT (bottom)**, running from `#000C14` (top) to `#004170` (bottom). Used for the landing page hero and all sub-page heroes. This anchors the fixed header area with dark contrast under navigation links while flowing naturally into lighter content below.
+- **Dark Sections Gradient (`.primary-gradient-bg` / `.dark-section-gradient-bg`)**: Used in intermediate dark page sections further down the page (such as `<CTASection dark>`, feature highlights, or dark showcase galleries). Always transitions from **LIGHT (top) to DARK (bottom)**, running from `#004170` (top) to `#000C14` (bottom).
+
 ### Feature Section
 
 Use the `<FeatureSection>` component to highlight specific features.
@@ -223,7 +237,7 @@ A flexible pricing table component.
 
 #### CTA Section
 
-A Call-to-Action section typically placed at the bottom of a page to encourage user engagement.
+A Call-to-Action section typically placed at the bottom of a page to encourage user engagement. By default, it renders with a clean white (`surface-container-lowest`) background, or a dark gradient when the `dark` prop is passed.
 
 ```html
 <CTASection
@@ -334,7 +348,7 @@ A standard content card with an icon or image, title, optional chips, metadata,
   section-title="All Features"
   variant="default"
   columns="3/2/1"
-  background="surface-container-low"
+  background="surface-container-lowest"
   :cards="[
     {
       id: 1,

package/cypress/support/mocks/helpers.js

@@ -48,9 +48,31 @@ window.__helpersMock = {
     }
   },
   isActive: (item, path) => {
-    if (item.link === path) return true;
-    if (item.items) {
-      return item.items.some((sub) => window.__helpersMock.isActive(sub, path));
+    if (!item || !path) return false;
+    if (item.activeMatch) {
+      try {
+        return new RegExp(item.activeMatch).test(path);
+      } catch (e) {
+        return false;
+      }
+    }
+    if (
+      item.items &&
+      item.items.some((sub) => window.__helpersMock.isActive(sub, path))
+    ) {
+      return true;
+    }
+    if (item.link) {
+      const normalize = (p) =>
+        decodeURI(p)
+          .replace(/[?#].*$/, "")
+          .replace(/\.html$/, "")
+          .replace(/\/$/, "");
+      const linkPath = normalize(item.link);
+      const currentPath = normalize(path);
+      if (linkPath === currentPath) return true;
+      if (linkPath === "") return currentPath === "";
+      return currentPath === linkPath || currentPath.startsWith(linkPath + "/");
     }
     return false;
   },

package/package.json

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

package/src/Layout.vue

@@ -1,10 +1,11 @@
 <template>
   <div
     v-if="frontmatter.layout === 'blog'"
-    class="layout-blog min-h-screen flex flex-col"
+    class="Layout layout-blog min-h-screen flex flex-col"
   >
     <NavBar />
     <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
     <main class="flex-grow">
       <BlogList />
     </main>
@@ -13,10 +14,11 @@
   </div>
   <div
     v-else-if="frontmatter.layout === 'tags'"
-    class="layout-tags min-h-screen flex flex-col"
+    class="Layout layout-tags min-h-screen flex flex-col"
   >
     <NavBar />
     <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
     <main class="flex-grow">
       <TagList />
     </main>
@@ -25,10 +27,11 @@
   </div>
   <div
     v-else-if="frontmatter.layout === 'team'"
-    class="layout-team min-h-screen flex flex-col"
+    class="Layout layout-team min-h-screen flex flex-col"
   >
     <NavBar />
     <NewsBanner v-if="theme.newsBanner" :content="theme.newsBanner" />
+    <HeroSection />
     <main class="flex-grow">
       <TeamPage />
     </main>

package/src/components/BlogList.vue

@@ -1,7 +1,10 @@
 <template>
-  <div class="blog-landing max-w-[1200px] mx-auto px-6 md:px-8">
-    <!-- Page Header -->
-    <div class="blog-landing-header" role="banner">
+  <div
+    class="blog-landing max-w-[1200px] mx-auto px-6 md:px-8"
+    :class="{ 'has-hero': Boolean(frontmatter.hero) }"
+  >
+    <!-- Page Header (shown only when hero is not present) -->
+    <div v-if="!frontmatter.hero" class="blog-landing-header" role="banner">
       <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
         <div>
           <h1 class="blog-landing-title">EOX Blog</h1>
@@ -10,28 +13,28 @@
           </p>
         </div>
       </div>
+    </div>
 
-      <!-- Active Filter Banner -->
-      <div v-if="activeTag || activeAuthor" class="active-filter-banner">
-        <span class="filter-label">Active filter:</span>
-        <span
-          v-if="activeTag"
-          :style="getTagStyle(activeTag)"
-          class="active-filter-tag shadow-sm inline-flex items-center gap-1.5"
-        >
-          {{ activeTag }}
-        </span>
-        <span
-          v-if="activeAuthor"
-          class="active-filter-author shadow-sm inline-flex items-center gap-1.5"
-        >
-          Author: {{ getAuthorName(activeAuthor) }}
-        </span>
-        <button @click="clearFilters" class="clear-filter-btn">
-          <i class="mdi mdi-close-circle"></i>
-          <span>Clear Filter</span>
-        </button>
-      </div>
+    <!-- Active Filter Banner -->
+    <div v-if="activeTag || activeAuthor" class="active-filter-banner mb-6">
+      <span class="filter-label">Active filter:</span>
+      <span
+        v-if="activeTag"
+        :style="getTagStyle(activeTag)"
+        class="active-filter-tag shadow-sm inline-flex items-center gap-1.5"
+      >
+        {{ activeTag }}
+      </span>
+      <span
+        v-if="activeAuthor"
+        class="active-filter-author shadow-sm inline-flex items-center gap-1.5"
+      >
+        Author: {{ getAuthorName(activeAuthor) }}
+      </span>
+      <button @click="clearFilters" class="clear-filter-btn">
+        <i class="mdi mdi-close-circle"></i>
+        <span>Clear Filter</span>
+      </button>
     </div>
 
     <!-- Grid of Blog Posts -->
@@ -195,7 +198,7 @@ const calculatedHotTags = computed(() => {
 });
 
 const router = useRouter();
-const { params } = useData();
+const { params, frontmatter } = useData();
 
 const activeTag = ref("");
 const activeAuthor = ref("");
@@ -345,6 +348,10 @@ function clearFilters() {
   padding-bottom: 48px !important;
 }
 
+.blog-landing.has-hero {
+  padding-top: 2rem !important;
+}
+
 @media (min-width: 640px) {
   .blog-landing {
     padding-left: 1.5rem !important;
@@ -352,6 +359,9 @@ function clearFilters() {
     padding-top: calc(var(--vp-nav-height) + 40px) !important;
     padding-bottom: 64px !important;
   }
+  .blog-landing.has-hero {
+    padding-top: 2.5rem !important;
+  }
 }
 
 @media (min-width: 960px) {
@@ -361,6 +371,9 @@ function clearFilters() {
     padding-top: calc(var(--vp-nav-height) + 58px) !important;
     padding-bottom: 96px !important;
   }
+  .blog-landing.has-hero {
+    padding-top: 3rem !important;
+  }
 }
 
 .blog-landing-header {

package/src/components/CTASection.vue

@@ -4,7 +4,7 @@
     :class="
       dark !== undefined
         ? 'primary primary-gradient-bg'
-        : 'surface-container-low'
+        : 'surface-container-lowest'
     "
   >
     <div class="large-space"></div>

package/src/components/FeatureCard/Index.vue

@@ -150,7 +150,12 @@ function formatDate(dateString) {
     ]"
   >
     <!-- Cover Image for cover/blog/rich cards -->
-    <a v-if="isCoverLayout" :href="resolvedLinkHref" class="card-cover-link">
+    <a
+      v-if="isCoverLayout && resolvedLinkHref"
+      :href="resolvedLinkHref"
+      :target="link?.target ?? '_blank'"
+      class="card-cover-link"
+    >
       <img
         :src="resolvedImage"
         alt=""
@@ -158,6 +163,14 @@ function formatDate(dateString) {
         loading="lazy"
       />
     </a>
+    <div v-else-if="isCoverLayout" class="card-cover-link">
+      <img
+        :src="resolvedImage"
+        alt=""
+        class="card-cover-image"
+        loading="lazy"
+      />
+    </div>
 
     <div class="card-content-wrapper">
       <i
@@ -532,6 +545,8 @@ function formatDate(dateString) {
 }
 
 /* card title overrides to make sure it respects the 20px request */
+h5.small.card-title-text,
+.card-title-text,
 .VPHome .vp-doc h5.small.card-title-text {
   font-size: 20px !important;
   line-height: 1.4 !important;

package/src/components/FeatureSection.vue

@@ -120,16 +120,11 @@ const props = defineProps([
 }
 .feature-section.landing .holder {
   padding: 32px 0;
-  background: var(--surface-container-low);
+  background: var(--surface-container-lowest, #ffffff);
 }
 .feature-section.dark .holder {
-  background: var(--primary);
-  background: radial-gradient(
-    74.48% 130.95% at 50% -12.27%,
-    hsl(from var(--primary) h s calc(l + 7)) 0%,
-    var(--primary) 45%,
-    hsl(from var(--primary) h s calc(l - 20)) 100%
-  );
+  background: #000c14;
+  background: linear-gradient(180deg, var(--primary, #004170) 0%, #000c14 100%);
   color: #fff;
 }
 .feature-section nav {

package/src/components/FeaturesGallery.vue

@@ -50,6 +50,7 @@ const { cards, sectionTitle, background, variant, columns } = defineProps({
 
 const cardComponents = {
   default: FeatureCardDefault,
+  cover: FeatureCardDefault,
   poster: defineAsyncComponent(() => import("./FeatureCard/Poster.vue")),
 };
 
@@ -74,6 +75,8 @@ function resolveUrl(url) {
 function normalizeFeature(feature) {
   return {
     ...feature,
+    content: feature.content || feature.description,
+    chips: feature.chips || feature.tags,
     image: resolveUrl(feature.image),
     link: feature.link
       ? {
@@ -172,6 +175,7 @@ const gridCols = computed(() => {
               :metadata="feature.metadata"
               :link="feature.link"
               :secondaryLink="feature.secondaryLink"
+              :variant="variant"
               :class="`${cardBackground}`"
             />
           </div>
@@ -186,6 +190,7 @@ const gridCols = computed(() => {
             :metadata="feature.metadata"
             :link="feature.link"
             :secondaryLink="feature.secondaryLink"
+            :variant="variant"
             :class="`${cardBackground}`"
           />
         </div>

package/src/components/Footer.cy.js

@@ -42,7 +42,7 @@ describe("<Footer />", () => {
 
   it("renders legal links", () => {
     cy.mount(Footer);
-    cy.contains("a", "About").should("have.attr", "href", "/about");
+    cy.contains("a", "Imprint").should("have.attr", "href", "/about");
     cy.contains("a", "Terms & Conditions").should(
       "have.attr",
       "href",
@@ -51,6 +51,43 @@ describe("<Footer />", () => {
     cy.contains("a", "Privacy").should("have.attr", "href", "/privacy");
   });
 
+  it("renders uncategorized nav links under site title", () => {
+    cy.mount(Footer);
+    cy.contains("p.bold", "EOX Site").should("exist");
+    cy.contains("a", "Link 1").should("have.attr", "href", "/link1");
+  });
+
+  it("renders uncategorized nav links under brandConfig title when present", () => {
+    __setMockData({
+      theme: {
+        theme: {
+          brandConfig: {
+            title: "Custom Brand",
+          },
+        },
+      },
+    });
+    cy.mount(Footer);
+    cy.contains("p.bold", "Custom Brand").should("exist");
+    cy.contains("a", "Link 1").should("have.attr", "href", "/link1");
+  });
+
+  it("renders dropdown items under category title", () => {
+    __setMockData({
+      theme: {
+        nav: [
+          {
+            text: "Our Company",
+            items: [{ text: "About", link: "/about" }],
+          },
+        ],
+      },
+    });
+    cy.mount(Footer);
+    cy.contains("p.bold", "Our Company").should("exist");
+    cy.contains("a", "About").should("have.attr", "href", "/about");
+  });
+
   it("renders footer message with HTML content", () => {
     __setMockData({
       site: { title: "EOX Site" },
@@ -87,6 +124,7 @@ describe("<Footer />", () => {
         },
         i18n: {
           About: "Über uns",
+          Imprint: "Impressum",
           Legal: "Rechtliches",
           "Powered by": "Unterstützt von",
         },
@@ -96,7 +134,7 @@ describe("<Footer />", () => {
       },
     });
     cy.mount(Footer);
-    cy.contains("Über uns").should("exist");
+    cy.contains("Impressum").should("exist");
     cy.contains("Rechtliches").should("exist");
   });
 

package/src/components/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <footer class="surface-container-low row center-align">
+  <footer class="surface-container-lowest row center-align">
     <div class="holder large-padding">
       <div class="large-space"></div>
       <div class="grid">
@@ -36,7 +36,9 @@
               class="footer-column-item"
               v-if="theme.nav.filter((i) => !i.action && i.link).length"
             >
-              <p class="bold">{{ t("About", theme.i18n) }}</p>
+              <p class="bold">
+                {{ theme.theme?.brandConfig?.title || site.title }}
+              </p>
               <p v-for="item in theme.nav.filter((i) => !i.action && i.link)">
                 <a
                   :href="withBase(item.link)"
@@ -72,7 +74,7 @@
                   "
                   target="_blank"
                   class="link"
-                  >{{ t("About", theme.i18n) }}</a
+                  >{{ t("Imprint", theme.i18n) }}</a
                 >
               </p>
               <p v-for="(term, index) in termsLinks" :key="term.id || index">

package/src/components/HeroSection.vue

@@ -1,40 +1,45 @@
 <template>
-  <header v-if="frontmatter.hero" class="primary primary-gradient-bg">
+  <header v-if="heroData" class="primary hero-gradient-bg">
     <div
-      :class="`large-padding hero-container ${frontmatter.hero.image ? 'image' : ''}`"
+      :class="`large-padding hero-container ${heroData.image ? 'image' : ''}`"
     >
       <iframe
-        v-if="frontmatter.hero.image?.src?.includes('youtube')"
+        v-if="heroData.image?.src?.includes('youtube')"
         class="hero-image large-elevate small-round"
         style="grid-area: image; aspect-ratio: 16/9"
-        :src="frontmatter.hero.image.src"
+        :src="heroData.image.src"
         frameborder="0"
         allowfullscreen
       />
       <video
-        v-else-if="frontmatter.hero.video"
+        v-else-if="heroData.video"
         class="hero-image large-elevate small-round"
-        :src="withBase(frontmatter.hero.video.src)"
+        :src="withBase(heroData.video.src)"
         style="grid-area: image; aspect-ratio: 16/9"
         autoplay
         muted
         loop
       />
       <img
-        v-else-if="frontmatter.hero.image"
+        v-else-if="heroData.image"
         class="hero-image large-elevate small-round"
         style="grid-area: image"
-        :src="withBase(frontmatter.hero.image.src)"
+        :src="withBase(heroData.image.src)"
+        :alt="heroData.image.alt || heroData.text"
       />
       <div class="title" style="grid-area: title">
         <h1 class="bold" style="font-size: clamp(2.25rem, 5vw, 3.3rem)">
-          {{ frontmatter.hero.text }}
+          {{ heroData.text }}
         </h1>
-        <p v-html="frontmatter.hero.tagline"></p>
+        <p v-if="heroData.tagline" v-html="heroData.tagline"></p>
       </div>
-      <div style="grid-area: actions">
+      <div
+        v-if="heroData.actions && heroData.actions.length > 0"
+        style="grid-area: actions"
+      >
         <a
-          v-for="(action, i) in frontmatter.hero.actions"
+          v-for="(action, i) in heroData.actions"
+          :key="i"
           :href="withBase(action.link)"
           :target="action.target"
           :rel="action.rel"
@@ -62,17 +67,100 @@
       </div>
     </div>
     <img
-      v-if="frontmatter.hero.background"
+      v-if="heroData.background"
       class="background-image"
-      :src="withBase(frontmatter.hero.background.src)"
+      :src="withBase(heroData.background.src)"
+      :alt="heroData.background.alt || ''"
     />
   </header>
 </template>
 
 <script setup>
+import { computed } from "vue";
 import { useData, withBase } from "vitepress";
 import { trackEvent } from "../helpers";
-const { frontmatter } = useData();
+
+const props = defineProps({
+  text: String,
+  title: String,
+  tagline: String,
+  actions: Array,
+  image: Object,
+  video: Object,
+  background: Object,
+});
+
+const { frontmatter, params } = useData();
+
+const heroData = computed(() => {
+  if (props.text || props.title || props.tagline) {
+    return {
+      text: props.text || props.title,
+      tagline: props.tagline,
+      actions: props.actions,
+      image: props.image,
+      video: props.video,
+      background: props.background,
+    };
+  }
+
+  if (!frontmatter.value.hero || frontmatter.value.hero === false) {
+    return null;
+  }
+
+  // If hero is an object with custom properties
+  if (typeof frontmatter.value.hero === "object") {
+    return {
+      ...frontmatter.value.hero,
+      text:
+        frontmatter.value.hero.text ||
+        frontmatter.value.hero.title ||
+        frontmatter.value.title,
+    };
+  }
+
+  // If hero is true (boolean), provide intelligent layout defaults
+  if (frontmatter.value.hero === true) {
+    if (frontmatter.value.layout === "team") {
+      return {
+        text: frontmatter.value.title || "Our Team",
+        tagline:
+          frontmatter.value.tagline ||
+          "Meet the diverse team of geospatial experts, engineers, and visionaries driving EOX forward.",
+      };
+    }
+    if (frontmatter.value.layout === "blog") {
+      const tag = params?.value?.tag;
+      const author = params?.value?.author;
+      let blogTitle = frontmatter.value.title || "EOX Blog";
+      if (tag) {
+        blogTitle = `Tag: ${tag}`;
+      } else if (author) {
+        blogTitle = `Author: ${author}`;
+      }
+      return {
+        text: blogTitle,
+        tagline:
+          frontmatter.value.tagline ||
+          "Insights, updates, and deep dives from our geospatial experts.",
+      };
+    }
+    if (frontmatter.value.layout === "tags") {
+      return {
+        text: frontmatter.value.title || "Blog Tags",
+        tagline:
+          frontmatter.value.tagline ||
+          "Explore our blog posts by topics and technology pillars.",
+      };
+    }
+    return {
+      text: frontmatter.value.title || "",
+      tagline: frontmatter.value.tagline || frontmatter.value.description || "",
+    };
+  }
+
+  return null;
+});
 </script>
 
 <style scoped>

package/src/components/LogoSection.vue

@@ -65,6 +65,7 @@ onMounted(() => {
 
 <style>
 section.logo-section {
+  background-color: var(--surface-container-lowest, #ffffff);
   margin-block-start: 3rem;
 }
 .logo-section .logo-row {

package/src/components/MobileNavDropdown.vue

@@ -1,8 +1,11 @@
 <template>
   <template v-for="item in items">
-    <li v-if="item.items && item.text">
+    <li
+      v-if="item.items && item.text"
+      :class="{ active: isActive(item, route.path) }"
+    >
       <details>
-        <summary>
+        <summary :class="{ active: isActive(item, route.path) }">
           <span class="max" :class="{ active: isActive(item, route.path) }">{{
             t(item.text, theme.i18n)
           }}</span>
@@ -14,7 +17,7 @@
       </details>
     </li>
     <MobileNavDropdown v-else-if="item.items" :items="item.items" />
-    <li v-else>
+    <li v-else :class="{ active: isActive(item, route.path) }">
       <a
         v-if="item.link"
         :href="withBase(item.link)"