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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eox/pages-theme-eox",
-  "version": "2.0.0-alpha.2",
+  "version": "2.0.0-alpha.3",
   "type": "module",
   "description": "Vitepress Theme with EOX branding",
   "main": "src/index.js",

package/src/components/BlogList.vue

@@ -4,9 +4,7 @@
     <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>
+          <h1 class="blog-landing-title">EOX Blog</h1>
           <p class="blog-landing-subtitle">
             Insights, updates, and deep dives from our geospatial experts.
           </p>
@@ -14,10 +12,7 @@
       </div>
 
       <!-- Active Filter Banner -->
-      <div
-        v-if="activeTag || activeAuthor"
-        class="active-filter-banner"
-      >
+      <div v-if="activeTag || activeAuthor" class="active-filter-banner">
         <span class="filter-label">Active filter:</span>
         <span
           v-if="activeTag"
@@ -32,10 +27,7 @@
         >
           Author: {{ getAuthorName(activeAuthor) }}
         </span>
-        <button
-          @click="clearFilters"
-          class="clear-filter-btn"
-        >
+        <button @click="clearFilters" class="clear-filter-btn">
           <i class="mdi mdi-close-circle"></i>
           <span>Clear Filter</span>
         </button>
@@ -52,14 +44,16 @@
             :key="post.url"
             :title="post.title"
             :content="post.excerpt"
-            :image="post.coverImage ? getCoverImageUrl(post.coverImage) : undefined"
+            :image="
+              post.coverImage ? getCoverImageUrl(post.coverImage) : undefined
+            "
             :date="post.date"
             :authors="post.authors"
-            :chips="post.tags ? post.tags.map(t => ({ text: t })) : []"
+            :chips="post.tags ? post.tags.map((t) => ({ text: t })) : []"
             :link="{
               text: 'Read more',
               href: post.url,
-              target: '_self'
+              target: '_self',
             }"
             variant="cover"
             class="h-full bg-surface-container-low"
@@ -87,18 +81,18 @@
         <!-- Pagination -->
         <nav
           v-if="totalPages > 1"
-          class="mt-16 flex justify-center items-center gap-2"
+          class="mt-16 flex justify-center items-center gap-1 sm: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"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center 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">
+          <div class="flex items-center gap-1 sm:gap-1.5">
             <button
               v-for="page in visiblePages"
               :key="page"
@@ -108,7 +102,7 @@
                   ? '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"
+              class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] px-2 sm:px-3 font-semibold text-sm rounded-xl border flex items-center justify-center transition-all duration-150"
             >
               {{ page }}
             </button>
@@ -117,7 +111,7 @@
           <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"
+            class="min-w-[32px] sm:min-w-[40px] h-[32px] sm:h-[40px] flex items-center justify-center 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>
@@ -129,9 +123,7 @@
       <aside class="blog-sidebar-col">
         <!-- Search widget -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Search
-          </h3>
+          <h3 class="sidebar-title">Search</h3>
           <div class="search-container">
             <VPNavBarSearch class="search" />
           </div>
@@ -140,9 +132,7 @@
         <!-- Hot Tags -->
         <div class="sidebar-widget">
           <div class="sidebar-title-container">
