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

package/src/style.css

@@ -2,6 +2,7 @@
 
 :root {
   --vp-nav-height: 58px;
+  --vp-nav-logo-height: 28px;
 }
 :root:has(.top-nav.at-top) {
   --vp-nav-height: 90px;
@@ -49,6 +50,11 @@ body {
   transition: padding-top 0.3s ease-in-out;
 }
 
+main {
+  padding: 0 !important;
+  margin: 0 !important;
+}
+
 *:has(> nav.top:not(.s, .m, .l)) {
   padding-block-start: 0;
 }
@@ -86,6 +92,91 @@ body {
   padding-right: 0;
 }
 
+/* Ensure full-width layout sections touch and stack seamlessly without gaps */
+.VPHome .full-width:not(.home-hero-section) {
+  margin-block-start: 0 !important;
+  margin-block-end: 0 !important;
+}
+
+.layout-blog .cta-section {
+  margin-block-end: 0 !important;
+}
+
+/* When a section follows a title (title plus section combination), eliminate start padding */
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + section,
+:is(
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6,
+    header,
+    .section-header-group,
+    [class*="section-title"]
+  )
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + :not(section, hr)
+  + section {
+  padding-block-start: 0 !important;
+  padding-top: 0 !important;
+}
+
 .VPHome .vp-doc a {
   font-weight: 400;
   color: inherit;
@@ -143,7 +234,8 @@ footer {
   margin-top: 0 !important;
   position: relative;
   z-index: var(--vp-z-index-footer);
-  background: var(--surface-container-low);
+  background: var(--surface-container-lowest);
+  border-top: 1px solid var(--vp-c-divider, rgba(0, 0, 0, 0.08));
 }
 
 /**/
@@ -168,14 +260,24 @@ button.text:hover,
   }
 }
 
