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

package/package.json

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

package/src/components/BlogList.vue

@@ -4,9 +4,7 @@
     <div 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>
+          <h1 class="blog-landing-title">EOX Blog</h1>
           <p class="blog-landing-subtitle">
             Insights, updates, and deep dives from our geospatial experts.
           </p>
@@ -14,10 +12,7 @@
       </div>
 
       <!-- Active Filter Banner -->
-      <div
-        v-if="activeTag || activeAuthor"
-        class="active-filter-banner"
-      >
+      <div v-if="activeTag || activeAuthor" class="active-filter-banner">
         <span class="filter-label">Active filter:</span>
         <span
           v-if="activeTag"
@@ -32,10 +27,7 @@
         >
           Author: {{ getAuthorName(activeAuthor) }}
         </span>
-        <button
-          @click="clearFilters"
-          class="clear-filter-btn"
-        >
+        <button @click="clearFilters" class="clear-filter-btn">
           <i class="mdi mdi-close-circle"></i>
           <span>Clear Filter</span>
         </button>
@@ -52,14 +44,23 @@
             :key="post.url"
             :title="post.title"
             :content="post.excerpt"
-            :image="post.coverImage ? getCoverImageUrl(post.coverImage) : undefined"
+            :image="
+              post.coverImage ? getCoverImageUrl(post.coverImage) : undefined
+            "
             :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,
-              target: '_self'
+              href: withBase(post.url),
+              target: '_self',
             }"
             variant="cover"
             class="h-full bg-surface-container-low"
@@ -87,18 +88,18 @@
         <!-- Pagination -->
         <nav
           v-if="totalPages > 1"
-          class="mt-16 flex justify-center items-center gap-2"
+          class="mt-16 flex justify-center items-center gap-1 sm:gap-2"
         >
           <button
             @click="changePage(currentPage - 1)"
             :disabled="currentPage === 1"
-            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
           >
             <span class="sr-only">Previous</span>
             <i class="mdi mdi-chevron-left text-lg"></i>
           </button>
 
-          <div class="flex items-center gap-1.5">
+          <div class="flex items-center gap-1 sm:gap-1.5">
             <button
               v-for="page in visiblePages"
               :key="page"
@@ -108,7 +109,7 @@
                   ? 'bg-primary text-white border-primary shadow-sm'
                   : 'border-slate-200 text-slate-600 hover:bg-slate-50',
               ]"
-              class="min-w-[40px] h-[40px] px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
+              class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] px-2 sm:px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
             >
               {{ page }}
             </button>
@@ -117,7 +118,7 @@
           <button
             @click="changePage(currentPage + 1)"
             :disabled="currentPage === totalPages"
-            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
           >
             <span class="sr-only">Next</span>
             <i class="mdi mdi-chevron-right text-lg"></i>
@@ -129,9 +130,7 @@
       <aside class="blog-sidebar-col">
         <!-- Search widget -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Search
-          </h3>
+          <h3 class="sidebar-title">Search</h3>
           <div class="search-container">
             <VPNavBarSearch class="search" />
           </div>
@@ -140,10 +139,8 @@
         <!-- Hot Tags -->
         <div class="sidebar-widget">
           <div class="sidebar-title-container">
-            <h3 class="sidebar-title-inline">
-              Hot tags
-            </h3>
-            <a href="/tag" class="see-all-link">
+            <h3 class="sidebar-title-inline">Hot tags</h3>
+            <a :href="withBase('/tag')" class="see-all-link">
               <span>see all</span>
               <i class="mdi mdi-arrow-right"></i>
             </a>
@@ -152,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"
             >