-            <h3 class="sidebar-title-inline">
-              Hot tags
-            </h3>
+            <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>
@@ -522,7 +512,9 @@ function clearFilters() {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -584,7 +576,7 @@ function clearFilters() {
   padding: 0 !important;
   margin: 0 !important;
   margin-left: 0.5rem !important;
-  
+
   display: inline-flex !important;
   align-items: center !important;
   gap: 0.375rem !important;

package/src/components/BlogPost.vue

@@ -30,7 +30,7 @@
                 {{ 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>
@@ -40,13 +40,12 @@
                 :key="authorId"
                 class="author-item"
               >
-                <a
-                  :href="`/author/${authorId}/`"
-                  class="author-link-active"
-                >
+                <a :href="`/author/${authorId}/`" class="author-link-active">
                   {{ getAuthorName(authorId) }}
                 </a>
-                <span v-if="idx < authors.length - 1" class="author-separator">,</span>
+                <span v-if="idx < authors.length - 1" class="author-separator"
+                  >,</span
+                >
               </span>
             </span>
           </div>
@@ -77,18 +76,13 @@
       <!-- Sidebar Column -->
       <div class="blog-sidebar-col">
         <!-- Table of Contents (On This Page) -->
-        <div
-          v-if="headers && headers.length"
-          class="toc-container"
-        >
+        <div v-if="headers && headers.length" class="toc-container">
           <VPDocAsideOutline />
         </div>
 
         <!-- Hot Tags -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Hot tags
-          </h3>
+          <h3 class="sidebar-title">Hot tags</h3>
           <div class="sidebar-tags-container">
             <a
               v-for="tag in calculatedHotTags"
@@ -104,9 +98,7 @@
 
         <!-- Recent Posts -->
         <div class="sidebar-widget">
-          <h3 class="sidebar-title">
-            Recent posts
-          </h3>
+          <h3 class="sidebar-title">Recent posts</h3>
           <div class="space-y-4">
             <div
               v-for="post in calculatedRecentPosts"
@@ -320,7 +312,9 @@ const calculatedHotTags = computed(() => {
   align-items: center;
   justify-content: center;
   height: 100%;
-  transform: translateY(0.5px); /* Micro-adjustment for perfect vertical alignment */
+  transform: translateY(
+    0.5px
+  ); /* Micro-adjustment for perfect vertical alignment */
 }
 
 .metadata-text {
@@ -343,7 +337,9 @@ const calculatedHotTags = computed(() => {
   font-weight: 600;
   color: var(--vp-c-brand, #004170) !important;
   text-decoration: none;
-  transition: color 0.15s ease, text-decoration 0.15s ease;
+  transition:
+    color 0.15s ease,
+    text-decoration 0.15s ease;
   line-height: 1.2;
 }
 
@@ -391,7 +387,9 @@ const calculatedHotTags = computed(() => {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 
@@ -416,7 +414,9 @@ const calculatedHotTags = computed(() => {
   border-radius: 4px !important;
   text-decoration: none !important;
   line-height: 1.2 !important;
-  transition: opacity 0.2s ease, transform 0.1s ease !important;
+  transition:
+    opacity 0.2s ease,
+    transform 0.1s ease !important;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
 }
 

package/src/components/FeatureCard/Index.vue

@@ -60,7 +60,10 @@ const iconStyle = {
 
 // Check if we should render a full-width cover image
 const isCoverLayout = computed(() => {
-  return props.image && (props.variant === "cover" || props.date || props.authors.length);
+  return (
+    props.image &&
+    (props.variant === "cover" || props.date || props.authors.length)
+  );
 });
 
 // Check if the card itself is fully clickable (has a link but NO link text)
@@ -71,7 +74,7 @@ const isClickableCard = computed(() => {
 function getAuthorName(authorId) {
   if (!authorId) return "EOX Experts";
   const author = authorsList.find(
-    (a) => a.id.toLowerCase().trim() === authorId.toLowerCase().trim()
+    (a) => a.id.toLowerCase().trim() === authorId.toLowerCase().trim(),
   );
   return author ? author.name : authorId;
 }
@@ -82,31 +85,31 @@ function getTagStyle(tag) {
     return {
       backgroundColor: "rgba(255, 94, 94, 0.15)",
       border: "1px solid rgb(255, 94, 94)",
-      color: "#d32f2f"
+      color: "#d32f2f",
     };
   } else if (color.startsWith("rgb(0, 177, 176)")) {
     return {
       backgroundColor: "rgba(0, 177, 176, 0.15)",
       border: "1px solid rgb(0, 177, 176)",
-      color: "#00796b"
+      color: "#00796b",
     };
   } else if (color.startsWith("rgb(219, 173, 66)")) {
     return {
       backgroundColor: "rgba(219, 173, 66, 0.15)",
       border: "1px solid rgb(219, 173, 66)",
-      color: "#f57c00"
+      color: "#f57c00",
     };
   } else if (color.startsWith("rgb(218, 71, 228)")) {
     return {
       backgroundColor: "rgba(218, 71, 228, 0.15)",
       border: "1px solid rgb(218, 71, 228)",
-      color: "#c2185b"
+      color: "#c2185b",
     };
   }
   return {
     backgroundColor: "rgba(0, 0, 0, 0.05)",
     border: "1px solid rgba(0, 0, 0, 0.1)",
-    color: "#475569"
+    color: "#475569",
   };
 }
 
@@ -126,7 +129,7 @@ function formatDate(dateString) {
     class="vertical large-padding no-margin theme-feature-card"
     :class="[
       isClickableCard ? 'small-elevate clickable-card' : 'no-elevate',
-      isCoverLayout ? 'has-cover-image' : ''
+      isCoverLayout ? 'has-cover-image' : '',
     ]"
   >
     <!-- Cover Image for cover/blog/rich cards -->
@@ -146,7 +149,12 @@ function formatDate(dateString) {
         class="icon"
       ></div>
       <!-- Render small icon image only if NOT rendering a full cover image -->
-      <img v-else-if="image && !isCoverLayout" :src="image" alt="" class="icon" />
+      <img
+        v-else-if="image && !isCoverLayout"
+        :src="image"
+        alt=""
+        class="icon"
+      />
 
       <!-- Metadata & Tags directly under place/author -->
       <div v-if="date || (authors && authors.length)" class="metadata-wrapper">
@@ -159,16 +167,25 @@ function formatDate(dateString) {
             <span class="author-icon">
               <i class="mdi mdi-account-outline"></i>
             </span>
-            <span v-for="(authorId, idx) in authors" :key="authorId" class="author-item">
-              <a :href="`/author/${authorId}/`" class="author-link">{{ getAuthorName(authorId) }}</a><span v-if="idx < authors.length - 1" class="author-separator">,</span>
+            <span
+              v-for="(authorId, idx) in authors"
+              :key="authorId"
+              class="author-item"
+            >
+              <a :href="`/author/${authorId}/`" class="author-link">{{
+                getAuthorName(authorId)
+              }}</a
+              ><span v-if="idx < authors.length - 1" class="author-separator"
+                >,</span
+              >
             </span>
           </span>
         </div>
 
         <!-- Tags directly under metadata if chips are provided and this is a rich card -->
         <div v-if="chips && chips.length" class="blog-tags-container">
-          <a 
-            v-for="chip in chips" 
+          <a
+            v-for="chip in chips"
             :key="chip.text"
             :href="chip.link || chip.href || `/tag/${chip.text}/`"
             :style="getTagStyle(chip.text)"
@@ -211,7 +228,10 @@ function formatDate(dateString) {
         </template>
       </div>
 
-      <p v-if="metadata && metadata.length && !date && !authors.length" class="small-text">
+      <p
+        v-if="metadata && metadata.length && !date && !authors.length"
+        class="small-text"
+      >
         <span
           v-for="(item, index) in metadata"
           :key="index"
@@ -295,13 +315,17 @@ function formatDate(dateString) {
 /* Clickable Cards Hover System */
 .theme-feature-card.clickable-card {
   cursor: pointer;
-  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
+  transition:
+    transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
+    box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
   will-change: transform, box-shadow;
 }
 
 .theme-feature-card.clickable-card:hover {
   transform: translateY(-4px) !important;
-  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.04) !important;
+  box-shadow:
+    0 12px 28px rgba(0, 0, 0, 0.12),
+    0 4px 8px rgba(0, 0, 0, 0.04) !important;
 }
 
 .small-chip {

package/src/components/HeroSection.vue

@@ -26,7 +26,7 @@
         style="grid-area: image"
         :src="withBase(frontmatter.hero.image.src)"
       />
-      <div class="title" style="grid-area: title; align-content: end">
+      <div class="title" style="grid-area: title">
         <h1 class="bold" style="font-size: clamp(2.25rem, 5vw, 3.3rem)">
           {{ frontmatter.hero.text }}
         </h1>
@@ -77,15 +77,15 @@ const { frontmatter } = useData();
 
 <style scoped>
 header {
+  position: relative;
   margin-top: calc(var(--vp-nav-height) * -1);
-  padding-top: 10rem !important;
-  padding-bottom: 10rem !important;
-  height: 76dvh;
-  max-height: 1000px;
+  padding-top: calc(var(--vp-nav-height) + 3.5rem) !important;
+  padding-bottom: 4.5rem !important;
+  min-height: 380px;
 }
 @media (max-width: 1024px) {
   header {
-    padding: 0 1.5rem !important;
+    padding: calc(var(--vp-nav-height) + 2rem) 1.5rem 3rem !important;
   }
   header h1.large {
     font-size: 3rem;

package/src/components/TagList.vue

@@ -1,9 +1,7 @@
 <template>
   <div class="tags-page">
     <header class="tags-header">
-      <h1 class="tags-title">
-        Blog Tags
-      </h1>
+      <h1 class="tags-title">Blog Tags</h1>
       <p class="tags-subtitle">
         Explore our blog posts by topics and technology pillars.
       </p>
@@ -60,7 +58,9 @@
       </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>
+        <a href="/software-products" class="legend-link"
+          >Solutions & Services</a
+        >
         page.
       </p>
     </footer>
@@ -180,7 +180,9 @@ const allTagsList = computed(() => {
   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 */
+  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;
 }
 
@@ -202,14 +204,19 @@ const allTagsList = computed(() => {
   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;
+  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);
+  box-shadow:
+    0 4px 6px -1px rgba(0, 0, 0, 0.05),
+    0 2px 4px -2px rgba(0, 0, 0, 0.05);
 }
 
 .tag-count {

package/src/components/TeamPage.vue

@@ -26,12 +26,20 @@
         v-for="member in sortedTeamMembers"
         :key="member.id"
         :title="member.name"
-        :image="member.image ? withBase(member.image) : withBase('/images/team/new_member.jpg')"
-        :link="memberHasPosts(member.id) ? {
-          text: 'View blog posts',
-          href: `/author/${member.id}/`,
-          target: '_self'
-        } : undefined"
+        :image="
+          member.image
+            ? withBase(member.image)
+            : withBase('/images/team/new_member.jpg')
+        "
+        :link="
+          memberHasPosts(member.id)
+            ? {
+                text: 'View blog posts',
+                href: `/author/${member.id}/`,
+                target: '_self',
+              }
+            : undefined
+        "
         variant="cover"
         class="bg-surface-container-low team-member-card"
       >
@@ -43,11 +51,7 @@
         <span class="member-divider"></span>
 
         <!-- Description / Bio -->
-        <span
-          v-if="member.bio"
-          class="member-bio"
-          v-html="member.bio"
-        ></span>
+        <span v-if="member.bio" class="member-bio" v-html="member.bio"></span>
 
         <!-- Social Links row at the bottom of slot -->
         <span class="member-footer">

package/src/style.css

@@ -374,7 +374,11 @@ eox-feedback-button {
 }
 
 /* Constrain standard reading elements to 1000px max-width, while letting full-width custom page components span 1200px */
-.layout-page .VPPage > div > div > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
+.layout-page
+  .VPPage
+  > div
+  > div
+  > :is(p, ul, ol, blockquote, h1, h2, h3, h4, h5, h6, pre, table) {
   max-width: 1000px;
   margin-inline-start: 0;
   margin-inline-end: auto;
@@ -473,7 +477,9 @@ eox-feedback-button {
   text-decoration: underline;
   text-underline-offset: 3px;
   text-decoration-thickness: 1px;
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
 }
 
 .layout-page .VPPage a:not(.button):hover {
@@ -505,3 +511,57 @@ eox-feedback-button {
   overflow-x: auto;
 }
 
+/* Local Search styles overrides */
+.VPLocalSearchBox .search-actions button {
+  height: 36px !important;
+  width: 36px !important;
+  min-width: 0 !important;
+  max-width: none !important;
+  border-radius: 50% !important;
+  padding: 0 !important;
+  display: inline-flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  border: none !important;
+  background: transparent !important;
+  box-shadow: none !important;
+  color: var(--vp-c-text-2) !important;
+  transition:
+    background-color 0.15s,
+    color 0.15s !important;
+}
+
+.VPLocalSearchBox .search-actions button:not([disabled]):hover {
+  background-color: var(--vp-c-default-soft) !important;
+  color: var(--vp-c-brand-1) !important;
+}
+
+.VPLocalSearchBox .search-actions button:disabled {
+  opacity: 0.37 !important;
+  background: transparent !important;
+  color: var(--vp-c-text-3) !important;
+}
+
+.VPLocalSearchBox .results {
+  list-style: none !important;
+  padding-left: 0 !important;
+  margin: 0 !important;
+}
+
+.VPLocalSearchBox .results li {
+  list-style: none !important;
+  margin: 0 !important;
+}
+
+/* Screen Reader Only Utility */
+.sr-only {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  white-space: nowrap !important;
+  border-width: 0 !important;
+}

package/src/tagUtils.js

@@ -103,31 +103,31 @@ export function getTagStyle(tag) {
     return {
       backgroundColor: "rgba(255, 94, 94, 0.15)",
       border: "1px solid rgb(255, 94, 94)",
-      color: "#d32f2f"
+      color: "#d32f2f",
     };
   } else if (color.startsWith("rgb(0, 177, 176)")) {
     return {
       backgroundColor: "rgba(0, 177, 176, 0.15)",
       border: "1px solid rgb(0, 177, 176)",
-      color: "#00796b"
+      color: "#00796b",
     };
   } else if (color.startsWith("rgb(219, 173, 66)")) {
     return {
       backgroundColor: "rgba(219, 173, 66, 0.15)",
       border: "1px solid rgb(219, 173, 66)",
-      color: "#f57c00"
+      color: "#f57c00",
     };
   } else if (color.startsWith("rgb(218, 71, 228)")) {
     return {
       backgroundColor: "rgba(218, 71, 228, 0.15)",
       border: "1px solid rgb(218, 71, 228)",
-      color: "#c2185b"
+      color: "#c2185b",
     };
   }
   return {
     backgroundColor: "rgba(0, 0, 0, 0.05)",
     border: "1px solid rgba(0, 0, 0, 0.1)",
-    color: "#475569"
+    color: "#475569",
   };
 }
 

package/src/vitepressConfig.mjs

@@ -98,8 +98,8 @@ export const generate = (brandConfig) => {
     cleanUrls: true,
     markdown: {
       headers: {
-        level: [2, 3, 4, 5, 6]
-      }
+        level: [2, 3, 4, 5, 6],
+      },
     },
     rewrites: {
       ...getBlogRewrites(),