WIP new animated graph on homepage (#171)

* WIP new animated graph on homepage * more WIP, remove what is and merge with docs home * WIP: remove beta banner, add dynamic test component and use that on mobile * more wip on homepage * more polishing on homepage * wrapping up new homepage --------- Co-authored-by: Theo Ephraim <theo@dmno.dev>
dmno-dev · Dec 25, 2024 · ce17711 · ce17711
1 parent 11e39f6
commit ce17711
Show file tree

Hide file tree

Showing 30 changed files with 1,600 additions and 901 deletions.
diff --git a/packages/dev-ui/src/components/layout/HeaderBar.vue b/packages/dev-ui/src/components/layout/HeaderBar.vue
@@ -23,7 +23,6 @@ import ThemeToggle from './ThemeToggle.vue';
 <style scoped>
 #header-bar {
   grid-area: header;
-  background: black;
   color: white;
   padding: 6px 8px;
   background: #2a2a2a;

diff --git a/packages/docs-site/.eslintrc.cjs b/packages/docs-site/.eslintrc.cjs
@@ -6,7 +6,10 @@ module.exports = {
       extends: ["@dmno/eslint-config/base"],
     },
     {
-      // Define the configuration for `.astro` file.
+      files: ["**/*.vue"],
+      extends: ["@dmno/eslint-config/vue"],
+    },
+    {
       files: ["**/*.astro"],
       extends: ["plugin:astro/recommended"],
       // Allows Astro components to be parsed.

diff --git a/packages/docs-site/astro.config.ts b/packages/docs-site/astro.config.ts
@@ -109,10 +109,6 @@ export default defineConfig({
         {
           label: 'Get Started',
           items: [
-            {
-              label: 'What is DMNO?',
-              link: '/docs/get-started/what-is-dmno/',
-            },
             {
               label: 'Quickstart',
               link: '/docs/get-started/quickstart/',

diff --git a/packages/docs-site/package.json b/packages/docs-site/package.json
@@ -36,10 +36,11 @@
     "astro-robots-txt": "^1.0.0",
     "astro-sitemap": "^1.0.0",
     "dmno": "workspace:*",
-    "eslint-plugin-astro": "^1.2.2",
+    "eslint-plugin-astro": "^1.3.1",
     "eslint-plugin-mdx": "^3.1.5",
     "less": "^4.2.0",
     "nanostores": "^0.10.3",
+    "postcss-nested": "^7.0.2",
     "sharp": "^0.33.4",
     "starlight-blog": "^0.11.1",
     "starlight-links-validator": "^0.10.1",

diff --git a/packages/docs-site/src/postcss.config.cjs → packages/docs-site/postcss.config.cjs b/packages/docs-site/src/postcss.config.cjs → packages/docs-site/postcss.config.cjs
@@ -2,5 +2,6 @@ module.exports = {
   plugins: [
     // require('autoprefixer'),
     // require('cssnano'),
+    require('postcss-nested'),
   ],
 };
diff --git a/packages/docs-site/public/_redirects b/packages/docs-site/public/_redirects
@@ -0,0 +1 @@
+/docs/ /docs/get-started/quickstart/
diff --git a/packages/docs-site/src/components/CTABlock.astro b/packages/docs-site/src/components/CTABlock.astro
@@ -1,113 +1,106 @@
 ---
-import DIcon from '@/components/DIcon.astro';
+import DIcon from "@/components/DIcon.astro";
+import TileButton from "@/components/TileButton.vue";
+
 interface Props {
   text?: string;
   href?: string;
   command?: string;
 }
 
 const { text, href, command } = Astro.props as Props;
-
 ---
 
 <div class="cta-block">
-  { href && text && 
-    <a href={href} class="button">{text}</a>
-  }
-  {command && 
-    <div class="install-command">
-      <DIcon name="console" />
-      <div>{command}</div>
-      <DIcon name={['copy', 'check']} class="install-command__copy" />
-    </div>
+  {href && text && <TileButton href={href}>{text}</TileButton>}
+  {
+    command && (
+      <div class="install-command">
+        <DIcon name="console" />
+        <div>{command}</div>
+        <DIcon name={["copy", "check"]} class="install-command__copy" />
+      </div>
+    )
   }
 </div>
 
 <style lang="less">
+  @property --spin-angle {
+    syntax: "<angle>";
+    initial-value: 0deg;
+    inherits: true;
+  }
+  @keyframes spin {
+    0% {
+      --spin-angle: 0deg;
+    }
+    100% {
+      --spin-angle: 360deg;
+    }
+  }
+
   .cta-block {
     display: flex;
     flex-wrap: wrap;
     // flex-direction: column;
     justify-content: center;
     gap: 1rem;
 
-
     @media (min-width: 50rem) {
       flex-direction: row;
       gap: 2rem;
     }
-
-  }
-
-  a.button {
-
-    @property --spin {
-      syntax: '<angle>';
-      initial-value: 35deg;
-      inherits: false;
-    }
-
-    background: linear-gradient(var(--spin), var(--brand-purple) 0%, var(--brand-red) 100%);
-    color: var(--brand-white);
-
-    font-size: 18px;
-    height: 48px;
-    border-radius: 50px;
-    padding: 0px 2rem;
-    align-content: center;
-    font-weight: bold;
-    text-wrap: nowrap;
-    text-decoration: none;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-;
-    &:hover {
-      background: linear-gradient(var(--spin), var(--brand-pink) 0%, var(--brand-pink) 100%);
-      background: var(--brand-pink);
-
-    }
-    &:hover {
-      transform: translate3d(-2px, -2px, 0);
-      background: var(--brand-pink);
-      box-shadow: 2px 2px 0 var(--tile-drop-shadow);
-    }
-    &:focus {
-      outline: 1px solid var(--brand-pink);
-    }
-    &:active {
-      transform: translate3d(0, 0, 0);
-      box-shadow: none;
-    }
   }
-
 
   .install-command {
     display: flex;
     font-size: 18px;
     height: 48px;
-    border: 2px solid var(--brand-pink);
+    border: 1px solid var(--brand-pink);
+
     align-items: center;
     padding-right: 64px;
     font-weight: bold;
     background: black;
     position: relative;
-    html[data-theme='light'] & {
-      background: rgba(0,0,0,.2);
-      background: var(--brand-cyan--t2);
-      color: black;
-    }
-
     font-family: var(--code-font);
     text-wrap: nowrap;
 
-    --border-gradient-color-1: var(--brand-green);
-    --border-gradient-color-2: var(--brand-cyan);
-    border: 2px solid var(--border-gradient-color-1);
-    border-image-source: linear-gradient(90deg, var(--border-gradient-color-1), var(--border-gradient-color-2));
+    --glow-color: var(--brand-yellow);
+    animation: spin 5s linear infinite;
+    html[data-theme="light"] & {
+      // background: rgba(0, 0, 0, 0.2);
+      background: color-mix(in oklab, var(--brand-cyan) 10%, white);
+      color: black;
+      --glow-color: var(--brand-cyan);
+    }
+
+    border: 1px solid var(--brand-green);
+    border-image-source: conic-gradient(
+      from calc(var(--spin-angle) + 180deg),
+      var(--glow-color) 0deg,
+      var(--brand-green) 45deg,
+      var(--brand-green) 315deg,
+      var(--glow-color) 360deg
+    );
     border-image-slice: 1;
-
+
+    // glow
+    &:before {
+      content: "";
+      inset: 0;
+      position: absolute;
+      background: red;
+      z-index: -1;
+      filter: blur(3px);
+      background: conic-gradient(
+        from var(--spin-angle),
+        var(--glow-color) 0deg,
+        transparent 45deg,
+        transparent 315deg,
+        var(--glow-color) 360deg
+      );
+    }
 
     :global(.d-icon) {
       height: 44px;
@@ -119,7 +112,7 @@ const { text, href, command } = Astro.props as Props;
         width: 36px;
         padding: 8px;
       }
-      
+
       // copy icon
       &:last-child {
         position: absolute;
@@ -134,23 +127,26 @@ const { text, href, command } = Astro.props as Props;
     }
     .install-command__copy.--success {
       color: var(--brand-green) !important;
-      :global(svg:nth-child(1)) { display: none; }
-      :global(svg:nth-child(2)) { display: block; }          
+      :global(svg:nth-child(1)) {
+        display: none;
+      }
+      :global(svg:nth-child(2)) {
+        display: block;
+      }
     }
-
-
   }
 </style>
 
 <script>
-  document.querySelector('.install-command__copy')?.addEventListener('click', async (e) => {
-    await navigator.clipboard.writeText('npx dmno init');
-    if (e.target instanceof Element) {
-      e.target.classList.add('--success');
-      setTimeout(() => {
-        (e.target as Element).classList.remove('--success');
-      }, 2000);
-    }
-  });
+  document
+    .querySelector(".install-command__copy")
+    ?.addEventListener("click", async (e) => {
+      await navigator.clipboard.writeText("npx dmno init");
+      if (e.target instanceof Element) {
+        e.target.classList.add("--success");
+        setTimeout(() => {
+          (e.target as Element).classList.remove("--success");
+        }, 2000);
+      }
+    });
 </script>
-
diff --git a/packages/docs-site/src/components/CustomStarlightBanner.astro b/packages/docs-site/src/components/CustomStarlightBanner.astro
@@ -8,26 +8,24 @@ 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>
+
+{
+  (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>
+            <a href="https://forms.gle/AfM99kTJ9p1c25g86" target="_blank">
+              let us know
+            </a>
             what you think!
           </div>
-        </>
-      )
-    }
-  </div>
-</div>
+        )}
+      </div>
+    </div>
+  )
 }
 
 <style lang="less">
@@ -73,7 +71,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/CustomStarlightHeader.astro b/packages/docs-site/src/components/CustomStarlightHeader.astro
@@ -44,7 +44,7 @@ const shouldRenderSearch = !isTopLevel;
       <span class="logo-font logo-dmno-text"> DMNO </span>
     </a>
   </div>
-  
+
   <HeaderNav />
   <!-- {isTopLevel ? 
     <HeaderNavMarketing
@@ -53,7 +53,7 @@ const shouldRenderSearch = !isTopLevel;
     <HeaderNav />
   } -->
 
-  {shouldRenderSearch ? <Search {...Astro.props} /> : <div/>}
+  {shouldRenderSearch ? <Search {...Astro.props} /> : <div />}
   <div class="sl-hidden md:sl-flex right-group">
     <SocialIcons />
     <ThemeSelect client:load />
@@ -156,7 +156,7 @@ const shouldRenderSearch = !isTopLevel;
   }
 
   .right-group {
-    justify-content: right ;
+    justify-content: right;
   }
   .header :global(.social-icons::after) {
     content: "";