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

package/src/components/BlogPost.vue

@@ -0,0 +1,472 @@
+<template>
+  <div class="blog-post-page VPDoc max-w-[1000px] mx-auto px-6 md:px-8">
+    <div class="blog-post-layout">
+      <!-- Main Article Column -->
+      <div class="blog-content-col">
+        <!-- Cover Image -->
+        <div
+          v-if="coverImage"
+          class="mb-8 rounded-2xl overflow-hidden shadow-sm max-h-[550px] bg-slate-50 border border-slate-100"
+        >
+          <img
+            :src="getCoverImageUrl(coverImage)"
+            :alt="frontmatter.title"
+            class="w-full h-full object-cover max-h-[550px]"
+          />
+        </div>
+
+        <!-- Title -->
+        <h1 class="blog-post-title">
+          {{ frontmatter.title }}
+        </h1>
+
+        <!-- Metadata Row (Date & Authors) and Tags Underneath -->
+        <div class="mb-8 border-b border-slate-100 pb-6">
+          <div class="blog-metadata">
+            <!-- Date Span -->
+            <span v-if="frontmatter.date" class="metadata-item">
+              <i class="mdi mdi-clock-outline metadata-icon"></i>
+              <time :datetime="frontmatter.date" class="metadata-text">
+                {{ formatDate(frontmatter.date) }}
+              </time>
+            </span>
+
+            <!-- Author Span -->
+            <span v-if="authors && authors.length" class="metadata-item">
+              <i class="mdi mdi-account-outline metadata-icon"></i>
+              <span class="metadata-text label-text">By</span>
+              <span
+                v-for="(authorId, idx) in authors"
+                :key="authorId"
+                class="author-item"
+              >
+                <a
+                  :href="withBase(`/author/${authorId}/`)"
+                  class="author-link-active"
+                >
+                  {{ getAuthorName(authorId) }}
+                </a>
+                <span v-if="idx < authors.length - 1" class="author-separator"
+                  >,</span
+                >
+              </span>
+            </span>
+          </div>
+
+          <!-- Tags right underneath -->
+          <div
+            v-if="frontmatter.tags && frontmatter.tags.length"
+            class="post-tags-container"
+          >
+            <a
+              v-for="tag in frontmatter.tags"
+              :key="tag"
+              :href="withBase(`/tag/${tag}/`)"
+              :style="getTagStyle(tag)"
+              class="post-tag"
+            >
+              {{ tag }}
+            </a>
+          </div>
+        </div>
+
+        <!-- Main Content -->
+        <div class="vp-doc prose prose-slate max-w-none">
+          <Content />
+        </div>
+      </div>
+
+      <!-- Sidebar Column -->
+      <div class="blog-sidebar-col">
+        <!-- Table of Contents (On This Page) -->
+        <div v-if="headers && headers.length" class="toc-container">
+          <VPDocAsideOutline />
+        </div>
+
+        <!-- Hot Tags -->
+        <div class="sidebar-widget">
+          <h3 class="sidebar-title">Hot tags</h3>
+          <div class="sidebar-tags-container">
+            <a
+              v-for="tag in calculatedHotTags"
+              :key="tag.name"
+              :href="withBase(`/tag/${tag.name}/`)"
+              :style="getTagStyle(tag.name)"
+              class="sidebar-tag"
+            >
+              {{ tag.name }} ({{ tag.count }})
+            </a>
+          </div>
+        </div>
+
+        <!-- Recent Posts -->
+        <div class="sidebar-widget">
+          <h3 class="sidebar-title">Recent posts</h3>
+          <div class="space-y-4">
+            <div
+              v-for="post in calculatedRecentPosts"
+              :key="post.url"
+              class="flex flex-col gap-1 border-b border-slate-100 last:border-none pb-3 last:pb-0"
+            >
+              <a
+                :href="withBase(post.url)"
+                class="text-sm font-semibold text-slate-900 hover:text-primary leading-snug transition-colors line-clamp-2"
+              >
+                {{ post.title }}
+              </a>
+              <time :datetime="post.date" class="text-xs text-slate-500">
+                {{ formatDate(post.date) }}
+              </time>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { useData, withBase } from "vitepress";
+import { computed } from "vue";
+import { data as posts } from "../posts.data.js";
+import { data as authorsList } from "../authors.data.js";
+import { getTagColor, getTagStyle } from "../tagUtils.js";
+import VPDocAsideOutline from "vitepress/dist/client/theme-default/components/VPDocAsideOutline.vue";
+
+const { frontmatter, page } = useData();
+
+// Set default outline level to deep for blog posts so h3 headers are resolved
+if (frontmatter.value && frontmatter.value.outline === undefined) {
+  frontmatter.value.outline = "deep";
+}
+
+// Extract headers
+const headers = computed(() => {
+  return page.value.headers || [];
+});
+
+// Form cover image URL correctly (prefixing filename with /images/)
+function getCoverImageUrl(coverImage) {
+  if (!coverImage) return "";
+  if (coverImage.startsWith("http") || coverImage.startsWith("//")) {
+    return coverImage;
+  }
+  const base = withBase("/");
+  if (base && base !== "/" && coverImage.startsWith(base)) {
+    return coverImage;
+  }
+  const path = coverImage.startsWith("/")
+    ? coverImage
+    : `/images/${coverImage}`;
+  return withBase(path);
+}
+
+// Format publication date
+function formatDate(dateStr) {
+  if (!dateStr) return "";
+  const date = new Date(dateStr);
+  return date.toLocaleDateString("en-US", {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+  });
+}
+
+// Extract authors
+const authors = computed(() => {
+  const author = frontmatter.value.author || "";
+  return Array.isArray(author) ? author : [author];
+});
+
+// Get author full name
+function getAuthorName(authorId) {
+  const auth = authorsList.find((a) => a.id === authorId);
+  return auth ? auth.name : authorId;
+}
+
+// Cover image path
+const coverImage = computed(() => {
+  return frontmatter.value.coverImage || frontmatter.value.image || "";
+});
+
+// Dynamic Recent Posts (excluding current page)
+const calculatedRecentPosts = computed(() => {
+  const rel = page.value.relativePath || "";
+  const current = (
+    "/" + rel.replace(/(^|\/)index\.md$/, "$1").replace(/\.md$/, "")
+  )
+    .replace(/\/$/, "")
+    .replace(/\.html$/, "");
+
+  return posts
+    .filter((p) => {
+      const pUrl = (p.url || "").replace(/\/$/, "").replace(/\.html$/, "");
+      return pUrl !== current && p.title !== frontmatter.value.title;
+    })
+    .slice(0, 5);
+});
+
+// Dynamic Hot Tags
+const calculatedHotTags = computed(() => {
+  const tagCounts = {};
+  posts.forEach((p) => {
+    if (Array.isArray(p.tags)) {
+      p.tags.forEach((t) => {
+        const clean = t.trim();
+        if (clean) {
+          tagCounts[clean] = (tagCounts[clean] || 0) + 1;
+        }
+      });
+    }
+  });
+  return Object.entries(tagCounts)
+    .map(([name, count]) => ({
+      name,
+      count,
+      color: getTagColor(name),
+    }))
+    .sort((a, b) => b.count - a.count)
+    .slice(0, 10);
+});
+</script>
+
+<style scoped>
+.blog-post-page {
+  width: 100% !important;
+  max-width: 1000px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: 1.5rem !important;
+  padding-right: 1.5rem !important;
+  box-sizing: border-box !important;
+  padding-top: calc(var(--vp-nav-height) + 0.5rem) !important;
+  padding-bottom: 2rem !important;
+}
+
+@media (min-width: 768px) {
+  .blog-post-page {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+    padding-top: calc(var(--vp-nav-height) + 1.5rem) !important;
+    padding-bottom: 4rem !important;
+  }
+}
+
+.blog-post-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+}
+
+.blog-content-col {
+  width: 100%;
+  min-width: 0;
+  /* Prevent Beercss style inheritance */
+  background: transparent !important;
+  box-shadow: none !important;
+  border: none !important;
+  padding: 0 !important;
+}
+
+.blog-sidebar-col {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+@media (min-width: 1024px) {
+  .blog-post-layout {
+    grid-template-columns: minmax(0, 1fr) 280px;
+    gap: 4rem;
+    align-items: start;
+  }
+  .blog-sidebar-col {
+    position: sticky !important;
+    align-self: start !important;
+    top: calc(var(--vp-nav-height) + 2rem) !important;
+    max-height: calc(100vh - var(--vp-nav-height) - 4rem);
+    overflow-y: auto;
+    scrollbar-width: none; /* Hide scrollbar for cleaner look */
+  }
+  .blog-sidebar-col::-webkit-scrollbar {
+    display: none;
+  }
+}
+
+.blog-post-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: 1.5rem;
+}
+
+@media (min-width: 768px) {
+  .blog-post-title {
+    font-size: 36px;
+    line-height: 44px;
+  }
+}
+
+.blog-metadata {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 1.5rem;
+  margin-bottom: 1rem;
+}
+
+.metadata-item {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.metadata-icon {
+  font-size: 1.1rem !important;
+  color: #64748b;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  transform: translateY(
+    0.5px
+  ); /* Micro-adjustment for perfect vertical alignment */
+}
+
+.metadata-text {
+  font-size: 0.875rem;
+  color: #64748b;
+  line-height: 1.2;
+}
+
+.label-text {
+  margin-right: -0.125rem;
+}
+
+.author-item {
+  display: inline-flex;
+  align-items: center;
+}
+
+.author-link-active {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--vp-c-brand, #004170) !important;
+  text-decoration: none;
+  transition:
+    color 0.15s ease,
+    text-decoration 0.15s ease;
+  line-height: 1.2;
+}
+
+.author-link-active:hover {
+  color: var(--vp-c-brand-next, #002d50) !important;
+  text-decoration: underline !important;
+}
+
+.author-separator {
+  color: #64748b;
+  margin-right: 0.25rem;
+  font-size: 0.875rem;
+}
+
+.sidebar-widget {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.sidebar-title {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b; /* slate-500 */
+  border-bottom: 1px solid #f1f5f9; /* slate-100 */
+  padding-bottom: 0.5rem;
+  margin: 0;
+}
+
+.sidebar-tags-container {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.5rem !important;
+  margin-top: 0.25rem !important;
+}
+
+.sidebar-tag {
+  display: inline-flex !important;
+  align-items: center !important;
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  padding: 0.25rem 0.75rem !important;
+  border-radius: 4px !important;
+  text-decoration: none !important;
+  line-height: 1.2 !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+.sidebar-tag:hover {
+  opacity: 0.8 !important;
+  transform: translateY(-1px) !important;
+}
+
+.post-tags-container {
+  display: flex !important;
+  flex-wrap: wrap !important;
+  gap: 0.5rem !important;
+  margin-top: 0.75rem !important;
+}
+
+.post-tag {
+  display: inline-flex !important;
+  align-items: center !important;
+  font-size: 0.75rem !important;
+  font-weight: 600 !important;
+  padding: 0.25rem 0.75rem !important;
+  border-radius: 4px !important;
+  text-decoration: none !important;
+  line-height: 1.2 !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
+}
+
+.post-tag:hover {
+  opacity: 0.8 !important;
+  transform: translateY(-1px) !important;
+}
+
+/* Force VPDocAsideOutline to be visible on all screen sizes in our custom layout */
+:deep(.VPDocAsideOutline) {
+  display: block !important;
+}
+
+:deep(.VPDocAsideOutline.has-outline) {
+  display: block !important;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>
+
+<style>
+/* Global override for main tag to ensure position: sticky is never blocked on blog pages */
+main {
+  overflow: visible !important;
+}
+</style>

package/src/components/CTASection.vue

@@ -4,7 +4,7 @@
     :class="
       dark !== undefined
         ? 'primary primary-gradient-bg'
-        : 'surface-container-low'
+        : 'surface-container-lowest'
     "
   >
     <div class="large-space"></div>
@@ -18,7 +18,7 @@
         v-if="primaryButton"
         class="button extra small-margin responsive-mobile"
         :class="dark !== undefined ? 'surface' : 'primary'"
-        :href="primaryLink"
+        :href="resolvedPrimaryLink"
         @click="
           trackEvent(['CTA', 'Click', 'CTA Section Primary', primaryButton])
         "
@@ -27,7 +27,7 @@
       <a
         v-if="secondaryButton"
         class="button extra small-margin secondary responsive-mobile"
-        :href="secondaryLink"
+        :href="resolvedSecondaryLink"
         @click="
           trackEvent(['CTA', 'Click', 'CTA Section Secondary', secondaryButton])
         "
@@ -37,7 +37,7 @@
         v-if="altButton"
         class="button border extra small-margin responsive-mobile"
         :class="dark !== undefined ? 'white-text' : ''"
-        :href="altLink"
+        :href="resolvedAltLink"
         @click="trackEvent(['CTA', 'Click', 'CTA Section Alt', altButton])"
         >{{ altButton }}</a
       >
@@ -49,6 +49,8 @@
 </template>
 
 <script setup>
+import { computed } from "vue";
+import { withBase } from "vitepress";
 import { trackEvent } from "../helpers";
 const props = defineProps([
   "dark",
@@ -61,6 +63,18 @@ const props = defineProps([
   "tagline",
   "title",
 ]);
+
+function resolveLink(link) {
+  if (!link) return "";
+  if (link.startsWith("http") || link.startsWith("//")) return link;
+  const base = withBase("/");
+  if (base && base !== "/" && link.startsWith(base)) return link;
+  return link.startsWith("/") ? withBase(link) : withBase("/" + link);
+}
+
+const resolvedPrimaryLink = computed(() => resolveLink(props.primaryLink));
+const resolvedSecondaryLink = computed(() => resolveLink(props.secondaryLink));
+const resolvedAltLink = computed(() => resolveLink(props.altLink));
 </script>
 
 <style>