@eox/pages-theme-eox 1.9.0 → 2.0.0-alpha.10

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")),
 };
 
@@ -63,9 +64,38 @@ const resolveCardComponent = (variant) => {
 
 const { page, site } = useData();
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  const base = withBase("/");
+  if (base && base !== "/" && url.startsWith(base)) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+function normalizeFeature(feature) {
+  return {
+    ...feature,
+    content: feature.content || feature.description,
+    chips: feature.chips || feature.tags,
+    image: resolveUrl(feature.image),
+    link: feature.link
+      ? {
+          ...feature.link,
+          href: resolveUrl(feature.link.href),
+        }
+      : undefined,
+    secondaryLink: feature.secondaryLink
+      ? {
+          ...feature.secondaryLink,
+          href: resolveUrl(feature.secondaryLink.href),
+        }
+      : undefined,
+  };
+}
+
 const featuresExcerpts =
   cards && cards.length
-    ? cards
+    ? cards.map(normalizeFeature)
     : features
         .map((f) => {
           if (import.meta.env.SSR) {
@@ -89,7 +119,7 @@ const featuresExcerpts =
                   }
                 : undefined,
               link: {
-                href: f.url,
+                href: withBase(f.url),
                 text: "Read more",
                 target: "_self",
               },
@@ -145,6 +175,7 @@ const gridCols = computed(() => {
               :metadata="feature.metadata"
               :link="feature.link"
               :secondaryLink="feature.secondaryLink"
+              :variant="variant"
               :class="`${cardBackground}`"
             />
           </div>
@@ -159,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");
   });
 
@@ -107,4 +145,16 @@ describe("<Footer />", () => {
       .should("have.attr", "href", "https://eox.at")
       .and("contain", "EOX");
   });
+
+  it("defines hover underline styles for footer links", () => {
+    cy.mount(Footer);
+    cy.get("footer .link").should("have.css", "text-decoration-line", "none");
+    cy.document().then((doc) => {
+      const styles = Array.from(doc.querySelectorAll("style"))
+        .map((s) => s.textContent)
+        .join("\n");
+      expect(styles).to.include("footer .link:hover");
+      expect(styles).to.include("text-decoration: underline");
+    });
+  });
 });

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">
@@ -14,7 +14,10 @@
             <a
               v-if="theme.nav.find((i) => i.link && i.link.includes('contact'))"
               :href="
-                theme.nav.find((i) => i.link && i.link.includes('contact')).link
+                withBase(
+                  theme.nav.find((i) => i.link && i.link.includes('contact'))
+                    .link,
+                )
               "
               class="button small border no-margin"
               style="color: var(--on-surface)"
@@ -33,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)"
@@ -69,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">
@@ -89,7 +94,7 @@
                 >
               </p>
               <p v-if="theme.theme.brandConfig?.analytics">
