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

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)"

package/src/components/NavBar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="top-nav at-top row center-align">
+  <div class="top-nav at-top row center-align" :class="{ 'has-hero': hasHero }">
     <nav class="large-padding no-margin center-align nav-mobile">
       <a :href="withBase('/')">
         <img
@@ -33,10 +33,17 @@
           </button>
         </nav>
         <ul class="list border large-space">
-          <li v-for="item in theme.nav.filter((item) => !item.action)">
+          <li
+            v-for="item in theme.nav.filter((item) => !item.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <details v-if="item.items">
-              <summary>
-                <span class="max">{{ t(item.text, theme.i18n) }}</span>
+              <summary :class="{ active: isActive(item, route.path) }">
+                <span
+                  class="max"
+                  :class="{ active: isActive(item, route.path) }"
+                  >{{ t(item.text, theme.i18n) }}</span
+                >
                 <i class="mdi mdi-chevron-down"></i>
               </summary>
               <ul class="list">
@@ -49,7 +56,10 @@
               :href="withBase(item.link)"
               :target="item.target"
               :rel="item.rel"
-              :class="item.action ? 'button large medium-elevate cta' : ''"
+              :class="[
+                item.action ? 'button large medium-elevate cta' : '',
+                { active: isActive(item, route.path) },
+              ]"
             >
               <span>{{ t(item.text, theme.i18n) }}</span>
             </a>
@@ -135,7 +145,10 @@
       <div class="space"></div>
       <nav>
         <ul class="left-align no-margin">
-          <li v-for="item in theme.nav.filter((i) => !i.action)">
+          <li
+            v-for="item in theme.nav.filter((i) => !i.action)"
+            :class="{ active: isActive(item, route.path) }"
+          >
             <div v-if="item.items">
               <button
                 class="button text no-round"
@@ -229,7 +242,7 @@ import { t, trackEvent, isActive } from "../helpers";
 import NavDropdown from "./NavDropdown.vue";
 import MobileNavDropdown from "./MobileNavDropdown.vue";
 
-const { site, theme, localeIndex } = useData();
+const { site, theme, localeIndex, frontmatter, page } = useData();
 const route = useRoute();
 
 const langs = computed(() => {
@@ -271,6 +284,14 @@ const langs = computed(() => {
   });
 });
 
