more WIP, remove what is and merge with docs home

packages/docs-site/astro.config.ts

@@ -110,8 +110,8 @@ export default defineConfig({
           label: 'Get Started',
           items: [
             {
-              label: 'What is DMNO?',
-              link: '/docs/get-started/what-is-dmno/',
+              label: 'Home',
+              link: '/docs/',
             },
             {
               label: 'Quickstart',

packages/docs-site/src/components/IconGraph/AnimatedDot.vue

@@ -1,18 +1,22 @@
 <script setup lang="ts">
-defineProps<{
+import { computed } from 'vue'
+
+const props = defineProps<{
   x1: number
   y1: number
   x2: number
   y2: number
 }>()
+
+const path = computed(() => `M${props.x1},${props.y1} L${props.x2},${props.y2}`)
 </script>
 
 <template>
   <circle r="4" fill="#6366f1">
     <animateMotion
       dur="2s"
       repeatCount="indefinite"
-      :path="`M${x1},${y1} L${x2},${y2}`"
+      :path="path"
     />
     <animate
       attributeName="opacity"

packages/docs-site/src/components/IconGraph/ConnectionLine.vue

@@ -1,36 +1,40 @@
 <script setup lang="ts">
 import AnimatedDot from './AnimatedDot.vue'
+import { computed } from 'vue'
 
 const activeColor = 'rgb(155 86 245)'; // BRAND PURPLE
 const inactiveColor = 'rgb(209 213 219)';
 
-
-defineProps<{
+const props = defineProps<{
   x1: number
   y1: number
   x2: number
   y2: number
   active?: boolean
 }>()
+
+const coordinates = computed(() => ({
+  x1: props.x1,
+  y1: props.y1,
+  x2: props.x2,
+  y2: props.y2
+}))
 </script>
 
 <template>
   <g>
     <line
-      :x1="x1"
-      :y1="y1"
-      :x2="x2"
-      :y2="y2"
+      :x1="coordinates.x1"
+      :y1="coordinates.y1"
+      :x2="coordinates.x2"
+      :y2="coordinates.y2"
       :stroke="active ? activeColor : inactiveColor"
       stroke-width="2"
       :class="{ 'transition-colors duration-300': true }"
     />
     <AnimatedDot 
       v-if="active"
-      :x1="x1" 
-      :y1="y1" 
-      :x2="x2" 
-      :y2="y2" 
+      v-bind="coordinates"
     />
   </g>
 </template>

packages/docs-site/src/components/IconGraph/IconGraph.vue

@@ -1,66 +1,92 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, onUnmounted, computed } from 'vue';
 import { Icon } from '@iconify/vue';
 import ConnectionLine from './ConnectionLine.vue';
 import DMNOLogo from '@dmno/ui-lib/brand-assets/domino-d-gradient-tile.svg';
 
-const secretIcons = [
+function shuffleArray(array: any[]) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+const secretIcons = ref([
   { icon: 'mdi:1password', label: '1Password', docsHref: '/docs/plugins/1password/' },
   { 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: 'lucide:ellipsis', label: 'Self-hosted', docsHref: '/docs/plugins/overview/' },
-]; 
+  { icon: 'mdi:server-outline', label: 'Self-hosted', docsHref: '/docs/plugins/overview/' },
+]);
 
-const integrationIcons = [
+const integrationIcons = ref([
   { icon: 'devicon:remix', label: 'Remix', docsHref: '/docs/integrations/remix/' },
   { icon: 'devicon:nextjs', label: 'Next.js', docsHref: '/docs/integrations/nextjs/' },
   { icon: 'devicon:astro', label: 'Astro', docsHref: '/docs/integrations/astro/' },
   { icon: 'logos:vitejs', label: 'Vite', docsHref: '/docs/integrations/vite/' },
   { icon: 'devicon:nodejs', label: 'Node.js', docsHref: '/docs/integrations/node/' }
-]
+]);
 
-const platformIcons = [
+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', docsHref: '/docs/platforms/' },
-  { icon: 'lucide:ellipsis', label: 'Self-hosted', docsHref: '/docs/platforms/overview/' },
-]
-
+  { icon: 'devicon:docker', label: 'Docker - Coming Soon', docsHref: '/docs/platforms/' },
+  { icon: 'mdi:server-outline', label: 'Self-hosted', docsHref: '/docs/platforms/overview/' },
+]);
 
 // Selected icon states
-const selectedLeftIndex = ref(0)
-const selectedMiddleIndex = ref(0)
-const selectedRightIndex = ref(0)
+const selectedLeftIndex = ref(0);
+const selectedMiddleIndex = ref(0);
+const selectedRightIndex = ref(0);
 
 const LEFT_INTERVAL = 2000;
 const MIDDLE_INTERVAL = 2500;
 const RIGHT_INTERVAL = 2500;
 
-
 // Cycle through icons every 2 seconds
 onMounted(() => {
+  shuffleArray(secretIcons.value);
+  shuffleArray(integrationIcons.value);
+  shuffleArray(platformIcons.value);
+
   setInterval(() => {
-    selectedLeftIndex.value = (selectedLeftIndex.value + 1) % secretIcons.length
-  }, LEFT_INTERVAL)
+    selectedLeftIndex.value = (selectedLeftIndex.value + 1) % secretIcons.value.length;
+  }, LEFT_INTERVAL);
+
   setInterval(() => {
-    selectedMiddleIndex.value = (selectedMiddleIndex.value + 1) % integrationIcons.length
-  }, MIDDLE_INTERVAL)
+    selectedMiddleIndex.value = (selectedMiddleIndex.value + 1) % integrationIcons.value.length;
+  }, MIDDLE_INTERVAL);
+
   setInterval(() => {
-    selectedRightIndex.value = (selectedRightIndex.value + 1) % platformIcons.length
-  }, RIGHT_INTERVAL)
-})
+    selectedRightIndex.value = (selectedRightIndex.value + 1) % platformIcons.value.length;
+  }, RIGHT_INTERVAL);
+});
 
 // Adjusted coordinates for better connections
 const iconSize = 64 // 16 * 4 (w-16)
 const centerIconSize = 80 // 20 * 4 (w-20)
 const spacing = 100
 
