add support for base url and slashes

src/components/Lists/VersionList.astro

@@ -1,5 +1,6 @@
 ---
 import type { CollectionTypes } from '@types';
+import { buildUrl } from '@utils/url-builder';
 import type { CollectionEntry } from 'astro:content';
 
 interface Props {
@@ -17,7 +18,7 @@ const currentPath = Astro.url.pathname;
   <select id="version" class="block bg-gray-50 rounded-md border border-gray-200 px-1 py-0.5 text-xs"> 
     {versions.map((version) => {
       const isCurrent = currentPath.includes(version);
-      return <option selected={isCurrent} value={`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
+      return <option selected={isCurrent} value={buildUrl(`/docs/${collectionItem.collection}/${collectionItem.data.id}/${version}`)} class={`inline-flex items-center rounded-md  px-2 py-1 text-xs text-indigo-700 ring-1 ring-inset ring-indigo-700/10 hover:bg-purple-100 hover:underline ${isCurrent ? 'bg-purple-100 text-purple-500 underline ' : 'bg-white'}`}>
         <span>
           v{version} 
           {version === collectionItem.data.latestVersion && <span>(latest)</span>}

src/components/MDX/OpenAPI/OpenAPI.tsx

@@ -2,6 +2,7 @@ import type { CollectionTypes } from '@types';
 import type { CollectionEntry } from 'astro:content';
 import * as path from 'path';
 import { existsSync } from 'node:fs';
+import { buildUrl } from '@utils/url-builder';
 
 const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
   // @ts-ignore
@@ -23,7 +24,7 @@ const OpenAPI = (props: CollectionEntry<CollectionTypes>) => {
       {fileExists && (
         <div>
           This {props.collection.slice(0, -1)} has an OpenAPI file{' '}
-          <a className="text-purple-500" href={`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`}>
+          <a className="text-purple-500" href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}/spec`)}>
             you can view here.
           </a>
         </div>

src/components/SideBars/DomainSideBar.astro

@@ -2,6 +2,7 @@
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 interface Props {
   domain: CollectionEntry<'domains'>;
@@ -19,15 +20,15 @@ const serviceList = services.map((p) => ({
   label: p.data.id,
   badge: p.collection,
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 ---
@@ -37,6 +38,6 @@ const ownersList = owners.map((o) => ({
     <PillList title={`Services (${services.length})`} pills={serviceList} emptyMessage={`This domain does not contain any services.`} color="pink" client:load />
     <OwnersList title={`Service owners (${ownersList.length})`} owners={ownersList} emptyMessage={`This domain does not have any documented owners.`} client:load />
     {domain.data.versions && <VersionList versions={domain.data.versions} collectionItem={domain} />}
-    <a href={`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+    <a href={buildUrl(`/visualiser/${domain.collection}/${domain.data.id}/${domain.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
   </div>
 </aside>

src/components/SideBars/MessageSideBar.astro

@@ -5,6 +5,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import type { CollectionMessageTypes } from '@types';
 import * as path from 'path';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 interface Props {
   message: CollectionEntry<CollectionMessageTypes>;
 }
@@ -20,21 +21,21 @@ const owners = await Promise.all(ownersRaw.map((o) => getEntry(o)));
 const producerList = producers.map((p) => ({
   label: `${p.data.name} (service)`,
   tag: `v${p.data.version}`,
-  href: `/docs/services/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
 const consumerList = consumers.map((p) => ({
   label: `${p.data.name} (service)`,
   tag: `v${p.data.version}`,
-  href: `/docs/services/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/services/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 const type = message.collection.slice(0, -1);
@@ -72,7 +73,7 @@ const schemaURL = path.join(publicPath, schemaFilePath || '')
         )
       }
       <a
-        href={`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`}
+        href={buildUrl(`/visualiser/${message.collection}/${message.data.id}/${message.data.version}`)}
         class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500"
         >View in Visualiser</a
       >

src/components/SideBars/ServiceSideBar.astro

@@ -2,6 +2,7 @@
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import VersionList from '@components/Lists/VersionList.astro';
+import { buildUrl } from '@utils/url-builder';
 import { getEntry, type CollectionEntry } from 'astro:content';
 import { join } from 'node:path'
 interface Props {
@@ -23,22 +24,22 @@ const sendsList = sends.map((p) => ({
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 const receivesList = receives.map((p) => ({
   label: p.data.name,
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}/${p.data.version}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const ownersList = owners.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 // @ts-ignore
@@ -74,8 +75,8 @@ const schemaURL = join(publicPath, schemaFilePath || '')
           </a>
         )
       }
-      <a href={`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
-      <a id="open-api-button" href={`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
+      <a href={buildUrl(`/visualiser/${service.collection}/${service.data.id}/${service.data.version}`)} class="block text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View in Visualiser</a>
+      <a id="open-api-button" href={buildUrl(`/docs/${service.collection}/${service.data.id}/${service.data.version}/spec`)} class="hidden text-center rounded-md w-full bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-100/60 hover:text-purple-500">View API spec</a>
     </div>
   </div>
 </aside>

src/pages/docs/[type]/[id]/[version]/index.astro

@@ -17,6 +17,7 @@ import { getDomains } from '@utils/domains/domains';
 import DomainSideBar from '@components/SideBars/DomainSideBar.astro';
 import type { CollectionTypes } from '@types';
 import SchemaViewer from '@components/MDX/SchemaViewer/SchemaViewer.astro';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const events = await getEvents();
@@ -113,7 +114,7 @@ const badges = [
                   <div class="mt-2 text-sm text-yellow-700">
                     <p>
                       You are looking at a previous version of the {props.collection.slice(0, props.collection.length - 1)} <strong>{props.data.name}</strong>.{' '}
-                      <a class="underline hover:text-purple-500 block pt-2" href={`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`}>
+                      <a class="underline hover:text-purple-500 block pt-2" href={buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.latestVersion}`)}>
                         The latest version of this {props.collection.slice(0, props.collection.length - 1)} is v{props.data.latestVersion} &rarr;
                       </a>
                     </p>

src/pages/docs/teams/[id]/index.astro

@@ -10,6 +10,7 @@ import type { CollectionEntry } from 'astro:content';
 import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const teams = await getTeams();
@@ -42,18 +43,18 @@ const membersList = members.map((o) => ({
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
-href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   tag: `v${p.data.version}`
 }));
 
 const ownedEventsList = [...events, ...commands].map((p) => ({
   label: `${p.data.name} (${p.collection.slice(0, -1)})`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`
 }));

src/pages/docs/users/[id]/index.astro

@@ -8,6 +8,7 @@ import OwnersList from '@components/Lists/OwnersList';
 import PillList from '@components/Lists/PillList';
 import { getUsers } from '@utils/users';
 import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
+import { buildUrl } from '@utils/url-builder';
 
 export async function getStaticPaths() {
   const teams = await getUsers();
@@ -35,22 +36,22 @@ const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
 
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   tag: `v${p.data.version}`,
 }));
 
 const ownedMessageList = [...events, ...commands].map((p) => ({
   label: `${p.data.name} (${p.collection.slice(0, -1)})`,
   color: p.collection === 'events' ? 'orange' : 'blue',
   tag: `v${p.data.version}`,
-  href: `/docs/${p.collection}/${p.data.id}`,
+  href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
 
 const associatedTeams = teams.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: 'Team',
-  href: `/docs/${o.collection}/${o.data.id}`,
+  href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 ---
 

src/pages/visualiser/[type]/[id]/[version]/index.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';
 
 export async function getStaticPaths() {
@@ -41,6 +42,6 @@ const {
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
   <div class="bg-gray-100/50">
     <div class="h-[calc(100vh-110px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
-    <NodeGraph id={id} collection={collection} title={`${props.data.name} (v${props.data.version})`} mode="full" linkTo="visualiser" version={props.data.version} href={{ label: `Open documentation for ${props.data.name} v${props.data.version}`, url: `/docs/${props.collection}/${props.data.id}/${props.data.version}`}} />
+    <NodeGraph id={id} collection={collection} title={`${props.data.name} (v${props.data.version})`} mode="full" linkTo="visualiser" version={props.data.version} href={{ label: `Open documentation for ${props.data.name} v${props.data.version}`, url: buildUrl(`/docs/${props.collection}/${props.data.id}/${props.data.version}`)}} />
   </div>
 </VisualiserLayout>