@eventcatalog/core 2.10.1 → 2.11.0

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

@@ -1,14 +1,14 @@
 ---
-import DocsLayout from '@layouts/DocsLayout.astro';
 import components from '@components/MDX/components';
 
 // SideBars
 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 { getUsers } from '@utils/users';
 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 getUsers();
@@ -38,12 +38,14 @@ const teams = props.data.associatedTeams as CollectionEntry<'teams'>[];
 const ownedDomainsList = domains.map((p) => ({
   label: `${p.data.name}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
+  collection: p.collection,
   tag: `v${p.data.version}`,
 }));
 
 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}`,
 }));
 
@@ -51,6 +53,7 @@ const ownedMessageList = [...events, ...commands].map((p) => ({
   label: `${p.data.name}`,
   badge: p.collection,
   color: p.collection === 'events' ? 'orange' : 'blue',
+  collection: p.collection,
   tag: `v${p.data.version}`,
   href: buildUrl(`/docs/${p.collection}/${p.data.id}/${p.data.version}`),
 }));
@@ -63,107 +66,128 @@ const associatedTeams = teams.map((o) => ({
 }));
 ---
 
-<DocsLayout title={`User | ${props.data.name}`}>
-  <div class="flex min-h-screen docs-layout">
-    <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> -->
-      <div class="border-b border-gray-200 pb-4 py-4">
-        <div class="flex justify-start space-x-8">
-          <img src={props.data.avatarUrl} alt="Profile picture" class="shadow-md w-28 rounded-md" />
-          <div class="flex flex-col justify-between">
-            <div>
-              <h2 class="text-4xl font-bold">{props.data.name}</h2>
-              <span class="text-xl font-bold text-gray-500">{props.data.role}</span>
-            </div>
-            <div class="space-y-1">
-              {
-                props.data.email && (
-                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                    <EnvelopeIcon className="w-4 h-4 text-purple-400" />
-                    <a href={`mailto:${props.data.email}`}>Email</a>
-                  </div>
-                )
-              }
-              {
-                props.data.slackDirectMessageUrl && (
-                  <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
-                    <img src="/slack-icon.svg" class="w-4 h-3" />
-                    <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
-                  </div>
-                )
-              }
+<VerticalSideBarLayout title={`User | ${props.data.name}`}>
+  <main class="flex sm:px-8 docs-layout h-full">
+    <div class="flex docs-layout w-full">
+      <div class="w-full lg:mr-6 pr-8 overflow-y-auto py-4">
+        <!-- <span class="text-purple-500 bg-purple-100 px-2 py-1 rounded-md">v{props.data.version}</span> -->
+        <div class="border-b border-gray-200 pb-4 py-4">
+          <div class="flex justify-start space-x-8">
+            <img src={props.data.avatarUrl} alt="Profile picture" class="shadow-md w-28 rounded-md" />
+            <div class="flex flex-col justify-between">
+              <div>
+                <h2 class="text-4xl font-bold">{props.data.name}</h2>
+                <span class="text-xl font-bold text-gray-500">{props.data.role}</span>
+              </div>
+              <div class="space-y-1">
+                {
+                  props.data.email && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <EnvelopeIcon className="w-4 h-4 text-purple-400" />
+                      <a href={`mailto:${props.data.email}`}>Email</a>
+                    </div>
+                  )
+                }
+                {
+                  props.data.slackDirectMessageUrl && (
+                    <div class="flex space-x-1 items-center text-xs text-gray-500 font-bold hover:underline hover:text-primary">
+                      <img src="/slack-icon.svg" class="w-4 h-3" />
+                      <a href={`${props.data.slackDirectMessageUrl}`}>Send DM on Slack</a>
+                    </div>
+                  )
+                }
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div class="border-b border-gray-200">
-        <div class="mx-auto max-w-7xl px-6 lg:px-8">
-          <div class="mx-auto max-w-2xl lg:max-w-none">
-            <dl class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4">
-              <div class="flex flex-col p-8">
-                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
-                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
-              </div>
-              <div class="flex flex-col p-8">
-                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
-                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
-              </div>
-              <div class="flex flex-col p-8">
-                <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
-                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
-              </div>
-              <!-- <div class="flex flex-col  p-8">
+        <div class="border-b border-gray-200">
+          <div class="mx-auto max-w-7xl px-6 lg:px-8">
+            <div class="mx-auto max-w-2xl lg:max-w-none">
+              <dl
+                class="hidden lg:grid grid-cols-1 gap-0.5 overflow-hidden rounded-2xl text-center sm:grid-cols-4 lg:grid-cols-4"
+              >
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedDomainsList.length}</dd>
+                </div>
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned services</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedServicesList.length}</dd>
+                </div>
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># owned messages</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{ownedMessageList.length}</dd>
+                </div>
+                <!-- <div class="flex flex-col  p-8">
                 <dt class="text-sm font-semibold leading-6 text-gray-600"># owned domains</dt>
                 <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">2</dd>
               </div> -->