-const leftX = 100
-const centerX = 350
-const middleX = 600
-const rightX = 850
+// Column spacing, calculated based on the viewport width
+const colSpacing = ref(window.innerWidth / 4 || 260); // Use SVG viewBox width divided by 4 columns
+
+const leftX = computed(() => 0)
+const centerX = computed(() => colSpacing.value)
+const middleX = computed(() => colSpacing.value * 2)
+const rightX = computed(() => colSpacing.value * 3)
+
+onMounted(() => {
+  const updateSpacing = () => {
+    colSpacing.value = window.innerWidth / 4 || 260;
+  }
+  
+  window.addEventListener('resize', updateSpacing)
+  
+  onUnmounted(() => {
+    window.removeEventListener('resize', updateSpacing)
+  })
+})
 
 // Calculate vertical positions
 const getVerticalPosition = (index: number, total: number) => {
@@ -76,7 +102,7 @@ const centerY = 300 - centerIconSize / 2
 const getRightConnectionY = (rightIndex: number, middleTotal: number) => {
   const middleSpacing = (middleTotal - 1) * spacing
   const middleStartY = (600 - middleSpacing) / 2
-  const segmentSize = middleSpacing / (platformIcons.length - 1)
+  const segmentSize = middleSpacing / (platformIcons.value.length - 1)
   return middleStartY + (rightIndex * segmentSize)
 }
 
@@ -193,11 +219,11 @@ const navigateTo = (href: string) => {
 
 <style>
 .container {
+  margin-left: 40px;
   width: 100%;
-  /* height: 100vh; */
   display: flex;
-  /* align-items: center;
-  justify-content: center; */
+  align-items: left;
+  justify-content: left;
 }
 
 .graph-container {
@@ -206,6 +232,7 @@ const navigateTo = (href: string) => {
   height: 600px;
 }
 
+
 .svg-container {
   position: absolute;
   inset: 0;
@@ -282,27 +309,14 @@ const navigateTo = (href: string) => {
   position: absolute;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  /* gap: 1rem; */
 }
 
 .column-container > h2 {
   font-size: 1.25rem;
   font-weight: 600;
   color: rgb(221, 226, 233); /* text-gray-600 */
-  /* margin-bottom: 1rem; */
   text-align: left;
 }
 
-/* Add specific column widths if needed */
-.column-container.left {
-  width: 200px;
-}
-
-.column-container.middle {
-  width: 200px;
-}
-
-.column-container.right {
-  width: 200px;
-}
 </style>

packages/docs-site/src/components/LandingPageSection.astro

@@ -1,41 +1,45 @@
 ---
-import CTABlock from './CTABlock.astro';
+import CTABlock from "./CTABlock.astro";
 
 interface Props {
-  title?: string,
-  imgPath?: string,
-  imgAlt?: string,
-  imgDescription?: string,
-  ctaLink?: string,
-  ctaText?: string,
+  title?: string;
+  imgPath?: string;
+  imgAlt?: string;
+  imgDescription?: string;
+  ctaLink?: string;
+  ctaText?: string;
+  subheader?: string;
 }
-const { title, imgPath, imgAlt, imgDescription, ctaLink } = Astro.props as Props;
+const { title, imgPath, imgAlt, imgDescription, ctaLink, subheader } =
+  Astro.props as Props;
 ---
 
 <section class="feature-block">
-  { title && <h2>{title}</h2> }
-  { imgPath && <figure>
-    <img src={imgPath} alt={imgAlt}>
-    <figcaption class="description">{imgDescription}</figcaption>
-  </figure>}
-
+  {title && <h2>{title}</h2>}
+  {subheader && <h3>{subheader}</h3>}
+  {
+    imgPath && (
+      <figure>
+        <img src={imgPath} alt={imgAlt} />
+        <figcaption class="description">{imgDescription}</figcaption>
+      </figure>
+    )
+  }
+
   <slot />
-
-  { ctaLink && <CTABlock
-    text="Read more ->"
-    href={ctaLink}
-  />}
+
+  {ctaLink && <CTABlock text="Read more ->" href={ctaLink} />}
 </section>
 
 <style>
-.feature-block {
-  padding: 3rem  2rem;
-  display: flex;
-  flex-direction: column;
-  gap: 1rem;
-
-  @container (max-width: 800px) { 
-    padding: 2rem 0rem;
+  .feature-block {
+    padding: 3rem 2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+
+    @container (max-width: 800px) {
+      padding: 2rem 0rem;
+    }
   }
-}
 </style>

packages/docs-site/src/content/docs/docs/get-started/quickstart.mdx

@@ -6,6 +6,23 @@ description: Get started with DMNO's quickstart guide and start managing your co
 import { Steps, FileTree, Code } from '@astrojs/starlight/components';
 import TabbedCode from '@/components/TabbedCode.astro'; 
 
+## Current requirements
+
+DMNO Config requires the following: 
+
+- Node.js > 20.x
+- One of the following:
+  - `pnpm`
+  - `npm`
+  - `yarn`
+  - `bun`
+
+Optionally: 
+- TypeScript
+
+:::tip
+While TypeScript is not required in your applications, you will get the full feature set (e.g., IntelliSense and inline docs) of DMNO by using it in a TypeScript project. Note that our `config.mts` files themselves are written in TypeScript, so you'll want to use an editor that at least supports it. 
+:::
 
 <Steps>