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

package/src/components/BlogPost.vue

@@ -0,0 +1,450 @@
+<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="`/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="`/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="`/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="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 } 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("/") || coverImage.startsWith("http")) {
+    return coverImage;
+  }
+  return `/images/${coverImage}`;
+}
+
+// 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(() => {
+  return posts.filter((p) => p.url !== page.value.url).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>