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

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

@@ -17,6 +17,12 @@ 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";
 
@@ -43,6 +49,12 @@ export default {
     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) {

package/src/pages/author/[author].md

@@ -0,0 +1,4 @@
+---
+layout: blog
+title: Author posts
+---

package/src/pages/author/[author].paths.js

@@ -0,0 +1,60 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export default {
+  paths() {
+    const postsDir = path.resolve(process.cwd(), "_posts");
+    if (!fs.existsSync(postsDir)) return [];
+
+    const files = fs.readdirSync(postsDir).filter((f) => f.endsWith(".md"));
+    const allAuthors = new Set();
+
+    for (const file of files) {
+      const filePath = path.join(postsDir, file);
+      const content = fs.readFileSync(filePath, "utf8");
+
+      // Extract yaml frontmatter block
+      const frontmatterMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+      if (frontmatterMatch) {
+        const yaml = frontmatterMatch[1];
+
+        // 1. Match inline array or string style author
+        const authorMatch = yaml.match(/author:\s*(.*?)\r?\n/);
+        if (authorMatch) {
+          const val = authorMatch[1].trim();
+          if (val.startsWith("[") && val.endsWith("]")) {
+            val
+              .slice(1, -1)
+              .split(",")
+              .forEach((a) => {
+                const clean = a.trim().replace(/['"]/g, "").toLowerCase();
+                if (clean) allAuthors.add(clean);
+              });
+          } else if (val) {
+            const clean = val.replace(/['"]/g, "").toLowerCase();
+            if (clean) allAuthors.add(clean);
+          }
+        }
+
+        // 2. Match block list style authors
+        const authorBlockMatch = yaml.match(
+          /author:\r?\n((?:\s*-\s*.*\r?\n?)+)/,
+        );
+        if (authorBlockMatch) {
+          const lines = authorBlockMatch[1].split(/\r?\n/);
+          for (const line of lines) {
+            const m = line.match(/^\s*-\s*["']?(.*?)["']?\s*$/);
+            if (m && m[1]) {
+              const auth = m[1].trim().toLowerCase();
+              if (auth) allAuthors.add(auth);
+            }
+          }
+        }
+      }
+    }
+
+    return Array.from(allAuthors).map((author) => {
+      return { params: { author } };
+    });
+  },
+};

package/src/pages/blog.md

@@ -0,0 +1,4 @@
+---
+layout: blog
+title: Blog
+---

package/src/pages/tag/[tag].md

@@ -0,0 +1,4 @@
+---
+layout: blog
+title: Tag list
+---

package/src/pages/tag/[tag].paths.js

@@ -0,0 +1,49 @@
+import fs from "node:fs";
+import path from "node:path";
+
+export default {
+  paths() {
+    const postsDir = path.resolve(process.cwd(), "_posts");
+    if (!fs.existsSync(postsDir)) return [];
+
+    const files = fs.readdirSync(postsDir).filter((f) => f.endsWith(".md"));
+    const allTags = new Set();
+
+    for (const file of files) {
+      const filePath = path.join(postsDir, file);
+      const content = fs.readFileSync(filePath, "utf8");
+
+      // Robust YAML frontmatter parser
+      const frontmatterMatch = content.match(/^---\r?\n([\s\S]*?)\r?\n---/);
+      if (frontmatterMatch) {
+        const yaml = frontmatterMatch[1];
+
+        // 1. Match list-style tags
+        const tagsBlockMatch = yaml.match(/tags:\r?\n((?:\s*-\s*.*\r?\n?)+)/);
+        if (tagsBlockMatch) {
+          const lines = tagsBlockMatch[1].split(/\r?\n/);
+          for (const line of lines) {
+            const m = line.match(/^\s*-\s*["']?(.*?)["']?\s*$/);
+            if (m && m[1]) {
+              const tag = m[1].trim().toLowerCase();
+              if (tag) allTags.add(tag);
+            }
+          }
+        }
+
+        // 2. Match inline-array style tags
+        const inlineMatch = yaml.match(/tags:\s*\[([\s\S]*?)\]/);
+        if (inlineMatch) {
+          inlineMatch[1].split(",").forEach((t) => {
+            const tag = t.trim().replace(/['"]/g, "").toLowerCase();
+            if (tag) allTags.add(tag);
+          });
+        }
+      }
+    }
+
+    return Array.from(allTags).map((tag) => {
+      return { params: { tag } };
+    });
+  },
+};

package/src/pages/tag.md

@@ -0,0 +1,4 @@
+---
+layout: tags
+title: Tags
+---

package/src/pages/team.md

@@ -0,0 +1,4 @@
+---
+layout: team
+title: Team
+---

package/src/posts.data.js

@@ -0,0 +1,96 @@
+import { createContentLoader } from "vitepress";
+
+function cleanMarkdown(src) {
+  if (!src) return "";
+
+  // 1. If there's a <!-- more --> tag, truncate there
+  const moreIndex = src.indexOf("<!-- more -->");
+  let content = moreIndex !== -1 ? src.slice(0, moreIndex) : src;
+
+  // 2. Remove frontmatter (just in case)
+  if (content.startsWith("---")) {
+    const nextThree = content.indexOf("---", 3);
+    if (nextThree !== -1) {
+      content = content.slice(nextThree + 3);
+    }
+  }
+
+  // 3. Remove standard markdown and HTML elements
+  let text = content
+    // Remove custom containers like ::: info or ::: warning ... :::
+    .replace(/:::[^\n]*\n/g, "")
+    .replace(/:::/g, "")
+    // Remove HTML comments
+    .replace(/<!--[\s\S]*?-->/g, "")
+    // Remove images: ![alt](url)
+    .replace(/!\[.*?\]\(.*?\)/g, "")
+    // Remove links but keep text: [text](url)
+    .replace(/\[(.*?)\]\(.*?\)/g, "$1")
+    // Remove blockquotes: > quote
+    .replace(/^\s*>\s+/gm, "")
+    // Clean up lists: * list item, - list item, 1. list item
+    .replace(/^\s*[\*+-]\s+/gm, "")
+    .replace(/^\s*\d+\.\s+/gm, "")
+    // Remove tables/borders
+    .replace(/\|/g, "")
+    .replace(/[-]{3,}/g, "")
+    // Remove custom components / HTML tags but keep nested content
+    .replace(/<[^>]+>/g, "")
+    // Remove bold/italic formatting
+    .replace(/(\*\*|__)(.*?)\1/g, "$2")
+    .replace(/(\*|_)(.*?)\1/g, "$2")
+    // Remove inline code
+    .replace(/`(.*?)`/g, "$1")
+    // Replace multiple newlines or spaces with a single space
+    .replace(/\s+/g, " ")
+    .trim();
+
+  return text;
+}
+
+function getExcerpt(src, maxLength = 200) {
+  const text = cleanMarkdown(src);
+  if (text.length > maxLength) {
+    // Try to truncate at a word boundary within the last 30 characters
+    const truncated = text.slice(0, maxLength);
+    const lastSpace = truncated.lastIndexOf(" ");
+    if (lastSpace > maxLength - 30) {
+      return truncated.slice(0, lastSpace) + " ...";
+    }
+    return truncated + " ...";
+  }
+  return text;
+}
+
+export default createContentLoader("_posts/*.md", {
+  includeSrc: true,
+  transform(rawData) {
+    return rawData
+      .map((page) => {
+        // Normalize single author / authors array
+        const author = page.frontmatter.author || "";
+        const authors = Array.isArray(author) ? author : [author];
+
+        const excerpt =
+          page.frontmatter.description ||
+          page.frontmatter.summary ||
+          getExcerpt(page.src);
+
+        return {
+          title: page.frontmatter.title || "",
+          url: page.url,
+          date: page.frontmatter.date || "",
+          authors,
+          tags: page.frontmatter.tags || [],
+          categories: page.frontmatter.categories || [],
+          coverImage:
+            page.frontmatter.coverImage || page.frontmatter.image || "",
+          excerpt,
+        };
+      })
+      .sort((a, b) => {
+        // Sort descending by date (newest first)
+        return b.date.localeCompare(a.date);
+      });
+  },
+});

package/src/style.css

@@ -86,6 +86,12 @@ body {
   padding-right: 0;
 }
 
+/* Ensure full-width layout sections touch and stack seamlessly without gaps */
+.VPHome .full-width:not(.home-hero-section) {
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
+}
+
 .VPHome .vp-doc a {
   font-weight: 400;
   color: inherit;
@@ -345,3 +351,157 @@ eox-feedback-button {
     z-index: calc(var(--vp-z-index-sidebar) + 2);
   }
 }
+
+/* ==========================================================================
+   Simple Pages (layout: page) styling improvements
+   ========================================================================== */
+
+.layout-page {
+  background-color: var(--surface) !important;
+}
+
+.layout-page .VPPage {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-block-start: 66px; /* Exactly 156px from top of viewport (90px navbar + 66px padding) */
+  padding-block-end: 96px;
+  padding-inline: 32px;
+}
+
+/* Remove double inner padding on custom layout elements to ensure absolute alignment */
+.layout-page .VPPage .holder {
+  padding-inline: 0 !important;
+}
+
+/* Constrain standard reading elements to 1000px max-width, while letting full-width custom page components span 1200px */
+.layout-page .VPPage > div > div > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
+  max-width: 1000px;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  width: 100%;
+}
+
+@media (max-width: 960px) {
+  .layout-page .VPPage {
+    padding-inline: 24px;
+    padding-block-start: 48px;
+    padding-block-end: 64px;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage {
+    padding-inline: 16px;
+    padding-block-start: 36px;
+    padding-block-end: 48px;
+  }
+}
+
+/* Typography on simple pages inside main page content */
+.layout-page .VPPage h1 {
+  font-size: 2rem; /* Exactly 32px */
+  line-height: 1.25;
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  color: var(--on-surface);
+  font-weight: 700;
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage h1 {
+    font-size: 1.75rem; /* 28px on mobile */
+  }
+}
+
+.layout-page .VPPage h2 {
+  font-size: 1.5rem; /* Exactly 24px */
+  line-height: 1.35;
+  margin-block-start: 3rem;
+  margin-block-end: 1.125rem;
+  color: var(--on-surface);
+  border-top: none;
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage h2 {
+    font-size: 1.375rem; /* 22px on mobile */
+  }
+}
+
+.layout-page .VPPage h3 {
+  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
+  line-height: 1.3;
+  margin-block-start: 2.25rem;
+  margin-block-end: 0.875rem;
+  color: var(--on-surface);
+}
+
+.layout-page .VPPage h4 {
+  font-size: 1.15rem;
+  line-height: 1.4;
+  margin-block-start: 1.75rem;
+  margin-block-end: 0.75rem;
+  color: var(--on-surface);
+}
+
+.layout-page .VPPage p {
+  font-size: 1rem; /* Exactly 16px */
+  line-height: 1.65;
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  color: var(--on-surface);
+}
+
+/* Lists */
+.layout-page .VPPage ul,
+.layout-page .VPPage ol {
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  padding-inline-start: 1.5rem;
+}
+
+.layout-page .VPPage li {
+  margin-block-end: 0.5rem;
+  line-height: 1.6;
+  font-size: 1rem; /* Exactly 16px */
+  color: var(--on-surface);
+}
+
+/* Inline links readability fix */
+.layout-page .VPPage a:not(.button) {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+}
+
+.layout-page .VPPage a:not(.button):hover {
+  opacity: 0.85;
+  text-decoration-thickness: 2px;
+}
+
+/* Scroll Anchors, Blockquotes & Code */
+.layout-page .VPPage blockquote {
+  border-inline-start: 4px solid var(--primary);
+  padding-inline-start: 1.25rem;
+  margin-inline: 0;
+  margin-block: 2rem;
+  font-style: italic;
+  color: var(--on-surface-variant);
+}
+
+.layout-page .VPPage sup,
+.layout-page .VPPage sub {
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+.layout-page .VPPage pre {
+  margin-block: 1.5rem;
+  padding: 1rem;
+  border-radius: 8px;
+  background-color: var(--surface-container-low);
+  overflow-x: auto;
+}
+