@eventcatalog/core 2.10.0 → 2.11.0

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

@@ -1,5 +1,5 @@
 ---
-import DocsLayout from '@layouts/DocsLayout.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 import Footer from '@layouts/Footer.astro';
 
 import components from '@components/MDX/components';
@@ -17,6 +17,7 @@ import type { PageTypes } from '@types';
 import { buildUrl } from '@utils/url-builder';
 import { getFlows } from '@utils/flows/flows';
 import { pageDataLoader } from '@utils/pages/pages';
+import { ViewTransitions } from 'astro:transitions';
 
 type PageTypesWithFlows = PageTypes | 'flows';
 
@@ -114,164 +115,168 @@ const getSpecificationBadges = () => {
 const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
 ---
 
-<DocsLayout title={pageTitle} description={props.data.summary}>
-  <!-- <main class="flex py-8 sm:px-8 docs-layout"> -->
-  <div class="flex min-h-screen docs-layout">
-    <main class="flex-1 w-full lg:pr-10 md:pt-4">
-      <div class="border-b border-gray-200 flex justify-between items-start py-4 md:pb-2">
+<VerticalSideBarLayout title={pageTitle} description={props.data.summary}>
+  <main class="flex sm:px-8 docs-layout h-full">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-2 pr-8 overflow-y-auto py-8">
+        <div class="border-b border-gray-200 flex justify-between items-start md:pb-2">
+          <div>
+            <h2 class="text-2xl md:text-4xl font-bold text-black">
+              {props.data.name}
+              <span class="">(v{props.data.version})</span>
+            </h2>
+            <h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
+            {
+              badges && (
+                <div class="flex flex-wrap py-2 pt-4">
+                  {badges.map((badge: any) => {
+                    return (
+                      <a href={badge.url || '#'} class="pb-2">
+                        <span
+                          id={badge.id || ''}
+                          class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2  bg-gradient-to-b  from-${badge.backgroundColor}-100 to-${badge.backgroundColor}-200 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
+                        >
+                          {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
+                          {badge.iconURL && <img src={badge.iconURL} class="w-5 h-5 inline-block " />}
+                          <span>{badge.content}</span>
+                        </span>
+                      </a>
+                    );
+                  })}
+                </div>
+              )
+            }
+          </div>
+        </div>
+
         <div>
-          <h2 class="text-2xl md:text-4xl font-bold">
-            {props.data.name}
-            <span class="text-gray-300">(v{props.data.version})</span>
-          </h2>
-          <h2 class="text-lg pt-2 text-gray-500 font-light">{props.data.summary}</h2>
           {
-            badges && (
-              <div class="flex flex-wrap py-2 pt-4">
-                {badges.map((badge: any) => {
-                  return (
-                    <a href={badge.url || '#'} class="pb-2">
-                      <span
-                        id={badge.id || ''}
-                        class={`text-sm font-light text-gray-500 px-2 py-1 rounded-md mr-2 bg-${badge.backgroundColor}-100 space-x-1 border border-${badge.backgroundColor}-200 text-${badge.textColor}-800 flex items-center ${badge.class ? badge.class : ''} `}
-                      >
-                        {badge.icon && <badge.icon className="w-4 h-4 inline-block mr-1 " />}
-                        {badge.iconURL && <img src={badge.iconURL} class="w-5 h-5 inline-block " />}
-                        <span>{badge.content}</span>
-                      </span>
-                    </a>
-                  );
-                })}
+            props.data.version !== props.data.latestVersion && (
+              <div class="rounded-md bg-gradient-to-r from-purple-50 to-purple-100 p-4 not-prose my-4">
+                <div class="flex">
+                  <div class="flex-shrink-0">
+                    <svg class="h-5 w-5 text-purple-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+                      <path
+                        fill-rule="evenodd"
+                        d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
+                        clip-rule="evenodd"
+                      />
+                    </svg>
+                  </div>
+                  <div class="ml-3">
+                    <h3 class="text-sm font-medium text-purple-800">New version found</h3>
+                    <div class="mt-2 text-sm text-purple-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-primary 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>
+                    </div>
+                  </div>
+                </div>
               </div>
             )
           }
         </div>
-      </div>
 
-      <div>
+        <div class="prose prose-md py-4 w-full">
+          <Content components={components(props)} />
+        </div>
+        <div>
+          <!-- @ts-ignore -->
+          <SchemaViewer id={props.data.id} catalog={props.catalog} />
+          <NodeGraph
+            id={props.data.id}
+            collection={props.collection}
+            version={props.data.version}
+            mode="simple"
+            linksToVisualiser={true}
+            href={{
+              label: 'Open in Visualiser',
+              url: buildUrl(`/visualiser/${props.collection}/${props.data.id}/${props.data.version}`),
+            }}
+          />
+        </div>
+        <Footer />
+      </div>
+      <aside class="hidden lg:block sticky top-0 pb-10 w-96 overflow-y-auto py-2">
+        <!-- @ts-ignore -->
         {
-          props.data.version !== props.data.latestVersion && (
-            <div class="rounded-md bg-yellow-50 p-4 not-prose my-4">
-              <div class="flex">
-                <div class="flex-shrink-0">
-                  <svg class="h-5 w-5 text-yellow-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
-                    <path
-                      fill-rule="evenodd"
-                      d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"
-                      clip-rule="evenodd"
-                    />
-                  </svg>
-                </div>
-                <div class="ml-3">
-                  <h3 class="text-sm font-medium text-yellow-800">New version found</h3>
-                  <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-primary 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>
-                  </div>
-                </div>
-              </div>
-            </div>
+          (props?.collection === 'events' || props.collection === 'commands' || props.collection === 'queries') && (
+            <MessageSideBar message={props} />
           )
         }
-      </div>
+        {props?.collection === 'services' && <ServiceSideBar service={props} />}
+        {props?.collection === 'domains' && <DomainSideBar domain={props} />}
+      </aside>
+    </div>
+    <ViewTransitions />
+  </main>
 
-      <div class="prose prose-md py-4 w-full">
-        <Content components={components(props)} />
-      </div>
-      <div>
-        <!-- @ts-ignore -->
-        <SchemaViewer id={props.data.id} catalog={props.catalog} />
-        <NodeGraph
-          id={props.data.id}
-          collection={props.collection}
-          version={props.data.version}
-          mode="simple"
-          linksToVisualiser={true}
-          href={{
-            label: 'Open in Visualiser',
-            url: buildUrl(`/visualiser/${props.collection}/${props.data.id}/${props.data.version}`),
-          }}
-        />
-      </div>
-      <Footer />
-    </main>
-    <aside class="hidden lg:block sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
-      <!-- @ts-ignore -->
-      {
-        (props?.collection === 'events' || props.collection === 'commands' || props.collection === 'queries') && (
-          <MessageSideBar message={props} />
-        )
-      }
-      {props?.collection === 'services' && <ServiceSideBar service={props} />}
-      {props?.collection === 'domains' && <DomainSideBar domain={props} />}
-    </aside>
-  </div>
-</DocsLayout>
-
-<style is:global>
-  .docs-layout .prose {
-    max-width: none;
-  }
-
-  .mermaid svg {
-    margin: 1em auto 2em;
-  }
+  <style is:global>
+    .docs-layout .prose {
+      max-width: none;
+      /* max-height: 80vh; */
+      overflow: auto;
+    }
 
-  .mermaid tspan {
-    font-size: 8em;
-  }
-</style>
+    .mermaid svg {
+      margin: 1em auto 2em;
+    }
 
-<script define:vars={{ props }}>
-  // Fix to pass information to componets that are client side only
-  // and require catalog information
-  window.eventcatalog = {};
-  // @ts-ignore
-  window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
-</script>
+    .mermaid tspan {
+      font-size: 8em;
+    }
+  </style>
 
-<script>
-  /**
-   * @params {HTMLCollectionOf<HTMLElement>} graphs
-   */
-  async function renderDiagrams(graphs: any) {
-    const { default: mermaid } = await import('mermaid');
-    mermaid.initialize({
-      fontSize: 2,
-      flowchart: {
-        curve: 'linear',
-        rankSpacing: 0,
-        nodeSpacing: 0,
-      },
-      startOnLoad: false,
-      fontFamily: 'var(--sans-font)',
-      // @ts-ignore This works, but TS expects a enum for some reason
-      theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
-    });
+  <script define:vars={{ props }}>
+    // Fix to pass information to componets that are client side only
+    // and require catalog information
+    window.eventcatalog = {};
+    // @ts-ignore
+    window.eventcatalog[`${props.collection}-${props.data.id}`] = props.catalog;
+  </script>
 
-    for (const graph of graphs) {
-      const content = graph.getAttribute('data-content');
-      if (!content) continue;
-      let svg = document.createElement('svg');
-      const id = (svg.id = 'mermaid-' + Math.round(Math.random() * 100000));
-      graph.appendChild(svg);
-      mermaid.render(id, content).then((result) => {
-        graph.innerHTML = result.svg;
+  <script>
+    /**
+     * @params {HTMLCollectionOf<HTMLElement>} graphs
+     */
+    async function renderDiagrams(graphs: any) {
+      const { default: mermaid } = await import('mermaid');
+      mermaid.initialize({
+        fontSize: 2,
+        flowchart: {
+          curve: 'linear',
+          rankSpacing: 0,
+          nodeSpacing: 0,
+        },
+        startOnLoad: false,
+        fontFamily: 'var(--sans-font)',
+        // @ts-ignore This works, but TS expects a enum for some reason
+        theme: window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'default',
       });
+
+      for (const graph of graphs) {
+        const content = graph.getAttribute('data-content');
+        if (!content) continue;
+        let svg = document.createElement('svg');
+        const id = (svg.id = 'mermaid-' + Math.round(Math.random() * 100000));
+        graph.appendChild(svg);
+        mermaid.render(id, content).then((result) => {
+          graph.innerHTML = result.svg;
+        });
+      }
     }
-  }
 
-  const graphs = document.getElementsByClassName('mermaid');
-  if (document.getElementsByClassName('mermaid').length > 0) {
-    renderDiagrams(graphs);
-  }
-</script>
+    const graphs = document.getElementsByClassName('mermaid');
+    if (document.getElementsByClassName('mermaid').length > 0) {
+      renderDiagrams(graphs);
+    }
+  </script>
+</VerticalSideBarLayout>

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

@@ -8,6 +8,8 @@ import PlainPage from '@layouts/PlainPage.astro';
 import { DocumentMinusIcon } from '@heroicons/react/24/outline';
 import { buildUrl } from '@utils/url-builder';
 import { pageDataLoader } from '@utils/pages/pages';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import './styles.css';
 
 export async function getStaticPaths() {
   const itemTypes: PageTypes[] = ['events', 'commands', 'queries', 'services', 'domains'];
@@ -40,7 +42,7 @@ const pathOnDisk = path.join(process.cwd(), 'public', pathToSpec);
 const fileExists = fs.existsSync(pathOnDisk);
 ---
 
-<PlainPage title="OpenAPI Spec">
+<VerticalSideBarLayout title="OpenAPI Spec" }>
   {
     !fileExists ? (
       <div class="text-center h-screen  flex flex-col justify-center ">
@@ -75,7 +77,7 @@ const fileExists = fs.existsSync(pathOnDisk);
       />
     )
   }
-</PlainPage>
+</VerticalSideBarLayout>
 
 <script>
   // @ts-ignore
@@ -97,10 +99,18 @@ const fileExists = fs.existsSync(pathOnDisk);
   }
 
   rapi-doc::part(section-navbar-search) {
-    margin: 0;
+    margin: 0 10px;
     padding: 0;
     margin-bottom: 1em;
   }
+  rapi-doc::part(section-navbar) {
+    margin: 0;
+    padding: 10px important;
+    margin-bottom: 1em;
+    background-image: linear-gradient(to bottom, rgb(255, 255, 255), rgb(243, 244, 246));
+    border-right-width: 1px;
+    border-right-color: rgb(229, 231, 235);
+  }
   rapi-doc::part(section-overview) {
     margin: 0 2em 0 2em;
     padding: 1em 0 1em;

package/src/pages/docs/[type]/[id]/[version]/spec/styles.css

@@ -0,0 +1,3 @@
+#nav-bar-search{
+    margin: 0 10px;
+}

package/src/pages/docs/index.astro

@@ -1,9 +1,9 @@
 ---
-import Layout from '@layouts/DocsLayout.astro';
 import Footer from '@layouts/Footer.astro';
 import DefaultDocsLandingPage from '@layouts/CustomDocsPageLayout.astro';
 import components from '@components/MDX/page-components';
 import { getIndexPage } from '@utils/pages';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 
 const page = await getIndexPage();
 let CustomContent = null;
@@ -16,14 +16,14 @@ if (page) {
 
 {
   CustomContent && (
-    <Layout title="EventCatalog">
-      <main class="py-8">
+    <VerticalSideBarLayout title="EventCatalog">
+      <main class="py-8 px-8">
         <div class="prose prose-md w-full !max-w-none">
           <CustomContent components={components} />
         </div>
         <Footer />
       </main>
-    </Layout>
+    </VerticalSideBarLayout>
   )
 }
 

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

@@ -1,6 +1,4 @@
 ---
-import DocsLayout from '@layouts/DocsLayout.astro';
-
 import components from '@components/MDX/components';
 
 // SideBars
@@ -8,9 +6,10 @@ import { getTeams } from '@utils/teams';
 import { getEntry } from 'astro:content';
 import type { CollectionEntry } from 'astro:content';
 import OwnersList from '@components/Lists/OwnersList';
-import PillList from '@components/Lists/PillList';
+import PillListFlat from '@components/Lists/PillListFlat';
 import EnvelopeIcon from '@heroicons/react/16/solid/EnvelopeIcon';
 import { buildUrl } from '@utils/url-builder';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
 
 export async function getStaticPaths() {
   const teams = await getTeams();
@@ -43,12 +42,14 @@ const membersList = members.map((o) => ({
   label: o.data.name,
   type: o.collection,
   badge: o.collection === 'users' ? o.data.role : 'Team',
+  collection: o.collection,
   avatarUrl: o.collection === 'users' ? o.data.avatarUrl : '',
   href: buildUrl(`/docs/${o.collection}/${o.data.id}`),
 }));
 
 const ownedDomainsList = domains.map((p) => ({
   label: `${p.data.name}`,
+  collection: p.collection,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   tag: `v${p.data.version}`,
 }));
@@ -56,6 +57,7 @@ const ownedDomainsList = domains.map((p) => ({
 const ownedServicesList = services.map((p) => ({
   label: `${p.data.name} (service)`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  collection: p.collection,
   tag: `v${p.data.version}`,
 }));
 
@@ -63,12 +65,13 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
   label: `${p.data.name} (${p.collection.slice(0, -1)})`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
   color: p.collection === 'events' ? 'orange' : 'blue',
+  collection: p.collection,
   tag: `v${p.data.version}`,
 }));
 ---
 
-<DocsLayout title={`Team | ${props.data.name}`} description={props.data.summary}>
-  <div class="flex min-h-screen docs-layout">
+<VerticalSideBarLayout title={`Team | ${props.data.name}`} description={props.data.summary}>
+  <div class="flex min-h-screen docs-layout sm:px-8">
     <main class="flex-1 w-full pr-10 pt-4">
       <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
 
@@ -117,23 +120,23 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
         <NodeGraph id={props.data.id} type={props?.catalog?.type} nodes={props.nodes} masterNode={{ name: props.data.name, id: props.data.id }} client:load />
       </div> -->
     </main>
-    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
+    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto">
       <div class="divide-y-2 divide-gray-100">
-        <PillList
+        <PillListFlat
           color="pink"
           title={`Owned domains (${ownedDomainsList.length})`}
           pills={ownedDomainsList}
           emptyMessage={`${props.data.name} does not own any domains.`}
           client:load
         />
-        <PillList
+        <PillListFlat
           color="blue"
           title={`Owned services (${ownedServicesList.length})`}
           pills={ownedServicesList}
           emptyMessage={`This team does not own any services .`}
           client:load
         />
-        <PillList
+        <PillListFlat
           color="red"
           title={`Owned messages (${ownedEventsList.length})`}
           pills={ownedEventsList}
@@ -150,7 +153,7 @@ const ownedEventsList = [...events, ...commands].map((p) => ({
       <!-- {props?.collection === 'events' && <MessageSideBar message={props} />} -->
     </aside>
   </div>
-</DocsLayout>
+</VerticalSideBarLayout>
 
 <style>
   .docs-layout .prose {