-.primary-gradient-bg {
+.hero-gradient-bg {
+  /*Fallback*/
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    #000c14 0%,
+    var(--primary, #004170) 100%
+  ) !important;
+}
+
+.primary-gradient-bg,
+.dark-section-gradient-bg {
   /*Fallback*/
-  background: var(--primary);
-  background: radial-gradient(
-    74.48% 130.95% at 50% -12.27%,
-    hsl(from var(--primary) h s calc(l + 7)) 0%,
-    var(--primary) 45%,
-    hsl(from var(--primary) h s calc(l - 20)) 100%
+  background: #000c14;
+  background: linear-gradient(
+    180deg,
+    var(--primary, #004170) 0%,
+    #000c14 100%
   ) !important;
 }
 
@@ -345,3 +447,282 @@ eox-feedback-button {
     z-index: calc(var(--vp-z-index-sidebar) + 2);
   }
 }
+
+/* ==========================================================================
+   Simple Pages (layout: page) styling improvements
+   ========================================================================== */
+
+.layout-page {
+  background-color: var(--surface) !important;
+}
+
+.layout-page .VPPage {
+  max-width: 1200px;
+  margin-inline: auto;
+  padding-block-start: 66px; /* Exactly 156px from top of viewport (90px navbar + 66px padding) */
+  padding-block-end: 96px;
+  padding-inline: 24px;
+}
+
+/* Remove double inner padding on custom layout elements to ensure absolute alignment */
+.layout-page .VPPage .holder {
+  padding-inline: 0 !important;
+}
+
+/* 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) {
+  max-width: 1000px;
+  margin-inline-start: 0;
+  margin-inline-end: auto;
+  width: 100%;
+}
+
+@media (max-width: 960px) {
+  .layout-page .VPPage {
+    padding-inline: 24px;
+    padding-block-start: 48px;
+    padding-block-end: 64px;
+  }
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage {
+    padding-inline: 16px;
+    padding-block-start: 36px;
+    padding-block-end: 48px;
+  }
+}
+
+/* Typography on simple pages inside main page content */
+.layout-page .VPPage h1 {
+  font-size: 2rem; /* Exactly 32px */
+  line-height: 1.25;
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  color: var(--on-surface);
+  font-weight: 700;
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage h1 {
+    font-size: 1.75rem; /* 28px on mobile */
+  }
+}
+
+.layout-page .VPPage h2 {
+  font-size: 1.5rem; /* Exactly 24px */
+  line-height: 1.35;
+  margin-block-start: 3rem;
+  margin-block-end: 1.125rem;
+  color: var(--on-surface);
+  border-top: none;
+}
+
+@media (max-width: 640px) {
+  .layout-page .VPPage h2 {
+    font-size: 1.375rem; /* 22px on mobile */
+  }
+}
+
+.layout-page .VPPage h3 {
+  font-size: clamp(1.2rem, 3.5vw, 1.45rem);
+  line-height: 1.3;
+  margin-block-start: 2.25rem;
+  margin-block-end: 0.875rem;
+  color: var(--on-surface);
+}
+
+.layout-page .VPPage h4 {
+  font-size: 1.15rem;
+  line-height: 1.4;
+  margin-block-start: 1.75rem;
+  margin-block-end: 0.75rem;
+  color: var(--on-surface);
+}
+
+.layout-page .VPPage p {
+  font-size: 1rem; /* Exactly 16px */
+  line-height: 1.65;
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  color: var(--on-surface);
+}
+
+/* Lists */
+.layout-page .VPPage ul,
+.layout-page .VPPage ol {
+  margin-block-start: 0;
+  margin-block-end: 1.5rem;
+  padding-inline-start: 1.5rem;
+}
+
+.layout-page .VPPage li {
+  margin-block-end: 0.5rem;
+  line-height: 1.6;
+  font-size: 1rem; /* Exactly 16px */
+  color: var(--on-surface);
+}
+
+/* Inline links readability fix */
+.layout-page .VPPage a:not(.button) {
+  color: var(--primary);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  text-decoration-thickness: 1px;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
+}
+
+.layout-page .VPPage a:not(.button):hover {
+  opacity: 0.85;
+  text-decoration-thickness: 2px;
+}
+
+/* Scroll Anchors, Blockquotes & Code */
+.layout-page .VPPage blockquote {
+  border-inline-start: 4px solid var(--primary);
+  padding-inline-start: 1.25rem;
+  margin-inline: 0;
+  margin-block: 2rem;
+  font-style: italic;
+  color: var(--on-surface-variant);
+}
+
+.layout-page .VPPage sup,
+.layout-page .VPPage sub {
+  font-size: 0.8rem;
+  line-height: 1;
+}
+
+.layout-page .VPPage pre {
+  margin-block: 1.5rem;
+  padding: 1rem;
+  border-radius: 8px;
+  background-color: var(--surface-container-low);
+  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;
+}
+
+/* ==========================================================================
+   Links in text hover underline
+   ========================================================================== */
+
+a.link {
+  text-decoration: none;
+}
+
+:is(p, li, blockquote, figcaption, td, th, dd, dt, .card-body-text)
+  a:not(
+    .button,
+    [role="button"],
+    .chip,
+    .badge,
+    .circle,
+    .header-anchor,
+    .card-cover-link,
+    .grid-link,
+    .sidebar-tag,
+    .post-tag,
+    .clickable-chip,
+    .tag-link,
+    .social-link-btn,
+    .custom-cta-button,
+    :has(> img:only-child),
+    :has(> svg:only-child)
+  ):hover,
+a.link:hover,
+.vp-doc
+  a:not(
+    .button,
+    [role="button"],
+    .header-anchor,
+    .card-cover-link,
+    .grid-link,
+    .sidebar-tag,
+    .post-tag,
+    .clickable-chip,
+    .tag-link,
+    .social-link-btn,
+    .custom-cta-button,
+    :has(> img:only-child),
+    :has(> svg:only-child)
+  ):hover {
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Ensure navigation bars, dropdown menus, sidebars, and outline links do not get hover underline unless explicitly marked .link */
+:is(
+    nav,
+    menu,
+    dialog,
+    .top-nav,
+    .social-links,
+    .VPSidebar,
+    .VPDocAsideOutline,
+    .VPLocalSearchBox
+  )
+  a:not(.link):hover,
+menu a:hover,
+menu li a:hover {
+  text-decoration: none !important;
+}

package/src/tagUtils.js

@@ -0,0 +1,148 @@
+export const tagThemes = [
+  // Managed cloud workspace (Category 0)
+  [
+    "eoxhub",
+    "eurodatacube",
+    "cloud-processing",
+    "mundi",
+    "jupyter",
+    "vre",
+    "processing",
+  ],
+  // Data management (Category 1)
+  [
+    "data-access",
+    "catalog",
+    "eo-data",
+    "open-search",
+    "ard",
+    "eoxserver",
+    "django",
+    "sxcat",
+    "data-cubes",
+    "opensearch",
+  ],
+  // Data visualization (Category 2)
+  [
+    "3d",
+    "animation",
+    "cesium",
+    "globe",
+    "ndvi",
+    "plotty",
+    "graphly",
+    "geotiff-js",
+    "client",
+    "visualization",
+    "cog",
+    "geotiff",
+    "openlayers",
+    "vue-js",
+    "eoxc",
+    "dashboard",
+    "javascript",
+    "leaflet",
+    "d3",
+    "webgl",
+    "video",
+    "data visualization",
+  ],
+  // Data products (Category 3)
+  [
+    "eoxcloudless",
+    "eoxmaps",
+    "s2cloudless",
+    "maps",
+    "sentinel-2",
+    "labels",
+    "cloudless-mosaic",
+    "voronoi-diagram",
+    "openstreetmap",
+    "mapchete",
+  ],
+];
+
+export const tagColors = [
+  "rgb(255, 94, 94)", // Managed cloud workspace
+  "rgb(0, 177, 176)", // Data management
+  "rgb(219, 173, 66)", // Data visualization
+  "rgb(218, 71, 228)", // Data products
+];
+
+export const tagCategories = [
+  "Managed cloud workspace",
+  "Data management",
+  "Data visualization",
+  "Data products",
+];
+
+/**
+ * Get color for a given tag
+ * @param {string} tag
+ * @returns {string} color hex/rgb
+ */
+export function getTagColor(tag) {
+  if (!tag) return "#e0e0e0";
+  const cleanTag = tag.toLowerCase().trim();
+  for (let i = 0; i < tagThemes.length; i++) {
+    if (tagThemes[i].includes(cleanTag)) {
+      return tagColors[i];
+    }
+  }
+  return "#e0e0e0";
+}
+
+/**
+ * Get style object for a given tag
+ * @param {string} tag
+ * @returns {object} style object
+ */
+export function getTagStyle(tag) {
+  const color = getTagColor(tag);
+  if (color.startsWith("rgb(255, 94, 94)")) {
+    return {
+      backgroundColor: "rgba(255, 94, 94, 0.15)",
+      border: "1px solid rgb(255, 94, 94)",
+      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",
+    };
+  } 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",
+    };
+  } 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",
+    };
+  }
+  return {
+    backgroundColor: "rgba(0, 0, 0, 0.05)",
+    border: "1px solid rgba(0, 0, 0, 0.1)",
+    color: "#475569",
+  };
+}
+
+/**
+ * Get category name for a given tag
+ * @param {string} tag
+ * @returns {string} category name
+ */
+export function getTagCategory(tag) {
+  if (!tag) return "Other";
+  const cleanTag = tag.toLowerCase().trim();
+  for (let i = 0; i < tagThemes.length; i++) {
+    if (tagThemes[i].includes(cleanTag)) {
+      return tagCategories[i];
+    }
+  }
+  return "Other";
+}