-                <a href="/cookie-settings" class="link">{{
+                <a :href="withBase('/cookie-settings')" class="link">{{
                   t("Cookie settings", theme.i18n)
                 }}</a>
               </p>
@@ -133,10 +138,17 @@ footer .grid > div:not(:first-child) p,
   margin: 0 !important;
 }
 
+footer a:not(.button),
 footer .link {
   text-decoration: none;
 }
 
+footer a:not(.button):hover,
+footer .link:hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .footer-columns {
   columns: 1;
   column-gap: 2rem;

package/src/components/HeroSection.cy.js

@@ -36,6 +36,26 @@ describe("<HeroSection />", () => {
     cy.get("img.hero-image").should("have.attr", "src", "/image.png");
   });
 
+  it("renders with left alignment by default", () => {
+    cy.mount(HeroSection);
+    cy.get(".hero-container").should("have.css", "text-align", "left");
+  });
+
+  it("supports center alignment when configured", () => {
+    __setMockData({
+      frontmatter: {
+        hero: {
+          text: "Centered Hero",
+          align: "center",
+        },
+      },
+    });
+
+    cy.mount(HeroSection);
+    cy.get(".hero-container").should("have.class", "center-align");
+    cy.get(".hero-container").should("have.css", "text-align", "center");
+  });
+
   it("renders video when provided", () => {
     __setMockData({
       frontmatter: {

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' : ''} ${heroData.align === 'center' || heroData.align === 'center-align' ? 'center-align' : ''}`"
     >
       <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; align-content: end">
+      <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"
@@ -57,35 +62,135 @@
           "
         >
           <span>{{ action.text }}</span>
-          <i v-if="action.theme !== 'alt'" class="mdi mdi-arrow-right"></i>
+          <i
+            v-if="action.icon"
+            :class="
+              action.icon.startsWith('mdi') ? `mdi ${action.icon}` : action.icon
+            "
+          ></i>
+          <i
+            v-else-if="action.theme !== 'alt' && action.icon !== false"
+            class="mdi mdi-arrow-right"
+          ></i>
         </a>
       </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,
+  align: String,
+});
+
+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,
+      align: props.align,
+    };
+  }
+
+  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,
+      align: frontmatter.value.hero.align,
+    };
+  }
+
+  // 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>
+<style scoped>
 header {
+  position: relative;
   margin-top: calc(var(--vp-nav-height) * -1);
-  padding-top: 10rem !important;
-  padding-bottom: 10rem !important;
-  height: 76dvh;
-  max-height: 1000px;
+  padding-top: calc(var(--vp-nav-height) + 3.5rem) !important;
+  padding-bottom: 4.5rem !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  min-height: 380px;
 }
 @media (max-width: 1024px) {
   header {
-    padding: 0 1.5rem !important;
+    padding-top: calc(var(--vp-nav-height) + 2rem) !important;
+    padding-bottom: 3rem !important;
+    padding-left: 0 !important;
+    padding-right: 0 !important;
   }
   header h1.large {
     font-size: 3rem;
@@ -103,10 +208,12 @@ header > img.background-image {
   border-radius: 0 !important;
 }
 header > .hero-container {
+  width: 100%;
   max-width: 1200px;
   max-height: 80%;
   margin-left: auto;
   margin-right: auto;
+  box-sizing: border-box;
   display: grid;
   grid-gap: 2rem;
   grid-template-areas:
@@ -114,7 +221,7 @@ header > .hero-container {
     "title"
     "actions";
   grid-auto-rows: min-content;
-  text-align: center;
+  text-align: left;
   z-index: 1;
 }
 @media (min-width: 768px) {
@@ -122,7 +229,7 @@ header > .hero-container {
     grid-template-areas:
       "title"
       "actions";
-    text-align: center;
+    text-align: left;
   }
   header > .hero-container.image {
     grid-template-areas:
@@ -132,6 +239,14 @@ header > .hero-container {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 }
+header > .hero-container.center-align {
+  text-align: center;
+}
+@media (min-width: 768px) {
+  header > .hero-container.center-align {
+    text-align: center;
+  }
+}
 header > .hero-container > .hero-image {
   width: 100%;
   object-fit: cover;

package/src/components/ImageCarousel.vue

@@ -79,6 +79,7 @@
 
 <script setup>
 import { computed, ref } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps({
   images: {
@@ -90,14 +91,22 @@ const props = defineProps({
 const container = ref(null);
 const activeIndex = ref(0);
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  const base = withBase("/");
+  if (base && base !== "/" && url.startsWith(base)) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
 const normalizedImages = computed(() => {
   if (!props.images) return [];
   return props.images.map((img) => {
     if (typeof img === "string") {
-      return { src: img, alt: "", caption: "" };
+      return { src: resolveUrl(img), alt: "", caption: "" };
     }
     return {
-      src: img.src || "",
+      src: resolveUrl(img.src),
       alt: img.alt || "",
       caption: img.caption || "",
     };

package/src/components/ImageElement.vue

@@ -9,7 +9,7 @@
       >
         <!-- Background Image (Original/Right) -->
         <img
-          :src="compare"
+          :src="resolvedCompare"
           :alt="alt || 'Image comparison background'"
           class="compare-img compare-bg"
         />
@@ -22,7 +22,7 @@
           }"
         >
           <img
-            :src="src"
+            :src="resolvedSrc"
             :alt="alt || 'Image comparison foreground'"
             class="compare-img compare-fg"
           />
@@ -61,7 +61,7 @@
       <!-- Standard Image Mode -->
       <img
         v-else
-        :src="src"
+        :src="resolvedSrc"
         :alt="alt || 'Post image'"
         :style="{ maxWidth: width || '100%' }"
         class="standard-img"
@@ -78,7 +78,8 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps({
   src: {
@@ -103,6 +104,17 @@ const props = defineProps({
   },
 });
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  const base = withBase("/");
+  if (base && base !== "/" && url.startsWith(base)) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+const resolvedSrc = computed(() => resolveUrl(props.src));
+const resolvedCompare = computed(() => resolveUrl(props.compare));
+
 const sliderValue = ref(50);
 </script>
 

package/src/components/ImageGallery.vue

@@ -170,6 +170,7 @@
 
 <script setup>
 import { computed, ref, onMounted, onUnmounted } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps({
   images: {
@@ -192,6 +193,14 @@ const props = defineProps({
 
 const lightboxIndex = ref(null);
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  const base = withBase("/");
+  if (base && base !== "/" && url.startsWith(base)) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
 const layoutMode = computed(() => {
   // If explicitly 'grid', or if we detect link in image objects, default to grid
   if (props.layout === "grid") return "grid";
@@ -211,13 +220,23 @@ const normalizedImages = computed(() => {
   if (Array.isArray(props.images)) {
     return props.images.map((img) => {
       if (typeof img === "string") {
-        return { src: img, alt: "", caption: "", link: "", width: "" };
+        return {
+          src: resolveUrl(img),
+          alt: "",
+          caption: "",
+          link: "",
+          width: "",
+        };
       }
       return {
-        src: img.src || "",
+        src: resolveUrl(img.src),
         alt: img.alt || "",
         caption: img.caption || "",
-        link: img.link || "",
+        link: img.link
+          ? img.link.startsWith("/")
+            ? withBase(img.link)
+            : img.link
+          : "",
         width: img.width || "",
       };
     });
@@ -227,7 +246,13 @@ const normalizedImages = computed(() => {
       .split(",")
       .map((img) => img.trim())
       .filter(Boolean)
-      .map((src) => ({ src, alt: "", caption: "", link: "", width: "" }));
+      .map((src) => ({
+        src: resolveUrl(src),
+        alt: "",
+        caption: "",
+        link: "",
+        width: "",
+      }));
   }
   return [];
 });