@eventcatalog/core 2.11.4 → 2.11.6

package/.all-contributorsrc

@@ -419,6 +419,15 @@
       "contributions": [
         "code"
       ]
+    },
+    {
+      "login": "skyrpex",
+      "name": "Cristian Pallarés",
+      "avatar_url": "https://avatars.githubusercontent.com/u/1077520?v=4",
+      "profile": "https://pallares.io",
+      "contributions": [
+        "code"
+      ]
     }
   ],
   "contributorsPerLine": 7,

package/.github/workflows/lint.yml

@@ -13,10 +13,10 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - uses: pnpm/action-setup@v4
         with:
-          node-version: '20.x'
+          version: 9
       - name: Installation
-        run: npm ci
+        run: pnpm i
       - name: Prettier Code
-        run: npm run format:diff
+        run: pnpm run format:diff

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @eventcatalog/core
 
+## 2.11.6
+
+### Patch Changes
+
+- 9a531d2: feat(core): added ability to embed discovery table
+- 2352fc0: feat(core): added ability to embed catalog pages
+- 112f735: feat(core): added ability to embed visualiser without footers
+
+## 2.11.5
+
+### Patch Changes
+
+- 61e5cf1: fix(core): fixed outdir to output to users directory now
+- 6e88fcf: chore(core): moved some GitHub CI/CD to pnpm
+- b29d4f9: chore(core): removed code that copies over files twice to users catalog.
+- a283534: fix(docs): remove blank space from the version tag
+
 ## 2.11.4
 
 ### Patch Changes

package/README.md

