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

package/src/components/FeatureCard/Index.vue

@@ -1,5 +1,10 @@
 <script setup>
-const { title, content, link, secondaryLink, icon } = defineProps({
+import { computed } from "vue";
+import { withBase } from "vitepress";
+import { data as authorsList } from "../../authors.data.js";
+import { getTagColor } from "../../tagUtils.js";
+
+const props = defineProps({
   title: String,
   content: String,
   image: {
@@ -7,7 +12,7 @@ const { title, content, link, secondaryLink, icon } = defineProps({
     required: false,
   },
   chips: {
-    /** @type {import('vue').PropType<{ text: string; class?: string }[]>} */
+    /** @type {import('vue').PropType<{ text: string; link?: string; href?: string; class?: string }[]>} */
     type: Array,
     required: false,
     default: () => [],
@@ -29,49 +34,265 @@ const { title, content, link, secondaryLink, icon } = 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: {
+    type: String,
+    required: false,
+  },
+  authors: {
+    type: Array,
     required: false,
+    default: () => [],
+  },
+  variant: {
+    type: String,
+    required: false,
+    default: "default",
   },
 });
+
+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: (icon?.width ?? 40) + "px",
-  height: (icon?.height ?? 40) + "px",
+  width: (props.icon?.width ?? 40) + "px",
+  height: (props.icon?.height ?? 40) + "px",
 };
+
+// Check if we should render a full-width cover image
+const isCoverLayout = computed(() => {
+  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)
+const isClickableCard = computed(() => {
+  return props.link && !props.link.text;
+});
+
+function getAuthorName(authorId) {
+  if (!authorId) return "EOX Experts";
+  const author = authorsList.find(
+    (a) => a.id.toLowerCase().trim() === authorId.toLowerCase().trim(),
+  );
+  return author ? author.name : authorId;
+}
+
+function getTagStyle(tag) {
+  const color = getTagColor(tag);
+  if (color.startsWith("rgb(255, 94, 94)")) {
+    return {
+      backgroundColor: "rgba(255, 94, 94, 0.15)",
+      border: "1px solid rgb(255, 94, 94)",
+      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",
+    };
+  } 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",
+    };
+  } 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",
+    };
+  }
+  return {
+    backgroundColor: "rgba(0, 0, 0, 0.05)",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    color: "#475569",
+  };
+}
+
+function formatDate(dateString) {
+  if (!dateString) return "";
+  const date = new Date(dateString);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+  });
+}
 </script>
+
 <template>
   <article
-    class="vertical large-padding no-margin"
-    :class="link && !link.text ? 'small-elevate' : 'no-elevate'"
+    class="vertical large-padding no-margin theme-feature-card"
+    :class="[
+      isClickableCard ? 'small-elevate clickable-card' : 'no-elevate',
+      isCoverLayout ? 'has-cover-image' : '',
+    ]"
   >
-    <div>
+    <!-- Cover Image for cover/blog/rich cards -->
+    <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>
-      <img v-else-if="image" :src="image" alt="" class="icon" />
-      <h5 class="small">{{ title }}</h5>
+      <!-- Render small icon image only if NOT rendering a full cover image -->
+      <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">
+        <div class="blog-metadata">
+          <span v-if="date" class="date-span">
+            <i class="mdi mdi-clock-outline"></i>
+            <time :datetime="date">{{ formatDate(date) }}</time>
+          </span>
+          <span v-if="authors && authors.length" class="author-span">
+            <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="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"
+            :key="chip.text"
+            :href="
+              chip.link
+                ? resolveUrl(chip.link)
+                : chip.href
+                  ? resolveUrl(chip.href)
+                  : withBase(`/tag/${chip.text}/`)
+            "
+            :style="getTagStyle(chip.text)"
+            class="tag-link"
+          >
+            {{ chip.text }}
+          </a>
+        </div>
+      </div>
+
+      <h5 class="small card-title-text">
+        <a v-if="resolvedLinkHref" :href="resolvedLinkHref">{{ title }}</a>
+        <span v-else>{{ title }}</span>
+      </h5>
+
+      <!-- Standard chips (rendered only for normal cards) -->
       <div
-        v-if="chips && chips.length"
+        v-if="chips && chips.length && !date && !authors.length"
         class="row wrap"
         style="gap: 0.5rem; margin-bottom: 0.5rem"
       >
-        <span
-          v-for="chip in chips"
-          :key="chip.text"
-          class="chip small-chip border"
-          :class="chip.class"
-        >
-          {{ chip.text }}
-        </span>
+        <template v-for="chip in chips" :key="chip.text">
+          <a
+            v-if="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"
+          >
+            {{ chip.text }}
+          </a>
+          <span
+            v-else
+            :style="getTagStyle(chip.text)"
+            class="chip small-chip border clickable-chip"
+            :class="chip.class"
+          >
+            {{ chip.text }}
+          </span>
+        </template>
       </div>
