From e0cdc8dededc35bbad0162c53d6d40a79ce682e2 Mon Sep 17 00:00:00 2001
From: Phil Miller <phil@dmno.dev>
Date: Mon, 9 Dec 2024 17:15:44 -0500
Subject: [PATCH] WIP: remove beta banner, add dynamic test component and use
 that on mobile

---
 .../components/CustomStarlightBanner.astro    |  42 ++--
 .../src/components/IconGraph/IconGraph.vue    | 217 ++++++++++++------
 packages/docs-site/src/pages/index.astro      |  14 +-
 3 files changed, 174 insertions(+), 99 deletions(-)

diff --git a/packages/docs-site/src/components/CustomStarlightBanner.astro b/packages/docs-site/src/components/CustomStarlightBanner.astro
index 47845ccf..651bbd97 100644
--- a/packages/docs-site/src/components/CustomStarlightBanner.astro
+++ b/packages/docs-site/src/components/CustomStarlightBanner.astro
@@ -8,26 +8,26 @@ const showDefaultBanner =
   Astro.url.pathname.startsWith("/docs/") &&
   !["/docs/"].includes(Astro.url.pathname);
 ---
-{ (banner || showDefaultBanner) &&
-<div class="sl-banner__wrap">
-  <div class="sl-banner__wrap-inner">
-    {banner && <div class="sl-banner" set:html={banner.content} />}
-    {
-      showDefaultBanner && (
-        <>
-          <div class="sl-banner caution">
-            🚧 DMNO is still in beta! Use with caution!
-          </div>
-          <div class="sl-banner info richtext">
-            ✨ If you've tried DMNO or looked through the docs,{" "}
-            <a href="https://forms.gle/AfM99kTJ9p1c25g86" target="_blank">let us know</a>
-            what you think!
-          </div>
-        </>
-      )
-    }
-  </div>
-</div>
+
+{
+  (banner || showDefaultBanner) && (
+    <div class="sl-banner__wrap">
+      <div class="sl-banner__wrap-inner">
+        {banner && <div class="sl-banner" set:html={banner.content} />}
+        {showDefaultBanner && (
+          <>
+            <div class="sl-banner info richtext">
+              ✨ If you've tried DMNO or looked through the docs,{" "}
+              <a href="https://forms.gle/AfM99kTJ9p1c25g86" target="_blank">
+                let us know
+              </a>
+              what you think!
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  )
 }
 
 <style lang="less">
@@ -73,7 +73,7 @@ const showDefaultBanner =
     color: var(--color-text-full-shade);
   }
   .sl-banner.info {
-    margin-top: .5rem;
+    margin-top: 0.5rem;
     background: linear-gradient(
       45deg,
       var(--brand-blue--t2) 0%,
diff --git a/packages/docs-site/src/components/IconGraph/IconGraph.vue b/packages/docs-site/src/components/IconGraph/IconGraph.vue
index e545cfb6..9210b796 100644
--- a/packages/docs-site/src/components/IconGraph/IconGraph.vue
+++ b/packages/docs-site/src/components/IconGraph/IconGraph.vue
@@ -16,7 +16,7 @@ const secretIcons = ref([
   { icon: 'simple-icons:bitwarden', label: 'Bitwarden', docsHref: '/docs/plugins/bitwarden/' },
   { icon: 'mdi:lock', label: 'Encrypted Vault', docsHref: '/docs/plugins/encrypted-vault/' },
   { icon: 'mdi:infinity', label: 'Infisical', docsHref: '/docs/plugins/infisical/' },
-  { icon: 'mdi:server-outline', label: 'Self-hosted', docsHref: '/docs/plugins/overview/' },
+  { icon: 'mdi:server-outline', label: 'your self-hosted secrets manager', docsHref: '/docs/plugins/overview/' },
 ]);
 
 const integrationIcons = ref([
@@ -31,8 +31,8 @@ const platformIcons = ref([
   { icon: 'devicon:netlify', label: 'Netlify', docsHref: '/docs/platforms/netlify/' },
   { icon: 'devicon:vercel', label: 'Vercel', docsHref: '/docs/platforms/vercel/' },
   { icon: 'devicon:cloudflare', label: 'Cloudflare', docsHref: '/docs/platforms/cloudflare/' },
-  { icon: 'devicon:docker', label: 'Docker - Coming Soon', docsHref: '/docs/platforms/' },
-  { icon: 'mdi:server-outline', label: 'Self-hosted', docsHref: '/docs/platforms/overview/' },
+  { icon: 'devicon:docker', label: 'Docker', docsHref: '/docs/platforms/' },
+  { icon: 'mdi:server-outline', label: 'Self-hosted infra', docsHref: '/docs/platforms/overview/' },
 ]);
 
 // Selected icon states
@@ -40,9 +40,7 @@ const selectedLeftIndex = ref(0);
 const selectedMiddleIndex = ref(0);
 const selectedRightIndex = ref(0);
 
-const LEFT_INTERVAL = 2000;
-const MIDDLE_INTERVAL = 2500;
-const RIGHT_INTERVAL = 2500;
+const INTERVAL = 4000;
 
 // Cycle through icons every 2 seconds
 onMounted(() => {
@@ -52,24 +50,31 @@ onMounted(() => {
 
   setInterval(() => {
     selectedLeftIndex.value = (selectedLeftIndex.value + 1) % secretIcons.value.length;
-  }, LEFT_INTERVAL);
+  }, INTERVAL);
 
   setInterval(() => {
     selectedMiddleIndex.value = (selectedMiddleIndex.value + 1) % integrationIcons.value.length;
-  }, MIDDLE_INTERVAL);
+  }, INTERVAL);
 
   setInterval(() => {
     selectedRightIndex.value = (selectedRightIndex.value + 1) % platformIcons.value.length;
-  }, RIGHT_INTERVAL);
+  }, INTERVAL);
+
+  setInterval(() => {
+    shuffleArray(secretIcons.value);
+    shuffleArray(integrationIcons.value);
+    shuffleArray(platformIcons.value);
+  }, INTERVAL*platformIcons.value.length);
 });
 
 // Adjusted coordinates for better connections
 const iconSize = 64 // 16 * 4 (w-16)
 const centerIconSize = 80 // 20 * 4 (w-20)
 const spacing = 100
+const maxWidth = window.innerWidth < 1200 ? window.innerWidth : 1200;
 
 // Column spacing, calculated based on the viewport width
-const colSpacing = ref(window.innerWidth / 4 || 260); // Use SVG viewBox width divided by 4 columns
+const colSpacing = ref(maxWidth / 4 || 260); // Use SVG viewBox width divided by 4 columns
 
 const leftX = computed(() => 0)
 const centerX = computed(() => colSpacing.value)
@@ -78,7 +83,7 @@ const rightX = computed(() => colSpacing.value * 3)
 
 onMounted(() => {
   const updateSpacing = () => {
-    colSpacing.value = window.innerWidth / 4 || 260;
+    colSpacing.value = maxWidth / 4 || 260;
   }
   
   window.addEventListener('resize', updateSpacing)
@@ -113,6 +118,33 @@ const navigateTo = (href: string) => {
 
 <template>
   <div class="container">
+    <div class="dynamic-text-container">
+      <h2>Use secrets from 
+        <span class="dynamic-text-wrapper">
+          <transition name="fade" mode="out-in">
+            <span :key="secretIcons[selectedLeftIndex].label" class="dynamic-text active-secret">
+              {{ secretIcons[selectedLeftIndex].label }}
+            </span>
+          </transition>
+        </span> 
+        in your 
+        <span class="dynamic-text-wrapper">
+          <transition name="fade" mode="out-in">
+            <span :key="integrationIcons[selectedMiddleIndex].label" class="dynamic-text active-integration">
+              {{ integrationIcons[selectedMiddleIndex].label }}
+            </span>
+          </transition>
+        </span> 
+        app and deploy to 
+        <span class="dynamic-text-wrapper">
+          <transition name="fade" mode="out-in">
+            <span :key="platformIcons[selectedRightIndex].label" class="dynamic-text active-platform">
+              {{ platformIcons[selectedRightIndex].label }}
+            </span>
+          </transition>
+        </span>.
+      </h2>
+    </div>
     <div class="graph-container">
       <svg class="svg-container" viewBox="0 0 1000 600">
         <!-- Left to Center connections -->
@@ -148,69 +180,70 @@ const navigateTo = (href: string) => {
           />
         </template>
       </svg>
+      <div class="icon-container">
+        <!-- Left Group -->
+        <div class="column-container left" :style="{ left: leftX + 'px' }">
+          <h2>Secrets</h2>
+          <div
+            v-for="(icon, index) in secretIcons"
+            :key="index"
+            :class="[
+              'icon-base icon-left',
+              index === selectedLeftIndex ? 'icon-selected' : ''
+            ]"
+            :style="{ top: getVerticalPosition(index, secretIcons.length) + 'px' }"
+            :title="icon.label"
+            @click="navigateTo(icon.docsHref)"
+          >
+            <Icon :icon="icon.icon" class="icon" :ssr="true" />
+          </div>
+        </div>
 
-      <!-- Left Group -->
-      <div class="column-container left" :style="{ left: leftX + 'px' }">
-        <h2>Secrets</h2>
+        <!-- Center Node -->
         <div
-          v-for="(icon, index) in secretIcons"
-          :key="index"
-          :class="[
-            'icon-base icon-left',
-            index === selectedLeftIndex ? 'icon-selected' : ''
-          ]"
-          :style="{ top: getVerticalPosition(index, secretIcons.length) + 'px' }"
-          :title="icon.label"
-          @click="navigateTo(icon.docsHref)"
+          class="center-icon"
+          :style="{ 
+            left: centerX + 'px',
+            top: centerY + 'px'
+          }"
         >
-          <Icon :icon="icon.icon" class="icon" :ssr="true" />
+          <img :src="DMNOLogo.src" class="icon" />
         </div>
-      </div>
 
-      <!-- Center Node -->
-      <div
-        class="center-icon"
-        :style="{ 
-          left: centerX + 'px',
-          top: centerY + 'px'
-        }"
-      >
-        <img :src="DMNOLogo.src" class="icon" />
-      </div>
-
-      <!-- Middle Group -->
-      <div class="column-container middle" :style="{ left: middleX + 'px' }">
-        <h2>Integrations</h2>
-        <div
-          v-for="(icon, index) in integrationIcons"
-          :key="index"
-          :class="[
-            'icon-base icon-middle',
-            index === selectedMiddleIndex ? 'icon-selected' : ''
-          ]"
-          :style="{ top: getVerticalPosition(index, integrationIcons.length) + 'px' }"
-          :title="icon.label"
-          @click="navigateTo(icon.docsHref)"
-        >
-          <Icon :icon="icon.icon" class="icon" :ssr="true" />
+        <!-- Middle Group -->
+        <div class="column-container middle" :style="{ left: middleX + 'px' }">
+          <h2>Integrations</h2>
+          <div
+            v-for="(icon, index) in integrationIcons"
+            :key="index"
+            :class="[
+              'icon-base icon-middle',
+              index === selectedMiddleIndex ? 'icon-selected' : ''
+            ]"
+            :style="{ top: getVerticalPosition(index, integrationIcons.length) + 'px' }"
+            :title="icon.label"
+            @click="navigateTo(icon.docsHref)"
+          >
+            <Icon :icon="icon.icon" class="icon" :ssr="true" />
+          </div>
         </div>
