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

package/src/components/TagList.vue

@@ -0,0 +1,293 @@
+<template>
+  <div class="tags-page">
+    <header class="tags-header">
+      <h1 class="tags-title">
+        Blog Tags
+      </h1>
+      <p class="tags-subtitle">
+        Explore our blog posts by topics and technology pillars.
+      </p>
+    </header>
+
+    <!-- Unified flat list of all tags -->
+    <div class="tags-container">
+      <div class="tags-flex">
+        <a
+          v-for="tag in allTagsList"
+          :key="tag.name"
+          :href="`/tag/${tag.name}/`"
+          :style="getTagStyle(tag.name)"
+          class="tag-item"
+        >
+          <span>{{ tag.name }}</span>
+          <span class="tag-count">{{ tag.count }}</span>
+        </a>
+      </div>
+    </div>
+
+    <!-- Tech pillars legend overview footer -->
+    <footer class="tags-footer">
+      <h3 class="legend-title">Technology Pillars:</h3>
+      <ul class="legend-grid">
+        <li class="legend-item">
+          <span
+            class="legend-dot"
+            style="background-color: rgb(255, 94, 94)"
+          ></span>
+          <span>Managed cloud workspace</span>
+        </li>
+        <li class="legend-item">
+          <span
+            class="legend-dot"
+            style="background-color: rgb(0, 177, 176)"
+          ></span>
+          <span>Data management</span>
+        </li>
+        <li class="legend-item">
+          <span
+            class="legend-dot"
+            style="background-color: rgb(219, 173, 66)"
+          ></span>
+          <span>Data visualization</span>
+        </li>
+        <li class="legend-item">
+          <span
+            class="legend-dot"
+            style="background-color: rgb(218, 71, 228)"
+          ></span>
+          <span>Data products</span>
+        </li>
+      </ul>
+      <p class="legend-note">
+        For more detailed information on our technology solutions, visit the
+        <a href="/software-products" class="legend-link">Solutions & Services</a>
+        page.
+      </p>
+    </footer>
+  </div>
+</template>
+
+<script setup>
+import { computed } from "vue";
+import { data as posts } from "../posts.data.js";
+import { getTagColor, getTagStyle } from "../tagUtils.js";
+
+const allTagsList = computed(() => {
+  // Aggregate all tag occurrences
+  const tagCounts = {};
+  posts.forEach((p) => {
+    if (Array.isArray(p.tags)) {
+      p.tags.forEach((t) => {
+        const clean = t.trim().toLowerCase();
+        if (clean) {
+          tagCounts[clean] = (tagCounts[clean] || 0) + 1;
+        }
+      });
+    }
+  });
+
+  // Convert to sorted list
+  return Object.entries(tagCounts)
+    .map(([name, count]) => ({
+      name,
+      count,
+      color: getTagColor(name),
+    }))
+    .sort((a, b) => a.name.localeCompare(b.name));
+});
+</script>
+
+<style scoped>
+.tags-page {
+  width: 100%;
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+  padding-top: calc(var(--vp-nav-height) + 24px);
+  padding-bottom: 48px;
+  box-sizing: border-box;
+}
+
+@media (min-width: 640px) {
+  .tags-page {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    padding-top: calc(var(--vp-nav-height) + 40px);
+    padding-bottom: 64px;
+  }
+}
+
+@media (min-width: 960px) {
+  .tags-page {
+    padding-left: 2rem;
+    padding-right: 2rem;
+    padding-top: calc(var(--vp-nav-height) + 58px);
+    padding-bottom: 96px;
+  }
+}
+
+/* Page Header */
+.tags-header {
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #f1f5f9; /* slate-100 */
+  padding-bottom: 1.5rem;
+  text-align: center;
+  max-width: 42rem; /* 2xl equivalent */
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.tags-title {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 28px;
+  line-height: 36px;
+  color: #020617; /* slate-950 */
+  margin-top: 0;
+  margin-bottom: 0.5rem;
+  letter-spacing: 0.5px;
+}
+
+@media (min-width: 768px) {
+  .tags-title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+
+.tags-subtitle {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  color: #64748b; /* slate-500 */
+  max-width: 620px;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding: 0;
+  letter-spacing: 0.5px;
+}
+
+/* Tag Collection Container */
+.tags-container {
+  background-color: var(--surface-container-low);
+  padding: 2.5rem 2rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(226, 232, 240, 0.5); /* border-slate-100/50 */
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05); /* shadow-sm */
+  margin-bottom: 3rem;
+}
+
+.tags-flex {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+  justify-content: center;
+}
+
+/* Tag Item Style */
+.tag-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.875rem; /* text-sm */
+  font-weight: 600;
+  padding: 0.375rem 0.875rem;
+  border-radius: 4px; /* small rounding to distinguish from full-rounded buttons */
+  text-decoration: none !important;
+  line-height: 1.2;
+  transition: opacity 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.tag-item:hover {
+  opacity: 0.85;
+  transform: translateY(-1px);
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
+}
+
+.tag-count {
+  font-size: 0.75rem;
+  padding: 0.125rem 0.375rem;
+  background-color: rgba(255, 255, 255, 0.4);
+  color: inherit;
+  border-radius: 9999px;
+  font-weight: 700;
+}
+
+/* Legend Overview Footer */
+.tags-footer {
+  background-color: var(--surface-container-low);
+  padding: 2rem;
+  border-radius: 1rem;
+  border: 1px solid rgba(226, 232, 240, 0.5);
+  max-width: 48rem; /* 3xl equivalent */
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: 4rem;
+}
+
+.legend-title {
+  font-family: "Inter", sans-serif;
+  font-size: 1.125rem; /* text-lg */
+  font-weight: 700;
+  color: #020617; /* slate-950 */
+  margin-top: 0;
+  margin-bottom: 1rem;
+}
+
+.legend-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding-left: 0;
+  list-style: none;
+  margin: 0;
+}
+
+@media (min-width: 640px) {
+  .legend-grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.legend-item {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  font-size: 0.875rem; /* text-sm */
+  color: #475569; /* slate-600 */
+}
+
+.legend-dot {
+  width: 0.875rem;
+  height: 0.875rem;
+  border-radius: 9999px;
+  flex-shrink: 0;
+}
+
+.legend-note {
+  font-size: 0.875rem;
+  color: #64748b; /* slate-500 */
+  margin-top: 1.5rem;
+  padding-top: 1rem;
+  border-top: 1px solid rgba(226, 232, 240, 0.6);
+  line-height: 1.5;
+}
+
+.legend-link {
+  color: var(--primary, #004170);
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.legend-link:hover {
+  text-decoration: underline;
+}
+</style>

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");
+  });
+});