@eventcatalog/core 1.2.6 → 2.0.0

package/package.json

@@ -1,67 +1,74 @@
 {
   "name": "@eventcatalog/core",
-  "version": "1.2.6",
+  "type": "module",
+  "version": "2.0.0",
   "publishConfig": {
     "access": "public"
   },
   "bin": {
-    "eventcatalog": "bin/eventcatalog.js"
+    "eventcatalog": "bin/dist/eventcatalog.cjs"
   },
   "scripts": {
-    "dev": "next dev",
-    "scripts:move-schema-for-download": "node scripts/move-schemas-for-download.js",
-    "generate": "node scripts/generate.js",
-    "build": "next build && next export",
-    "start": "next start",
-    "lint": "next lint"
+    "dev": "concurrently \"node scripts/watcher.js\" \"npm run scripts:hydrate-content && astro dev\"",
+    "dev:local": "concurrently \"node scripts/watcher.js\" \"astro dev\"",
+    "build:bin": "tsup",
+    "prepublishOnly": "npm run build:bin",
+    "test": "jest --config=$(pwd)/../../jest.config.js",
+    "start": "astro dev",
+    "build": "astro check --minimumSeverity error && astro build",
+    "build:cd": "node scripts/build-ci.js && astro check --minimumSeverity error && astro build",
+    "preview": "astro preview",
+    "astro": "astro",
+    "scripts:hydrate-content": "node scripts/catalog-to-astro-content-directory.js",
+    "start:catalog": "node scripts/start-catalog-locally.js",
+    "verify-build:catalog": "rimraf packages/eventcatalog/dist && node scripts/verify-build.js",
+    "changeset": "changeset",
+    "release": "changeset publish",
+    "format": "prettier --config .prettierrc --write \"**/*.{js,jsx,ts,tsx,json}\"",
+    "format:diff": "prettier --config .prettierrc --list-different \"**/*.{js,jsx,ts,tsx,json}\""
   },
   "dependencies": {
-    "@asyncapi/react-component": "^1.2.13",
-    "@headlessui/react": "^1.4.2",
-    "@heroicons/react": "^1.0.5",
-    "@mdx-js/react": "^1.6.22",
-    "@stoplight/json-schema-viewer": "4.5.0",
-    "@stoplight/markdown-viewer": "^5.4.2",
-    "@stoplight/mosaic": "^1.15.3",
-    "@stoplight/mosaic-code-viewer": "^1.15.3",
-    "@tailwindcss/forms": "^0.5.4",
-    "@tailwindcss/line-clamp": "^0.4.4",
-    "@tailwindcss/typography": "^0.5.9",
-    "@types/swagger-ui-react": "^4.18.0",
-    "compare-versions": "^4.1.2",
-    "copy-text-to-clipboard": "^3.0.1",
+    "@astrojs/check": "^0.7.0",
+    "@astrojs/markdown-remark": "^5.1.0",
+    "@astrojs/mdx": "^3.1.0",
+    "@astrojs/react": "^3.5.0",
+    "@astrojs/tailwind": "^5.1.0",
+    "@changesets/cli": "^2.27.5",
+    "@headlessui/react": "^2.0.3",
+    "@heroicons/react": "^2.1.3",
+    "@tailwindcss/typography": "^0.5.13",
+    "@tanstack/react-table": "^8.17.3",
+    "@types/dagre": "^0.7.52",
+    "@types/node": "^20.14.2",
+    "astro": "^4.10.1",
+    "astro-expressive-code": "^0.35.2",
+    "astro-pagefind": "^1.5.0",
+    "astro-seo": "^0.8.4",
     "dagre": "^0.8.5",
-    "diff": "^5.0.0",
-    "diff2html": "^3.4.13",
-    "fs-extra": "^10.0.0",
-    "gray-matter": "^4.0.3",
-    "lodash.debounce": "^4.0.8",
-    "mermaid": "10.3.0",
-    "next": "^12.1.0",
-    "next-mdx-remote": "^3.0.8",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-flow-renderer": "^9.7.3",
-    "react-force-graph-3d": "^1.21.10",
-    "react-syntax-highlighter": "^15.4.5",
-    "swagger-ui-react": "5.10.5"
+    "glob": "^10.4.1",
+    "html-to-image": "^1.11.11",
+    "mermaid": "^10.9.1",
+    "rapidoc": "^9.3.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "reactflow": "^11.11.3",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^3.0.1",
+    "tailwindcss": "^3.4.3",
+    "typescript": "^5.4.5",
+    "unist-util-visit": "^5.0.0"
   },
   "devDependencies": {
-    "@eventcatalog/types": "0.4.2",
-    "@types/react": "^17.0.36",
-    "autoprefixer": "10.4.5",
-    "commander": "^8.3.0",
+    "@parcel/watcher": "^2.4.1",
+    "@types/jest": "^29.5.12",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "commander": "^12.1.0",
+    "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
-    "eslint": "8.46.0",
-    "eslint-config-next": "12.0.4",
-    "postcss": "^8.3.11",
-    "tailwindcss": "^3.3.3",
-    "trim": "0.0.3",
-    "typescript": "^5.1.6"
-  },
-  "browser": {
-    "fs": false,
-    "os": false
-  },
-  "gitHead": "5f82ce7f267e9b3ec771bbd3cc81359ed0a8fd18"
+    "jest": "^29.7.0",
+    "prettier": "^3.3.2",
+    "rimraf": "^5.0.7",
+    "tsup": "^8.1.0"
+  }
 }

