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

package/src/components/BlogList.vue

@@ -0,0 +1,636 @@
+<template>
+  <div class="blog-landing max-w-[1200px] mx-auto px-6 md:px-8">
+    <!-- Page Header -->
+    <div class="blog-landing-header" role="banner">
+      <div class="flex flex-col md:flex-row md:items-end justify-between gap-6">
+        <div>
+          <h1 class="blog-landing-title">
+            EOX Blog
+          </h1>
+          <p class="blog-landing-subtitle">
+            Insights, updates, and deep dives from our geospatial experts.
+          </p>
+        </div>
+      </div>
+
+      <!-- Active Filter Banner -->
+      <div
+        v-if="activeTag || activeAuthor"
+        class="active-filter-banner"
+      >
+        <span class="filter-label">Active filter:</span>
+        <span
+          v-if="activeTag"
+          :style="getTagStyle(activeTag)"
+          class="active-filter-tag shadow-sm inline-flex items-center gap-1.5"
+        >
+          {{ activeTag }}
+        </span>
+        <span
+          v-if="activeAuthor"
+          class="active-filter-author shadow-sm inline-flex items-center gap-1.5"
+        >
+          Author: {{ getAuthorName(activeAuthor) }}
+        </span>
+        <button
+          @click="clearFilters"
+          class="clear-filter-btn"
+        >
+          <i class="mdi mdi-close-circle"></i>
+          <span>Clear Filter</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- Grid of Blog Posts -->
+    <div class="blog-post-layout">
+      <!-- Main Content Column -->
+      <div class="blog-content-col">
+        <div v-if="paginatedPosts.length" class="posts-grid">
+          <FeatureCard
+            v-for="post in paginatedPosts"
+            :key="post.url"
+            :title="post.title"
+            :content="post.excerpt"
+            :image="post.coverImage ? getCoverImageUrl(post.coverImage) : undefined"
+            :date="post.date"
+            :authors="post.authors"
+            :chips="post.tags ? post.tags.map(t => ({ text: t })) : []"
+            :link="{
+              text: 'Read more',
+              href: post.url,
+              target: '_self'
+            }"
+            variant="cover"
+            class="h-full bg-surface-container-low"
+          />
+        </div>
+
+        <!-- Empty State -->
+        <div
+          v-else
+          class="text-center py-20 bg-surface-container-low rounded-2xl border border-slate-100/50 max-w-xl mx-auto my-12"
+        >
+          <i class="mdi mdi-text-search text-5xl text-slate-300 mb-4 block"></i>
+          <h3 class="text-xl font-bold text-slate-900 mb-2">No posts found</h3>
+          <p class="text-slate-500 mb-6">
+            We couldn't find any articles matching your filters.
+          </p>
+          <button
+            @click="clearFilters"
+            class="px-5 py-2.5 text-sm font-semibold text-white bg-primary hover:bg-primary/90 rounded-xl transition-colors shadow-sm"
+          >
+            Clear Filters
+          </button>
+        </div>
+
+        <!-- Pagination -->
+        <nav
+          v-if="totalPages > 1"
+          class="mt-16 flex justify-center items-center gap-2"
+        >
+          <button
+            @click="changePage(currentPage - 1)"
+            :disabled="currentPage === 1"
+            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+          >
+            <span class="sr-only">Previous</span>
+            <i class="mdi mdi-chevron-left text-lg"></i>
+          </button>
+
+          <div class="flex items-center gap-1.5">
+            <button
+              v-for="page in visiblePages"
+              :key="page"
+              @click="changePage(page)"
+              :class="[
+                currentPage === page
+                  ? 'bg-primary text-white border-primary shadow-sm'
+                  : 'border-slate-200 text-slate-600 hover:bg-slate-50',
+              ]"
+              class="min-w-[40px] h-[40px] px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
+            >
+              {{ page }}
+            </button>
+          </div>
+
+          <button
+            @click="changePage(currentPage + 1)"
+            :disabled="currentPage === totalPages"
+            class="p-2.5 rounded-xl border border-slate-200 text-slate-600 hover:bg-slate-50 disabled:opacity-40 disabled:hover:bg-transparent disabled:cursor-not-allowed transition-colors"
+          >
+            <span class="sr-only">Next</span>
+            <i class="mdi mdi-chevron-right text-lg"></i>
+          </button>
+        </nav>
+      </div>
+
+      <!-- Sidebar Column -->
+      <aside class="blog-sidebar-col">
+        <!-- Search widget -->
+        <div class="sidebar-widget">
+          <h3 class="sidebar-title">
+            Search
+          </h3>
+          <div class="search-container">
+            <VPNavBarSearch class="search" />
+          </div>
+        </div>
+
+        <!-- Hot Tags -->
+        <div class="sidebar-widget">
+          <div class="sidebar-title-container">
+            <h3 class="sidebar-title-inline">
+              Hot tags
+            </h3>
+            <a href="/tag" class="see-all-link">
+              <span>see all</span>
+              <i class="mdi mdi-arrow-right"></i>
+            </a>
+          </div>
+          <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>
+      </aside>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, onMounted, watch } from "vue";
+import { useRouter, useData } from "vitepress";
+import { data as posts } from "../posts.data.js";
+import { data as authorsList } from "../authors.data.js";
+import { getTagColor, getTagStyle } from "../tagUtils.js";
+import { VPNavBarSearch } from "vitepress/theme";
+import FeatureCard from "./FeatureCard/Index.vue";
+
+// 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);
+});
+
+const router = useRouter();
+const { params } = useData();
+
+const activeTag = ref("");
+const activeAuthor = ref("");
+const currentPage = ref(1);
+const postsPerPage = 9;
+
+// 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}`;
+}
+
+const tagFromParam = computed(() => {
+  return params.value?.tag || "";
+});
+
+const authorFromParam = computed(() => {
+  return params.value?.author || "";
+});
+
+// Reactively parse query filters on client side
+function updateFilters() {
+  if (typeof window === "undefined") return;
+  const urlParams = new URLSearchParams(window.location.search);
+  activeTag.value = tagFromParam.value || urlParams.get("tag") || "";
+  activeAuthor.value = authorFromParam.value || urlParams.get("author") || "";
+  currentPage.value = 1; // Reset to page 1 on filter change
+}
+
+onMounted(() => {
+  updateFilters();
+  window.addEventListener("popstate", updateFilters);
+});
+
+// Watch router path/search changes
+watch(() => router.route.path, updateFilters);
+watch(tagFromParam, (newVal) => {
+  activeTag.value = newVal;
+});
+watch(authorFromParam, (newVal) => {
+  activeAuthor.value = newVal;
+});
+if (typeof window !== "undefined") {
+  watch(() => window.location.search, updateFilters);
+}
+
+// Filter posts
+const filteredPosts = computed(() => {
+  return posts.filter((post) => {
+    // Filter by tag
+    const tagToFilter = activeTag.value || tagFromParam.value;
+    if (tagToFilter) {
+      const matchTag = post.tags.some(
+        (t) => t.toLowerCase().trim() === tagToFilter.toLowerCase().trim(),
+      );
+      if (!matchTag) return false;
+    }
+    // Filter by author
+    const authorToFilter = activeAuthor.value || authorFromParam.value;
+    if (authorToFilter) {
+      const matchAuthor = post.authors.some(
+        (a) => a.toLowerCase().trim() === authorToFilter.toLowerCase().trim(),
+      );
+      if (!matchAuthor) return false;
+    }
+    return true;
+  });
+});
+
+// Paginated posts
+const paginatedPosts = computed(() => {
+  const startIndex = (currentPage.value - 1) * postsPerPage;
+  return filteredPosts.value.slice(startIndex, startIndex + postsPerPage);
+});
+
+// Total pages
+const totalPages = computed(() => {
+  return Math.ceil(filteredPosts.value.length / postsPerPage);
+});
+
+// Page navigation helper
+function changePage(page) {
+  if (page < 1 || page > totalPages.value) return;
+  currentPage.value = page;
+  if (typeof window !== "undefined") {
+    window.scrollTo({ top: 0, behavior: "smooth" });
+  }
+}
+
+// Generate list of page numbers to render
+const visiblePages = computed(() => {
+  const pages = [];
+  const maxPages = 5;
+  let start = Math.max(1, currentPage.value - Math.floor(maxPages / 2));
+  let end = Math.min(totalPages.value, start + maxPages - 1);
+  if (end - start + 1 < maxPages) {
+    start = Math.max(1, end - maxPages + 1);
+  }
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+  return pages;
+});
+
+// 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",
+  });
+}
+
+// Get author name
+function getAuthorName(authorId) {
+  const auth = authorsList.find((a) => a.id === authorId);
+  return auth ? auth.name : authorId;
+}
+
+function clearFilters() {
+  router.go("/blog");
+}
+</script>
+
+<style scoped>
+.blog-landing {
+  width: 100%;
+  max-width: 1200px !important;
+  margin-left: auto !important;
+  margin-right: auto !important;
+  padding-left: 1rem !important;
+  padding-right: 1rem !important;
+  box-sizing: border-box !important;
+  padding-top: calc(var(--vp-nav-height) + 28px) !important;
+  padding-bottom: 48px !important;
+}
+
+@media (min-width: 640px) {
+  .blog-landing {
+    padding-left: 1.5rem !important;
+    padding-right: 1.5rem !important;
+    padding-top: calc(var(--vp-nav-height) + 40px) !important;
+    padding-bottom: 64px !important;
+  }
+}
+
+@media (min-width: 960px) {
+  .blog-landing {
+    padding-left: 2rem !important;
+    padding-right: 2rem !important;
+    padding-top: calc(var(--vp-nav-height) + 58px) !important;
+    padding-bottom: 96px !important;
+  }
+}
+
+.blog-landing-header {
+  margin-bottom: 2rem;
+  border-bottom: 1px solid #f1f5f9; /* slate-100 */
+  padding-bottom: 1.5rem !important;
+  padding-top: 0 !important;
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+  background: transparent !important;
+  min-height: auto !important;
+  height: auto !important;
+}
+
+.blog-landing-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: 0.5rem;
+}
+
+@media (min-width: 768px) {
+  .blog-landing-title {
+    font-size: 32px;
+    line-height: 40px;
+  }
+}
+
+.blog-landing-subtitle {
+  font-family: "Inter", sans-serif;
+  font-style: normal;
+  font-weight: 400;
+  font-size: 16px;
+  line-height: 24px;
+  letter-spacing: 0.5px;
+  color: #64748b; /* slate-500 */
+  max-width: 620px;
+  margin: 0;
+  padding: 0;
+}
+
+.posts-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 2.5rem;
+}
+
+:deep(.card-cover-link) {
+  max-height: 280px !important;
+}
+
+.blog-post-layout {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2.5rem;
+}
+
+.blog-content-col {
+  width: 100%;
+  min-width: 0;
+}
+
+.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;
+  }
+}
+
+.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-title-container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-bottom: 1px solid #f1f5f9; /* slate-100 */
+  padding-bottom: 0.5rem;
+  margin: 0;
+}
+
+.sidebar-title-inline {
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #64748b; /* slate-500 */
+  margin: 0;
+  padding: 0;
+}
+
+.see-all-link {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--vp-c-brand, #004170);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  transition: opacity 0.2s;
+}
+
+.see-all-link:hover {
+  text-decoration: underline;
+  opacity: 0.8;
+}
+
+.see-all-link i {
+  font-size: 0.75rem;
+}
+
+.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;
+}
+
+/* Active Filter Banner Styles */
+.active-filter-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.75rem;
+  background-color: var(--surface-container-low, #f8fafc);
+  padding: 0.75rem 1.25rem !important;
+  border-radius: 0.75rem;
+  border: 1px solid rgba(226, 232, 240, 0.8); /* slate-200/80 */
+  margin-top: 1.5rem;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.filter-label {
+  font-size: 0.875rem; /* text-sm */
+  color: #64748b; /* slate-500 */
+  font-weight: 500;
+}
+
+.active-filter-tag {
+  display: inline-flex !important;
+  align-items: center !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  padding: 0.25rem 0.75rem !important;
+  border-radius: 4px !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  line-height: 1.2 !important;
+}
+
+.active-filter-author {
+  display: inline-flex !important;
+  align-items: center !important;
+  font-size: 0.75rem !important;
+  font-weight: 700 !important;
+  padding: 0.25rem 0.75rem !important;
+  border-radius: 4px !important;
+  background-color: var(--primary-container) !important;
+  color: var(--primary) !important;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+  line-height: 1.2 !important;
+}
+
+/* Clear Filter Button Reset & Style */
+.clear-filter-btn {
+  /* Complete reset of standard button styling */
+  background: none !important;
+  background-color: transparent !important;
+  border: none !important;
+  outline: none !important;
+  box-shadow: none !important;
+  height: auto !important;
+  min-height: auto !important;
+  width: auto !important;
+  padding: 0 !important;
+  margin: 0 !important;
+  margin-left: 0.5rem !important;
+  
+  display: inline-flex !important;
+  align-items: center !important;
+  gap: 0.375rem !important;
+  font-size: 0.8125rem !important; /* 13px */
+  font-weight: 600 !important;
+  color: #94a3b8 !important; /* slate-400 */
+  cursor: pointer !important;
+  transition: color 0.15s ease !important;
+}
+
+.clear-filter-btn:hover {
+  color: #475569 !important; /* slate-600 */
+  background: none !important;
+  background-color: transparent !important;
+}
+
+.clear-filter-btn i {
+  font-size: 1rem !important;
+  color: inherit !important;
+  vertical-align: middle !important;
+}
+
+.sidebar-tag:hover {
+  opacity: 0.8 !important;
+  transform: translateY(-1px) !important;
+}
+
+.search-container {
+  margin-top: 0.75rem;
+  margin-bottom: 0.5rem;
+}
+
+:deep(.VPNavBarSearch) {
+  padding-left: 0 !important;
+}
+
+.line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+.line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+</style>