@eventcatalog/core 2.11.5 → 2.11.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

package/package.json

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

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]/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>