@@ -29,7 +29,7 @@
 <h4>Features: Documentation generator for Event Driven Architectures, Markdown driven, Document Domains/Services/Messages/Schemas and more, Content versioning, Assign Owners, Schemas, OpenAPI, MDX Components and more...</h4>
 
 <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-[![All Contributors](https://img.shields.io/badge/all_contributors-44-orange.svg?style=flat-square)](#contributors-)
+[![All Contributors](https://img.shields.io/badge/all_contributors-45-orange.svg?style=flat-square)](#contributors-)
 <!-- ALL-CONTRIBUTORS-BADGE:END -->
 
 [Read the Docs](https://eventcatalog.dev/) | [Edit the Docs](https://github.com/event-catalog/docs) | [View Demo](https://demo.eventcatalog.dev/docs)
@@ -237,6 +237,7 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
     <tr>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/hpatoio"><img src="https://avatars.githubusercontent.com/u/249948?v=4?s=100" width="100px;" alt="Simone Fumagalli"/><br /><sub><b>Simone Fumagalli</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=hpatoio" title="Documentation">📖</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/d-o-h"><img src="https://avatars.githubusercontent.com/u/23699653?v=4?s=100" width="100px;" alt="d-o-h"/><br /><sub><b>d-o-h</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=d-o-h" title="Code">💻</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://pallares.io"><img src="https://avatars.githubusercontent.com/u/1077520?v=4?s=100" width="100px;" alt="Cristian Pallarés"/><br /><sub><b>Cristian Pallarés</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=skyrpex" title="Code">💻</a></td>
     </tr>
   </tbody>
 </table>

package/astro.config.mjs

@@ -10,7 +10,7 @@ import { join } from 'node:path';
 import config from './eventcatalog.config';
 import expressiveCode from 'astro-expressive-code';
 
-const coreDirectory = process.env.CATALOG_DIR || process.cwd();
+const projectDirectory = process.env.PROJECT_DIR || process.cwd();
 const base = config.base || '/';
 
 // https://astro.build/config
@@ -18,7 +18,7 @@ export default defineConfig({
   base,
   server: { port: config.port || 3000 },
 
-  outDir: config.outDir ? join(coreDirectory, config.outDir) : join(coreDirectory, 'dist'),
+  outDir: config.outDir ? join(projectDirectory, config.outDir) : join(projectDirectory, 'dist'),
 
   // https://docs.astro.build/en/reference/configuration-reference/#site
   site: config.homepageLink || 'https://eventcatalog.dev/',

package/bin/dist/eventcatalog.cjs

@@ -40,16 +40,6 @@ var dir = process.cwd();
 var core = (0, import_node_path.join)(dir, ".eventcatalog-core");
 var eventCatalogDir = (0, import_node_path.join)(currentDir, "../../");
 program.name("eventcatalog").description("Documentation tool for event-driven architectures");
-var copyFile = (from, to) => {
-  if (import_fs.default.existsSync(from)) {
-    import_fs.default.cpSync(from, to);
-  }
-};
-var copyFolder = (from, to) => {
-  if (import_fs.default.existsSync(from)) {
-    import_fs.default.cpSync(from, to, { recursive: true });
-  }
-};
 var ensureDir = (dir2) => {
   if (!import_fs.default.existsSync(dir2)) {
     import_fs.default.mkdirSync(dir2);
@@ -76,9 +66,6 @@ program.command("dev").description("Run development server of EventCatalog").opt
   }
   if (options.forceRecreate) clearCore();
   copyCore();
-  copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.styles.css"), (0, import_node_path.join)(core, "eventcatalog.styles.css"));
   console.log("EventCatalog is starting at http://localhost:3000/docs");
   (0, import_node_child_process.execSync)(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run dev`, {
     cwd: core,
@@ -89,25 +76,17 @@ program.command("dev").description("Run development server of EventCatalog").opt
 program.command("build").description("Run build of EventCatalog").action((options) => {
   console.log("Building EventCatalog...");
   copyCore();
-  copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.styles.css"), (0, import_node_path.join)(core, "eventcatalog.styles.css"));
   (0, import_node_child_process.execSync)(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run build`, {
     cwd: core,
     stdio: "inherit"
   });
-  copyFolder((0, import_node_path.join)(core, "dist"), (0, import_node_path.join)(dir, "dist"));
 });
 var previewCatalog = () => {
   copyCore();
-  copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.styles.css"), (0, import_node_path.join)(core, "eventcatalog.styles.css"));
   (0, import_node_child_process.execSync)(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run preview -- --root ${dir} --port 3000`, {
     cwd: core,
     stdio: "inherit"
   });
-  copyFolder((0, import_node_path.join)(core, "dist"), (0, import_node_path.join)(dir, "dist"));
 };
 program.command("preview").description("Serves the contents of your eventcatalog build directory").action((options) => {
   console.log("Starting preview of your build...");
@@ -119,9 +98,6 @@ program.command("start").description("Serves the contents of your eventcatalog b
 });
 program.command("generate [siteDir]").description("Start the generator scripts.").action(() => {
   copyCore();
-  copyFolder((0, import_node_path.join)(dir, "public"), (0, import_node_path.join)(core, "public"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.config.js"), (0, import_node_path.join)(core, "eventcatalog.config.js"));
-  copyFile((0, import_node_path.join)(dir, "eventcatalog.styles.css"), (0, import_node_path.join)(core, "eventcatalog.styles.css"));
   (0, import_node_child_process.execSync)(`cross-env PROJECT_DIR='${dir}' npm run generate`, {
     cwd: core,
     stdio: "inherit"

package/bin/dist/eventcatalog.js

@@ -13,16 +13,6 @@ var dir = process.cwd();
 var core = join(dir, ".eventcatalog-core");
 var eventCatalogDir = join(currentDir, "../../");
 program.name("eventcatalog").description("Documentation tool for event-driven architectures");
-var copyFile = (from, to) => {
-  if (fs.existsSync(from)) {
-    fs.cpSync(from, to);
-  }
-};
-var copyFolder = (from, to) => {
-  if (fs.existsSync(from)) {
-    fs.cpSync(from, to, { recursive: true });
-  }
-};
 var ensureDir = (dir2) => {
   if (!fs.existsSync(dir2)) {
     fs.mkdirSync(dir2);
@@ -49,9 +39,6 @@ program.command("dev").description("Run development server of EventCatalog").opt
   }
   if (options.forceRecreate) clearCore();
   copyCore();
-  copyFolder(join(dir, "public"), join(core, "public"));
-  copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));
-  copyFile(join(dir, "eventcatalog.styles.css"), join(core, "eventcatalog.styles.css"));
   console.log("EventCatalog is starting at http://localhost:3000/docs");
   execSync(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run dev`, {
     cwd: core,
@@ -62,25 +49,17 @@ program.command("dev").description("Run development server of EventCatalog").opt
 program.command("build").description("Run build of EventCatalog").action((options) => {
   console.log("Building EventCatalog...");
   copyCore();
-  copyFolder(join(dir, "public"), join(core, "public"));
-  copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));
-  copyFile(join(dir, "eventcatalog.styles.css"), join(core, "eventcatalog.styles.css"));
   execSync(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run build`, {
     cwd: core,
     stdio: "inherit"
   });
-  copyFolder(join(core, "dist"), join(dir, "dist"));
 });
 var previewCatalog = () => {
   copyCore();
-  copyFolder(join(dir, "public"), join(core, "public"));
-  copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));
-  copyFile(join(dir, "eventcatalog.styles.css"), join(core, "eventcatalog.styles.css"));
   execSync(`cross-env PROJECT_DIR='${dir}' CATALOG_DIR='${core}' npm run preview -- --root ${dir} --port 3000`, {
     cwd: core,
     stdio: "inherit"
   });
-  copyFolder(join(core, "dist"), join(dir, "dist"));
 };
 program.command("preview").description("Serves the contents of your eventcatalog build directory").action((options) => {
   console.log("Starting preview of your build...");
@@ -92,9 +71,6 @@ program.command("start").description("Serves the contents of your eventcatalog b
 });
 program.command("generate [siteDir]").description("Start the generator scripts.").action(() => {
   copyCore();
-  copyFolder(join(dir, "public"), join(core, "public"));
-  copyFile(join(dir, "eventcatalog.config.js"), join(core, "eventcatalog.config.js"));
-  copyFile(join(dir, "eventcatalog.styles.css"), join(core, "eventcatalog.styles.css"));
   execSync(`cross-env PROJECT_DIR='${dir}' npm run generate`, {
     cwd: core,
     stdio: "inherit"

package/package.json

@@ -6,7 +6,7 @@
     "url": "https://github.com/event-catalog/eventcatalog.git"
   },
   "type": "module",
-  "version": "2.11.4",
+  "version": "2.11.6",
   "publishConfig": {
     "access": "public"
   },

package/scripts/build-ci.js

@@ -2,7 +2,6 @@
 
 // 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;
 
@@ -12,10 +11,6 @@ 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(
   `cross-env NODE_ENV=CI PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run build && astro check --minimumSeverity error`,
   {

package/scripts/start-catalog-locally.js

@@ -1,6 +1,5 @@
 #!/usr/bin/env node
 import { join } from 'node:path';
-import fs from 'fs';
 import { execSync } from 'node:child_process';
 const __dirname = import.meta.dirname;
 
@@ -10,9 +9,6 @@ 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(
   `cross-env NODE_ENV=development PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run scripts:hydrate-content && cross-env PROJECT_DIR=${projectDIR} CATALOG_DIR=${catalogDir} npm run dev:local`,
   {

package/src/components/MDX/NodeGraph/NodeGraph.tsx

@@ -215,12 +215,21 @@ const NodeGraph = ({
   linksToVisualiser = false,
 }: NodeGraphProps) => {
   const [elem, setElem] = useState(null);
+  const [showFooter, setShowFooter] = useState(true);
 
   useEffect(() => {
     // @ts-ignore
     setElem(document.getElementById(`${id}-portal`));
   }, []);
 
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const embed = urlParams.get('embed');
+    if (embed === 'true') {
+      setShowFooter(false);
+    }
+  }, []);
+
   if (!elem) return null;
 
   return (
@@ -236,21 +245,23 @@ const NodeGraph = ({
             linksToVisualiser={linksToVisualiser}
           />
 
-          <div className="flex justify-between">
-            {footerLabel && (
-              <div className="py-2 w-full text-left ">
-                <span className=" text-sm no-underline py-2 text-gray-300">{footerLabel}</span>
-              </div>
-            )}
+          {showFooter && (
+            <div className="flex justify-between" id="visualiser-footer">
+              {footerLabel && (
+                <div className="py-2 w-full text-left ">
+                  <span className=" text-sm no-underline py-2 text-gray-300">{footerLabel}</span>
+                </div>
+              )}
 
-            {href && (
-              <div className="py-2 w-full text-right">
-                <a className=" text-sm no-underline py-2 text-gray-800 hover:text-primary" href={href}>
-                  {hrefLabel} &rarr;
-                </a>
-              </div>
-            )}
-          </div>
+              {href && (
+                <div className="py-2 w-full text-right">
+                  <a className=" text-sm no-underline py-2 text-gray-800 hover:text-primary" href={href}>
+                    {hrefLabel} &rarr;
+                  </a>
+                </div>
+              )}
+            </div>
+          )}
         </ReactFlowProvider>,
         elem
       )}

package/src/components/Tables/Table.tsx

@@ -15,7 +15,7 @@ import type { CollectionEntry } from 'astro:content';
 import DebouncedInput from './DebouncedInput';
 
 import { getColumnsByCollection } from './columns';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import type { CollectionTypes } from '@types';
 
 declare module '@tanstack/react-table' {
@@ -40,6 +40,18 @@ export const Table = ({
   const [data, _setData] = useState(initialData);
   const [columnFilters, setColumnFilters] = useState<ColumnFiltersState>([]);
 
+  useEffect(() => {
+    console.log(window.location.pathname);
+  }, []);
+
+  useEffect(() => {
+    const urlParams = new URLSearchParams(window.location.search);
+    const id = urlParams.get('id');
+    if (id) {
+      setColumnFilters([{ id: 'name', value: id }]);
+    }
+  }, []);
+
   const columns = useMemo(() => getColumnsByCollection(collection), [collection]);
 
   const table = useReactTable({

package/src/layouts/DiscoverLayout.astro

@@ -76,16 +76,7 @@ const tabs = [
 
 <VerticalSideBarLayout title={`Explore | ${title}`}>
   <main class="ml-0">
-    <div>
-      <!-- <div class="sm:hidden">
-        <label for="tabs" class="sr-only">Select a tab</label>
-        <select id="tabs" name="tabs" class="block w-full rounded-md border-gray-300 focus:border-indigo-500 focus:ring-indigo-500">
-          <option>My Account</option>
-          <option>Company</option>
-          <option selected>Team Members</option>
-          <option>Billing</option>
-        </select>
-      </div> -->
+    <div id="discover-collection-tabs">
       <div class="hidden sm:block">
         <div class="border-b border-gray-200">
           <nav class="flex space-x-8 -mb-0.5 pl-6" aria-label="Tabs">

package/src/layouts/VerticalSideBarLayout.astro

@@ -192,20 +192,6 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
                 })
               }
             </div>
-            <!-- <div class="flex flex-col items-center mt-4 space-y-4 -mb-10">
-              <a href="https://discord.com/invite/3rjaZMmrAm" class="text-gray-500 has-tooltip">
-                <span class="tooltip rounded shadow-lg p-1 text-xs bg-black text-white ml-10 w-[162px]"
-                  >Join EventCatalog Discord</span
-                >
-                <img src="/icons/discord.svg" class="w-7 h-7" />
-              </a>
-              <a href="https://github.com/event-catalog/eventcatalog" class="text-gray-500 has-tooltip">
-                <span class="tooltip rounded shadow-lg p-1 text-xs bg-black text-white ml-10 w-[175px]"
-                  >Found an issue? Let us know</span
-                >
-                <img src="/icons/github-purple.svg" class="w-7 h-7" />
-              </a>
-            </div> -->
           </nav>
         </div>
 
@@ -234,8 +220,31 @@ const showSideBarOnLoad = currentNavigationItem?.sidebar;
   });
 
   document.addEventListener('contentLoaded', () => {
-    const sidebar = document.getElementById('sidebar');
+    // Users can add ?embed=true to the URL to hide the navigation
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
     const content = document.getElementById('content');
+
+    if (embeded) {
+      const elementsToHide = [
+        'eventcatalog-vertical-nav',
+        'eventcatalog-header',
+        'eventcatalog-header-spacer',
+        'visualiser-footer',
+        'discover-collection-tabs',
+      ];
+
+      elementsToHide.forEach((id) => {
+        const element = document.getElementById(id);
+        if (element) element.style.display = 'none';
+      });
+
+      content.classList.remove('ml-16');
+      return;
+    }
+
+    const sidebar = document.getElementById('sidebar');
     const currentPath = window.location.href;
 
     // Hide the sidebar if the current navigation item is not a sidebar item

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

@@ -173,8 +173,8 @@ const badges = [getBadge(), ...contentBadges, ...getSpecificationBadges()];
                           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} →
+                          The latest version of this {props.collection.slice(0, props.collection.length - 1)} is
+                          <span>v{props.data.latestVersion}</span> &rarr;
                         </a>
                       </p>
                     </div>

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

@@ -37,10 +37,17 @@ const redirectUrl = buildUrl(pathname + '/' + props.data.latestVersion);
 <!doctype html>
 <html lang="en">
   <head>
-    <meta http-equiv="refresh" content={`0; url=${redirectUrl}`} />
     <Seo title={`EventCatalog | ${pageTitle}`} ogTitle={pageTitle} />
   </head>
   <body>
     <p>You are being redirected to <a href={redirectUrl}>{redirectUrl}</a></p>
   </body>
 </html>
+
+<script define:vars={{ redirectUrl }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const searchParams = window.location.search;
+    const fullRedirectUrl = redirectUrl + searchParams;
+    window.location.href = fullRedirectUrl;
+  });
+</script>

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

@@ -60,3 +60,16 @@ const {
   </div>
   <ViewTransitions />
 </VisualiserLayout>
+
+<script define:vars={{ id }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const urlSearchParams = new URLSearchParams(window.location.search);
+    const params = Object.fromEntries(urlSearchParams.entries());
+    const embeded = params.embed === 'true' ? true : false;
+    const viewport = document.getElementById(`${id}-portal`);
+
+    if (embeded) {
+      viewport.style.height = 'calc(100vh - 30px)';
+    }
+  });
+</script>

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

@@ -0,0 +1,55 @@
+---
+import Seo from '@components/Seo.astro';
+import { buildUrl } from '@utils/url-builder';
+import { getEvents } from '@utils/events';
+import { getCommands } from '@utils/commands';
+import { getServices } from '@utils/services/services';
+import { getDomains } from '@utils/domains/domains';
+import type { CollectionEntry } from 'astro:content';
+import type { CollectionTypes } from '@types';
+
+export async function getStaticPaths() {
+  const [events, commands, services, domains] = await Promise.all([getEvents(), getCommands(), getServices(), getDomains()]);
+
+  const buildPages = (collection: CollectionEntry<CollectionTypes>[]) => {
+    return collection.map((item) => ({
+      params: {
+        type: item.collection,
+        id: item.data.id,
+      },
+      props: {
+        type: item.collection,
+        ...item,
+      },
+    }));
+  };
+
+  return [...buildPages(domains), ...buildPages(events), ...buildPages(services), ...buildPages(commands)];
+}
+
+const props = Astro.props;
+const pageTitle = `${props.collection} | ${props.data.name}`.replace(/^\w/, (c) => c.toUpperCase());
+
+const { pathname } = Astro.url;
+
+// redirect with any search params too
+const redirectUrl = buildUrl(pathname + '/' + props.data.latestVersion);
+---
+
+<!doctype html>
+<html lang="en">
+  <head>
+    <Seo title={`EventCatalog | ${pageTitle}`} ogTitle={pageTitle} />
+  </head>
+  <body>
+    <p>You are being redirected to <a href={redirectUrl}>{redirectUrl}</a></p>
+  </body>
+</html>
+
+<script define:vars={{ redirectUrl }}>
+  document.addEventListener('DOMContentLoaded', () => {
+    const searchParams = window.location.search;
+    const fullRedirectUrl = redirectUrl + searchParams;
+    window.location.href = fullRedirectUrl;
+  });
+</script>

package/src/pages/visualiser/index.astro

@@ -1,30 +0,0 @@
----
-import Layout from '../../layouts/VisualiserLayout.astro';
----
-
-<Layout>
-  <div class="hidden no-items py-56 text-center -ml-52 text-gray-400">
-    No data loaded into your catalog. Please add some data to your to see visuals.
-  </div>
-</Layout>
-
-<script is:inline>
-  const navigationElem = document.getElementById('visualiser-navigation');
-
-  if (navigationElem) {
-    // Find the total anchor links
-    const totalAnchorLinks = navigationElem.querySelectorAll('a');
-    const link = navigationElem.querySelector('a');
-    const noItems = document.querySelector('.no-items');
-
-    // Show no-items if there are none
-    if (totalAnchorLinks.length === 0 && noItems) {
-      noItems.classList.remove('hidden');
-    }
-
-    // Find the element with the id visualiser-navigation and the first a link in there and click it
-    if (link) {
-      link.click();
-    }
-  }
-</script>