@eox/pages-theme-eox 2.0.0-alpha.3 → 2.0.0-alpha.4

package/package.json

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

package/src/components/BlogList.vue

@@ -49,10 +49,17 @@
             "
             :date="post.date"
             :authors="post.authors"
-            :chips="post.tags ? post.tags.map((t) => ({ text: t })) : []"
+            :chips="
+              post.tags
+                ? post.tags.map((t) => ({
+                    text: t,
+                    link: withBase(`/tag/${t}/`),
+                  }))
+                : []
+            "
             :link="{
               text: 'Read more',
-              href: post.url,
+              href: withBase(post.url),
               target: '_self',
             }"
             variant="cover"
@@ -133,7 +140,7 @@
         <div class="sidebar-widget">
           <div class="sidebar-title-container">
             <h3 class="sidebar-title-inline">Hot tags</h3>
-            <a href="/tag" class="see-all-link">
+            <a :href="withBase('/tag')" class="see-all-link">
               <span>see all</span>
               <i class="mdi mdi-arrow-right"></i>
             </a>
@@ -142,7 +149,7 @@
             <a
               v-for="tag in calculatedHotTags"
               :key="tag.name"
-              :href="`/tag/${tag.name}/`"
+              :href="withBase(`/tag/${tag.name}/`)"
               :style="getTagStyle(tag.name)"
               class="sidebar-tag"
             >
@@ -157,7 +164,7 @@
 
 <script setup>
 import { ref, computed, onMounted, watch } from "vue";
-import { useRouter, useData } from "vitepress";
+import { useRouter, useData, withBase } from "vitepress";
 import { data as posts } from "../posts.data.js";
 import { data as authorsList } from "../authors.data.js";
 import { getTagColor, getTagStyle } from "../tagUtils.js";
