@eventcatalog/core 5.0.0-beta.3 → 5.0.0-beta.31

package/eventcatalog/src/pages/studio.astro

@@ -1,316 +0,0 @@
----
-import VerticalSideBarLayout from '@layouts/VerticalSideBarLayout.astro';
-import { getEvents } from '@utils/collections/events';
-import { getCommands } from '@utils/collections/commands';
-import { getServices } from '@utils/collections/services';
-import { BoltIcon, ServerIcon } from '@heroicons/react/24/outline';
-import { SquareDashedMousePointerIcon, ArrowLeftRightIcon, ExternalLink } from 'lucide-react';
-import StudioPageModal from '@components/Studio/StudioPageModal';
-import { getChannels } from '@utils/collections/channels';
-
-const [events, commands, services, channels] = await Promise.all([
-  getEvents().catch(() => []),
-  getCommands().catch(() => []),
-  getServices().catch(() => []),
-  getChannels().catch(() => []),
-]);
-
-// Get counts
-const eventCount = events.length;
-const serviceCount = services.length;
-const commandCount = commands.length;
-const channelCount = channels.length;
-const totalResources = eventCount + serviceCount + channelCount + commandCount;
-
-// Get a few sample resources to display
-const sampleEvents = events.slice(0, 2);
-const sampleServices = services.slice(0, 2);
-const sampleChannels = channels.slice(0, 1);
-
-// Determine which resources to show (fallback if some are missing)
-const resourcesToShow = [
-  ...sampleEvents.map((event, index) => ({ type: 'event', data: event, index })),
-  ...sampleServices.map((service, index) => ({ type: 'service', data: service, index: index + 2 })),
-  ...sampleChannels.map((channel, index) => ({ type: 'channel', data: channel, index: index + 4 })),
-].slice(0, 5); // Max 5 resources
-
-const hasResources = resourcesToShow.length > 0;
----
-
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width" />
-    <link rel="icon" href="/favicon.ico" sizes="any" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
-    <meta name="generator" content={Astro.generator} />
-    <title>EventCatalog Studio</title>
-  </head>
-  <body>
-    <VerticalSideBarLayout title="EventCatalog Studio" showNestedSideBar={false}>
-      <div class="min-h-[calc(100vh-60px)] bg-[rgb(var(--ec-page-bg))]">
-        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
-          {/* Hero Section */}
-          <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center mb-16">
-            <div>
-              <div
-                class="inline-flex items-center px-3 py-1.5 rounded-full bg-[rgb(var(--ec-content-hover))] text-[rgb(var(--ec-page-text))] font-medium text-xs mb-6"
-              >
-                Visual Design Tool
-              </div>
-              <h1 class="text-4xl font-bold text-[rgb(var(--ec-page-text))] tracking-tight mb-4">
-                Turn your resources into designs
-              </h1>
-              <p class="text-lg text-[rgb(var(--ec-page-text-muted))] mb-8">
-                Transform your documented messages, services, and domains into architecture diagrams. Drag, drop, and design with
-                what you already have.
-              </p>
-              <div class="flex flex-col sm:flex-row gap-3 mb-4">
-                <button
-                  id="design-button"
-                  class="inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-lg text-[rgb(var(--ec-button-text))] bg-[rgb(var(--ec-button-bg))] hover:bg-[rgb(var(--ec-button-bg-hover))] transition-colors duration-150"
-                >
-                  <SquareDashedMousePointerIcon className="w-4 h-4 mr-2" />
-                  Open Studio
-                </button>
-                <a
-                  href="https://www.eventcatalog.dev/docs/development/components/designs"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  class="inline-flex items-center justify-center px-6 py-3 border border-[rgb(var(--ec-page-border))] text-base font-medium rounded-lg text-[rgb(var(--ec-page-text))] bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] hover:bg-[rgb(var(--ec-content-hover))] transition-colors duration-150"
-                >
-                  Learn more
-                  <ExternalLink className="w-4 h-4 ml-2" />
-                </a>
-              </div>
-
-              {
-                totalResources > 0 && (
-                  <p class="text-sm text-[rgb(var(--ec-page-text-muted))]">
-                    <span class="font-medium text-[rgb(var(--ec-page-text))]">{totalResources}</span> resources available to
-                    design with
-                  </p>
-                )
-              }
-            </div>
-
-            <div class="relative hidden lg:block">
-              {/* Animation container */}
-              <div class="relative h-[350px] flex items-center justify-center">
-                {/* Resource cards that animate in */}
-                {
-                  hasResources ? (
-                    <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-2.5">
-                      {resourcesToShow.map((resource) => {
-                        if (resource.type === 'event') {
-                          return (
-                            <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-orange-50 dark:bg-orange-500/10 rounded-lg border border-orange-200 dark:border-orange-500/30 shadow-xs"
-                              style={`animation-delay: ${resource.index * 0.3}s;`}
-                            >
-                              <BoltIcon className="w-4 h-4 text-orange-500" />
-                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
-                            </div>
-                          );
-                        } else if (resource.type === 'service') {
-                          return (
-                            <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-pink-50 dark:bg-pink-500/10 rounded-lg border border-pink-200 dark:border-pink-500/30 shadow-xs"
-                              style={`animation-delay: ${resource.index * 0.3}s;`}
-                            >
-                              <ServerIcon className="w-4 h-4 text-pink-500" />
-                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
-                            </div>
-                          );
-                        } else if (resource.type === 'channel') {
-                          return (
-                            <div
-                              class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-page-text))] px-4 py-2.5 bg-indigo-50 dark:bg-indigo-500/10 rounded-lg border border-indigo-200 dark:border-indigo-500/30 shadow-xs"
-                              style={`animation-delay: ${resource.index * 0.3}s;`}
-                            >
-                              <ArrowLeftRightIcon className="w-4 h-4 text-indigo-500" />
-                              <span class="truncate max-w-[140px]">{resource.data.data.name}</span>
-                            </div>
-                          );
-                        }
-                      })}
-                    </div>
-                  ) : (
-                    <div class="absolute left-0 top-1/2 -translate-y-1/2 space-y-2.5">
-                      <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
-                        style="animation-delay: 0s;"
-                      >
-                        <BoltIcon className="w-4 h-4" />
-                        <span>Your events</span>
-                      </div>
-                      <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
-                        style="animation-delay: 0.3s;"
-                      >
-                        <ServerIcon className="w-4 h-4" />
-                        <span>Your services</span>
-                      </div>
-                      <div
-                        class="animate-float-in flex items-center gap-2 text-sm text-[rgb(var(--ec-icon-color))] px-4 py-2.5 bg-[rgb(var(--ec-content-hover))] rounded-lg border border-[rgb(var(--ec-page-border))] border-dashed"
-                        style="animation-delay: 0.6s;"
-                      >
-                        <ArrowLeftRightIcon className="w-4 h-4" />
-                        <span>Your channels</span>
-                      </div>
-                    </div>
-                  )
-                }
-
-                {/* Arrow indicator */}
-                <div class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2">
-                  <svg
-                    class="w-10 h-10 text-[rgb(var(--ec-icon-color))] animate-pulse"
-                    viewBox="0 0 24 24"
-                    fill="none"
-                    stroke="currentColor"
-                  >
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7l5 5m0 0l-5 5m5-5H6"></path>
-                  </svg>
-                </div>
-
-                {/* Design preview */}
-                <div class="absolute right-0 top-1/2 -translate-y-1/2 animate-fade-in-scale" style="animation-delay: 1.5s;">
-                  <img
-                    src="/studio-bg.png"
-                    alt="Studio Design Preview"
-                    class="rounded-xl shadow-lg border border-[rgb(var(--ec-page-border))] w-56 h-auto"
-                  />
-                </div>
-              </div>
-            </div>
-          </div>
-
-          {/* Features Section */}
-          <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
-            <div
-              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
-            >
-              <div
-                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
-              >
-                <svg
-                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <rect width="8" height="8" x="3" y="3" rx="2"></rect>
-                  <path d="M7 11v4a2 2 0 0 0 2 2h4"></path>
-                  <rect width="8" height="8" x="13" y="13" rx="2"></rect>
-                </svg>
-              </div>
-              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Real Resources</h3>
-              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
-                Drag and drop messages, services, and domains from your catalog. No more copying names or keeping things in sync.
-              </p>
-            </div>
-
-            <div
-              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
-            >
-              <div
-                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
-              >
-                <svg
-                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"></path>
-                  <polyline points="17 21 17 13 7 13 7 21"></polyline>
-                  <polyline points="7 3 7 8 15 8"></polyline>
-                </svg>
-              </div>
-              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Save & Version</h3>
-              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
-                Save designs locally and store in Git. All designs and data is owned by you.
-              </p>
-            </div>
-
-            <div
-              class="group bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] rounded-xl p-6 border border-[rgb(var(--ec-page-border))] hover:border-[rgb(var(--ec-accent))] hover:shadow-md transition-all duration-200"
-            >
-              <div
-                class="w-10 h-10 bg-[rgb(var(--ec-content-hover))] rounded-lg flex items-center justify-center mb-4 group-hover:bg-[rgb(var(--ec-accent-subtle))] transition-colors"
-              >
-                <svg
-                  class="w-5 h-5 text-[rgb(var(--ec-page-text))]"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  stroke-width="2"
-                >
-                  <polyline points="16 18 22 12 16 6"></polyline>
-                  <polyline points="8 6 2 12 8 18"></polyline>
-                </svg>
-              </div>
-              <h3 class="text-base font-semibold text-[rgb(var(--ec-page-text))] mb-2">Embed Anywhere</h3>
-              <p class="text-sm text-[rgb(var(--ec-page-text-muted))] leading-relaxed">
-                Drop diagrams directly into documentation pages. One source of truth for your architecture.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Studio Modal */}
-      <StudioPageModal client:only="react" />
-    </VerticalSideBarLayout>
-
-    <script>
-      // Handle opening the studio modal
-      const button = document.getElementById('design-button');
-      if (button) {
-        button.addEventListener('click', () => {
-          // Trigger the modal to open
-          window.dispatchEvent(new CustomEvent('openStudioModal'));
-        });
-      }
-    </script>
-
-    <style>
-      @keyframes float-in {
-        0% {
-          opacity: 0;
-          transform: translateX(-20px);
-        }
-        100% {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      @keyframes fade-in-scale {
-        0% {
-          opacity: 0;
-          transform: translateY(-50%) scale(0.95);
-        }
-        100% {
-          opacity: 1;
-          transform: translateY(-50%) scale(1);
-        }
-      }
-
-      .animate-float-in {
-        animation: float-in 0.5s ease-out forwards;
-        opacity: 0;
-      }
-
-      .animate-fade-in-scale {
-        animation: fade-in-scale 0.6s ease-out forwards;
-        opacity: 0;
-      }
-    </style>
-  </body>
-</html>