@eox/pages-theme-eox 2.0.0-alpha.8 → 2.0.0-alpha.9

package/package.json

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

package/src/components/NavBar.vue

@@ -383,6 +383,14 @@ if (!import.meta.env.SSR) {
 }
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active,
 .top-nav.has-hero.at-top .nav-desktop .button.text.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+}
+.Layout.layout-home .top-nav.at-top .nav-desktop .button.text.active:hover,
+.top-nav.has-hero.at-top .nav-desktop .button.text.active:hover {
+  background-color: rgba(255, 255, 255, 0.25) !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.text.active {
   background-color: var(--primary-container) !important;
   color: var(--on-primary-container) !important;
 }
@@ -394,6 +402,11 @@ if (!import.meta.env.SSR) {
 }
 .Layout.layout-home .top-nav.at-top .nav-desktop .button.border.active,
 .top-nav.has-hero.at-top .nav-desktop .button.border.active {
+  background-color: rgba(255, 255, 255, 0.15) !important;
+  color: #ffffff !important;
+  border-color: transparent !important;
+}
+.top-nav:not(.at-top) .nav-desktop .button.border.active {
   background-color: var(--primary-container) !important;
   color: var(--on-primary-container) !important;
   border-color: transparent !important;

package/src/components/TeamPage.vue

@@ -20,7 +20,7 @@
       />
     </section>
 
-    <!-- Team Grid - max 3 columns on large screens -->
+    <!-- Team Grid - up to 4 columns on large screens -->
     <div class="team-grid">
       <FeatureCard
         v-for="member in sortedTeamMembers"
@@ -126,7 +126,7 @@ const memberHasPosts = (memberId) => {
 <style scoped>
 .team-page {
   width: 100%;
-  max-width: 1200px !important;
+  max-width: 1400px !important;
   margin-left: auto !important;
   margin-right: auto !important;
   padding-left: 1rem !important;
@@ -245,6 +245,12 @@ const memberHasPosts = (memberId) => {
   }
 }
 
+@media (min-width: 1280px) {
+  .team-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
 /* Deep overrides to integrate with theme-provided FeatureCard */
 .team-member-card {
   height: 100% !important;

package/src/components/TextSection.cy.js

@@ -0,0 +1,61 @@
+import TextSection from "./TextSection.vue";
+
+describe("<TextSection />", () => {
+  it("renders title, tagline and button", () => {
+    cy.mount(TextSection, {
+      props: {
+        title: "Test Section",
+        tagline: "Test Tagline",
+        buttonText: "Click Me",
+        buttonLink: "https://example.com",
+      },
+    });
+
+    cy.contains("Test Section").should("exist");
+    cy.contains("Test Tagline").should("exist");
+    cy.contains("a.button", "Click Me")
+      .should("have.attr", "href", "https://example.com")
+      .and("have.attr", "target", "_blank");
+  });
+
+  it("renders slot content and image", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        imageAlt: "Test Image",
+      },
+      slots: {
+        default: "<p>This is paragraph text.</p>",
+      },
+    });
+
+    cy.contains("This is paragraph text.").should("exist");
+    cy.get("img.section-image")
+      .should("have.attr", "src", "/test.jpg")
+      .and("have.attr", "alt", "Test Image");
+  });
+
+  it("applies reverse class when reverse prop is true", () => {
+    cy.mount(TextSection, {
+      props: {
+        image: "/test.jpg",
+        reverse: true,
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "is-reverse");
+    cy.get(".text-section-grid").should("have.class", "grid-reverse");
+  });
+
+  it("applies single column styling when no image is provided", () => {
+    cy.mount(TextSection, {
+      slots: {
+        default: "<p>Single column text</p>",
+      },
+    });
+
+    cy.get(".text-section").should("have.class", "no-image");
+    cy.get(".text-section-grid").should("have.class", "grid-single");
+    cy.get(".media-column").should("not.exist");
+  });
+});

package/src/components/TextSection.vue

@@ -0,0 +1,384 @@
+<template>
+  <section
+    class="text-section full-width"
+    :class="{
+      'is-reverse': reverse,
+      'no-image': !image && !$slots.media,
+      'is-compact': compact,
+    }"
+  >
+    <div class="holder">
+      <div
+        class="text-section-grid"
+        :class="{
+          'grid-reverse': reverse,
+          'grid-single': !image && !$slots.media,
+        }"
+      >
+        <!-- Text Column -->
+        <div class="text-column">
+          <span v-if="tagline" class="tagline">{{ tagline }}</span>
+          <h2 v-if="title" class="section-title">{{ title }}</h2>
+          <div class="section-content">
+            <slot></slot>
+          </div>
+          <!-- Prop-based button -->
+          <div v-if="buttonText && buttonLink" class="section-actions">
+            <a
+              :href="resolvedButtonLink"
+              :target="resolvedButtonTarget"
+              class="button"
+              @click="
+                trackEvent([
+                  'TextSection',
+                  'Click',
+                  title || buttonText,
+                  buttonText,
+                ])
+              "
+            >
+              <span>{{ buttonText }}</span>
+              <i v-if="buttonIcon" :class="buttonIcon" class="btn-icon"></i>
+            </a>
+          </div>
+          <slot name="actions"></slot>
+        </div>
+
+        <!-- Media Column -->
+        <div v-if="image || $slots.media" class="media-column">
+          <slot name="media">
+            <img
+              v-if="image"
+              :src="resolvedImage"
+              :alt="imageAlt || title || ''"
+              class="section-image"
+              loading="lazy"
+            />
+          </slot>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { withBase } from "vitepress";
+import { computed } from "vue";
+import { trackEvent } from "../helpers.js";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "",
+  },
+  tagline: {
+    type: String,
+    default: "",
+  },
+  image: {
+    type: String,
+    default: "",
+  },
+  imageAlt: {
+    type: String,
+    default: "",
+  },
+  reverse: {
+    type: Boolean,
+    default: false,
+  },
+  buttonText: {
+    type: String,
+    default: "",
+  },
+  buttonLink: {
+    type: String,
+    default: "",
+  },
+  buttonTarget: {
+    type: String,
+    default: "",
+  },
+  buttonIcon: {
+    type: String,
+    default: "",
+  },
+  compact: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+function resolveUrl(url) {
+  if (!url) return "";
+  if (
+    url.startsWith("http://") ||
+    url.startsWith("https://") ||
+    url.startsWith("//") ||
+    url.startsWith("#")
+  ) {
+    return url;
+  }
+  return withBase(url);
+}
+
+const resolvedImage = computed(() => resolveUrl(props.image));
+const resolvedButtonLink = computed(() => resolveUrl(props.buttonLink));
+const resolvedButtonTarget = computed(() => {
+  if (props.buttonTarget) return props.buttonTarget;
+  if (
+    props.buttonLink &&
+    (props.buttonLink.startsWith("http://") ||
+      props.buttonLink.startsWith("https://") ||
+      props.buttonLink.startsWith("//"))
+  ) {
+    return "_blank";
+  }
+  return "_self";
+});
+</script>
+
+<style scoped>
+.full-width {
+  width: 100svw;
+  position: relative;
+  left: 50%;
+  right: 50%;
+  margin-left: -50svw;
+  margin-right: -50svw;
+  max-inline-size: unset !important;
+}
+
+.text-section {
+  padding-block: 56px;
+  display: flex;
+  justify-content: center;
+  background: transparent;
+  color: var(--on-surface, #020617);
+}
+
+.text-section.is-compact {
+  padding-block: 28px;
+}
+
+/* When two text-sections are placed consecutively, tighten the spacing */
+:deep(.text-section + .text-section),
+.text-section + .text-section {
+  padding-block-start: 16px;
+}
+
+.text-section .holder {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-inline: 24px;
+}
+
+.text-section-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+  align-items: center;
+}
+
+/* On mobile (< 1024px), the media/image column is always at the start before the text */
+.text-section-grid .media-column {
+  order: 1;
+}
+
+.text-section-grid .text-column {
+  order: 2;
+}
+
+@media (min-width: 1024px) {
+  .text-section-grid {
+    grid-template-columns: 1fr 1fr;
+    gap: 4rem;
+  }
+
+  /* Default on desktop: Text on left (1), Media on right (2) */
+  .text-section-grid .text-column {
+    order: 1;
+  }
+
+  .text-section-grid .media-column {
+    order: 2;
+  }
+
+  /* Reverse on desktop: Media on left (1), Text on right (2) */
+  .text-section-grid.grid-reverse .text-column {
+    order: 2;
+  }
+
+  .text-section-grid.grid-reverse .media-column {
+    order: 1;
+  }
+
+  .text-section-grid.grid-single {
+    grid-template-columns: 1fr;
+    max-width: 680px;
+  }
+}
+
+.text-column {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.tagline {
+  display: inline-block;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--primary, #004170);
+  margin-bottom: 0.5rem;
+}
+
+.section-title {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+/* Markdown Content Styling */
+.section-content :deep(h2) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 2rem;
+  line-height: 1.25;
+  color: #020617;
+  margin-top: 0;
+  margin-bottom: 1.25rem;
+  border-top: none;
+}
+
+.section-content :deep(h3) {
+  font-family: inherit;
+  font-weight: 700;
+  font-size: 1.5rem;
+  line-height: 1.35;
+  color: #020617;
+  margin-top: 1.5rem;
+  margin-bottom: 0.75rem;
+  border-top: none;
+}
+
+.section-content :deep(h4),
+.section-content :deep(h5) {
+  font-family: inherit;
+  font-weight: 600;
+  font-size: 1.125rem;
+  line-height: 1.4;
+  color: #020617;
+  margin-top: 1.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(p) {
+  font-size: 1rem;
+  line-height: 1.65;
+  color: #334155;
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.section-content :deep(ul) {
+  margin-top: 0.75rem;
+  margin-bottom: 1.25rem;
+  padding-left: 1.25rem;
+  list-style-type: disc;
+}
+
+.section-content :deep(li) {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: #334155;
+  margin-bottom: 0.5rem;
+}
+
+.section-content :deep(li strong) {
+  color: #020617;
+  font-weight: 700;
+}
+
+.section-content :deep(a:not(.button)) {
+  color: #0284c7;
+  text-decoration: none;
+  font-weight: 500;
+  transition: color 0.15s ease-in-out;
+}
+
+.section-content :deep(a:not(.button):hover) {
+  text-decoration: underline;
+  color: #0369a1;
+}
+
+/* Pill Button Styling - for both prop and markdown links with .button */
+.section-actions {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+.button,
+.section-content :deep(a.button),
+.section-content :deep(.button) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1.5rem;
+  border-radius: 9999px;
+  border: 1px solid #020617;
+  background-color: #ffffff;
+  color: #020617 !important;
+  font-weight: 600;
+  font-size: 0.9375rem;
+  line-height: 1.5;
+  text-decoration: none !important;
+  transition: all 0.2s ease-in-out;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.button:hover,
+.section-content :deep(a.button:hover),
+.section-content :deep(.button:hover) {
+  background-color: #f1f5f9;
+  border-color: #020617;
+  color: #020617 !important;
+}
+
+.btn-icon {
+  font-size: 1.1em;
+  display: inline-flex;
+}
+
+/* Media Column & Image Styling */
+.media-column {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+}
+
+.section-image {
+  width: 100%;
+  max-width: 100%;
+  height: auto;
+  border-radius: 16px;
+  border: 1px solid rgba(15, 23, 42, 0.08);
+  box-shadow:
+    0 4px 16px -2px rgba(15, 23, 42, 0.06),
+    0 2px 6px -2px rgba(15, 23, 42, 0.04);
+  background-color: #ffffff;
+  display: block;
+}
+</style>

package/src/index.js

@@ -23,6 +23,7 @@ import BlogList from "./components/BlogList.vue";
 import TeamPage from "./components/TeamPage.vue";
 import SectionHeader from "./components/SectionHeader.vue";
 import TestimonialsSection from "./components/TestimonialsSection.vue";
+import TextSection from "./components/TextSection.vue";
 import Layout from "./Layout.vue";
 import "./style.css";
 
@@ -55,6 +56,7 @@ export default {
     app.component("TeamPage", TeamPage);
     app.component("SectionHeader", SectionHeader);
     app.component("TestimonialsSection", TestimonialsSection);
+    app.component("TextSection", TextSection);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {