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

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,
@@ -123,6 +220,9 @@ export const generate = (brandConfig) => {
       ssr: {
         noExternal: ["@eox/pages-theme-eox"],
       },
+      optimizeDeps: {
+        exclude: ["@eox/pages-theme-eox"],
+      },
     },
     vue: {
       template: {