@@ -167,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";
@@ -208,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(() => {
@@ -522,7 +522,9 @@ function clearFilters() {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -584,7 +586,7 @@ function clearFilters() {
   padding: 0 !important;
   margin: 0 !important;
   margin-left: 0.5rem !important;
-  
+
   display: inline-flex !important;
   align-items: center !important;
   gap: 0.375rem !important;

package/src/components/BlogPost.vue

@@ -30,7 +30,7 @@
                 {{ formatDate(frontmatter.date) }}
               </time>
             </span>
-            
+
             <!-- Author Span -->
             <span v-if="authors && authors.length" class="metadata-item">
               <i class="mdi mdi-account-outline metadata-icon"></i>
@@ -41,12 +41,14 @@
                 class="author-item"
               >
                 <a
-                  :href="`/author/${authorId}/`"
+                  :href="withBase(`/author/${authorId}/`)"
                   class="author-link-active"
                 >
                   {{ getAuthorName(authorId) }}
                 </a>
-                <span v-if="idx < authors.length - 1" class="author-separator">,</span>
+                <span v-if="idx < authors.length - 1" class="author-separator"
+                  >,</span
+                >
               </span>
             </span>
           </div>
@@ -59,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"
             >
@@ -77,23 +79,18 @@
       <!-- Sidebar Column -->
       <div class="blog-sidebar-col">
         <!-- Table of Contents (On This Page) -->
-        <div
-          v-if="headers && headers.length"
-          class="toc-container"
-        >
+        <div v-if="headers && headers.length" class="toc-container">
           <VPDocAsideOutline />
         </div>
 
         <!-- Hot Tags -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Hot tags
-          </h3>
+          <h3 class="sidebar-title">Hot tags</h3>
           <div class="sidebar-tags-container">
             <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"
             >
@@ -104,9 +101,7 @@
 
         <!-- Recent Posts -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Recent posts
-          </h3>
+          <h3 class="sidebar-title">Recent posts</h3>
           <div class="space-y-4">
             <div
               v-for="post in calculatedRecentPosts"
@@ -114,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 }}
@@ -131,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";
@@ -153,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
@@ -320,7 +318,9 @@ const calculatedHotTags = computed(() => {
   align-items: center;
   justify-content: center;
   height: 100%;
-  transform: translateY(0.5px); /* Micro-adjustment for perfect vertical alignment */
+  transform: translateY(
+    0.5px
+  ); /* Micro-adjustment for perfect vertical alignment */
 }
 
 .metadata-text {
@@ -343,7 +343,9 @@ const calculatedHotTags = computed(() => {
   font-weight: 600;
   color: var(--vp-c-brand, #004170) !important;
   text-decoration: none;
-  transition: color 0.15s ease, text-decoration 0.15s ease;
+  transition:
+    color 0.15s ease,
+    text-decoration 0.15s ease;
   line-height: 1.2;
 }
 
@@ -391,7 +393,9 @@ const calculatedHotTags = computed(() => {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -416,7 +420,9 @@ const calculatedHotTags = computed(() => {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 

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",
@@ -60,7 +75,10 @@ const iconStyle = {
 
 // Check if we should render a full-width cover image
 const isCoverLayout = computed(() => {
-  return props.image && (props.variant === "cover" || props.date || props.authors.length);
+  return (
+    props.image &&
+    (props.variant === "cover" || props.date || props.authors.length)
+  );
 });
 
 // Check if the card itself is fully clickable (has a link but NO link text)
@@ -71,7 +89,7 @@ const isClickableCard = computed(() => {
 function getAuthorName(authorId) {
   if (!authorId) return "EOX Experts";
   const author = authorsList.find(
-    (a) => a.id.toLowerCase().trim() === authorId.toLowerCase().trim()
+    (a) => a.id.toLowerCase().trim() === authorId.toLowerCase().trim(),
   );
   return author ? author.name : authorId;
 }
@@ -82,31 +100,31 @@ function getTagStyle(tag) {
     return {
       backgroundColor: "rgba(255, 94, 94, 0.15)",
       border: "1px solid rgb(255, 94, 94)",
-      color: "#d32f2f"
+      color: "#d32f2f",
     };
   } else if (color.startsWith("rgb(0, 177, 176)")) {
     return {
       backgroundColor: "rgba(0, 177, 176, 0.15)",
       border: "1px solid rgb(0, 177, 176)",
-      color: "#00796b"
+      color: "#00796b",
     };
   } else if (color.startsWith("rgb(219, 173, 66)")) {
     return {
       backgroundColor: "rgba(219, 173, 66, 0.15)",
       border: "1px solid rgb(219, 173, 66)",
-      color: "#f57c00"
+      color: "#f57c00",
     };
   } else if (color.startsWith("rgb(218, 71, 228)")) {
     return {
       backgroundColor: "rgba(218, 71, 228, 0.15)",
       border: "1px solid rgb(218, 71, 228)",
-      color: "#c2185b"
+      color: "#c2185b",
     };
   }
   return {
     backgroundColor: "rgba(0, 0, 0, 0.05)",
     border: "1px solid rgba(0, 0, 0, 0.1)",
-    color: "#475569"
+    color: "#475569",
   };
 }
 
@@ -126,12 +144,17 @@ function formatDate(dateString) {
     class="vertical large-padding no-margin theme-feature-card"
     :class="[
       isClickableCard ? 'small-elevate clickable-card' : 'no-elevate',
-      isCoverLayout ? 'has-cover-image' : ''
+      isCoverLayout ? 'has-cover-image' : '',
     ]"
   >
     <!-- 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">
@@ -146,7 +169,12 @@ function formatDate(dateString) {
         class="icon"
       ></div>
       <!-- Render small icon image only if NOT rendering a full cover image -->
-      <img v-else-if="image && !isCoverLayout" :src="image" alt="" class="icon" />
+      <img
+        v-else-if="image && !isCoverLayout"
+        :src="resolvedImage"
+        alt=""
+        class="icon"
+      />
 
       <!-- Metadata & Tags directly under place/author -->
       <div v-if="date || (authors && authors.length)" class="metadata-wrapper">
@@ -159,18 +187,33 @@ function formatDate(dateString) {
             <span class="author-icon">
               <i class="mdi mdi-account-outline"></i>
             </span>
-            <span v-for="(authorId, idx) in authors" :key="authorId" class="author-item">
-              <a :href="`/author/${authorId}/`" class="author-link">{{ getAuthorName(authorId) }}</a><span v-if="idx < authors.length - 1" class="author-separator">,</span>
+            <span
+              v-for="(authorId, idx) in authors"
+              :key="authorId"
+              class="author-item"
+            >
+              <a :href="withBase(`/author/${authorId}/`)" class="author-link">{{
+                getAuthorName(authorId)
+              }}</a
+              ><span v-if="idx < authors.length - 1" class="author-separator"
+                >,</span
+              >
             </span>
           </span>
         </div>
 
         <!-- Tags directly under metadata if chips are provided and this is a rich card -->
         <div v-if="chips && chips.length" class="blog-tags-container">
-          <a 
-            v-for="chip in chips" 
+          <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"
           >
@@ -180,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>
 
@@ -193,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"
@@ -211,7 +260,10 @@ function formatDate(dateString) {
         </template>
       </div>
 
-      <p v-if="metadata && metadata.length && !date && !authors.length" class="small-text">
+      <p
+        v-if="metadata && metadata.length && !date && !authors.length"
+        class="small-text"
+      >
         <span
           v-for="(item, index) in metadata"
           :key="index"
@@ -240,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"
       >
@@ -251,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"
       >
@@ -295,13 +347,17 @@ function formatDate(dateString) {
 /* Clickable Cards Hover System */
 .theme-feature-card.clickable-card {
   cursor: pointer;
-  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  transition:
+    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
   will-change: transform, box-shadow;
 }
 
 .theme-feature-card.clickable-card:hover {
   transform: translateY(-4px) !important;
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
+  box-shadow:
+    0 12px 28px rgba(0, 0, 0, 0.12),
+    0 4px 8px rgba(0, 0, 0, 0.04) !important;
 }
 
 .small-chip {

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/HeroSection.vue

@@ -26,7 +26,7 @@
         style="grid-area: image"
         :src="withBase(frontmatter.hero.image.src)"
       />
-      <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 }}
         </h1>
@@ -77,15 +77,15 @@ const { frontmatter } = useData();
 
 <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;
+  min-height: 380px;
 }
 @media (max-width: 1024px) {
   header {
-    padding: 0 1.5rem !important;
+    padding: calc(var(--vp-nav-height) + 2rem) 1.5rem 3rem !important;
   }
   header h1.large {
     font-size: 3rem;

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

@@ -1,9 +1,7 @@
 <template>
   <div class="tags-page">
     <header class="tags-header">
-      <h1 class="tags-title">
-        Blog Tags
-      </h1>
+      <h1 class="tags-title">Blog Tags</h1>
       <p class="tags-subtitle">
         Explore our blog posts by topics and technology pillars.
       </p>
@@ -15,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"
         >
@@ -60,7 +58,9 @@
       </ul>
       <p class="legend-note">
         For more detailed information on our technology solutions, visit the
-        <a href="/software-products" class="legend-link">Solutions & Services</a>
+        <a :href="withBase('/solutions')" class="legend-link"
+          >Solutions & Services</a
+        >
         page.
       </p>
     </footer>
@@ -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";
 
@@ -180,7 +181,9 @@ const allTagsList = computed(() => {
   padding: 2.5rem 2rem;
   border-radius: 1rem;
   border: 1px solid rgba(226, 232, 240, 0.5); /* border-slate-100/50 */
-  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm */
+  box-shadow:
+    0 1px 3px 0 rgba(0, 0, 0, 0.05),
+    0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm */
   margin-bottom: 3rem;
 }
 
@@ -202,14 +205,19 @@ const allTagsList = computed(() => {
   border-radius: 4px; /* small rounding to distinguish from full-rounded buttons */
   text-decoration: none !important;
   line-height: 1.2;
-  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+  transition:
+    opacity 0.2s ease,
+    transform 0.15s ease,
+    box-shadow 0.2s ease;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .tag-item:hover {
   opacity: 0.85;
   transform: translateY(-1px);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05);
 }
 
 .tag-count {

package/src/components/TeamPage.vue

@@ -26,12 +26,20 @@
         v-for="member in sortedTeamMembers"
         :key="member.id"
         :title="member.name"
-        :image="member.image ? withBase(member.image) : withBase('/images/team/new_member.jpg')"
-        :link="memberHasPosts(member.id) ? {
-          text: 'View blog posts',
-          href: `/author/${member.id}/`,
-          target: '_self'
-        } : undefined"
+        :image="
+          member.image
+            ? withBase(member.image)
+            : withBase('/images/team/new_member.jpg')
+        "
+        :link="
+          memberHasPosts(member.id)
+            ? {
+                text: 'View blog posts',
+                href: `/author/${member.id}/`,
+                target: '_self',
+              }
+            : undefined
+        "
         variant="cover"
         class="bg-surface-container-low team-member-card"
       >
@@ -43,11 +51,7 @@
         <span class="member-divider"></span>
 
         <!-- Description / Bio -->
-        <span
-          v-if="member.bio"
-          class="member-bio"
-          v-html="member.bio"
-        ></span>
+        <span v-if="member.bio" class="member-bio" v-html="member.bio"></span>
 
         <!-- Social Links row at the bottom of slot -->
         <span class="member-footer">

package/src/style.css

@@ -374,7 +374,11 @@ eox-feedback-button {
 }
 
 /* Constrain standard reading elements to 1000px max-width, while letting full-width custom page components span 1200px */
-.layout-page .VPPage > div > div > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
+.layout-page
+  .VPPage
+  > div
+  > div
+  > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
   max-width: 1000px;
   margin-inline-start: 0;
   margin-inline-end: auto;
@@ -473,7 +477,9 @@ eox-feedback-button {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
 }
 
 .layout-page .VPPage a:not(.button):hover {
@@ -505,3 +511,57 @@ eox-feedback-button {
   overflow-x: auto;
 }
 
+/* Local Search styles overrides */
+.VPLocalSearchBox .search-actions button {
+  height: 36px !important;
+  width: 36px !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--vp-c-text-2) !important;
+  transition:
+    background-color 0.15s,
+    color 0.15s !important;
+}
+
+.VPLocalSearchBox .search-actions button:not([disabled]):hover {
+  background-color: var(--vp-c-default-soft) !important;
+  color: var(--vp-c-brand-1) !important;
+}
+
+.VPLocalSearchBox .search-actions button:disabled {
+  opacity: 0.37 !important;
+  background: transparent !important;
+  color: var(--vp-c-text-3) !important;
+}
+
+.VPLocalSearchBox .results {
+  list-style: none !important;
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.VPLocalSearchBox .results li {
+  list-style: none !important;
+  margin: 0 !important;
+}
+
+/* Screen Reader Only Utility */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}

package/src/tagUtils.js

@@ -103,31 +103,31 @@ export function getTagStyle(tag) {
     return {
       backgroundColor: "rgba(255, 94, 94, 0.15)",
       border: "1px solid rgb(255, 94, 94)",
-      color: "#d32f2f"
+      color: "#d32f2f",
     };
   } else if (color.startsWith("rgb(0, 177, 176)")) {
     return {
       backgroundColor: "rgba(0, 177, 176, 0.15)",
       border: "1px solid rgb(0, 177, 176)",
-      color: "#00796b"
+      color: "#00796b",
     };
   } else if (color.startsWith("rgb(219, 173, 66)")) {
     return {
       backgroundColor: "rgba(219, 173, 66, 0.15)",
       border: "1px solid rgb(219, 173, 66)",
-      color: "#f57c00"
+      color: "#f57c00",
     };
   } else if (color.startsWith("rgb(218, 71, 228)")) {
     return {
       backgroundColor: "rgba(218, 71, 228, 0.15)",
       border: "1px solid rgb(218, 71, 228)",
-      color: "#c2185b"
+      color: "#c2185b",
     };
   }
   return {
     backgroundColor: "rgba(0, 0, 0, 0.05)",
     border: "1px solid rgba(0, 0, 0, 0.1)",
-    color: "#475569"
+    color: "#475569",
   };
 }
 

package/src/vitepressConfig.mjs

@@ -98,8 +98,8 @@ export const generate = (brandConfig) => {
     cleanUrls: true,
     markdown: {
       headers: {
-        level: [2, 3, 4, 5, 6]
-      }
+        level: [2, 3, 4, 5, 6],
+      },
     },
     rewrites: {
       ...getBlogRewrites(),