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

package/src/components/SectionHeader.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="section-header-group">
+    <!-- Section Tag Badge -->
+    <div v-if="tag || icon" class="section-badge-tag">
+      <i v-if="icon" :class="['mdi', icon, 'section-badge-icon']"></i>
+      <span class="section-badge-text">{{ tag }}</span>
+    </div>
+
+    <!-- Display Title -->
+    <h2 class="section-display-title">
+      <slot name="title">{{ title }}</slot>
+    </h2>
+
+    <!-- Subtitle / Body text -->
+    <p v-if="subtitle || $slots.default" class="section-subtitle">
+      <slot>{{ subtitle }}</slot>
+    </p>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  tag: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  icon: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  title: {
+    type: String,
+    required: false,
+    default: "",
+  },
+  subtitle: {
+    type: String,
+    required: false,
+    default: "",
+  },
+});
+</script>
+
+<style scoped>
+.section-header-group {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 0 !important;
+  margin: 0 0 40px 0 !important;
+  gap: 16px;
+  width: 100%;
+}
+
+.section-badge-tag {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0 !important;
+  margin: 0 !important;
+  gap: 12px;
+  height: 24px;
+}
+
+.section-badge-icon {
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  line-height: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--primary, #004170);
+}
+
+.section-badge-text {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  margin: 0 !important;
+  padding: 0 !important;
+  color: var(--primary, #004170);
+}
+
+.section-display-title {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 700;
+  font-size: 36px !important;
+  line-height: 44px;
+  letter-spacing: 0.5008px;
+  margin: 0 !important;
+  padding: 0 !important;
+  border-top: none !important;
+}
+
+.section-subtitle {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  max-width: 620px;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+</style>

package/src/components/SingleTweet.cy.js

@@ -0,0 +1,27 @@
+import SingleTweet from "./SingleTweet.vue";
+
+describe("<SingleTweet />", () => {
+  it("renders consent fallback if cookies are not allowed", () => {
+    cy.mount(SingleTweet, {
+      props: {
+        id: "12345",
+        mockConsent: false,
+      },
+    });
+
+    cy.contains("Cookie Consent Required").should("be.visible");
+    cy.get("blockquote").should("not.exist");
+  });
+
+  it("renders tweet blockquote if cookies are allowed", () => {
+    cy.mount(SingleTweet, {
+      props: {
+        id: "12345",
+        mockConsent: true,
+      },
+    });
+
+    cy.get("blockquote.twitter-tweet").should("exist");
+    cy.contains("Cookie Consent Required").should("not.exist");
+  });
+});

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/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>