-      </div>
 
-      <!-- Right Group -->
-      <div class="column-container right" :style="{ left: rightX + 'px' }">
-        <h2>Platforms</h2>
-        <div
-          v-for="(icon, index) in platformIcons"
-          :key="index"
-          :class="[
-            'icon-base icon-right',
-            index === selectedRightIndex ? 'icon-selected' : ''
-          ]"
-          :style="{ top: getVerticalPosition(index, platformIcons.length) + 'px' }"
-          :title="icon.label"
-          @click="navigateTo(icon.docsHref)"
-        >
-          <Icon :icon="icon.icon" class="icon" :ssr="true" />
+        <!-- Right Group -->
+        <div class="column-container right" :style="{ left: rightX + 'px' }">
+          <h2>Platforms</h2>
+          <div
+            v-for="(icon, index) in platformIcons"
+            :key="index"
+            :class="[
+              'icon-base icon-right',
+              index === selectedRightIndex ? 'icon-selected' : ''
+            ]"
+            :style="{ top: getVerticalPosition(index, platformIcons.length) + 'px' }"
+            :title="icon.label"
+            @click="navigateTo(icon.docsHref)"
+          >
+            <Icon :icon="icon.icon" class="icon" :ssr="true" />
+          </div>
         </div>
       </div>
     </div>