@@ -198,10 +205,13 @@ const postsPerPage = 9;
 // Form cover image URL correctly (prefixing filename with /images/)
 function getCoverImageUrl(coverImage) {
   if (!coverImage) return "";
-  if (coverImage.startsWith("/") || coverImage.startsWith("http")) {
+  if (coverImage.startsWith("http") || coverImage.startsWith("//")) {
     return coverImage;
   }
-  return `/images/${coverImage}`;
+  const path = coverImage.startsWith("/")
+    ? coverImage
+    : `/images/${coverImage}`;
+  return withBase(path);
 }
 
 const tagFromParam = computed(() => {

package/src/components/BlogPost.vue

@@ -40,7 +40,10 @@
                 :key="authorId"
                 class="author-item"
               >
-                <a :href="`/author/${authorId}/`" class="author-link-active">
+                <a
+                  :href="withBase(`/author/${authorId}/`)"
+                  class="author-link-active"
+                >
                   {{ getAuthorName(authorId) }}
                 </a>
                 <span v-if="idx < authors.length - 1" class="author-separator"
@@ -58,7 +61,7 @@
             <a
               v-for="tag in frontmatter.tags"
               :key="tag"
-              :href="`/tag/${tag}/`"
+              :href="withBase(`/tag/${tag}/`)"
               :style="getTagStyle(tag)"
               class="post-tag"
             >
@@ -87,7 +90,7 @@
             <a
               v-for="tag in calculatedHotTags"
               :key="tag.name"
-              :href="`/tag/${tag.name}/`"
+              :href="withBase(`/tag/${tag.name}/`)"
               :style="getTagStyle(tag.name)"
               class="sidebar-tag"
             >
@@ -106,7 +109,7 @@
               class="flex flex-col gap-1 border-b border-slate-100 last:border-none pb-3 last:pb-0"
             >
               <a
-                :href="post.url"
+                :href="withBase(post.url)"
                 class="text-sm font-semibold text-slate-900 hover:text-primary leading-snug transition-colors line-clamp-2"
               >
                 {{ post.title }}
@@ -123,7 +126,7 @@
 </template>
 
 <script setup>
-import { useData } from "vitepress";
+import { useData, withBase } from "vitepress";
 import { computed } from "vue";
 import { data as posts } from "../posts.data.js";
 import { data as authorsList } from "../authors.data.js";
@@ -145,10 +148,13 @@ const headers = computed(() => {
 // Form cover image URL correctly (prefixing filename with /images/)
 function getCoverImageUrl(coverImage) {
   if (!coverImage) return "";
-  if (coverImage.startsWith("/") || coverImage.startsWith("http")) {
+  if (coverImage.startsWith("http") || coverImage.startsWith("//")) {
     return coverImage;
   }
-  return `/images/${coverImage}`;
+  const path = coverImage.startsWith("/")
+    ? coverImage
+    : `/images/${coverImage}`;
+  return withBase(path);
 }
 
 // Format publication date

package/src/components/CTASection.vue

@@ -18,7 +18,7 @@
         v-if="primaryButton"
         class="button extra small-margin responsive-mobile"
         :class="dark !== undefined ? 'surface' : 'primary'"
-        :href="primaryLink"
+        :href="resolvedPrimaryLink"
         @click="
           trackEvent(['CTA', 'Click', 'CTA Section Primary', primaryButton])
         "
@@ -27,7 +27,7 @@
       <a
         v-if="secondaryButton"
         class="button extra small-margin secondary responsive-mobile"
-        :href="secondaryLink"
+        :href="resolvedSecondaryLink"
         @click="
           trackEvent(['CTA', 'Click', 'CTA Section Secondary', secondaryButton])
         "
@@ -37,7 +37,7 @@
         v-if="altButton"
         class="button border extra small-margin responsive-mobile"
         :class="dark !== undefined ? 'white-text' : ''"
-        :href="altLink"
+        :href="resolvedAltLink"
         @click="trackEvent(['CTA', 'Click', 'CTA Section Alt', altButton])"
         >{{ altButton }}</a
       >
@@ -49,6 +49,8 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { withBase } from "vitepress";
 import { trackEvent } from "../helpers";
 const props = defineProps([
   "dark",
@@ -61,6 +63,16 @@ const props = defineProps([
   "tagline",
   "title",
 ]);
+
+function resolveLink(link) {
+  if (!link) return "";
+  if (link.startsWith("http") || link.startsWith("//")) return link;
+  return link.startsWith("/") ? withBase(link) : withBase("/" + link);
+}
+
+const resolvedPrimaryLink = computed(() => resolveLink(props.primaryLink));
+const resolvedSecondaryLink = computed(() => resolveLink(props.secondaryLink));
+const resolvedAltLink = computed(() => resolveLink(props.altLink));
 </script>
 
 <style>

package/src/components/FeatureCard/Index.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { withBase } from "vitepress";
 import { data as authorsList } from "../../authors.data.js";
 import { getTagColor } from "../../tagUtils.js";
 
@@ -53,6 +54,20 @@ const props = defineProps({
   },
 });
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedLinkHref = computed(() =>
+  props.link?.href ? resolveUrl(props.link.href) : undefined,
+);
+const resolvedSecondaryLinkHref = computed(() =>
+  props.secondaryLink?.href ? resolveUrl(props.secondaryLink.href) : undefined,
+);
+
 const iconStyle = {
   width: (props.icon?.width ?? 40) + "px",
   height: (props.icon?.height ?? 40) + "px",
@@ -133,8 +148,13 @@ function formatDate(dateString) {
     ]"
   >
     <!-- Cover Image for cover/blog/rich cards -->
-    <a v-if="isCoverLayout" :href="link?.href" class="card-cover-link">
-      <img :src="image" alt="" class="card-cover-image" loading="lazy" />
+    <a v-if="isCoverLayout" :href="resolvedLinkHref" class="card-cover-link">
+      <img
+        :src="resolvedImage"
+        alt=""
+        class="card-cover-image"
+        loading="lazy"
+      />
     </a>
 
     <div class="card-content-wrapper">
@@ -151,7 +171,7 @@ function formatDate(dateString) {
       <!-- Render small icon image only if NOT rendering a full cover image -->
       <img
         v-else-if="image && !isCoverLayout"
-        :src="image"
+        :src="resolvedImage"
         alt=""
         class="icon"
       />
@@ -172,7 +192,7 @@ function formatDate(dateString) {
               :key="authorId"
               class="author-item"
             >
-              <a :href="`/author/${authorId}/`" class="author-link">{{
+              <a :href="withBase(`/author/${authorId}/`)" class="author-link">{{
                 getAuthorName(authorId)
               }}</a
               ><span v-if="idx < authors.length - 1" class="author-separator"
@@ -187,7 +207,13 @@ function formatDate(dateString) {
           <a
             v-for="chip in chips"
             :key="chip.text"
-            :href="chip.link || chip.href || `/tag/${chip.text}/`"
+            :href="
+              chip.link
+                ? resolveUrl(chip.link)
+                : chip.href
+                  ? resolveUrl(chip.href)
+                  : withBase(`/tag/${chip.text}/`)
+            "
             :style="getTagStyle(chip.text)"
             class="tag-link"
           >
@@ -197,7 +223,7 @@ function formatDate(dateString) {
       </div>
 
       <h5 class="small card-title-text">
-        <a v-if="link?.href" :href="link.href">{{ title }}</a>
+        <a v-if="resolvedLinkHref" :href="resolvedLinkHref">{{ title }}</a>
         <span v-else>{{ title }}</span>
       </h5>
 
@@ -210,7 +236,13 @@ function formatDate(dateString) {
         <template v-for="chip in chips" :key="chip.text">
           <a
             v-if="chip.link || chip.href"
-            :href="chip.link || chip.href"
+            :href="
+              chip.link
+                ? resolveUrl(chip.link)
+                : chip.href
+                  ? resolveUrl(chip.href)
+                  : undefined
+            "
             :style="getTagStyle(chip.text)"
             class="chip small-chip border clickable-chip"
             :class="chip.class"
@@ -260,7 +292,7 @@ function formatDate(dateString) {
     >
       <a
         v-if="link && !!link.text"
-        :href="link.href"
+        :href="resolvedLinkHref"
         :target="link.target ?? '_blank'"
         class="button transparent bold primary-text no-padding"
       >
@@ -271,7 +303,7 @@ function formatDate(dateString) {
       </a>
       <a
         v-if="secondaryLink"
-        :href="secondaryLink.href"
+        :href="resolvedSecondaryLinkHref"
         :target="secondaryLink.target ?? '_blank'"
         class="button transparent primary-text no-padding secondary-link"
       >

package/src/components/FeatureCard/Poster.vue

@@ -1,5 +1,6 @@
 <script setup>
 import { computed } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps({
   title: String,
@@ -41,6 +42,20 @@ const props = defineProps({
   },
 });
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedLinkHref = computed(() =>
+  props.link?.href ? resolveUrl(props.link.href) : undefined,
+);
+const resolvedSecondaryLinkHref = computed(() =>
+  props.secondaryLink?.href ? resolveUrl(props.secondaryLink.href) : undefined,
+);
+
 const cardStyle = computed(() => ({
   minHeight: props.minHeight,
 }));
@@ -52,7 +67,12 @@ const cardStyle = computed(() => ({
     :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
     :style="cardStyle"
   >
-    <img v-if="image" :src="image" alt="" class="image-overlay-card-image" />
+    <img
+      v-if="image"
+      :src="resolvedImage"
+      alt=""
+      class="image-overlay-card-image"
+    />
     <div class="image-overlay-card-overlay"></div>
     <div class="image-overlay-card-content padding">
       <div style="padding-top: 3rem">
@@ -103,7 +123,7 @@ const cardStyle = computed(() => ({
         <a
           v-if="link && link.text"
           class="button small white black-text"
-          :href="link.href"
+          :href="resolvedLinkHref"
           :target="link.target ?? '_blank'"
         >
           {{ link.text }}
@@ -111,7 +131,7 @@ const cardStyle = computed(() => ({
         <a
           v-if="secondaryLink"
           class="button small border white-text secondary-link"
-          :href="secondaryLink.href"
+          :href="resolvedSecondaryLinkHref"
           :target="secondaryLink.target ?? '_blank'"
         >
           {{ secondaryLink.text }}

package/src/components/FeaturesGallery.vue

@@ -63,9 +63,38 @@ const resolveCardComponent = (variant) => {
 
 const { page, site } = useData();
 
+function normalizeFeature(feature) {
+  return {
+    ...feature,
+    image:
+      feature.image && feature.image.startsWith("/")
+        ? withBase(feature.image)
+        : feature.image,
+    link: feature.link
+      ? {
+          ...feature.link,
+          href:
+            feature.link.href && feature.link.href.startsWith("/")
+              ? withBase(feature.link.href)
+              : feature.link.href,
+        }
+      : undefined,
+    secondaryLink: feature.secondaryLink
+      ? {
+          ...feature.secondaryLink,
+          href:
+            feature.secondaryLink.href &&
+            feature.secondaryLink.href.startsWith("/")
+              ? withBase(feature.secondaryLink.href)
+              : feature.secondaryLink.href,
+        }
+      : undefined,
+  };
+}
+
 const featuresExcerpts =
   cards && cards.length
-    ? cards
+    ? cards.map(normalizeFeature)
     : features
         .map((f) => {
           if (import.meta.env.SSR) {
@@ -89,7 +118,7 @@ const featuresExcerpts =
                   }
                 : undefined,
               link: {
-                href: f.url,
+                href: withBase(f.url),
                 text: "Read more",
                 target: "_self",
               },

package/src/components/Footer.vue

@@ -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)"
@@ -89,7 +92,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>

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,20 @@ 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;
+  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,15 @@ const props = defineProps({
   },
 });
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) 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,12 @@ const props = defineProps({
 
 const lightboxIndex = ref(null);
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) 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 +218,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 +244,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 [];
 });

package/src/components/LogoSection.vue

@@ -2,7 +2,8 @@
   <section class="logo-section">
     <div ref="logo-row" class="logo-row">
       <component
-        v-for="logo in logos"
+        v-for="logo in normalizedLogos"
+        :key="logo.alt"
         :is="logo.link ? 'a' : 'div'"
         :href="logo.link || undefined"
         :target="logo.target || undefined"
@@ -15,11 +16,27 @@
 </template>
 
 <script setup>
-import { useTemplateRef, onMounted } from "vue";
+import { useTemplateRef, onMounted, computed } from "vue";
+import { withBase } from "vitepress";
 
 const props = defineProps(["baseHeight", "logos", "strength"]);
 const logoRow = useTemplateRef("logo-row");
 
+function resolveUrl(url) {
+  if (!url) return "";
+  if (url.startsWith("http") || url.startsWith("//")) return url;
+  return url.startsWith("/") ? withBase(url) : withBase("/" + url);
+}
+
+const normalizedLogos = computed(() => {
+  if (!props.logos) return [];
+  return props.logos.map((logo) => ({
+    ...logo,
+    image: resolveUrl(logo.image),
+    link: logo.link ? resolveUrl(logo.link) : undefined,
+  }));
+});
+
 onMounted(() => {
   // Function to update CSS variables and display values
   function updateVariables() {

package/src/components/NavBar.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="top-nav at-top row center-align">
     <nav class="large-padding no-margin center-align nav-mobile">
-      <a href="/">
+      <a :href="withBase('/')">
         <img
           :src="withBase(theme.logo.light)"
           :alt="`${site.title} logo`"
@@ -20,7 +20,7 @@
       </button>
       <dialog id="mobile-menu" class="max">
         <nav>
-          <a data-ui="#mobile-menu" href="/">
+          <a data-ui="#mobile-menu" :href="withBase('/')">
             <img
               :src="withBase(theme.logo.light)"
               :alt="`${site.title} logo`"
@@ -119,7 +119,7 @@
       </dialog>
     </nav>
     <nav class="large-padding no-margin center-align row holder nav-desktop">
-      <a href="/">
+      <a :href="withBase('/')">
         <img
           :src="withBase(theme.logo.light)"
           :alt="`${site.title} logo`"

package/src/components/TagList.vue

@@ -13,7 +13,7 @@
         <a
           v-for="tag in allTagsList"
           :key="tag.name"
-          :href="`/tag/${tag.name}/`"
+          :href="withBase(`/tag/${tag.name}/`)"
           :style="getTagStyle(tag.name)"
           class="tag-item"
         >
@@ -58,7 +58,7 @@
       </ul>
       <p class="legend-note">
         For more detailed information on our technology solutions, visit the
-        <a href="/software-products" class="legend-link"
+        <a :href="withBase('/solutions')" class="legend-link"
           >Solutions & Services</a
         >
         page.
@@ -69,6 +69,7 @@
 
 <script setup>
 import { computed } from "vue";
+import { withBase } from "vitepress";
 import { data as posts } from "../posts.data.js";
 import { getTagColor, getTagStyle } from "../tagUtils.js";