-      <p v-if="metadata && metadata.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"
@@ -87,19 +308,20 @@ const iconStyle = {
         </span>
       </p>
 
-      <p v-if="$slots.default">
+      <p v-if="$slots.default" class="card-body-text">
         <slot>{{ content }}</slot>
       </p>
-      <div v-else v-html="content"></div>
+      <div v-else-if="content" v-html="content" class="card-body-text"></div>
     </div>
+
     <nav
       v-if="link || secondaryLink"
-      class="row wrap align-center"
+      class="row wrap align-center card-navigation"
       style="gap: 1.5rem; margin-right: auto; position: relative; z-index: 11"
     >
       <a
         v-if="link && !!link.text"
-        :href="link.href"
+        :href="resolvedLinkHref"
         :target="link.target ?? '_blank'"
         class="button transparent bold primary-text no-padding"
       >
@@ -110,7 +332,7 @@ const iconStyle = {
       </a>
       <a
         v-if="secondaryLink"
-        :href="secondaryLink.href"
+        :href="resolvedSecondaryLinkHref"
         :target="secondaryLink.target ?? '_blank'"
         class="button transparent primary-text no-padding secondary-link"
       >
@@ -121,6 +343,7 @@ const iconStyle = {
     </nav>
   </article>
 </template>
+
 <style scoped>
 /**
 * Undo Vitepress missing with @eox/ui styles
@@ -142,17 +365,37 @@ const iconStyle = {
 /**
  * Custom styles
  */
-article {
+.theme-feature-card {
   justify-content: space-between;
-  transition: all 0.3s ease-in-out;
   width: 100%;
+  border-radius: 16px !important;
+  overflow: hidden !important;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important;
 }
+
+/* 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;
+  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;
+}
+
 .small-chip {
   font-size: 0.75rem;
-  padding: 0.125rem 0.375rem;
+  padding: 4px 10px !important;
   height: auto;
-  line-height: normal;
+  line-height: 1.2 !important;
   margin: 0;
+  border-radius: 6px !important;
 }
 .arrow {
   transition: transform 0.2s;
@@ -163,4 +406,192 @@ article {
 .button.transparent:hover:after {
   background: none;
 }
+
+/* Card with Cover Image Layout */
+.theme-feature-card.has-cover-image {
+  padding: 0 !important;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme-feature-card.has-cover-image .card-cover-link {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  position: relative;
+  flex-shrink: 0;
+  border-top-left-radius: 16px !important;
+  border-top-right-radius: 16px !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+.theme-feature-card.has-cover-image .card-cover-image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  transition: transform 0.3s ease;
+  border-top-left-radius: 16px !important;
+  border-top-right-radius: 16px !important;
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
+/* Zoom Image on Hover ONLY if the card itself is clickable */
+.theme-feature-card.has-cover-image.clickable-card .card-cover-image {
+  transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+}
+
+.theme-feature-card.has-cover-image.clickable-card:hover .card-cover-image {
+  transform: scale(1.04) !important;
+}
+
+.theme-feature-card.has-cover-image .card-content-wrapper {
+  padding: 1.5rem;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.theme-feature-card.has-cover-image .card-navigation {
+  padding: 0 1.5rem 1.5rem 1.5rem;
+  margin-top: auto;
+}
+
+/* Metadata Styling */
+.metadata-wrapper {
+  margin-bottom: 16px;
+  text-align: left;
+}
+
+.blog-metadata {
+  display: block !important;
+  font-size: 12px !important;
+  color: #64748b !important;
+  line-height: 1.6 !important;
+  margin-bottom: 8px;
+}
+
+.date-span {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  white-space: nowrap !important;
+  margin-right: 12px;
+  vertical-align: middle;
+}
+
+.date-span i {
+  font-size: 13px !important;
+  color: #64748b !important;
+  vertical-align: middle;
+}
+
+.author-span {
+  display: inline;
+}
+
+.author-icon {
+  display: inline-flex;
+  align-items: center;
+  margin-right: 4px;
+  vertical-align: middle;
+}
+
+.author-icon i {
+  font-size: 13px !important;
+  color: #64748b !important;
+  vertical-align: middle;
+}
+
+.author-item {
+  display: inline;
+  white-space: nowrap !important;
+}
+
+.author-link {
+  color: #64748b !important;
+  text-decoration: none !important;
+  font-size: 12px !important;
+  font-weight: 600;
+  transition: color 0.15s ease;
+  vertical-align: middle;
+}
+
+.author-link:hover {
+  color: var(--vp-c-brand) !important;
+  text-decoration: underline !important;
+}
+
+.author-separator {
+  color: #64748b !important;
+  font-size: 12px !important;
+  vertical-align: middle;
+  margin-right: 4px;
+}
+
+.date-span time {
+  font-size: 12px !important;
+}
+
+/* Tags Styling */
+.blog-tags-container {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 8px;
+}
+
+.tag-link {
+  display: inline-block !important;
+  font-size: 12px !important;
+  font-weight: 700 !important;
+  padding: 4px 10px !important;
+  border-radius: 6px !important;
+  text-decoration: none !important;
+  line-height: 1.2 !important;
+  transition: opacity 0.2s ease;
+}
+
+.tag-link:hover {
+  opacity: 0.8 !important;
+}
+
+/* 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;
+  font-weight: 700 !important;
+  margin-bottom: 0.75rem !important;
+}
+
+.card-title-text a {
+  color: #0f172a !important;
+  text-decoration: none !important;
+}
+
+.card-title-text a:hover {
+  color: var(--vp-c-brand) !important;
+}
+
+.card-body-text {
+  font-size: 0.875rem !important;
+  line-height: 1.6 !important;
+  color: #475569 !important;
+}
+
+/* Clickable standard chips styling */
+.clickable-chip {
+  text-decoration: none !important;
+  color: var(--vp-c-text-2) !important;
+  transition: all 0.2s ease;
+  border-radius: 6px !important;
+  border: 1px solid transparent !important;
+}
+.clickable-chip:hover {
+  opacity: 0.8 !important;
+}
 </style>

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 {