@@ -224,15 +257,18 @@ const navigateTo = (href: string) => {
   display: flex;
   align-items: left;
   justify-content: left;
+  flex-wrap: wrap;
 }
 
 .graph-container {
   position: relative;
   width: 1000px;
   height: 600px;
+  @media (max-width: 768px) {
+    display: none;
+  }
 }
 
-
 .svg-container {
   position: absolute;
   inset: 0;
@@ -240,6 +276,28 @@ const navigateTo = (href: string) => {
   height: 100%;
 }
 
+.icon-container {
+  position: absolute;
+  max-width: 1200px;
+  min-width: 800px;
+  display: flex;
+}
+
+.dynamic-text-container {
+  margin: 2rem 0;
+} 
+
+.dynamic-text-container > .dynamic-text {
+  color: rgb(147 51 234); /* text-purple-600 */
+  &:nth-of-type(1) {
+    color: rgb(41, 232, 232);
+  }
+  
+  &:nth-of-type(2) {
+    color: rgb(116, 240, 161);
+  }
+}
+
 .icon-base {
   width: 4rem; /* w-16 */
   height: 4rem; /* h-16 */
@@ -319,4 +377,27 @@ const navigateTo = (href: string) => {
   text-align: left;
 }
 
+.dynamic-text-wrapper {
+  display: inline-block;
+  color: rgb(147 51 234); /* text-purple-600 */
+  &:nth-of-type(1) {
+    color: rgb(41, 232, 232);
+  }
+  
+  &:nth-of-type(2) {
+    color: rgb(116, 240, 161);
+  }
+  /* min-width: 100px; Adjust based on your content */
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
 </style>
diff --git a/packages/docs-site/src/pages/index.astro b/packages/docs-site/src/pages/index.astro
index fb99e897..86bfaeb2 100644
--- a/packages/docs-site/src/pages/index.astro
+++ b/packages/docs-site/src/pages/index.astro
@@ -26,22 +26,16 @@ const muxId = "FmBLL2H1yt6cEfqz01QVje7LSlI8DtF9Vn18NRsv5o6E";
   <Hero>
     <Fragment slot="heading"> Connective Configuration </Fragment>
     <Fragment slot="subheading">
-      DMNO is the missing middleware for your configuration and secrets.
+      <em>
+        DMNO is the missing middleware for your configuration and secrets.
+      </em>
     </Fragment>
   </Hero>
 
   <div class="icon-graph-container">
-    <div class="desktop-only">
+    <div>
       <IconGraph client:only="vue" />
     </div>
-
-    <div class="mobile-only">
-      <img
-        src={iconGraphPlaceholder.src}
-        alt="DMNO Integration Graph"
-        class="responsive-image"
-      />
-    </div>
   </div>
 
   <CTABlock