package/public/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>

package/public/icons/x-twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"/></svg>

package/public/slack-icon.svg

@@ -0,0 +1 @@
+<svg height="256" preserveAspectRatio="xMidYMid" viewBox="0 0 256 256" width="256" xmlns="http://www.w3.org/2000/svg"><path d="m53.8412698 161.320635c0 14.831746-11.9873015 26.819048-26.8190476 26.819048-14.831746 0-26.8190476-11.987302-26.8190476-26.819048s11.9873016-26.819048 26.8190476-26.819048h26.8190476zm13.4095239 0c0-14.831746 11.9873015-26.819048 26.8190476-26.819048 14.8317457 0 26.8190477 11.987302 26.8190477 26.819048v67.047619c0 14.831746-11.987302 26.819048-26.8190477 26.819048-14.8317461 0-26.8190476-11.987302-26.8190476-26.819048z" fill="#e01e5a"/><path d="m94.0698413 53.6380952c-14.8317461 0-26.8190476-11.9873015-26.8190476-26.8190476 0-14.831746 11.9873015-26.8190476 26.8190476-26.8190476 14.8317457 0 26.8190477 11.9873016 26.8190477 26.8190476v26.8190476zm0 13.6126985c14.8317457 0 26.8190477 11.9873015 26.8190477 26.8190476 0 14.8317457-11.987302 26.8190477-26.8190477 26.8190477h-67.2507937c-14.831746 0-26.8190476-11.987302-26.8190476-26.8190477 0-14.8317461 11.9873016-26.8190476 26.8190476-26.8190476z" fill="#36c5f0"/><path d="m201.549206 94.0698413c0-14.8317461 11.987302-26.8190476 26.819048-26.8190476s26.819048 11.9873015 26.819048 26.8190476c0 14.8317457-11.987302 26.8190477-26.819048 26.8190477h-26.819048zm-13.409523 0c0 14.8317457-11.987302 26.8190477-26.819048 26.8190477s-26.819048-11.987302-26.819048-26.8190477v-67.2507937c0-14.831746 11.987302-26.8190476 26.819048-26.8190476s26.819048 11.9873016 26.819048 26.8190476z" fill="#2eb67d"/><path d="m161.320635 201.549206c14.831746 0 26.819048 11.987302 26.819048 26.819048s-11.987302 26.819048-26.819048 26.819048-26.819048-11.987302-26.819048-26.819048v-26.819048zm0-13.409523c-14.831746 0-26.819048-11.987302-26.819048-26.819048s11.987302-26.819048 26.819048-26.819048h67.250794c14.831746 0 26.819047 11.987302 26.819047 26.819048s-11.987301 26.819048-26.819047 26.819048z" fill="#ecb22e"/></svg>

package/scripts/build-ci.js

@@ -0,0 +1,22 @@
+#!/usr/bin/env node
+
+// This is used for CI on vercel. Must copy files before building.
+import { join } from 'node:path';
+import fs from 'fs';
+import { execSync } from 'node:child_process';
+const __dirname = import.meta.dirname;
+
+const args = process.argv.slice(2);
+const catalog = args[0] || 'default';
+
+const catalogDir = join(__dirname, '../');
+const projectDIR = join(__dirname, `../examples/${catalog}`);
+
+fs.copyFileSync(join(projectDIR, 'eventcatalog.config.js'), join(catalogDir, 'eventcatalog.config.js'));
+
+fs.copyFileSync(join(projectDIR, 'eventcatalog.styles.css'), join(catalogDir, 'eventcatalog.styles.css'));
+
+execSync(`NODE_ENV=CI PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run scripts:hydrate-content`, {
+  cwd: catalogDir,
+  stdio: 'inherit',
+});

package/scripts/catalog-to-astro-content-directory.js

@@ -0,0 +1,188 @@
+import { glob } from 'glob';
+import * as path from 'node:path';
+import fs from 'fs';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+const scriptsDir = path.dirname(__filename);
+
+const getTargetPath = (source, target, type, file) => {
+  const relativePath = path.relative(source, file);
+  const cleanedRelativePath = relativePath.split(`${type}/`);
+  const targetForEvents = path.join(type, cleanedRelativePath[1]);
+  return path.join(target, targetForEvents);
+};
+
+const ensureDirSync = async (filePath) => {
+  const dir = path.dirname(filePath);
+
+  if (!fs.existsSync(dir)) {
+    fs.mkdirSync(dir, { recursive: true });
+  }
+};
+
+const copyFiles = async ({ source, target, catalogFilesDir, pathToMarkdownFiles, pathToAllFiles, type }) => {
+  // Find all the event files
+  const markdownFiles = await glob(pathToMarkdownFiles, {
+    nodir: true,
+  });
+  const files = await glob(pathToAllFiles, {
+    ignore: {
+      ignored: (p) => /\.md$/.test(p.name),
+    },
+    nodir: true,
+  });
+
+  const publicDir = path.join(target, '../../public/generated');
+
+  // Copy markdown files into the astro content (collection) folder
+  for (const file of markdownFiles) {
+    const targetPath = getTargetPath(source, target, type, file);
+
+    //ensure the directory exists
+    ensureDirSync(path.dirname(targetPath));
+    fs.cpSync(file, targetPath.replace('index.md', 'index.mdx'));
+  }
+
+  // Copy all other files (non markdown) files into catalog-files directory (non collection)
+  for (const file of files) {
+    // Ignore any md files
+    if (file.endsWith('.md')) {
+      continue;
+    }
+
+    const relativePath = path.relative(source, file);
+    const cleanedRelativePath = relativePath.split(`${type}/`);
+    if (!cleanedRelativePath[1]) continue;
+    const targetForEvents = path.join(type, cleanedRelativePath[1]);
+
+    // Catalog-files-directory
+    const targetPath = path.join(catalogFilesDir, targetForEvents);
+    if (!fs.existsSync(path.dirname(targetPath))) {
+      fs.mkdirSync(path.dirname(targetPath), { recursive: true });
+    }
+    await fs.cpSync(file, targetPath);
+
+    // // // Public Directory
+    const publicTargetPath = path.join(publicDir, targetForEvents);
+
+    if (!fs.existsSync(path.dirname(publicTargetPath))) {
+      fs.mkdirSync(path.dirname(publicTargetPath), { recursive: true });
+    }
+
+    await fs.cpSync(file, publicTargetPath);
+  }
+
+  // Check if the directory is empty. EC (astro collections) requires at least 1 item in the collection
+  // insert empty one that is filtered out
+  if (markdownFiles.length === 0) {
+    const defaultCollectionFilesDir = path.join(scriptsDir, 'default-files-for-collections');
+    const defaultFile = path.join(defaultCollectionFilesDir, `${type}.md`);
+    const targetDir = path.join(target, type);
+    if (!fs.existsSync(targetDir)) {
+      fs.mkdirSync(targetDir, { recursive: true });
+    }
+    await fs.cpSync(defaultFile, path.join(targetDir, `${type}.md`));
+  }
+};
+
+export const catalogToAstro = async (source, astroContentDir, catalogFilesDir) => {
+  // Config file
+  const astroConfigFile = fs.readFileSync(path.join(astroContentDir, 'config.ts'));
+
+  // Clear the astro directory before we copy files over
+  await fs.rmSync(astroContentDir, { recursive: true });
+
+  // Create the folder again
+  fs.mkdirSync(astroContentDir);
+
+  // Write config file back
+  // ensureDirSync(astroContentDir);
+  fs.writeFileSync(path.join(astroContentDir, 'config.ts'), astroConfigFile);
+
+  // Copy all the event files over
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [
+      path.join(source, 'events/**/**/index.md'),
+      path.join(source, 'services/**/events/**/index.md'),
+      path.join(source, 'domains/**/events/**/index.md'),
+    ],
+    pathToAllFiles: [
+      path.join(source, 'events/**'),
+      path.join(source, 'services/**/events/**'),
+      path.join(source, 'domains/**/events/**'),
+    ],
+    type: 'events',
+  });
+
+  // // copy commands
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [
+      path.join(source, 'commands/**/**/index.md'),
+      path.join(source, 'services/**/commands/**/index.md'),
+      path.join(source, 'domains/**/commands/**/index.md'),
+    ],
+    pathToAllFiles: [
+      path.join(source, 'commands/**'),
+      path.join(source, 'services/**/commands/**'),
+      path.join(source, 'domains/**/commands/**'),
+    ],
+    type: 'commands',
+  });
+
+  // // Copy all the service files over
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [path.join(source, 'services/**/**/index.md'), path.join(source, 'domains/**/services/**/index.md')],
+    pathToAllFiles: [path.join(source, 'services/**'), path.join(source, 'domains/**/services/**')],
+    type: 'services',
+  });
+
+  // // Copy all the domain files over
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [path.join(source, 'domains/**/**/index.md')],
+    pathToAllFiles: [path.join(source, 'domains/**')],
+    type: 'domains',
+  });
+
+  // // Copy all the users
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [path.join(source, 'users/**/*.md')],
+    pathToAllFiles: [],
+    type: 'users',
+  });
+
+  // // Copy all the teams
+  await copyFiles({
+    source,
+    target: astroContentDir,
+    catalogFilesDir,
+    pathToMarkdownFiles: [path.join(source, 'teams/**/*.md')],
+    pathToAllFiles: [],
+    type: 'teams',
+  });
+};
+
+if (process.env.NODE_ENV !== 'test') {
+  // // Get the project directory of the source
+  const source = process.env.PROJECT_DIR;
+
+  const astroContentDir = path.join(process.env.CATALOG_DIR, 'src/content');
+  const catalogFilesDir = path.join(process.env.CATALOG_DIR, 'src/catalog-files');
+
+  catalogToAstro(source, astroContentDir, catalogFilesDir);
+}

package/scripts/default-files-for-collections/commands.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/domains.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/events.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/services.md

@@ -0,0 +1,8 @@
+---
+id: empty
+name: empty
+version: 0.0.1
+hidden: true
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/teams.md

@@ -0,0 +1,11 @@
+---
+id: dboyne
+name: David Boyne
+avatarUrl: "https://pbs.twimg.com/profile_images/1262283153563140096/DYRDqKg6_400x400.png"
+role: Lead developer
+email: test@test.com
+hidden: true
+slackDirectMessageUrl: https://yourteam.slack.com/channels/boyney123
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/default-files-for-collections/users.md

@@ -0,0 +1,11 @@
+---
+id: dboyne
+name: David Boyne
+avatarUrl: "https://pbs.twimg.com/profile_images/1262283153563140096/DYRDqKg6_400x400.png"
+role: Lead developer
+email: test@test.com
+hidden: true
+slackDirectMessageUrl: https://yourteam.slack.com/channels/boyney123
+---
+
+<!-- Do not delete this file, required for EC, you an ignore this file -->

package/scripts/start-catalog-locally.js

@@ -0,0 +1,23 @@
+#!/usr/bin/env node
+import { join } from 'node:path';
+import fs from 'fs';
+import { execSync } from 'node:child_process';
+const __dirname = import.meta.dirname;
+
+const args = process.argv.slice(2);
+const catalog = args[0] || 'default';
+
+const catalogDir = join(__dirname, '../');
+const projectDIR = join(__dirname, `../examples/${catalog}`);
+
+fs.copyFileSync(join(projectDIR, 'eventcatalog.config.js'), join(catalogDir, 'eventcatalog.config.js'));
+
+fs.copyFileSync(join(projectDIR, 'eventcatalog.styles.css'), join(catalogDir, 'eventcatalog.styles.css'));
+
+execSync(
+  `NODE_ENV=development PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run scripts:hydrate-content && PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run dev:local`,
+  {
+    cwd: catalogDir,
+    stdio: 'inherit',
+  }
+);

package/scripts/watcher.js

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+import watcher from '@parcel/watcher';
+import path from 'path';
+import fs from 'fs';
+
+// Where the users project is located
+const projectDirectory = process.env.PROJECT_DIR || process.cwd();
+// Where the catalog code is located.
+const catalogDirectory = process.env.CATALOG_DIR;
+
+const contentPath = path.join(catalogDirectory, 'src', 'content');
+
+const watchList = ['domains', 'commands', 'events', 'services', 'teams', 'users'];
+// const absoluteWatchList = watchList.map((item) => path.join(projectDirectory, item));
+
+// confirm folders exist before watching them
+const verifiedWatchList = watchList.filter((item) => fs.existsSync(path.join(projectDirectory, item)));
+
+const extensionReplacer = (collection, file) => {
+  if (collection === 'teams' || collection == 'users') return file;
+  return file.replace('.md', '.mdx');
+};
+
+for (let item of [...verifiedWatchList]) {
+  // Listen to the users directory for any changes.
+  watcher.subscribe(path.join(projectDirectory, item), (err, events) => {
+    if (err) {
+      return;
+    }
+    for (let event of events) {
+      const { path: eventPath, type } = event;
+      const file = eventPath.split(item)[1];
+      const newPath = path.join(contentPath, item, extensionReplacer(item, file));
+
+      // If config files have changes
+      if (eventPath.includes('eventcatalog.config.js') || eventPath.includes('eventcatalog.styles.css')) {
+        fs.cpSync(eventPath, path.join(catalogDirectory, file));
+        return;
+      }
+
+      // If markdown files copy file over to the required location
+      if (eventPath.endsWith('.md') && type === 'update') {
+        fs.cpSync(eventPath, newPath);
+      }
+
+      // IF directory remove it
+      if (type === 'delete') {
+        console.log('eventPath', eventPath);
+        fs.rmSync(newPath);
+      }
+    }
+  });
+}

package/src/components/DocsNavigation.astro

@@ -0,0 +1,110 @@
+---
+import { getCommands } from '@utils/commands';
+import { getDomains } from '@utils/domains/domains';
+import { getEvents } from '@utils/events';
+import { getServices } from '@utils/services/services';
+import { getTeams } from '@utils/teams';
+import { getUsers } from '@utils/users';
+import config from '@eventcatalog';
+
+const events = await getEvents({ getAllVersions: false });
+const commands = await getCommands({ getAllVersions: false });
+const services = await getServices({ getAllVersions: false });
+const domains = await getDomains({ getAllVersions: false });
+const teams = await getTeams();
+const users = await getUsers();
+
+const messages = [...events, ...commands];
+
+const allData = [ ...domains, ...services, ...messages, ...teams, ...users];
+
+const fetchHeadings = allData.map(async (item) => {
+  const renderHeadings = config?.docs?.sidebar?.showPageHeadings ?? true;
+  const headings = renderHeadings ? await item.render() : { headings: []};
+  return {
+    ...item,
+    headings: headings.headings,
+  };
+});
+
+
+
+const withHeadings =  await Promise.all(fetchHeadings);
+
+const sideNav = withHeadings.reduce((acc, item) => {
+
+  const title = (item.collection === 'events' || item.collection === 'commands') ? 'Messages' : item.collection;
+
+  const group = acc[title] || [];
+
+  const navigationItem = {
+    label: item.data.name,
+    version: item.collection === 'teams' || item.collection === 'users' ? null : item.data.version,
+    items: item.collection === 'users' ? [] : item.headings,
+    // @ts-ignore
+    href: item.data.version ? `/docs/${item.collection}/${item.data.id}/${item.data.version}` : `/docs/${item.collection}/${item.data.id}`,
+  };
+
+  group.push(navigationItem);
+
+  return {
+    ...acc,
+    [title]: group,
+  };
+}, {} as any);
+
+const currentPath = Astro.url.pathname;
+
+---
+
+<div class="font-light w-full xl:pr-10 pb-20 ">
+    {
+      Object.keys(sideNav).map((key) => {
+        const collection = sideNav[key];
+        return (
+          <ul class=" w-full space-y-2 pb-8">
+            <li class="font-semibold capitalize ">{key}</li>
+            {collection.map((item: any) => {
+              return (
+                <li class="px-2 w-full text-md xl:text-lg border-l border-gray-200 space-y-2 scroll-m-20" id={item.href} >
+                  <a class={`flex justify-between items-center w-full px-2 rounded-md font-normal ${currentPath.includes(item.href) ? 'bg-purple-200 text-purple-800 ' : 'font-thin'}`} href={`${item.href}`}>
+                    <span class="block">{item.label}</span>
+                    {item.version && <span class="block text-sm bg-purple-100 p-0.5 px-1 text-gray-600  rounded-md font-light">v{item.version}</span>}
+                  </a>
+                  <ul class="hidden xl:block px-4  text-gray-500 text-md space-y-2  ">
+                    {item.items.map((heading: any) => {
+                      return (
+                        <li class="text-xs">
+                          <a href={`${item.href}/#${heading.slug}`}>{heading.text}</a>
+                        </li>
+                      );
+                    })}
+                  </ul>
+                </li>
+              );
+            })}
+          </ul>
+        );
+      })
+    }
+</div>
+
+<script>
+  // Scroll to the current page element
+  document.addEventListener('DOMContentLoaded', () => {
+    const currentPath = document.location.pathname;
+    const currentElement = document.getElementById(currentPath);
+    if (currentElement) {
+      // scroll to the current element with padding
+      currentElement.scrollIntoView({
+        behavior: 'auto',
+        block: 'start',
+        inline: 'start',
+      });
+
+      // currentElement.scrollIntoView({
+      //   behavior: 'auto'
+      // });
+    }
+  });
+</script>