@eox/pages-theme-eox 1.8.0 → 1.9.0

package/src/components/SingleTweet.vue

@@ -0,0 +1,155 @@
+<template>
+  <div class="single-tweet-container">
+    <div class="tweet-card">
+      <!-- Embed Mode (Cookies accepted or SSR) -->
+      <div v-if="cookiesAllowed" class="tweet-embed-wrapper">
+        <blockquote class="twitter-tweet" data-theme="light">
+          <a :href="`https://twitter.com/x/status/${id}`"></a>
+        </blockquote>
+      </div>
+
+      <!-- No Consent Fallback -->
+      <div v-else class="fallback-card">
+        <svg class="fallback-icon" viewBox="0 0 24 24" fill="currentColor">
+          <path
+            d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"
+          />
+        </svg>
+        <div class="fallback-text">
+          <p class="fallback-title">Cookie Consent Required</p>
+          <p class="fallback-desc">
+            Please accept optional cookies to load the interactive Tweet. You
+            can review your preferences on the
+            <a href="/cookie-settings" class="cookie-link">Cookie Settings</a>
+            page.
+          </p>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, onMounted, watch } from "vue";
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true,
+  },
+  mockConsent: {
+    type: Boolean,
+    default: null,
+  },
+});
+
+const cookiesAllowed = ref(false);
+
+const checkConsent = () => {
+  if (props.mockConsent !== null) {
+    cookiesAllowed.value = props.mockConsent;
+    return;
+  }
+  if (typeof document !== "undefined") {
+    // If no mtm cookie banner is present or user has consented
+    cookiesAllowed.value =
+      document.cookie.includes("mtm_cookie_consent") ||
+      !document.querySelector(".cookie-banner");
+  }
+};
+
+onMounted(() => {
+  checkConsent();
+
+  // Dynamically load Twitter widgets script if allowed
+  watch(
+    cookiesAllowed,
+    (allowed) => {
+      if (allowed && typeof window !== "undefined") {
+        if (window.twttr) {
+          window.twttr.widgets.load();
+        } else {
+          const script = document.createElement("script");
+          script.src = "https://platform.twitter.com/widgets.js";
+          script.async = true;
+          script.charset = "utf-8";
+          document.head.appendChild(script);
+        }
+      }
+    },
+    { immediate: true },
+  );
+});
+</script>
+
+<style scoped>
+.single-tweet-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 1.5rem 0;
+  width: 100%;
+}
+
+.tweet-card {
+  width: 100%;
+  max-width: 500px;
+  min-height: 150px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.tweet-embed-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.fallback-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 2rem;
+  background-color: #f1f5f9;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  text-align: center;
+  color: #475569;
+  gap: 1rem;
+}
+
+.fallback-icon {
+  width: 40px;
+  height: 40px;
+  color: #94a3b8;
+}
+
+.fallback-text {
+  font-size: 0.875rem;
+}
+
+.fallback-title {
+  font-weight: 600;
+  color: #1e293b;
+  margin: 0 0 0.25rem 0;
+}
+
+.fallback-desc {
+  color: #64748b;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  margin: 0;
+}
+
+.cookie-link {
+  color: var(--primary, #004170);
+  font-weight: 500;
+  text-decoration: none;
+}
+
+.cookie-link:hover {
+  text-decoration: underline;
+}
+</style>

package/src/index.js

@@ -13,6 +13,10 @@ 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 Layout from "./Layout.vue";
 import "./style.css";
 
@@ -34,6 +38,11 @@ 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);
 
     router.onAfterRouteChanged = () => {
       if (!import.meta.env.SSR) {

package/src/team.data.js

@@ -0,0 +1,51 @@
+import { createContentLoader } from "vitepress";
+
+export default createContentLoader("team/*.md", {
+  transform(rawData) {
+    return rawData
+      .filter((page) => {
+        // Exclude guest members
+        return !(page.frontmatter.guest === true);
+      })
+      .map((page) => {
+        // Find job description inside the meta array
+        const metaList = page.frontmatter.meta || [];
+        const jobDescMeta = Array.isArray(metaList)
+          ? metaList.find((m) => m && m.name === "jobDescription")
+          : null;
+        const role = jobDescMeta ? jobDescMeta.content : "";
+
+        // Transform sns array of objects into a single object of key-value pairs
+        const sns = {};
+        const snsList = page.frontmatter.sns || [];
+        if (Array.isArray(snsList)) {
+          snsList.forEach((item) => {
+            if (item && typeof item === "object") {
+              Object.entries(item).forEach(([platform, url]) => {
+                sns[platform] = url;
+              });
+            }
+          });
+        }
+
+        // Return the clean schema
+        return {
+          name: page.frontmatter.title || "",
+          id: page.frontmatter.id || "",
+          image: page.frontmatter.image || "",
+          bio: page.frontmatter.description || "",
+          role,
+          sns,
+          url: page.url,
+        };
+      })
+      .sort((a, b) => {
+        // "0_new" (id: new_member) should be in the 1st position.
+        if (a.id === "new_member") return -1;
+        if (b.id === "new_member") return 1;
+
+        // Otherwise sort alphabetically by ID (which maps to filename / last name)
+        return a.id.localeCompare(b.id);
+      });
+  },
+});