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

package/src/components/TeamPage.vue

@@ -0,0 +1,333 @@
+<template>
+  <div class="team-page">
+    <!-- Header -->
+    <header class="team-header">
+      <h1 class="team-title">
+        {{ frontmatter.title || "Our Team" }}
+      </h1>
+      <p class="team-subtitle">
+        Meet the diverse team of geospatial experts, engineers, and visionaries
+        driving EOX forward.
+      </p>
+    </header>
+
+    <!-- Team Photo Section -->
+    <section class="team-photo-section">
+      <img
+        :src="withBase('/images/team/team.jpg')"
+        alt="EOX Team Photo"
+        class="team-photo"
+      />
+    </section>
+
+    <!-- Team Grid - max 3 columns on large screens -->
+    <div class="team-grid">
+      <FeatureCard
+        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"
+        variant="cover"
+        class="bg-surface-container-low team-member-card"
+      >
+        <!-- Role / Job Title -->
+        <span v-if="member.role" class="member-role">
+          {{ member.role }}
+        </span>
+
+        <span class="member-divider"></span>
+
+        <!-- Description / Bio -->
+        <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">
+          <!-- Social Icons - aligned to the left matching other content -->
+          <span class="social-links-row">
+            <template v-for="(url, platform) in member.sns" :key="platform">
+              <a
+                v-if="url"
+                :href="url"
+                target="_blank"
+                rel="noopener noreferrer"
+                class="social-link-btn"
+                :title="`${member.name} on ${platform}`"
+              >
+                <!-- Bluesky custom SVG -->
+                <svg
+                  v-if="platform === 'bluesky'"
+                  viewBox="0 0 512 512"
+                  style="width: 18px; height: 18px; fill: currentColor"
+                >
+                  <path
+                    d="M111.8 109.6C166.1 154.2 226.8 231.1 256 271.7c29.2-40.6 89.9-117.5 144.2-162.1C443.3 74.3 512 57.4 512 121.7c0 23.3-12.7 101.4-19 123.5-16 56.6-70.3 70.8-111.8 62.4C443 328.1 512 361.3 512 411.1c0 51.5-68.7 65.1-111.8 18.2-70.3 76.5-161.4 11-200.2-29-38.8 40-129.9 105.5-200.2 29C56.7 476.2 0 462.6 0 411.1c0-49.8 69-83 130.8-103.5C89.3 316 35 301.8 19 245.2 12.7 223 0 145 0 121.7c0-64.3 68.7-47.4 111.8-12.1z"
+                  />
+                </svg>
+                <i
+                  v-else-if="platform === 'linkedin'"
+                  class="mdi mdi-linkedin text-lg"
+                ></i>
+                <i
+                  v-else-if="platform === 'github'"
+                  class="mdi mdi-github text-lg"
+                ></i>
+                <i
+                  v-else-if="platform === 'twitter'"
+                  class="mdi mdi-twitter text-lg"
+                ></i>
+                <i
+                  v-else-if="platform === 'facebook'"
+                  class="mdi mdi-facebook text-lg"
+                ></i>
+                <i v-else :class="`mdi mdi-${platform} text-lg`"></i>
+              </a>
+            </template>
+          </span>
+        </span>
+      </FeatureCard>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { useData, withBase } from "vitepress";
+import { data as teamMembers } from "../team.data.js";
+import { data as posts } from "../posts.data.js";
+import FeatureCard from "./FeatureCard/Index.vue";
+
+const { frontmatter } = useData();
+
+const sortedTeamMembers = computed(() => {
+  return teamMembers;
+});
+
+const memberHasPosts = (memberId) => {
+  if (!memberId || memberId === "new_member") return false;
+  return posts.some((post) => {
+    return Array.isArray(post.authors) && post.authors.includes(memberId);
+  });
+};
+</script>
+
+<style scoped>
+.team-page {
+  width: 100%;
+  max-width: 1200px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  box-sizing: border-box !important;
+  padding-top: calc(var(--vp-nav-height) + 28px) !important;
+  padding-bottom: 48px !important;
+  word-break: break-word;
+}
+
+@media (min-width: 640px) {
+  .team-page {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+    padding-top: calc(var(--vp-nav-height) + 40px) !important;
+    padding-bottom: 64px !important;
+  }
+}
+
+@media (min-width: 960px) {
+  .team-page {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+    padding-top: calc(var(--vp-nav-height) + 58px) !important;
+    padding-bottom: 96px !important;
+  }
+}
+
+/* Page Header */
+.team-header {
+  margin-bottom: 2.5rem;
+  border-bottom: 1px solid #f1f5f9; /* slate-100 */
+  padding-bottom: 1.5rem !important;
+  padding-top: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  background: transparent !important;
+  min-height: auto !important;
+  height: auto !important;
+}
+
+.team-title {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 36px;
+  letter-spacing: 0.5px;
+  color: #020617; /* slate-950 */
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .team-title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+
+.team-subtitle {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #64748b; /* slate-500 */
+  max-width: 620px;
+  margin: 0;
+  padding: 0;
+}
+
+/* Team Photo Section */
+.team-photo-section {
+  margin-bottom: 3.5rem;
+  overflow: hidden;
+  border-radius: 1rem; /* 16px */
+  border: 1px solid rgba(226, 232, 240, 0.5); /* border-slate-100/50 */
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
+}
+
+.team-photo {
+  width: 100%;
+  height: auto;
+  object-fit: cover;
+  max-height: 500px;
+}
+
+/* Team Grid - custom grid definition to prevent conflict with Beercss global .grid */
+.team-grid {
+  display: grid;
+  grid-template-columns: repeat(1, minmax(0, 1fr));
+  gap: 2rem;
+}
+
+@media (min-width: 640px) {
+  .team-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .team-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+/* Deep overrides to integrate with theme-provided FeatureCard */
+.team-member-card {
+  height: 100% !important;
+}
+
+.team-member-card :deep(.card-cover-link) {
+  aspect-ratio: 1 / 1 !important; /* Override cover layout aspect ratio to square portrait */
+}
+
+/* Left-align card titles and override margin */
+.team-member-card :deep(.card-title-text) {
+  text-align: left !important;
+  margin-top: 0 !important;
+  margin-bottom: 0.5rem !important;
+  font-size: 1.25rem !important; /* exactly 20px matching card expectations */
+  font-weight: 700 !important;
+}
+
+/* Deep override card navigation to align properly */
+.team-member-card :deep(.card-navigation) {
+  margin-top: 1rem !important;
+  padding-left: 1.5rem !important;
+  padding-bottom: 1.5rem !important;
+}
+
+.team-member-card :deep(.card-content-wrapper) {
+  display: flex !important;
+  flex-direction: column !important;
+  height: 100% !important;
+}
+
+.team-member-card :deep(.card-body-text) {
+  display: flex !important;
+  flex-direction: column !important;
+  flex-grow: 1 !important;
+  margin: 0 !important;
+  text-align: left !important;
+}
+
+/* Member Content Slot Elements (all left-aligned) */
+.member-role {
+  display: block;
+  color: var(--primary) !important;
+  font-weight: 600 !important;
+  font-size: 0.875rem !important; /* 14px */
+  margin-top: 0 !important;
+  margin-bottom: 1rem !important;
+  text-align: left !important;
+}
+
+.member-divider {
+  display: block;
+  border: 0;
+  border-top: 1px solid #f1f5f9 !important; /* slate-100 */
+  margin-top: 0.5rem !important;
+  margin-bottom: 0.75rem !important;
+}
+
+.member-bio {
+  display: block;
+  font-size: 0.875rem !important; /* 14px */
+  line-height: 1.6 !important;
+  color: #475569 !important; /* slate-600 */
+  margin-top: 0 !important;
+  margin-bottom: 1.5rem !important;
+  text-align: left !important;
+  flex-grow: 1;
+}
+
+.member-footer {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  margin-top: auto !important;
+}
+
+.social-links-row {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start; /* Aligned to left */
+  gap: 0.5rem;
+}
+
+.social-link-btn {
+  width: 2.25rem;
+  height: 2.25rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 9999px;
+  color: #94a3b8; /* slate-400 */
+  transition: all 0.15s ease;
+  margin-left: -0.5rem; /* subtle offset alignment for first icon */
+}
+
+.social-link-btn:hover {
+  color: var(--primary);
+  background-color: var(--surface-container-high);
+}
+</style>

package/src/components/TestimonialsSection.cy.js

@@ -0,0 +1,79 @@
+import TestimonialsSection from "./TestimonialsSection.vue";
+
+describe("<TestimonialsSection />", () => {
+  it("renders with default props and switches testimonials", () => {
+    cy.mount(TestimonialsSection);
+
+    // Verify title
+    cy.get(".section-display-title").should(
+      "contain",
+      "What our customers are saying",
+    );
+
+    // Verify first testimonial quote
+    cy.get(".quote-text").should(
+      "contain",
+      "The VirES platform has completely revolutionized",
+    );
+    cy.get(".author-name").should("contain", "Dr. Fiona Harrison");
+
+    // Click next button
+    cy.get("button[aria-label='Next testimonial']").click();
+
+    // Verify second testimonial quote
+    cy.get(".quote-text").should(
+      "contain",
+      "Deploying our Area Monitoring System",
+    );
+    cy.get(".author-name").should("contain", "Dr. Liam O'Connor");
+
+    // Click prev button
+    cy.get("button[aria-label='Previous testimonial']").click();
+
+    // Verify first testimonial quote again
+    cy.get(".quote-text").should(
+      "contain",
+      "The VirES platform has completely revolutionized",
+    );
+    cy.get(".author-name").should("contain", "Dr. Fiona Harrison");
+  });
+
+  it("renders custom title and custom testimonials list", () => {
+    const customTitle = "What Our Amazing Clients Think";
+    const customTestimonials = [
+      {
+        quote: "This is a custom quote that is extremely positive.",
+        author: "Alice Smith",
+        role: "Software Architect",
+      },
+      {
+        quote: "Another custom quote for testing purposes.",
+        author: "Bob Jones",
+        role: "Data Analyst",
+      },
+    ];
+
+    cy.mount(TestimonialsSection, {
+      props: {
+        title: customTitle,
+        testimonials: customTestimonials,
+      },
+    });
+
+    // Check title
+    cy.get(".section-display-title").should("contain", customTitle);
+
+    // Check first custom testimonial
+    cy.get(".quote-text").should("contain", "This is a custom quote");
+    cy.get(".author-name").should("contain", "Alice Smith");
+    cy.get(".author-role").should("contain", "Software Architect");
+
+    // Go next
+    cy.get("button[aria-label='Next testimonial']").click();
+
+    // Check second custom testimonial
+    cy.get(".quote-text").should("contain", "Another custom quote");
+    cy.get(".author-name").should("contain", "Bob Jones");
+    cy.get(".author-role").should("contain", "Data Analyst");
+  });
+});

package/src/components/TestimonialsSection.vue

@@ -0,0 +1,265 @@
+<template>
+  <section class="testimonials-section full-width surface-container-low">
+    <div class="holder">
+      <!-- Left Side: Headline -->
+      <div class="headline">
+        <h2>
+          {{ title }}
+        </h2>
+      </div>
+
+      <!-- Right Side: Text Block -->
+      <div v-if="testimonials && testimonials.length > 0" class="text-block">
+        <!-- Testimonial Quote -->
+        <div class="quote-text">
+          &ldquo;{{ currentTestimonial.quote }}&rdquo;
+        </div>
+
+        <!-- Divider / Separator -->
+        <div class="divider"></div>
+
+        <!-- Frame 469: Author info & sliders -->
+        <div class="frame-469">
+          <!-- Frame 468: Author Name and Role -->
+          <div class="frame-468">
+            <span class="author-name">
+              {{ currentTestimonial.author }}
+            </span>
+            <span class="author-role">
+              {{ currentTestimonial.role }}
+            </span>
+          </div>
+
+          <!-- sliders: Navigation Buttons -->
+          <div class="sliders">
+            <!-- Left Arrow Button -->
+            <button
+              class="nav-button"
+              @click="prev"
+              aria-label="Previous testimonial"
+            >
+              <i class="mdi mdi-arrow-left"></i>
+            </button>
+
+            <!-- Right Arrow Button -->
+            <button
+              class="nav-button"
+              @click="next"
+              aria-label="Next testimonial"
+            >
+              <i class="mdi mdi-arrow-right"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, computed } from "vue";
+
+const props = defineProps({
+  title: {
+    type: String,
+    default: "What our customers are saying",
+  },
+  testimonials: {
+    type: Array,
+    default: () => [
+      {
+        quote:
+          "The VirES platform has completely revolutionized how Swarm mission data is accessed and analyzed by the global scientific community. Its cloud-native performance and seamless visualization are unmatched.",
+        author: "Dr. Fiona Harrison",
+        role: "Lead Swarm Researcher, Scientific Advisory Group",
+      },
+      {
+        quote:
+          "Deploying our Area Monitoring System on EOxHub workspaces allowed us to process millions of parcels in near real-time. This level of automation and reliability is precisely what we needed for the CAP implementation.",
+        author: "Dr. Liam O'Connor",
+        role: "Senior Spatial Scientist, Agricultural Paying Agency",
+      },
+      {
+        quote:
+          "The EOX base map layers are an essential asset for our global dashboard. Their Sentinel-2 cloudless composites provide a pristine, cloud-free visual experience that our users absolutely love.",
+        author: "Sarah Jenkins",
+        role: "Chief Product Officer, Global Earth Explorer Platform",
+      },
+    ],
+  },
+});
+
+const currentIndex = ref(0);
+
+const currentTestimonial = computed(() => {
+  if (!props.testimonials || props.testimonials.length === 0) return null;
+  return props.testimonials[currentIndex.value];
+});
+
+function prev() {
+  if (!props.testimonials || props.testimonials.length === 0) return;
+  currentIndex.value =
+    (currentIndex.value - 1 + props.testimonials.length) %
+    props.testimonials.length;
+}
+
+function next() {
+  if (!props.testimonials || props.testimonials.length === 0) return;
+  currentIndex.value = (currentIndex.value + 1) % props.testimonials.length;
+}
+</script>
+
+<style scoped>
+section.testimonials-section {
+  display: flex;
+  justify-content: center;
+  overflow-x: hidden;
+  padding: 3rem 1.5rem;
+  margin-block-start: 6rem;
+  margin-block-end: 6rem;
+  box-sizing: border-box;
+}
+
+@media (min-width: 1024px) {
+  section.testimonials-section {
+    padding: 6rem 1.5rem;
+  }
+}
+
+.holder {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  width: 100%;
+}
+
+@media (min-width: 1024px) {
+  .holder {
+    flex-direction: row;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 64px;
+  }
+}
+
+.headline {
+  flex: 1 1 50%;
+  max-width: 620px;
+}
+
+.headline h2 {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px !important;
+  line-height: 44px;
+  letter-spacing: 0.5008px;
+  color: #00060a;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.text-block {
+  flex: 1 1 50%;
+  max-width: 620px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.quote-text {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+  min-height: 72px;
+}
+
+.divider {
+  width: 100%;
+  height: 1px;
+  background: #ccd9e2;
+}
+
+.frame-469 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  width: 100%;
+}
+
+.frame-468 {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex-grow: 1;
+}
+
+.author-name {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+}
+
+.author-role {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #00060a;
+}
+
+.sliders {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 24px;
+  flex-shrink: 0;
+}
+
+.nav-button {
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+  align-items: center !important;
+  padding: 0 !important;
+  width: 48px !important;
+  min-width: 48px !important;
+  max-width: 48px !important;
+  height: 48px !important;
+  min-height: 48px !important;
+  max-height: 48px !important;
+  background: #004170 !important;
+  box-shadow:
+    0px 24px 48px -8px rgba(62, 52, 69, 0.12),
+    0px 2px 4px rgba(62, 52, 69, 0.04) !important;
+  border-radius: 999px !important;
+  border: none !important;
+  cursor: pointer !important;
+  transition: background-color 0.2s ease !important;
+  box-sizing: border-box !important;
+}
+
+.nav-button:hover {
+  background: #002e52;
+}
+
+.nav-button i {
+  color: #ffffff;
+  font-size: 24px;
+  line-height: 1;
+}
+</style>

package/src/index.js

@@ -13,6 +13,16 @@ import CookieSettings from "./components/CookieSettings.vue";
 import NotFound from "./components/NotFound.vue";
 import DataTable from "./components/DataTable.vue";
 import Tutorial from "./components/Tutorial.vue";
+import ImageElement from "./components/ImageElement.vue";
+import ImageGallery from "./components/ImageGallery.vue";
+import ImageCarousel from "./components/ImageCarousel.vue";
+import SingleTweet from "./components/SingleTweet.vue";
+import BlogPost from "./components/BlogPost.vue";
+import TagList from "./components/TagList.vue";
+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 Layout from "./Layout.vue";
 import "./style.css";
 
@@ -34,6 +44,17 @@ export default {
     app.component("NotFound", NotFound);
     app.component("DataTable", DataTable);
     app.component("Tutorial", Tutorial);
+    app.component("ImageElement", ImageElement);
+    app.component("ImageGallery", ImageGallery);
+    app.component("GalleryGrid", ImageGallery);
+    app.component("ImageCarousel", ImageCarousel);
+    app.component("SingleTweet", SingleTweet);
+    app.component("BlogPost", BlogPost);
+    app.component("TagList", TagList);
+    app.component("BlogList", BlogList);
+    app.component("TeamPage", TeamPage);
+    app.component("SectionHeader", SectionHeader);
+    app.component("TestimonialsSection", TestimonialsSection);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {