feat(core): added support for base url and slashes (#584)

* add support for base url and slashes * add support for base url and slashes * Create gentle-ravens-compare.md * add support for base url and slashes * add support for base url and slashes --------- Co-authored-by: David Boyne <[email protected]>
event-catalog · Jul 12, 2024 · 9d61581 · 9d61581
1 parent f9edeac
commit 9d61581
Show file tree

Hide file tree

Showing 17 changed files with 72 additions and 30 deletions.
diff --git a/.changeset/gentle-ravens-compare.md b/.changeset/gentle-ravens-compare.md
@@ -0,0 +1,5 @@
+---
+"@eventcatalog/core": patch
+---
+
+feat(core): added support for base url and slashes 
diff --git a/.gitignore b/.gitignore
@@ -41,3 +41,4 @@ eventcatalog.styles.css
 
 .vscode/*
 
+git-push.sh
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -9,12 +9,13 @@ import remarkGFM from 'remark-gfm';
 import pagefind from "astro-pagefind";
 import { mermaid } from "./src/remark-plugins/mermaid"
 
+
 import expressiveCode from 'astro-expressive-code';
 import config from './eventcatalog.config';
 
 // https://astro.build/config
 export default defineConfig({
-  base: '/',
+  base: config.base || '/',
   server: { port: 3000 },
 
   // https://docs.astro.build/en/reference/configuration-reference/#site

diff --git a/bin/eventcatalog.config.ts b/bin/eventcatalog.config.ts
@@ -8,6 +8,7 @@ export interface Config {
   organizationName: string;
   homepageLink: string;
   editUrl: string;
+  base?: string;
   logo: {
     alt: string;
     src: string;

diff --git a/examples/default/eventcatalog.config.js b/examples/default/eventcatalog.config.js
@@ -1,6 +1,5 @@
 export default {
   title: 'EventCatalog',
-  trailingSlash: false,
   tagline: 'Discover, Explore and Document your Event Driven Architectures',
   organizationName: 'Your Company',
   homepageLink: 'https://eventcatalog.dev/',
@@ -9,6 +8,8 @@ export default {
     alt: 'EventCatalog Logo',
     src: 'logo.svg'
   },
+  base: '/',
+  trailingSlash: false,
   docs: {
     sidebar: {
       // Should the sub heading be rendered in the docs sidebar?

diff --git a/src/components/DocsNavigation.astro b/src/components/DocsNavigation.astro
@@ -6,6 +6,7 @@ import { getServices } from '@utils/services/services';
 import { getTeams } from '@utils/teams';
 import { getUsers } from '@utils/users';
 import config, { type CatalogConfig } from '@eventcatalog';
+import { buildUrl } from '@utils/url-builder';
 
 const events = await getEvents({ getAllVersions: false });
 const commands = await getCommands({ getAllVersions: false });
@@ -59,7 +60,7 @@ const sideNav = withHeadings.reduce((acc, item) => {
     items: item.collection === 'users' ? [] : item.headings,
     visible: visibleCollections[item.collection],
     // @ts-ignore
-    href: item.data.version ? `/docs/${item.collection}/${item.data.id}/${item.data.version}` : `/docs/${item.collection}/${item.data.id}`,
+    href: item.data.version ? buildUrl(`/docs/${item.collection}/${item.data.id}/${item.data.version}`) : buildUrl(`/docs/${item.collection}/${item.data.id}`),
   };
 
   group.push(navigationItem);

diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -2,31 +2,31 @@
 import catalog from '@eventcatalog';
 // import Search from 'astro-pagefind/components/Search';
 import Search from '@components/Search.astro';
+import { buildUrl } from '@utils/url-builder';
 
 const currentPath = Astro.url.pathname;
 
 const navItems = [
   {
     label: 'Docs',
-    href: '/docs',
+    href: buildUrl('/docs'),
   },
   {
     label: 'Visualiser',
-    href: '/visualiser',
+    href: buildUrl('/visualiser'),
   },
   {
     label: 'Discover',
-    href: '/discover/events',
+    href: buildUrl('/discover/events'),
   }
 ];
 
 ---
-
 <nav class="md:fixed top-0 w-full z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl max-w-[70em]">
   <div class="flex justify-between items-center">
     <div class="w-1/3 flex space-x-2 items-center">
-      <a href="/docs" class="flex space-x-2 items-center">
-        <img src="/logo.png" class="w-8" />
+      <a href={buildUrl('/docs')} class="flex space-x-2 items-center">
+        <img src={buildUrl('/logo.png', true)} class="w-8" />
         <span class="hidden sm:inline-block text-[1em]">{catalog.title}</span>
       </a>
     </div>

diff --git a/src/components/MDX/NodeGraph/NodeGraph.tsx b/src/components/MDX/NodeGraph/NodeGraph.tsx
@@ -9,6 +9,7 @@ import type { CollectionEntry } from 'astro:content';
 import { navigate } from 'astro:transitions/client';
 import type { CollectionTypes } from '@types';
 import DownloadButton from './DownloadButton';
+import { buildUrl } from '@utils/url-builder';
 
 interface Props {
   nodes: any;
@@ -21,10 +22,10 @@ interface Props {
 }
 
 const getDocUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return `/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+  return buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 const getVisualiserUrlForCollection = (collectionItem: CollectionEntry<CollectionTypes>) => {
-  return `/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`;
+  return buildUrl(`/visualiser/${collectionItem.collection}/${collectionItem.data.id}/${collectionItem.data.version}`);
 };
 
 // const NodeGraphBuilder = ({ title, subtitle, includeBackground = true, includeControls = true }: Props) => {

diff --git a/src/components/Seo.astro b/src/components/Seo.astro
@@ -30,7 +30,7 @@ if (typeof _image === 'string') {
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.ico`} />
 
 <SEO
 	title={title}

diff --git a/src/components/Tables/columns/DomainTableColumns.tsx b/src/components/Tables/columns/DomainTableColumns.tsx
@@ -3,6 +3,7 @@ import { RectangleGroupIcon } from '@heroicons/react/20/solid';
 import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<'domains'>>();
 
@@ -16,7 +17,7 @@ export const columns = () => [
       return (
         <div className=" group ">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -74,7 +75,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 rounded-md`}>
@@ -104,7 +105,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

diff --git a/src/components/Tables/columns/MessageTableColumns.tsx b/src/components/Tables/columns/MessageTableColumns.tsx
@@ -5,6 +5,7 @@ import type { CollectionMessageTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<CollectionMessageTypes>>();
 
@@ -19,7 +20,7 @@ export const columns = () => [
       return (
         <div className=" group ">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -75,7 +76,7 @@ export const columns = () => [
             return (
               <li className="py-2 group flex items-center space-x-2" key={producer.data.id}>
                 <a
-                  href={`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`}
+                  href={buildUrl(`/docs/${producer.collection}/${producer.data.id}/${producer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
@@ -115,7 +116,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className="flex items-center border border-gray-300 shadow-sm rounded-md">
@@ -145,7 +146,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

diff --git a/src/components/Tables/columns/ServiceTableColumns.tsx b/src/components/Tables/columns/ServiceTableColumns.tsx
@@ -4,6 +4,7 @@ import { createColumnHelper } from '@tanstack/react-table';
 import type { CollectionEntry } from 'astro:content';
 import { useMemo } from 'react';
 import { filterByName, filterCollectionByName } from '../filters/custom-filters';
+import { buildUrl } from '@utils/url-builder';
 
 const columnHelper = createColumnHelper<CollectionEntry<'services'>>();
 
@@ -18,7 +19,7 @@ export const columns = () => [
       return (
         <div className="group font-light">
           <a
-            href={`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`}
+            href={buildUrl(`/docs/${messageRaw.collection}/${messageRaw.data.id}/${messageRaw.data.version}`)}
             className={`group-hover:text-${color}-500 flex space-x-1 items-center`}
           >
             <div className={`flex items-center border border-gray-300 shadow-sm rounded-md group-hover:border-${color}-400`}>
@@ -76,7 +77,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light ">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
@@ -118,7 +119,7 @@ export const columns = () => [
             return (
               <li key={consumer.data.id} className="py-1 group font-light">
                 <a
-                  href={`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`}
+                  href={buildUrl(`/docs/${consumer.collection}/${consumer.data.id}/${consumer.data.version}`)}
                   className="group-hover:text-purple-500 flex space-x-1 items-center "
                 >
                   <div className={`flex items-center border border-gray-300 shadow-sm rounded-md`}>
@@ -148,7 +149,7 @@ export const columns = () => [
       return (
         <a
           className="hover:text-purple-500 hover:underline px-4 font-light"
-          href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`}
+          href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)}
         >
           Visualiser &rarr;
         </a>

diff --git a/src/layouts/CustomDocsPageLayout.astro b/src/layouts/CustomDocsPageLayout.astro
@@ -16,7 +16,7 @@ import catalog from '@eventcatalog';
     <meta charset="UTF-8" />
     <meta name="description" content="Astro description" />
     <meta name="viewport" content="width=device-width" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}/favicon.ico`} />
     <meta name="generator" content={Astro.generator} />
     <title>EventCatalog</title>
   </head>

diff --git a/src/layouts/DiscoverLayout.astro b/src/layouts/DiscoverLayout.astro
@@ -8,6 +8,7 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
+import { buildUrl } from '@utils/url-builder';
 
 const events = await getEvents();
 const commands = await getCommands();
@@ -20,31 +21,31 @@ const currentPath = Astro.url.pathname;
 const tabs = [
   {
     label: `Events (${events.length})`,
-    href: '/discover/events',
+    href: buildUrl('/discover/events'),
     isActive: currentPath === '/discover/events',
     icon: EnvelopeIcon,
     activeColor: 'orange',
     enabled: events.length > 0,
   },
   {
     label: `Commands (${commands.length})`,
-    href: '/discover/commands',
+    href: buildUrl('/discover/commands'),
     isActive: currentPath === '/discover/commands',
     icon: EnvelopeIcon,
     activeColor: 'blue',
     enabled: commands.length > 0,
   },
   {
     label: `Services (${services.length})`,
-    href: '/discover/services',
+    href: buildUrl('/discover/services'),
     isActive: currentPath === '/discover/services',
     icon: ServerIcon,
     activeColor: 'pink',
     enabled: services.length > 0,
   },
   {
     label: `Domains (${domains.length})`,
-    href: '/discover/domains',
+    href: buildUrl('/discover/domains'),
     isActive: currentPath === '/discover/domains',
     icon: RectangleGroupIcon,
     activeColor: 'yellow',

diff --git a/src/layouts/VisualiserLayout.astro b/src/layouts/VisualiserLayout.astro
@@ -6,6 +6,7 @@ import { getCommands } from '@utils/commands';
 import { getDomains } from '@utils/domains/domains';
 import { getEvents } from '@utils/events';
 import { getServices } from '@utils/services/services';
+import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 import { ViewTransitions } from 'astro:transitions';
 
@@ -55,7 +56,7 @@ const getColor = (collection: string) => {
                 label: item.data.name,
                 version: item.data.version,
                 color: getColor(item.collection),
-                href: `/visualiser/${item.collection}/${item.data.id}/${item.data.version}`,
+                href: buildUrl(`/visualiser/${item.collection}/${item.data.id}/${item.data.version}`),
                 active: isCurrent
               }
             });

diff --git a/src/pages/discover/[type]/index.astro b/src/pages/discover/[type]/index.astro
@@ -11,7 +11,7 @@ export async function getStaticPaths() {
   const events = await getEvents();
   const commands = await getCommands();
   const services = await getServices();
-    const domains = await getDomains();
+  const domains = await getDomains();
 
   const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
     return collection.map((item) => ({

diff --git a/src/utils/url-builder.ts b/src/utils/url-builder.ts
@@ -0,0 +1,26 @@
+import config from '@eventcatalog';
+
+const cleanUrl = (url: string) => {
+  return url.replace(/\/+/g, '/');
+};
+
+// Custom URL builder as Astro does not support this stuff out the box
+export const buildUrl = (url: string, ignoreTrailingSlash = false) => {
+  // Should a trailingSlash be added to urls?
+  const trailingSlash = config.trailingSlash || false;
+
+  let newUrl = url;
+
+  // If the base URL is not the root, we need to append it
+  if (import.meta.env.BASE_URL !== '/') {
+    newUrl = `${import.meta.env.BASE_URL}${url}`;
+  }
+
+  // Should we add a trailing slash to the url?
+  if (trailingSlash && !ignoreTrailingSlash) {
+    if (url.endsWith('/')) return newUrl;
+    return cleanUrl(`${newUrl}/`);
+  }
+
+  return cleanUrl(newUrl);
+};
Original file line number	Diff line number	Diff line change
Expand Up		@@ -41,3 +41,4 @@ eventcatalog.styles.css

		.vscode/*

		git-push.sh