-              <div class="flex flex-col p-8">
-                <dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
-                <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
-              </div>
-            </dl>
+                <div class="flex flex-col p-8">
+                  <dt class="text-sm font-semibold leading-6 text-gray-600"># teams joined</dt>
+                  <dd class="order-first text-3xl font-semibold tracking-tight text-gray-900">{associatedTeams.length}</dd>
+                </div>
+              </dl>
+            </div>
           </div>
         </div>
+        <div class="prose prose-md py-4 w-full">
+          <Content components={components(props)} />
+        </div>
       </div>
-      <div class="prose prose-md py-4 w-full">
-        <Content components={components(props)} />
-      </div>
-    </main>
-    <aside class="sticky top-20 h-[calc(100vh-theme(spacing.16))] w-56 overflow-y-auto">
-      <div class="divide-y-2 divide-gray-100">
-        <PillList
-          color="pink"
-          title={`Owned domains (${ownedDomainsList.length})`}
-          pills={ownedDomainsList}
-          emptyMessage={`${props.data.name} does not own any domains.`}
-          client:load
-        />
-        <PillList
-          color="pink"
-          title={`Owned services (${ownedServicesList.length})`}
-          pills={ownedServicesList}
-          emptyMessage={`${props.data.name} does not own any services.`}
-          client:load
-        />
-        <PillList
-          color="orange"
-          title={`Owned messages (${ownedMessageList.length})`}
-          pills={ownedMessageList}
-          emptyMessage={`${props.data.name} does not own any messages.`}
-          client:load
-        />
-        <OwnersList
-          title={`Member of team (${associatedTeams.length})`}
-          owners={associatedTeams}
-          emptyMessage={`${props.data.name} is not part of any documented team.`}
-          client:load
-        />
-      </div>
-    </aside>
-  </div>
-</DocsLayout>
+      <aside class="hidden lg:block sticky top-0 h-[calc(100vh-theme(spacing.16))] w-72 overflow-y-auto py-2">
+        <div class="divide-y-2 divide-gray-100 pr-6">
+          {
+            ownedDomainsList.length > 0 && (
+              <PillListFlat
+                color="pink"
+                title={`Owned domains (${ownedDomainsList.length})`}
+                pills={ownedDomainsList}
+                emptyMessage={`${props.data.name} does not own any domains.`}
+                client:load
+              />
+            )
+          }
+          {
+            ownedServicesList.length > 0 && (
+              <PillListFlat
+                color="pink"
+                title={`Owned services (${ownedServicesList.length})`}
+                pills={ownedServicesList}
+                emptyMessage={`${props.data.name} does not own any services.`}
+                client:load
+              />
+            )
+          }
+          {
+            ownedMessageList.length > 0 && (
+              <PillListFlat
+                color="orange"
+                title={`Owned messages (${ownedMessageList.length})`}
+                pills={ownedMessageList}
+                emptyMessage={`${props.data.name} does not own any messages.`}
+                client:load
+              />
+            )
+          }
+          {
+            associatedTeams.length > 0 && (
+              <OwnersList
+                title={`Member of team (${associatedTeams.length})`}
+                owners={associatedTeams}
+                emptyMessage={`${props.data.name} is not part of any documented team.`}
+                client:load
+              />
+            )
+          }
+        </div>
+      </aside>
+    </div>
+  </main>
+</VerticalSideBarLayout>
 
 <style>
   .docs-layout .prose {
     max-width: none;
+    overflow: auto;
   }
 </style>

package/src/pages/index.astro

@@ -1,6 +1,4 @@
 ---
