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

package/src/components/FeatureCard/Index.vue

@@ -1,5 +1,9 @@
 <script setup>
-const { title, content, link, secondaryLink, icon } = defineProps({
+import { computed } from "vue";
+import { data as authorsList } from "../../authors.data.js";
+import { getTagColor } from "../../tagUtils.js";
+
+const props = defineProps({
   title: String,
   content: String,
   image: {
@@ -7,7 +11,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: () => [],
@@ -33,18 +37,104 @@ const { title, content, link, secondaryLink, icon } = defineProps({
     type: Object,
     required: false,
   },
+  date: {
+    type: String,
+    required: false,
+  },
+  authors: {
+    type: Array,
+    required: false,
+    default: () => [],
+  },
+  variant: {
+    type: String,
+    required: false,
+    default: "default",
+  },
 });
+
 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" :href="link?.href" class="card-cover-link">
+      <img :src="image" alt="" class="card-cover-image" loading="lazy" />
+    </a>
+
+    <div class="card-content-wrapper">
       <i
         v-if="typeof icon === 'string' && icon.startsWith('mdi-')"
         :class="`mdi ${icon}`"
@@ -55,23 +145,73 @@ const 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="image" 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="`/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 || chip.href || `/tag/${chip.text}/`"
+            :style="getTagStyle(chip.text)"
+            class="tag-link"
+          >
+            {{ chip.text }}
+          </a>
+        </div>
+      </div>
+
+      <h5 class="small card-title-text">
+        <a v-if="link?.href" :href="link.href">{{ 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 || chip.href"
+            :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,14 +227,15 @@ 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
@@ -121,6 +262,7 @@ const iconStyle = {
     </nav>
   </article>
 </template>
+
 <style scoped>
 /**
 * Undo Vitepress missing with @eox/ui styles
@@ -142,17 +284,33 @@ 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 +321,190 @@ 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 */
+.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/HeroSection.vue

@@ -75,7 +75,7 @@ import { trackEvent } from "../helpers";
 const { frontmatter } = useData();
 </script>
 
-<style>
+<style scoped>
 header {
   margin-top: calc(var(--vp-nav-height) * -1);
   padding-top: 10rem !important;

package/src/components/ImageCarousel.cy.js

@@ -0,0 +1,22 @@
+import ImageCarousel from "./ImageCarousel.vue";
+
+describe("<ImageCarousel />", () => {
+  const images = [
+    { src: "/slide1.jpg", alt: "Slide 1", caption: "Caption 1" },
+    { src: "/slide2.jpg", alt: "Slide 2", caption: "Caption 2" },
+  ];
+
+  it("renders slider images, captions, and buttons", () => {
+    cy.mount(ImageCarousel, {
+      props: {
+        images,
+      },
+    });
+
+    cy.get("img").should("have.length", 2);
+    cy.get("img").eq(0).should("have.attr", "src", "/slide1.jpg");
+
+    // Indicators should exist
+    cy.get("button").should("have.length", 4); // 2 nav arrows + 2 indicators
+  });
+});