+const hasHero = computed(() => {
+  return Boolean(
+    frontmatter.value.hero ||
+      frontmatter.value.layout === "home" ||
+      page.value.relativePath === "index.md",
+  );
+});
+
 if (!import.meta.env.SSR) {
   const scrollListener = () => {
     const nav = document.querySelector(".top-nav");
@@ -301,7 +322,24 @@ if (!import.meta.env.SSR) {
 .top-nav.at-top {
   box-shadow: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary,
+.top-nav.at-top .nav-desktop .button.primary,
+.top-nav.has-hero.at-top .nav-desktop .button.primary,
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.primary {
+  background: #ffffff !important;
+  color: #000c14 !important;
+  border-radius: 9999px;
+  font-weight: 500;
+  display: inline-flex;
+}
+.top-nav.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.top-nav.has-hero.at-top .nav-desktop .button.primary i.mdi-arrow-right,
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.primary
+  i.mdi-arrow-right {
+  display: none;
+}
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.secondary,
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.alt {
   display: none;
@@ -317,43 +355,85 @@ if (!import.meta.env.SSR) {
   padding-top: 0.5rem !important;
   padding-bottom: 0.5rem !important;
 }
-.Layout.layout-home .top-nav.at-top {
+.Layout.layout-home .top-nav.at-top,
+.top-nav.has-hero.at-top {
   background: transparent;
   color: #f7f8f8;
 }
 .Layout .top-nav nav .button {
   color: var(--on-surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button,
+.top-nav.has-hero.at-top .nav-desktop .button {
   color: var(--on-surface);
   background: var(--surface);
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.text {
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text,
+.top-nav.has-hero.at-top .nav-desktop .button.text {
   color: #f7f8f8;
   background: none;
 }
-.Layout.layout-home .top-nav.at-top .nav-desktop .button.border {
+.Layout.layout-home
+  .top-nav.at-top
+  .nav-desktop
+  .button.text:hover:not(.active),
+.top-nav.has-hero.at-top .nav-desktop .button.text:hover:not(.active) {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border,
+.top-nav.has-hero.at-top .nav-desktop .button.border {
   color: #f7f8f8;
   border-color: #f7f8f855;
   background: none;
 }
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.border.active,
+.top-nav.has-hero.at-top .nav-desktop .button.border.active {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+  border-color: transparent !important;
+}
+.nav-desktop menu > li.active,
+.nav-desktop menu > li:has(> a.active) {
+  background-color: var(--primary-container) !important;
+  color: var(--on-primary-container) !important;
+}
+.nav-desktop menu > li.active > a,
+.nav-desktop menu > li:has(> a.active) > a {
+  color: var(--on-primary-container) !important;
+}
+#mobile-menu .list li.active > a,
+#mobile-menu .list li.active > span,
+#mobile-menu .list summary:has(.active),
+#mobile-menu .list summary.active {
+  color: var(--primary) !important;
+  font-weight: 600;
+}
 .top-nav.at-top > nav > a:has(.logo.dark) > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light {
+.Layout.layout-home .top-nav.at-top > nav > a:has(.logo.dark) > .logo.light,
+.top-nav.has-hero.at-top > nav > a:has(.logo.dark) > .logo.light {
   display: none;
 }
 .Layout.layout-home
   .top-nav.at-top
   > nav
   > a:not(:has(.logo.dark))
-  > .logo.light {
+  > .logo.light,
+.top-nav.has-hero.at-top > nav > a:not(:has(.logo.dark)) > .logo.light {
   filter: brightness(0) invert(1);
 }
 .Layout .top-nav > nav > a > .logo.dark {
   display: none;
 }
-.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark {
+.Layout.layout-home .top-nav.at-top > nav > a > .logo.dark,
+.top-nav.has-hero.at-top > nav > a > .logo.dark {
   display: block;
 }
 img.logo {

package/src/components/NavDropdown.vue

@@ -1,6 +1,9 @@
 <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) }"
+    >
       <a
         v-if="item.link"
         :href="withBase(item.link)"
@@ -25,7 +28,7 @@
       </menu>
     </li>
     <NavDropdown 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)"

package/src/components/TagList.vue

@@ -1,6 +1,7 @@
 <template>
-  <div class="tags-page">
-    <header class="tags-header">
+  <div class="tags-page" :class="{ 'has-hero': Boolean(frontmatter.hero) }">
+    <!-- Header (shown only when hero is not present) -->
+    <header v-if="!frontmatter.hero" class="tags-header">
       <h1 class="tags-title">Blog Tags</h1>
       <p class="tags-subtitle">
         Explore our blog posts by topics and technology pillars.
@@ -69,10 +70,12 @@
 
 <script setup>
 import { computed } from "vue";
-import { withBase } from "vitepress";
+import { useData, withBase } from "vitepress";
 import { data as posts } from "../posts.data.js";
 import { getTagColor, getTagStyle } from "../tagUtils.js";
 
+const { frontmatter } = useData();
+
 const allTagsList = computed(() => {
   // Aggregate all tag occurrences
   const tagCounts = {};
@@ -111,6 +114,10 @@ const allTagsList = computed(() => {
   box-sizing: border-box;
 }
 
+.tags-page.has-hero {
+  padding-top: 2rem;
+}
+
 @media (min-width: 640px) {
   .tags-page {
     padding-left: 1.5rem;
@@ -118,6 +125,9 @@ const allTagsList = computed(() => {
     padding-top: calc(var(--vp-nav-height) + 40px);
     padding-bottom: 64px;
   }
+  .tags-page.has-hero {
+    padding-top: 2.5rem;
+  }
 }
 
 @media (min-width: 960px) {
@@ -127,6 +137,9 @@ const allTagsList = computed(() => {
     padding-top: calc(var(--vp-nav-height) + 58px);
     padding-bottom: 96px;
   }
+  .tags-page.has-hero {
+    padding-top: 3rem;
+  }
 }
 
 /* Page Header */

package/src/components/TeamPage.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="team-page">
-    <!-- Header -->
-    <header class="team-header">
+  <div class="team-page" :class="{ 'has-hero': Boolean(frontmatter.hero) }">
+    <!-- Header (shown only when hero is not present) -->
+    <header v-if="!frontmatter.hero" class="team-header">
       <h1 class="team-title">
         {{ frontmatter.title || "Our Team" }}
       </h1>
@@ -137,6 +137,10 @@ const memberHasPosts = (memberId) => {
   word-break: break-word;
 }
 
+.team-page.has-hero {
+  padding-top: 2rem !important;
+}
+
 @media (min-width: 640px) {
   .team-page {
     padding-left: 1.5rem !important;
@@ -144,6 +148,9 @@ const memberHasPosts = (memberId) => {
     padding-top: calc(var(--vp-nav-height) + 40px) !important;
     padding-bottom: 64px !important;
   }
+  .team-page.has-hero {
+    padding-top: 2.5rem !important;
+  }
 }
 
 @media (min-width: 960px) {
@@ -153,6 +160,9 @@ const memberHasPosts = (memberId) => {
     padding-top: calc(var(--vp-nav-height) + 58px) !important;
     padding-bottom: 96px !important;
   }
+  .team-page.has-hero {
+    padding-top: 3rem !important;
+  }
 }
 
 /* Page Header */

package/src/components/TestimonialsSection.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="testimonials-section full-width surface-container-low">
+  <section class="testimonials-section full-width surface-container-lowest">
     <div class="holder">
       <!-- Left Side: Headline -->
       <div class="headline">
@@ -9,10 +9,27 @@
       </div>
 
       <!-- Right Side: Text Block -->
-      <div v-if="testimonials && testimonials.length > 0" class="text-block">
-        <!-- Testimonial Quote -->
-        <div class="quote-text">
-          &ldquo;{{ currentTestimonial.quote }}&rdquo;
+      <div
+        v-if="testimonials && testimonials.length > 0"
+        class="text-block"
+        role="region"
+        aria-roledescription="carousel"
+        :aria-label="title"
+      >
+        <!-- Testimonial Quotes Overlapping Grid -->
+        <div class="quotes-grid" aria-live="polite">
+          <div
+            v-for="(item, index) in testimonials"
+            :key="index"
+            class="quote-slide"
+            :class="{
+              active: index === currentIndex,
+              'quote-text': index === currentIndex,
+            }"
+            :aria-hidden="index !== currentIndex"
+          >
+            &ldquo;{{ item.quote }}&rdquo;
+          </div>
         </div>
 
         <!-- Divider / Separator -->
@@ -20,14 +37,28 @@
 
         <!-- Frame 469: Author info & sliders -->
         <div class="frame-469">
-          <!-- Frame 468: Author Name and Role -->
+          <!-- Frame 468: Author Name and Role Overlapping Grid -->
           <div class="frame-468">
-            <span class="author-name">
-              {{ currentTestimonial.author }}
-            </span>
-            <span class="author-role">
-              {{ currentTestimonial.role }}
-            </span>
+            <div
+              v-for="(item, index) in testimonials"
+              :key="index"
+              class="author-slide"
+              :class="{ active: index === currentIndex }"
+              :aria-hidden="index !== currentIndex"
+            >
+              <span
+                class="author-name-text"
+                :class="{ 'author-name': index === currentIndex }"
+              >
+                {{ item.author }}
+              </span>
+              <span
+                class="author-role-text"
+                :class="{ 'author-role': index === currentIndex }"
+              >
+                {{ item.role }}
+              </span>
+            </div>
           </div>
 
           <!-- sliders: Navigation Buttons -->
@@ -57,7 +88,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from "vue";
+import { ref, computed, watch } from "vue";
 
 const props = defineProps({
   title: {
@@ -91,6 +122,16 @@ const props = defineProps({
 
 const currentIndex = ref(0);
 
+// Clamp currentIndex if testimonials prop array changes dynamically
+watch(
+  () => props.testimonials?.length,
+  (len) => {
+    if (len && currentIndex.value >= len) {
+      currentIndex.value = 0;
+    }
+  },
+);
+
 const currentTestimonial = computed(() => {
   if (!props.testimonials || props.testimonials.length === 0) return null;
   return props.testimonials[currentIndex.value];
@@ -118,6 +159,7 @@ section.testimonials-section {
   margin-block-start: 6rem;
   margin-block-end: 6rem;
   box-sizing: border-box;
+  background-color: var(--surface-container-lowest, #ffffff);
 }
 
 @media (min-width: 1024px) {
@@ -168,6 +210,38 @@ section.testimonials-section {
   gap: 24px;
 }
 
+.quotes-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  width: 100%;
+}
+
+.quote-slide {
+  grid-column: 1;
+  grid-row: 1;
+  align-self: start;
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+  min-height: 72px;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.quote-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
 .quote-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
@@ -195,14 +269,35 @@ section.testimonials-section {
 }
 
 .frame-468 {
+  display: grid;
+  grid-template-columns: 1fr;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
+.author-slide {
+  grid-column: 1;
+  grid-row: 1;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 8px;
-  flex-grow: 1;
+  opacity: 0;
+  visibility: hidden;
+  transition:
+    opacity 0.25s ease,
+    visibility 0.25s ease;
+  pointer-events: none;
+}
+
+.author-slide.active {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
 }
 
-.author-name {
+.author-name,
+.author-name-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 700;
@@ -212,7 +307,8 @@ section.testimonials-section {
   color: #00060a;
 }
 
-.author-role {
+.author-role,
+.author-role-text {
   font-family: "Inter", sans-serif;
   font-style: normal;
   font-weight: 400;
@@ -222,6 +318,13 @@ section.testimonials-section {
   color: #00060a;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .quote-slide,
+  .author-slide {
+    transition: none;
+  }
+}
+
 .sliders {
   display: flex;
   flex-direction: row;

package/src/components/Tutorial.vue

@@ -98,8 +98,9 @@ defineProps({
 :deep(samp),
 :deep(var),
 :deep(.monospace) {
-  font-family: "SFMono-Regular", "Menlo", "Monaco", "Consolas",
-    "Liberation Mono", "Ubuntu Mono", "Courier New", monospace !important;
+  font-family:
+    "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono",
+    "Ubuntu Mono", "Courier New", monospace !important;
 }
 
 /* Inline code */

package/src/helpers.js

@@ -283,6 +283,8 @@ export const getFlatList = (items) => {
  * @returns {boolean}
  */
 export const isActive = (item, path) => {
+  if (!item || !path) return false;
+
   if (item.activeMatch) {
     try {
       return new RegExp(item.activeMatch).test(path);
@@ -292,20 +294,26 @@ export const isActive = (item, path) => {
     }
   }
 
-  if (item.items) {
-    return item.items.some((sub) => isActive(sub, path));
+  if (item.items && item.items.some((sub) => isActive(sub, path))) {
+    return true;
   }
 
   if (item.link) {
-    const linkPath = item.link.replace(/\.html$/, "").replace(/\/$/, "");
-    const currentPath = path.replace(/\.html$/, "").replace(/\/$/, "");
+    const normalize = (p) =>
+      decodeURI(p)
+        .replace(/[?#].*$/, "")
+        .replace(/\.html$/, "")
+        .replace(/\/$/, "");
+
+    const linkPath = normalize(item.link);
+    const currentPath = normalize(path);
 
     if (linkPath === currentPath) return true;
 
     // Special case for home page to avoid matching everything
     if (linkPath === "") return currentPath === "";
 
-    return currentPath.startsWith(linkPath);
+    return currentPath === linkPath || currentPath.startsWith(linkPath + "/");
   }
 
   return false;

package/src/helpers.test.js

@@ -144,10 +144,38 @@ describe("existing helpers", () => {
       t("nav.unknown", { nav: { home: "Home Page" } }),
       "nav.unknown",
     );
+    assert.equal(t("Imprint", { Imprint: "Impressum" }), "Impressum");
+    assert.equal(t("Imprint", {}), "Imprint");
   });
 
   it("checks isActive links correctly", () => {
     assert.equal(isActive({ link: "/explore/" }, "/explore"), true);
     assert.equal(isActive({ link: "/explore" }, "/explore/"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore/subpage"), true);
+    assert.equal(isActive({ link: "/explore" }, "/explore-other"), false);
+    assert.equal(isActive({ link: "/explore" }, "/explore?tab=1#sec"), true);
+    assert.equal(isActive({ link: "/" }, "/"), true);
+    assert.equal(isActive({ link: "/" }, "/explore"), false);
+
+    // Parent dropdown with items
+    const parentDropdown = {
+      text: "Expertise",
+      items: [
+        { text: "Data Management", link: "/expertise/data-management" },
+        { text: "Data Visualization", link: "/expertise/data-visualization" },
+      ],
+    };
+    assert.equal(isActive(parentDropdown, "/expertise/data-management"), true);
+    assert.equal(isActive(parentDropdown, "/expertise/data-management/"), true);
+    assert.equal(isActive(parentDropdown, "/solutions"), false);
+
+    // Parent with both link and items
+    const parentWithLinkAndItems = {
+      text: "Products",
+      link: "/products",
+      items: [{ text: "Product A", link: "/products/a" }],
+    };
+    assert.equal(isActive(parentWithLinkAndItems, "/products/a"), true);
+    assert.equal(isActive(parentWithLinkAndItems, "/products"), true);
   });
 });

package/src/pages/author/[author].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Author posts
+hero: true
 ---

package/src/pages/blog.md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Blog
+hero: true
 ---

package/src/pages/tag/[tag].md

@@ -1,4 +1,5 @@
 ---
 layout: blog
 title: Tag list
+hero: true
 ---

package/src/pages/tag.md

@@ -1,4 +1,5 @@
 ---
 layout: tags
 title: Tags
+hero: true
 ---

package/src/pages/team.md

@@ -1,4 +1,5 @@
 ---
 layout: team
 title: Team
+hero: true
 ---