@eventcatalog/core 2.7.12 → 2.7.14

package/.github/ISSUE_TEMPLATE/bug.yml

@@ -1,6 +1,6 @@
 name: Bug Report 🐞
 description: Create a bug report
-labels: ["🐛 bug"]
+labels: ["bug"]
 body:
 - type: markdown
   attributes:

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @eventcatalog/core
 
+## 2.7.14
+
+### Patch Changes
+
+- c45ebd0: feat(core): added new steps component
+
+## 2.7.13
+
+### Patch Changes
+
+- 6268155: feat(core): new styles added to header and docs sidebar
+
 ## 2.7.12
 
 ### Patch Changes

package/README.md

@@ -226,6 +226,9 @@ Thanks goes to these wonderful people ([emoji key](https://allcontributors.org/d
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/carlosallexandre"><img src="https://avatars.githubusercontent.com/u/20143946?v=4?s=100" width="100px;" alt="Carlos Rodrigues"/><br /><sub><b>Carlos Rodrigues</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=carlosallexandre" title="Code">💻</a></td>
       <td align="center" valign="top" width="14.28%"><a href="https://github.com/XaaXaaX"><img src="https://avatars.githubusercontent.com/u/13409925?v=4?s=100" width="100px;" alt="omid eidivandi"/><br /><sub><b>omid eidivandi</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=XaaXaaX" title="Code">💻</a></td>
     </tr>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://github.com/IsmaelMartinez"><img src="https://avatars.githubusercontent.com/u/430992?v=4s=100" width="100px;" alt="IsmaelMartinez"/><br /><sub><b>IsmaelMartinez</b></sub></a><br /><a href="https://github.com/event-catalog/eventcatalog/commits?author=IsmaelMartinez" title="Code">💻</a></td>
+    </tr>
   </tbody>
 </table>
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@eventcatalog/core",
   "type": "module",
-  "version": "2.7.12",
+  "version": "2.7.14",
   "publishConfig": {
     "access": "public"
   },

package/src/components/Header.astro

@@ -27,8 +27,11 @@ const logo = {
 };
 ---
 
-<nav id="eventcatalog-header" class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-200 py-4 font-bold text-xl">
-  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-8 xxl:max-w-[96em]">
+<nav
+  id="eventcatalog-header"
+  class="fixed top-0 left-0 right-0 z-20 bg-white border-b border-gray-100 py-3 font-bold text-xl bg-opacity-50 backdrop-blur-sm"
+>
+  <div class="max-w-[120em] mx-auto px-4 sm:px-6 lg:px-10 xxl:max-w-[96em]">
     <div class="flex justify-between items-center">
       <div class="flex-shrink-0 flex items-center w-1/3">
         <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center">
@@ -37,7 +40,7 @@ const logo = {
         </a>
       </div>
 
-      <div class="hidden lg:block flex-grow mx-4 w-1/3">
+      <div class="hidden lg:block flex-grow w-1/3">
         <Search />
       </div>
 
@@ -47,7 +50,7 @@ const logo = {
             navItems.map((item) => {
               const isActive = currentPath.includes(item.href);
               return (
-                <li class={`font-light ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
+                <li class={`font-light text-[0.8em] ${isActive ? 'border-b-2 border-purple-500' : ''}`}>
                   <a href={item.href}>{item.label}</a>
                 </li>
               );
@@ -90,7 +93,7 @@ const logo = {
   </div>
 </nav>
 
-<div id="eventcatalog-header-spacer" class="h-20"></div>
+<div id="eventcatalog-header-spacer" class="h-16"></div>
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>

package/src/components/MDX/Steps/Step.astro

@@ -0,0 +1,25 @@
+---
+const { title } = Astro.props;
+---
+
+<li class="mb-8 ml-6 w-full xl:max-w-[50%]">
+  <div class="flex items-center mb-4">
+    <span class="step-number absolute flex items-center justify-center w-6 h-6 bg-purple-500/70 rounded-md -left-3 text-white">
+      <div></div>
+    </span>
+    <h3 class="font-semibold text-lg ml-0">{title}</h3>
+  </div>
+  <p class="text-gray-500 text-sm ml-4"><slot /></p>
+</li>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    document.querySelectorAll('li[data-step]').forEach((li) => {
+      const stepNumber = li.getAttribute('data-step');
+      const stepSpan = li.querySelector('.step-number div');
+      if (stepSpan) {
+        stepSpan.textContent = stepNumber;
+      }
+    });
+  });
+</script>

package/src/components/MDX/Steps/Steps.astro

@@ -0,0 +1,27 @@
+---
+const { title } = Astro.props;
+const html = await Astro.slots.render('default');
+
+function splitByLi(html: string) {
+  // Use regex to match <li> tags and their contents, including nested tags
+  const liRegex = /<li[\s\S]*?<\/li>/g;
+
+  // Find all matches
+  const matches = html.match(liRegex) || [];
+
+  // Add data-step attribute to each li
+  return matches.map((li: string, index: number) => {
+    // Replace the opening <li tag with <li data-step="index+1"
+    return li.replace(/<li/, `<li data-step="${index + 1}"`);
+  });
+}
+
+const data = splitByLi(html);
+---
+
+<div class="bg-white text-gray-800 py-10 pb-0 font-sans not-prose">
+  {title && <h2 class="text-2xl font-bold text-gray-800 mb-6">{title}</h2>}
+  <ol class="relative border-l border-gray-200 ml-3">
+    {data.map((item: any) => <Fragment set:html={item} />)}
+  </ol>
+</div>

package/src/components/MDX/components.tsx

@@ -6,6 +6,8 @@ import AccordionGroup from '@components/MDX/Accordion/AccordionGroup.astro';
 import Flow from '@components/MDX/Flow/Flow.astro';
 import Tiles from '@components/MDX/Tiles/Tiles.astro';
 import Tile from '@components/MDX/Tiles/Tile.astro';
+import Steps from '@components/MDX/Steps/Steps.astro';
+import Step from '@components/MDX/Steps/Step.astro';
 import Admonition from '@components/MDX/Admonition';
 import OpenAPI from '@components/MDX/OpenAPI/OpenAPI.astro';
 import AsyncAPI from '@components/MDX/AsyncAPI/AsyncAPI.astro';
@@ -21,8 +23,10 @@ const components = (props: any) => {
     Flow,
     OpenAPI,
     AsyncAPI,
-    Tiles,
     Tile,
+    Tiles,
+    Step,
+    Steps,
     Admonition: (mdxProp: any) => <Admonition {...mdxProp} {...props} />,
     File: (mdxProp: any) => File({ ...props, ...mdxProp }),
     NodeGraph: (mdxProp: any) => NodeGraphPortal({ ...props.data, ...mdxProp }),

package/src/components/Search.astro

@@ -1,24 +1,26 @@
 ---
+import MagnifyingGlassIcon from '@heroicons/react/24/outline/MagnifyingGlassIcon';
 import PageFindSearch from 'astro-pagefind/components/Search';
 ---
 
 <div>
-  <div class="relative mt-2 flex items-center">
+  <div class="relative flex items-center">
     <input
       id="search-dummy-input"
       type="text"
       name="search"
       id="search"
       placeholder="Search EventCatalog"
-      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 sm:text-sm sm:leading-6 px-4"
+      class="block w-full rounded-md caret-transparent border-0 py-1.5 pr-14 pl-10 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 font-light sm:text-sm sm:leading-6 px-4"
     />
+    <MagnifyingGlassIcon className="absolute inset-y-0 -left-1 h-9 w-8 flex items-center pl-4 text-gray-400" />
     <div class="absolute inset-y-0 right-0 flex py-1.5 pr-1.5">
-      <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
+      <kbd class="inline-flex items-center rounded px-1 font-sans text-xs text-gray-400">⌘K</kbd>
     </div>
   </div>
 </div>
 
-<div id="search-dialog" class="hidden relative z-10" role="dialog" aria-modal="true">
+<div id="search-dialog" class="hidden relative z-50" role="dialog" aria-modal="true">
   <div class="fixed inset-0 bg-gray-500 bg-opacity-25 transition-opacity search-background backdrop-blur-sm bg-black/10"></div>
   <div id="search-background" class="fixed inset-0 z-10 w-screen overflow-y-auto p-4 sm:p-6 md:p-20">
     <div
@@ -46,6 +48,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
 <script>
   const dummyInput = document.getElementById('search-dummy-input');
   const dialog = document.getElementById('search-dialog');
+  const header = document.getElementById('eventcatalog-header');
 
   // Listen for the short cut keys
   window.addEventListener('keydown', (event) => {
@@ -56,6 +59,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
     if (event.key === 'Escape') {
       if (dialog) {
         dialog.style.display = 'none';
+        if (header) header.classList.add('backdrop-blur-sm');
       }
     }
   });
@@ -70,6 +74,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
         // @ts-ignore
         input && input.focus();
       }, 10);
+      if (header) header.classList.remove('backdrop-blur-sm');
       // @ts-ignore
       dialog.style.display = 'block';
     });
@@ -79,6 +84,7 @@ import PageFindSearch from 'astro-pagefind/components/Search';
   dialog?.addEventListener('click', function (e) {
     // @ts-ignore
     if (e.target.id === 'search-background') {
+      if (header) header.classList.add('backdrop-blur-sm');
       dialog.style.display = 'none';
     }
   });

package/src/layouts/DocsLayout.astro

@@ -21,8 +21,11 @@ import SEO from '../components/Seo.astro';
       <Header />
 
       <div>
-        <nav class="hidden sm:flex grow w-56 xl:w-[19em] fixed overflow-y-auto h-full py-2">
-          <div class="w-full pt-4">
+        <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>