site updates

roginfarrer · Jul 17, 2024 · e3ca60f · e3ca60f
1 parent 34ff86b
commit e3ca60f
Show file tree

Hide file tree

Showing 3 changed files with 74 additions and 27 deletions.
diff --git a/react-aria-carousel/src/useCarouselState.ts b/react-aria-carousel/src/useCarouselState.ts
@@ -296,28 +296,24 @@ export function useCarouselState(
         ),
       );
       if (childrenChanged) {
-        console.log("MUTATION OBSERVER FIRING");
         calculatePages();
         updateSnaps();
       }
     });
 
     mutationObserver.observe(host, { childList: true, subtree: true });
     return () => {
-      console.log("MUTATION OBSERVER DISCONNECT");
       mutationObserver.disconnect();
     };
   }, [getItems, host, calculatePages, updateSnaps]);
 
   useEffect(() => {
     if (!host) return;
 
-    console.log("INTERSECTION OBSERVER CREATED");
     const hasIntersected = new Set<Element>();
 
     const intersectionObserver = new IntersectionObserver(
       (entries) => {
-        console.log("INTERSECTION OBSERVER FIRING");
         for (const entry of entries) {
           if (entry.isIntersecting && !hasIntersected.has(entry.target)) {
             hasIntersected.add(entry.target);
@@ -332,13 +328,13 @@ export function useCarouselState(
         threshold: 0.6,
       },
     );
-    for (let child of getItems({ includeClones: true })) {
+    const children = getItems({ includeClones: true });
+    for (let child of children) {
       intersectionObserver.observe(child);
     }
 
     function handleScrollEnd() {
       if (hasIntersected.size === 0) return;
-      console.log("SCROLL END FIRING");
       const sorted = [...hasIntersected].sort((a, b) => {
         return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING
           ? -1
@@ -401,10 +397,12 @@ export function useCarouselState(
       }, 150);
     }
 
-    host.addEventListener("scroll", handleScroll);
+    host.addEventListener("scroll", handleScroll, { passive: true });
     return () => {
-      console.log("INTERSECTION OBSERVER DISCONNECT");
       clearTimeout(timeout);
+      for (let child of children) {
+        intersectionObserver.unobserve(child);
+      }
       intersectionObserver.disconnect();
       host.removeEventListener("scroll", handleScroll);
     };

diff --git a/site/app/HeroCarousel.tsx b/site/app/HeroCarousel.tsx
@@ -70,9 +70,9 @@ export const HeroCarousel = () => {
   return (
     <Carousel
       aria-label="React Aria Carousel features"
-      spaceBetweenItems="0px"
+      spaceBetweenItems="25px"
       initialPages={[[0], [1], [2], [3], [4]]}
-      itemsPerPage={1.25}
+      scrollPadding="50px"
       className={css({
         display: "grid",
         gridTemplateAreas: "'scroll scroll scroll' 'prev nav next'",
@@ -81,6 +81,28 @@ export const HeroCarousel = () => {
         justifyContent: "center",
         position: "relative",
         rowGap: "4",
+        pos: "relative",
+        "--fade-width": "15px",
+        "&::before": {
+          content: "''",
+          width: "var(--fade-width)",
+          pos: "absolute",
+          top: 0,
+          left: "-1px",
+          background: "linear-gradient(to right, white, transparent)",
+          height: "100%",
+          zIndex: "1",
+        },
+        "&::after": {
+          content: "''",
+          width: "var(--fade-width)",
+          pos: "absolute",
+          top: 0,
+          right: "-1px",
+          background: "linear-gradient(to left, white, transparent)",
+          height: "100%",
+          zIndex: "1",
+        },
       })}
     >
       <StyledCarouselButton dir="prev" />
@@ -156,7 +178,7 @@ export function Slide({
         display: "flex",
         justifyContent: "center",
         alignItems: "center",
-        p: "20px",
+        py: "20px",
       })}
     >
       <div

diff --git a/site/app/header.tsx b/site/app/header.tsx
@@ -1,5 +1,6 @@
 import { flex, grid, visuallyHidden } from "@/styled-system/patterns";
 import { FaChevronDown } from "react-icons/fa6";
+import { PiArrowUpRight } from "react-icons/pi";
 
 import { HeroCarousel } from "./HeroCarousel";
 import { css } from "@/styled-system/css";
@@ -8,9 +9,9 @@ export function Header() {
   return (
     <div
       className={grid({
+        py: { base: "4", sm: "8" },
         maxWidth: "900px",
         height: "100vh",
-        width: "90vw",
         margin: "0 auto",
         gridTemplateAreas: '"copy" "demo" "arrow"',
         gridTemplateColumns: "1fr",
@@ -22,32 +23,58 @@ export function Header() {
       })}
     >
       <div
-        className={css({
+        className={flex({
+          direction: "column-reverse",
           gridArea: "arrow",
-          py: "4",
-          justifySelf: "center",
+          align: "center",
         })}
       >
-        <a
-          href="#main-content"
+        <div
           className={css({
-            display: "block",
-            m: "0 auto",
-            animation: "1s ease 0s infinite normal none running bounce",
+            py: "4",
+            justifySelf: "center",
           })}
         >
-          <FaChevronDown
-            aria-hidden="true"
+          <a
+            href="#main-content"
             className={css({
-              color: "gray.8",
-              size: "36px",
+              display: "block",
+              m: "0 auto",
+              animation: "1s ease 0s infinite normal none running bounce",
             })}
-          />
-          <span className={visuallyHidden()}>Skip to content</span>
-        </a>
+          >
+            <FaChevronDown
+              aria-hidden="true"
+              className={css({
+                color: "gray.8",
+                size: "36px",
+              })}
+            />
+            <span className={visuallyHidden()}>Skip to content</span>
+          </a>
+        </div>
+        <button
+          type="button"
+          className={flex({
+            textStyle: { base: "sm", sm: "md" },
+            rounded: "lg",
+            align: "center",
+            p: { base: "2", md: "4" },
+            bg: { base: "slate.700", _osDark: "slate.600" },
+            color: "white",
+            transition: "all 0.2s ease",
+            _hover: {
+              bg: "slate.500",
+            },
+          })}
+        >
+          View on GitHub <PiArrowUpRight />
+        </button>
       </div>
       <header
         className={flex({
+          width: "90vw",
+          margin: "0 auto",
           gridArea: "copy",
           direction: "column",
           gap: { base: "5", md: "10" },