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

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,17 @@ 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;
+  }
+  const base = withBase("/");
+  if (base && base !== "/" && coverImage.startsWith(base)) {
     return coverImage;
   }
-  return `/images/${coverImage}`;
+  const path = coverImage.startsWith("/")
+    ? coverImage
+    : `/images/${coverImage}`;
+  return withBase(path);
 }
 
 // Format publication date
@@ -189,7 +191,19 @@ const coverImage = computed(() => {
 
 // Dynamic Recent Posts (excluding current page)
 const calculatedRecentPosts = computed(() => {
-  return posts.filter((p) => p.url !== page.value.url).slice(0, 5);
+  const rel = page.value.relativePath || "";
+  const current = (
+    "/" + rel.replace(/(^|\/)index\.md$/, "$1").replace(/\.md$/, "")
+  )
+    .replace(/\/$/, "")
+    .replace(/\.html$/, "");
+
+  return posts
+    .filter((p) => {
+      const pUrl = (p.url || "").replace(/\/$/, "").replace(/\.html$/, "");
+      return pUrl !== current && p.title !== frontmatter.value.title;
+    })
+    .slice(0, 5);
 });
 
 // Dynamic Hot Tags
@@ -320,7 +334,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 +359,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 +409,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 +436,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

@@ -4,7 +4,7 @@
     :class="
       dark !== undefined
         ? 'primary primary-gradient-bg'
-        : 'surface-container-low'
+        : 'surface-container-lowest'
     "
   >
     <div class="large-space"></div>
@@ -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,18 @@ const props = defineProps([
   "tagline",
   "title",
 ]);
+
+function resolveLink(link) {
+  if (!link) return "";
+  if (link.startsWith("http") || link.startsWith("//")) return link;
+  const base = withBase("/");
+  if (base && base !== "/" && link.startsWith(base)) 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";
 
@@ -33,8 +34,8 @@ const props = defineProps({
     required: false,
   },
   icon: {
-    /** @type {import('vue').PropType<{ html: string, width?: number, height?: number }>} */
-    type: Object,
+    /** @type {import('vue').PropType<string | { html: string, width?: number, height?: number }>} */
+    type: [Object, String],
     required: false,
   },
   date: {
@@ -53,6 +54,22 @@ 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 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 +77,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 +91,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 +102,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,27 +146,64 @@ 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 && resolvedLinkHref"
+      :href="resolvedLinkHref"
+      :target="link?.target ?? '_blank'"
+      class="card-cover-link"
+    >
+      <img
+        :src="resolvedImage"
+        alt=""
+        class="card-cover-image"
+        loading="lazy"
+      />
     </a>
+    <div v-else-if="isCoverLayout" class="card-cover-link">
+      <img
+        :src="resolvedImage"
+        alt=""
+        class="card-cover-image"
+        loading="lazy"
+      />
+    </div>
 
     <div class="card-content-wrapper">
       <i
         v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
         :class="`mdi ${icon}`"
       ></i>
+      <img
+        v-else-if="typeof icon === 'string'"
+        :src="resolveUrl(icon)"
+        alt=""
+        class="icon"
+        style="
+          height: 36px;
+          width: auto;
+          max-width: 120px;
+          object-fit: contain;
+          margin-bottom: 0.75rem;
+          border-radius: 0 !important;
+        "
+      />
       <div
-        v-else-if="icon"
+        v-else-if="icon && icon.html"
         :style="iconStyle"
         v-html="icon.html"
         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 +216,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 +252,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 +265,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 +289,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 +321,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 +332,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 +376,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 {
@@ -474,6 +559,8 @@ function formatDate(dateString) {
 }
 
 /* card title overrides to make sure it respects the 20px request */
+h5.small.card-title-text,
+.card-title-text,
 .VPHome .vp-doc h5.small.card-title-text {
   font-size: 20px !important;
   line-height: 1.4 !important;

package/src/components/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,22 @@ 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 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 +69,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 +125,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 +133,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/FeatureSection.cy.js

@@ -1,3 +1,4 @@
+import { h } from "vue";
 import FeatureSection from "./FeatureSection.vue";
 
 describe("<FeatureSection />", () => {
@@ -60,4 +61,19 @@ describe("<FeatureSection />", () => {
     cy.get(".feature-section").should("have.class", "dark");
     cy.get(".feature-section").should("have.class", "reverse");
   });
+
+  it("has padding-block-start 0 when following a title", () => {
+    const TestWrapper = {
+      render() {
+        return h("div", [
+          h("h2", "Products & Services"),
+          h("p", "Subtitle paragraph"),
+          h(FeatureSection, defaultProps),
+        ]);
+      },
+    };
+
+    cy.mount(TestWrapper);
+    cy.get(".feature-section").should("have.css", "padding-top", "0px");
+  });
 });

package/src/components/FeatureSection.vue

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