-import Footer from '@layouts/Footer.astro';
-import PlainPage from '@layouts/PlainPage.astro';
 import { buildUrl } from '@utils/url-builder';
 import {
   BoltIcon,
@@ -16,86 +14,108 @@ import { getDomains } from '@utils/domains/domains';
 import { getServices } from '@utils/services/services';
 import { getFlows } from '@utils/flows/flows';
 import DiscoverInsight from '@components/DiscoverInsight.astro';
+import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
+import { BookOpen, BookOpenText, TableProperties, Workflow } from 'lucide-react';
 
 const { commands = [], events = [], queries = [] } = await getMessages();
 const domains = await getDomains();
 const services = await getServices();
 const flows = await getFlows();
+
+const getDefaultUrl = (route: string, defaultValue: string) => {
+  if (domains.length > 0) return buildUrl(`/${route}/domains/${domains[0].data.id}/${domains[0].data.latestVersion}`);
+  if (services.length > 0) return buildUrl(`/${route}/services/${services[0].data.id}/${services[0].data.latestVersion}`);
+  if (flows.length > 0) return buildUrl(`/${route}/flows/${flows[0].data.id}/${flows[0].data.latestVersion}`);
+  return buildUrl(defaultValue);
+};
 ---
 
-<PlainPage title="EventCatalog">
+<VerticalSideBarLayout title="EventCatalog">
   <body class="min-h-screen">
-    <main class="container mx-auto px-6 py-20 max-w-[90em]">
-      <section class="text-center mb-8">
-        <h1 class="text-5xl font-bold mb-6 text-gray-800">Welcome to <span class="text-primary">EventCatalog</span></h1>
-        <p class="text-xl mb-8 text-gray-700 max-w-2xl mx-auto font-light">
-          Discover and document your event-driven architecture effortlessly. EventCatalog centralizes your events, services, and
-          schemas in one place.
-        </p>
-      </section>
+    <main class="">
+      <div class="container mx-auto px-6 py-20 max-w-[90em]">
+        <section class="text-center mb-8">
+          <h1 class="text-5xl font-bold mb-6 text-gray-800">Welcome to <span class="text-primary">EventCatalog</span></h1>
+          <p class="text-xl mb-8 text-gray-700 max-w-2xl mx-auto font-light">
+            Discover and document your event-driven architecture effortlessly. EventCatalog centralizes your events, services, and
+            schemas in one place.
+          </p>
+        </section>
 
-      <div class="hidden md:block">
-        <h2 class="text-center text-xl font-bold">Architecture insights</h2>
-        <section class="mb-16 bg-white rounded-xl shadow-lg p-6">
-          <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
-            <DiscoverInsight color="text-yellow-600" dataTarget={domains.length} icon={RectangleGroupIcon} label="domains" />
+        <div class="hidden md:block">
+          <!-- <h2 class="text-center text-xl ">Architecture insights</h2> -->
+          <section class="mb-16 bg-white rounded-xl shadow-lg p-6">
+            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-4">
+              <DiscoverInsight color="text-yellow-600" dataTarget={domains.length} icon={RectangleGroupIcon} label="domains" />
 
-            <DiscoverInsight color="text-pink-500" dataTarget={services.length} icon={ServerIcon} label="services" />
+              <DiscoverInsight color="text-pink-500" dataTarget={services.length} icon={ServerIcon} label="services" />
 
-            <DiscoverInsight color="text-blue-500" dataTarget={commands.length} icon={ChatBubbleLeftIcon} label="commands" />
+              <DiscoverInsight color="text-blue-500" dataTarget={commands.length} icon={ChatBubbleLeftIcon} label="commands" />
 
-            <DiscoverInsight color="text-green-500" dataTarget={queries.length} icon={MagnifyingGlassIcon} label="queries" />
+              <DiscoverInsight color="text-green-500" dataTarget={queries.length} icon={MagnifyingGlassIcon} label="queries" />
 
-            <DiscoverInsight color="text-orange-400" dataTarget={events.length} icon={BoltIcon} label="events" />
+              <DiscoverInsight color="text-orange-400" dataTarget={events.length} icon={BoltIcon} label="events" />
 
-            <DiscoverInsight color="text-green-800" dataTarget={flows.length} icon={QueueListIcon} label="flows" />
-          </div>
-        </section>
+              <DiscoverInsight color="text-green-800" dataTarget={flows.length} icon={QueueListIcon} label="flows" />
+            </div>
+          </section>
 
-        <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
-          <div
-            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-          >
-            <div class="h-2 bg-blue-400"></div>
-            <div class="p-6">
-              <h2 class="text-2xl font-semibold mb-4 text-blue-700">Documentation</h2>
-              <p class="text-gray-600 mb-4">
-                Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
-              </p>
-              <a href={buildUrl('/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a>
+          <section class="grid grid-cols-1 md:grid-cols-3 gap-8 mb-16">
+            <div
+              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+            >
+              <div class="h-2 bg-blue-400"></div>
+              <div class="p-6">
+                <h2 class="text-2xl font-semibold mb-4 text-blue-700 flex items-center">
+                  <BookOpenText size={24} className="inline-block mr-2" />
+                  <span class="block">Documentation</span>
+                </h2>
+                <p class="text-gray-600 mb-4">
+                  Create and maintain comprehensive documentation for your events, including schemas, examples, and versioning.
+                </p>
+                <a href={getDefaultUrl('docs', '/docs')} class="text-blue-600 hover:text-blue-800 font-semibold">Explore docs →</a
+                >
+              </div>
             </div>
-          </div>
-          <div
-            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-          >
-            <div class="h-2 bg-teal-400"></div>
-            <div class="p-6">
-              <h2 class="text-2xl font-semibold mb-4 text-teal-700">Visualiser</h2>
-              <p class="text-gray-600 mb-4">
-                Transform complex event flows into clear, interactive diagrams. Gain insights at a glance and communicate
-                effectively across teams.
-              </p>
-              <a href={buildUrl('/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold">Explore visualiser →</a>
+            <div
+              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+            >
+              <div class="h-2 bg-teal-400"></div>
+              <div class="p-6">
+                <h2 class="text-2xl font-semibold mb-4 text-teal-700 flex items-center">
+                  <Workflow size={24} className="inline-block mr-2" />
+                  <span class="block">Visualiser</span>
+                </h2>
+                <p class="text-gray-600 mb-4">
+                  Transform complex event flows into clear, interactive diagrams. Gain insights at a glance and communicate
+                  effectively across teams.
+                </p>
+                <a href={getDefaultUrl('visualiser', '/visualiser')} class="text-teal-600 hover:text-teal-800 font-semibold"
+                  >Explore visualiser →</a
+                >
+              </div>
             </div>
-          </div>
 
-          <div
-            class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
-          >
-            <div class="h-2 bg-red-700"></div>
-            <div class="p-6">
-              <h2 class="text-2xl font-semibold mb-4 text-red-700">Discover</h2>
-              <p class="text-gray-600 mb-4">
-                Dive deep into your event catalog. Search, filter, and analyze your events to gain insights and improve your
-                architecture.
-              </p>
-              <a href={buildUrl('/discover/events')} class="text-red-600 hover:text-red-800 font-semibold">Start exploring →</a>
+            <div
+              class="bg-white rounded-xl shadow-lg overflow-hidden hover:shadow-xl transition duration-300 transform hover:-translate-y-1"
+            >
+              <div class="h-2 bg-red-700"></div>
+              <div class="p-6">
+                <h2 class="text-2xl font-semibold mb-4 text-red-700 flex items-center">
+                  <TableProperties size={24} className="inline-block mr-2" />
+                  <span class="block">Discover</span>
+                </h2>
+                <p class="text-gray-600 mb-4">
+                  Dive deep into your event catalog. Search, filter, and analyze your events to gain insights and improve your
+                  architecture.
+                </p>
+                <a href={buildUrl('/discover/events')} class="text-red-600 hover:text-red-800 font-semibold">Start exploring →</a>
+              </div>
             </div>
-          </div>
-        </section>
+          </section>
+        </div>
+        <!-- <Footer className="px-10" /> -->
       </div>
     </main>
   </body>
-</PlainPage>
-
-<Footer className="px-10" />
+</VerticalSideBarLayout>

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

@@ -6,6 +6,7 @@ import { getFlows } from '@utils/flows/flows';
 import { buildUrl } from '@utils/url-builder';
 
 import { pageDataLoader } from '@utils/pages/pages';
+import { ViewTransitions } from 'astro:transitions';
 type PageTypesWithFlows = PageTypes | 'flows';
 
 export async function getStaticPaths() {
@@ -41,7 +42,7 @@ const {
 ---
 
 <VisualiserLayout title={`Visualiser | ${props.data.name} (${props.collection})`} description={props.data.summary}>
-  <div class="bg-gray-100/50">
+  <div class="bg-gray-100/50 m-4">
     <div class="h-[calc(100vh-110px)] w-full relative border border-gray-200" id={`${id}-portal`} transition:animate="fade"></div>
     <NodeGraph
       id={id}
@@ -57,4 +58,5 @@ const {
       }}
     />
   </div>
+  <ViewTransitions />
 </VisualiserLayout>

package/src/utils/collections/icons.ts

@@ -0,0 +1,33 @@
+import {
+  ServerIcon,
+  RectangleGroupIcon,
+  BoltIcon,
+  ChatBubbleLeftIcon,
+  MagnifyingGlassIcon,
+  QueueListIcon,
+  UserGroupIcon,
+  UserIcon,
+} from '@heroicons/react/24/outline';
+
+export const getIconForCollection = (collection: string) => {
+  switch (collection) {
+    case 'domains':
+      return RectangleGroupIcon;
+    case 'services':
+      return ServerIcon;
+    case 'events':
+      return BoltIcon;
+    case 'commands':
+      return ChatBubbleLeftIcon;
+    case 'queries':
+      return MagnifyingGlassIcon;
+    case 'flows':
+      return QueueListIcon;
+    case 'teams':
+      return UserGroupIcon;
+    case 'users':
+      return UserIcon;
+    default:
+      return ServerIcon;
+  }
+};

package/tailwind.config.mjs

@@ -24,7 +24,8 @@ export default {
   safelist: [
     { pattern: /border-.*-(200|400|500)/ },
     { pattern: /bg-.*-(100|200|400|500)/ },
-    { pattern: /from-.*-(100|200|400|500|700)/ },
+    { pattern: /from-.*-(100|200|300|400|500|700)/ },
+    { pattern: /to-.*-(100|200|300|400|500|700)/ },
     { pattern: /text-.*-(400|500|800)/ },
     'border-blue-200',
     'border-green-300',

package/src/components/Lists/BasicList.tsx

@@ -1,59 +0,0 @@
-import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { ChevronDownIcon } from '@heroicons/react/20/solid';
-
-interface Props {
-  title: string;
-  color: string;
-  items: {
-    label: string;
-    version: string;
-    badge?: string;
-    href: string;
-    color: string;
-    active: boolean;
-  }[];
-  emptyMessage: string;
-}
-
-const BasicList = ({ title, items, emptyMessage, color = 'gray' }: Props) => {
-  return (
-    <div>
-      <div className="mx-auto w-full max-w-lg divide-y divide-white/5 rounded-xl bg-white/5 py-2 ">
-        <Disclosure as="div" className="pb-4" defaultOpen={true}>
-          <DisclosureButton className="group flex w-full items-center justify-between">
-            <span className="font-semibold capitalize"> {title} </span>
-            <ChevronDownIcon className="size-5 fill-black/60 group-data-[hover]:fill-black/50 group-data-[open]:rotate-180" />
-          </DisclosureButton>
-          <DisclosurePanel className="mt-2 text-sm/5 text-black/80">
-            <ul role="list" className="">
-              {items.map((item) => {
-                return (
-                  <li key={item.version} className="px-2 w-full text-md xl:text-lg border-l border-gray-200 py-1 ">
-                    <a
-                      className={`flex justify-between items-center w-full px-2 rounded-md font-normal   ${item.active ? 'bg-primary/10 text-primary ' : 'font-thin'}`}
-                      href={item.href}
-                    >
-                      <span className="block truncate !whitespace-normal">{item.label}</span>
-                      {item.version && (
-                        <span className="block text-sm bg-primary/20 p-0.5 px-1 text-gray-600  rounded-md font-light">
-                          v{item.version}
-                        </span>
-                      )}
-                    </a>
-                  </li>
-                );
-              })}
-              {items.length === 0 && (
-                <li className="inline mr-2 leading-6 text-sm">
-                  <span className="text-gray-500">{emptyMessage}</span>
-                </li>
-              )}
-            </ul>
-          </DisclosurePanel>
-        </Disclosure>
-      </div>
-    </div>
-  );
-};
-
-export default BasicList;

package/src/layouts/DocsLayout.astro

@@ -1,62 +0,0 @@
----
-interface Props {
-  title: string;
-  description?: string;
-}
-
-const { title, description } = Astro.props;
-
-import SideBar from '../components/DocsNavigation.astro';
-import Header from '../components/Header.astro';
-import SEO from '../components/Seo.astro';
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <SEO title={`EventCatalog | ${title}`} description={description} ogTitle={title} />
-  </head>
-  <body>
-    <div class="px-10 max-w-[120em] mx-auto">
-      <Header />
-
-      <div>
-        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full">
-          <div class="w-full">
-            <div class="sticky top-0 z-10 h-8 pointer-events-none -mt-4">
-              <div class="h-full bg-gradient-to-b from-white to-transparent"></div>
-            </div>
-            <SideBar />
-          </div>
-        </nav>
-
-        <div class="pl-0 sm:pl-64 lg:pl-72 xl:pl-80 w-full pt-0 pb-40">
-          <slot />
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
-
-<style is:global>
-  .expressive-code {
-    margin: 1.2em 0;
-  }
-  html {
-    scroll-behavior: smooth;
-  }
-  h1,
-  h2,
-  h3 {
-    scroll-behavior: smooth;
-    scroll-margin: 70px;
-  }
-
-  .react-flow__handle {
-    opacity: 0;
-  }
-
-  .react-flow__attribution {
-    opacity: 0.1;
-  }
-</style>