feat: indicator and links on indexes

deco-sites · Jan 7, 2024 · a99ad6b · a99ad6b
1 parent 096aa3a
commit a99ad6b
Show file tree

Hide file tree

Showing 10 changed files with 1,269 additions and 1,611 deletions.
diff --git a/animations/timelines/editor.ts b/animations/timelines/editor.ts
@@ -498,7 +498,7 @@ const FULL_CODE_SEQUENCE: AnimationTimeline = [
   [
     "#full-code-description, #full-code-form",
     {
-      y: ["-102px", "0"],
+      y: ["-94px", "0"],
     },
     {
       at: 2.08,

diff --git a/components/nrf/editor/AppsIntegrations.tsx b/components/nrf/editor/AppsIntegrations.tsx
@@ -246,7 +246,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
                       width="1040"
                       height="643.02"
                       transform="translate(50.168 41.3138)"
-                      fill="url(#pattern0)"
+                      fill="url(#apps-p0)"
                       fill-opacity="0.25"
                     />
                     <g id="Product Header / 1 /">
@@ -312,7 +312,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
                                 width="404"
                                 height="551"
                                 rx="6.44444"
-                                fill="url(#pattern1)"
+                                fill="url(#apps-p1)"
                               />
                             </g>
                           </g>
@@ -809,7 +809,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
                             y="443.965"
                             width="39.4309"
                             height="38.3043"
-                            fill="url(#pattern2)"
+                            fill="url(#apps-p2)"
                           />
                         </g>
                         <rect
@@ -901,7 +901,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
                           y="451.288"
                           width="24.2218"
                           height="23.6585"
-                          fill="url(#pattern3)"
+                          fill="url(#apps-p3)"
                         />
                       </g>
                       <g id="Frame 2608758_2">
@@ -1005,7 +1005,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
                             y="525.141"
                             width="32.6713"
                             height="32.6713"
-                            fill="url(#pattern4)"
+                            fill="url(#apps-p4)"
                           />
                         </g>
                         <rect
@@ -1161,7 +1161,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
       </g>
       <defs>
         <pattern
-          id="pattern0"
+          id="apps-p0"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"
@@ -1172,7 +1172,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
           />
         </pattern>
         <pattern
-          id="pattern1"
+          id="apps-p1"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"
@@ -1234,7 +1234,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
           />
         </filter>
         <pattern
-          id="pattern2"
+          id="apps-p2"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"
@@ -1245,7 +1245,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
           />
         </pattern>
         <pattern
-          id="pattern3"
+          id="apps-p3"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"
@@ -1256,7 +1256,7 @@ export const AppsIntegrations = (props: AnimatedSvgProps) => {
           />
         </pattern>
         <pattern
-          id="pattern4"
+          id="apps-p4"
           patternContentUnits="objectBoundingBox"
           width="1"
           height="1"

diff --git a/components/nrf/editor/DesignSystem.tsx b/components/nrf/editor/DesignSystem.tsx
diff --git a/islands/NRF/Editor.tsx b/islands/NRF/Editor.tsx
@@ -1,6 +1,5 @@
-import { BlankEditor } from "deco-sites/starting/components/nrf/editor/Blank.tsx";
 import { useEffect } from "preact/hooks";
-import { animate, inView, stagger, timeline } from "motion";
+import { animate, scroll, inView, stagger, timeline } from "motion";
 import { useSignal } from "@preact/signals";
 
 import { ComponentLibrary } from "deco-sites/starting/components/nrf/editor/ComponentLibrary.tsx";
@@ -22,6 +21,7 @@ export interface EditorFeature {
   title: string;
   subtitle: string;
   key: string;
+  id?: string;
 }
 
 export interface Props {
@@ -62,6 +62,30 @@ export default function Editor({ features }: Props) {
       );
     };
 
+    scroll(
+      ({ y }: { y: { progress: number } }) => {
+        const elements = Array.from(document.querySelectorAll(".feature-text"));
+        const index = Math.floor(y.progress * elements.length);
+        const fractionPerElement = 1 / elements.length;
+
+        const fraction =
+          (y.progress - index * fractionPerElement) / fractionPerElement;
+
+        animate(
+          `#feature-progress-${index}`,
+          {
+            strokeDasharray: `${fraction}, 1`,
+          },
+          {
+            duration: 0,
+          }
+        );
+      },
+      {
+        target: document.querySelector(`.editor`)!,
+      }
+    );
+
     const animateFeature = (
       target: Element,
       index: number,
@@ -119,9 +143,33 @@ export default function Editor({ features }: Props) {
         const elements = Array.from(document.querySelectorAll(".feature-text"));
         const index = elements.indexOf(target);
 
+        animate(
+          `#feature-progress-wrapper-${index}`,
+          { opacity: 1 },
+          { duration: 0.3 }
+        );
+
+        animate(
+          `#feature-title-${index}`,
+          { x: 0 },
+          { duration: 0.3 }
+        );
+
+
         animateFeature(target, index, true);
 
         return () => {
+          animate(
+            `#feature-progress-wrapper-${index}`,
+            { opacity: 0 },
+            { duration: 0.3 }
+          );
+
+          animate(
+            `#feature-title-${index}`,
+            { x: '-24px'},
+            { duration: 0.3 }
+          );
           animateFeature(target, index, false);
         };
       },
@@ -134,19 +182,50 @@ export default function Editor({ features }: Props) {
       <div class="flex flex-col items-center">
         <div class="relative w-full right-container ml-auto flex gap-20">
           <div class="hidden sticky h-screen top-0 lg:flex items-center justify-center">
-            <ul class="text-[#52525B] whitespace-nowrap space-y-2">
-              <li class="text-[#02F67C] text-[24px]">How it Works</li>
-              {features.map(({ key: section }, idx) => (
-                <li class="text-sm" id={`feature-title-${idx}`} key={idx}>
-                  {section}
-                </li>
+            <ul class="flex flex-col gap-2 text-[#52525B] whitespace-nowrap">
+              <li class="text-[#02F67C] text-[24px] font-medium mb-2">
+                How it Works
+              </li>
+              {features.map(({ key: section, id }, idx) => (
+                <a class="flex items-center gap-2" href={`#${id}`}>
+                  <div id={`feature-progress-wrapper-${idx}`} class="opacity-0">
+                    <svg
+                      class="-rotate-90 h-4"
+                      viewBox="0 0 10 10"
+                      fill="none"
+                    >
+                      <circle
+                        cx="5"
+                        cy="5"
+                        r="4.25"
+                        stroke="#52525B"
+                        stroke-width="2"
+                      />
+                      <circle
+                        cx="5"
+                        cy="5"
+                        r="4.25"
+                        pathLength="1"
+                        stroke-width="2"
+                        class="feature-progress"
+                        id={`feature-progress-${idx}`}
+                      />
+                    </svg>
+                  </div>
+                  <li class="text-sm -translate-x-[24px]" id={`feature-title-${idx}`} key={idx}>
+                    {section}
+                  </li>
+                </a>
               ))}
             </ul>
           </div>
           <div class="hidden lg:block">
             <div class="flex flex-col gap-32 max-w-[344px]">
-              {features.map(({ title, subtitle }, idx) => (
-                <div class="feature-text flex-1 flex gap-20 min-h-screen items-center">
+              {features.map(({ title, subtitle, id }, idx) => (
+                <div
+                  id={id}
+                  class="feature-text flex-1 flex gap-20 min-h-screen items-center"
+                >
                   <div
                     id={`feature-text-${idx}`}
                     class="opacity-0 max-w-[344px] flex flex-col h-screen items-center justify-center fixed top-0 gap-6 pointer-events-none"

diff --git a/islands/NRF/Features.tsx b/islands/NRF/Features.tsx
@@ -14,12 +14,11 @@ export interface Card {
 }
 
 export interface Props {
-  title: string;
+  title?: string;
   cards: Card[];
 }
 
 function FeatureCard({ icon, title, text }: Card) {
-
   return (
     <div class="feature-card transform translate-y-16 group border-l border-transparent group-hover:-translate-y-3 duration-200 w-full flex flex-col gap-8 py-10 px-12 whitespace-pre-line opacity-0 z-40">
       {icon && (
@@ -28,10 +27,12 @@ function FeatureCard({ icon, title, text }: Card) {
         </div>
       )}
       <div class="space-y-4 text-center">
-        <div
-          class="text-2xl font-semibold leading-[110%]"
-          dangerouslySetInnerHTML={{ __html: title }}
-        />
+        {title && (
+          <div
+            class="text-2xl font-semibold leading-[110%]"
+            dangerouslySetInnerHTML={{ __html: title }}
+          />
+        )}
         <p class="leading-[120%]" dangerouslySetInnerHTML={{ __html: text }} />
       </div>
     </div>
@@ -67,7 +68,7 @@ export default function Features({ title, cards }: Props) {
           ))}
         </div>
       </div>
-      <div class="ellipse-3 hidden lg:block" />
+      {/* <div class="ellipse-3 hidden lg:block" /> */}
     </section>
   );
 }