package/src/team.data.js

@@ -1,6 +1,6 @@
 import { createContentLoader } from "vitepress";
 
-export default createContentLoader("team/*.md", {
+export default createContentLoader("_team/*.md", {
   transform(rawData) {
     return rawData
       .filter((page) => {

package/src/vitepressConfig.mjs

@@ -1,3 +1,90 @@
+import fs from "node:fs";
+import path from "node:path";
+
+function copyThemePages() {
+  try {
+    const themeSrcDir = path.dirname(new URL(import.meta.url).pathname);
+    const pages = [
+      { src: "blog.md", dest: "blog.md" },
+      { src: "tag.md", dest: "tag.md" },
+      { src: "tag/[tag].md", dest: "tag/[tag].md" },
+      {
+        ...(() => {
+          // Let's resolve the actual pages dir inside the theme package
+          // This is robust on any npm installation structure
+          return {};
+        })(),
+      },
+    ];
+
+    // Better yet, just copy our built-in custom pages directly relative to this module
+    const filesToCopy = [
+      "blog.md",
+      "team.md",
+      "tag.md",
+      "tag/[tag].md",
+      "tag/[tag].paths.js",
+      "author/[author].md",
+      "author/[author].paths.js",
+    ];
+
+    const targetDir = process.cwd();
+    const pagesSrcDir = path.join(themeSrcDir, "pages");
+
+    for (const file of filesToCopy) {
+      const src = path.join(pagesSrcDir, file);
+      const dest = path.join(targetDir, file);
+      if (fs.existsSync(src)) {
+        fs.mkdirSync(path.dirname(dest), { recursive: true });
+
+        let shouldCopy = !fs.existsSync(dest);
+        if (!shouldCopy) {
+          const srcContent = fs.readFileSync(src, "utf8");
+          const destContent = fs.readFileSync(dest, "utf8");
+          if (srcContent !== destContent) {
+            shouldCopy = true;
+          }
+        }
+        if (shouldCopy) {
+          fs.writeFileSync(dest, fs.readFileSync(src));
+        }
+      }
+    }
+  } catch (err) {
+    console.error("Failed to copy theme pages:", err);
+  }
+}
+
+function getBlogRewrites() {
+  const rewrites = {};
+  const postsDir = path.resolve(process.cwd(), "_posts");
+  if (!fs.existsSync(postsDir)) return rewrites;
+
+  const files = fs.readdirSync(postsDir).filter((f) => f.endsWith(".md"));
+  for (const file of files) {
+    const filePath = path.join(postsDir, file);
+    const content = fs.readFileSync(filePath, "utf8");
+    const dateMatch = content.match(/date:\s*["']?(\d{4})-(\d{2})-\d{2}["']?/);
+    if (dateMatch) {
+      const [_, year, month] = dateMatch;
+      const baseName = file.replace(/\.md$/, "");
+      const slug = baseName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+      rewrites[`_posts/${file}`] = `${year}/${month}/${slug}.md`;
+    } else {
+      const baseName = file.replace(/\.md$/, "");
+      const slug = baseName
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "-")
+        .replace(/^-+|-+$/g, "");
+      rewrites[`_posts/${file}`] = `blog/${slug}.md`;
+    }
+  }
+  return rewrites;
+}
+
 /**
  * Base configuration for VitePress
  * Documentation: see https://vitepress.dev/reference/site-config
@@ -5,9 +92,18 @@
  * @returns
  */
 export const generate = (brandConfig) => {
+  copyThemePages();
   const config = {
     appearance: false,
     cleanUrls: true,
+    markdown: {
+      headers: {
+        level: [2, 3, 4, 5, 6],
+      },
+    },
+    rewrites: {
+      ...getBlogRewrites(),
+    },
     description: brandConfig.meta?.description,
     head: [
       ["link", { rel: "icon", href: brandConfig.meta?.favicon }],
@@ -93,6 +189,7 @@ export const generate = (brandConfig) => {
     ],
     srcExclude: ["README.md"],
     themeConfig: {
+      outline: "deep",
       siteTitle: false,
       theme: {
         primaryColor: brandConfig.theme?.primary_color,
@@ -115,7 +212,7 @@ export const generate = (brandConfig) => {
           ></span>`,
         copyright:
           brandConfig.theme?.footer?.copyright ||
-          'Copyright © 2014-present <a href="https://eox.at" target="_blank">EOX IT Services GmbH</a>',
+          'Copyright © 2008-present <a href="https://eox.at" target="_blank">EOX IT Services GmbH</a>',
       },
     },
     title: brandConfig.meta?.title,
@@ -123,6 +220,9 @@ export const generate = (brandConfig) => {
       ssr: {
         noExternal: ["@eox/pages-theme-eox"],
       },
+      optimizeDeps: {
+        exclude: ["@eox/pages-theme-eox"],
+      },
     },
     vue: {
       template: {