refactor(website): remove pure-react-carousel (#10784)

website/blog/2022/08-01-announcing-docusaurus-2.0/ShowcaseCarousel.module.css

@@ -5,22 +5,46 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-.carousel {
+.cssCarousel {
+  position: relative;
+}
+
+.cssCarouselSlider {
+  display: flex;
+  overflow-x: scroll;
+  overflow-y: hidden;
+  scroll-snap-type: x mandatory;
+  scrollbar-width: none;
+}
+
+.cssCarouselItem {
+  width: 100%;
+  height: 100%;
+  flex-shrink: 0;
+  scroll-snap-align: start;
+}
+
+.cssCarouselContent {
+  width: 100%;
+  height: 100%;
   position: relative;
 }
 
 .navButton {
   position: absolute;
   top: 50%;
-  transform: translateY(-50%);
+  width: 2.6rem;
+  height: 2.6rem;
   border: 0;
   border-radius: 50%;
+  font-weight: bold;
   color: #fff;
-  font-size: 20px;
-  height: 40px;
-  width: 40px;
-
   background-color: rgb(0 0 0 / 30%);
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
   transition: all var(--ifm-transition-fast)
     var(--ifm-transition-timing-default);
 }
@@ -29,28 +53,12 @@
   background-color: rgb(0 0 0 / 45%);
 }
 
-.dotGroup {
+.navButton.navButtonNext {
-  position: absolute;
+  right: 0.1rem;
-  bottom: 5px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
 }
 
-.dotGroup > :global(.carousel__dot) {
+.navButton.navButtonPrev {
-  pointer-events: auto;
+  left: 0.1rem;
-  display: inline-block;
-  border: none;
-  height: 1rem;
-  width: 1rem;
-  border-radius: 50%;
-  margin: 2px;
-  background: rgb(0 0 0 / 20%);
-}
-
-.dotGroup > :global(.carousel__dot--selected) {
-  background: rgb(0 0 0 / 45%);
 }
 
 .siteSlide {

website/blog/2022/08-01-announcing-docusaurus-2.0/ShowcaseCarousel.tsx

@@ -7,18 +7,11 @@
 
 /* eslint-disable global-require */
 
-import React, {type ComponentProps, type ReactNode} from 'react';
+import React, {type ComponentProps, type ReactNode, useRef} from 'react';
-import {
+import clsx from 'clsx';
-  CarouselProvider,
+
-  Slider,
-  Slide,
-  ButtonBack,
-  ButtonNext,
-  DotGroup,
-} from 'pure-react-carousel';
 import Link from '@docusaurus/Link';
 import Image from '@theme/IdealImage';
-import 'pure-react-carousel/dist/react-carousel.es.css';
 import styles from './ShowcaseCarousel.module.css';
 
 type Site = {
@@ -29,7 +22,7 @@ type Site = {
 
 function SiteSlide({index, site}: {index: number; site: Site}) {
   return (
-    <Slide index={index} className={styles.siteSlide}>
+    <div key={index} className={styles.cssCarouselContent}>
       <Image
         img={site.image}
         alt={site.name}
@@ -38,10 +31,11 @@ function SiteSlide({index, site}: {index: number; site: Site}) {
       <Link to={site.url} className={styles.siteLink} target="_blank">
         🔗 {site.name}
       </Link>
-    </Slide>
+    </div>
   );
 }
 
+// Inspired by: https://community.appsmith.com/content/blog/ditch-bloat-building-swipeable-carousel-only-css
 export default function ShowcaseCarousel({
   sites,
   aspectRatio,
@@ -49,26 +43,45 @@ export default function ShowcaseCarousel({
   sites: Site[];
   aspectRatio: number;
 }): ReactNode {
+  const sliderRef = useRef<HTMLDivElement>(null);
+
+  const scroll = (next: boolean) => {
+    const sliderDiv = sliderRef.current!;
+    const width = sliderDiv.offsetWidth;
+    const scrollBy = next ? width : -width;
+    sliderDiv.scrollBy({left: scrollBy, behavior: 'smooth'});
+  };
+
+  const scrollNext = () => scroll(true);
+  const scrollPrev = () => scroll(false);
+
   return (
-    <CarouselProvider
+    <div className={styles.cssCarousel} style={{aspectRatio}}>
-      naturalSlideWidth={1}
+      <div
-      naturalSlideHeight={1 / aspectRatio}
+        ref={sliderRef}
-      totalSlides={sites.length}
+        className={styles.cssCarouselSlider}
-      infinite
+        style={{aspectRatio}}>
-      className={styles.carousel}>
+        {sites.map((site, index) => {
-      <Slider>
+          return (
-        {sites.map((site, index) => (
+            <div key={index} className={styles.cssCarouselItem}>
-          <SiteSlide key={index} index={index} site={site} />
+              <SiteSlide index={index} site={site} />
-        ))}
+            </div>
-      </Slider>
+          );
-      <ButtonNext className={styles.navButton} style={{right: -20}}>
+        })}
-        {'>'}
+        <button
-      </ButtonNext>
+          className={clsx(styles.navButton, styles.navButtonPrev)}
-      <ButtonBack className={styles.navButton} style={{left: -20}}>
+          type="button"
-        {'<'}
+          onClick={scrollPrev}>
-      </ButtonBack>
+          {'<'}
-      <DotGroup className={styles.dotGroup} />
+        </button>
-    </CarouselProvider>
+        <button
+          className={clsx(styles.navButton, styles.navButtonNext)}
+          type="button"
+          onClick={scrollNext}>
+          {'>'}
+        </button>
+      </div>
+    </div>
   );
 }
 

website/package.json

@@ -56,7 +56,6 @@
     "color": "^4.2.3",
     "fs-extra": "^11.1.1",
     "netlify-plugin-cache": "^1.0.3",
-    "pure-react-carousel": "^1.30.1",
     "raw-loader": "^4.0.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",

yarn.lock

@@ -1180,7 +1180,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.25.9", "@babel/runtime@^7.8.4":
   version "7.25.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.9.tgz#65884fd6dc255a775402cc1d9811082918f4bf00"
   integrity sha512-4zpTHZ9Cm6L9L+uIqghQX8ZXg8HKFcjYO3qHoO8zTmRm6HQUJ8SSJ+KRvbMBZn0EGVlT4DRYeQ/6hjlyXBh+Kg==
@@ -7349,21 +7349,11 @@ deep-extend@^0.6.0:
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
   integrity sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==
 
-deep-freeze@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/deep-freeze/-/deep-freeze-0.0.1.tgz#3a0b0005de18672819dfd38cd31f91179c893e84"
-  integrity sha512-Z+z8HiAvsGwmjqlphnHW5oz6yWlOwu6EQfFTjmeTWlDeda3FS2yv3jhq35TX/ewmsnqB+RX2IdsIOyjJCQN5tg==
-
 deep-is@^0.1.3:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
-deepmerge@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
-  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
-
 deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
@@ -7811,13 +7801,6 @@ envinfo@7.14.0, envinfo@^7.7.4:
   resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-7.14.0.tgz#26dac5db54418f2a4c1159153a0b2ae980838aae"
   integrity sha512-CO40UI41xDQzhLB1hWyqUKgFhs250pNcGbyGKe1l/e4FSaI/+YE4IMG76GDt0In67WLPACIITC+sOi08x4wIvg==
 
-equals@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/equals/-/equals-1.0.5.tgz#212062dde5e1a510d955f13598efcc6a621b6ace"
-  integrity sha512-wI15a6ZoaaXPv+55+Vh2Kqn3+efKRv8QPtcGTjW5xmanMnQzESdAt566jevtMZyt3W/jwLDTzXpMph5ECDJ2zg==
-  dependencies:
-    jkroso-type "1"
-
 err-code@^2.0.2:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/err-code/-/err-code-2.0.3.tgz#23c2f3b756ffdfc608d30e27c9a941024807e7f9"
@@ -11021,11 +11004,6 @@ jiti@^1.20.0:
   resolved "https://registry.yarnpkg.com/jiti/-/jiti-1.21.6.tgz#6c7f7398dd4b3142767f9a168af2f317a428d268"
   integrity sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==
 
-jkroso-type@1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/jkroso-type/-/jkroso-type-1.1.1.tgz#bc4ced6d6c45fe0745282bafc86a9f8c4fc9ce61"
-  integrity sha512-zZgay+fPG6PgMUrpyFADmQmvLo39+AZa7Gc5pZhev2RhDxwANEq2etwD8d0e6rTg5NkwOIlQmaEmns3draC6Ng==
-
 joi@^17.9.2:
   version "17.13.3"
   resolved "https://registry.yarnpkg.com/joi/-/joi-17.13.3.tgz#0f5cc1169c999b30d344366d384b12d92558bcec"
@@ -14956,17 +14934,6 @@ pure-rand@^6.0.0:
   resolved "https://registry.yarnpkg.com/pure-rand/-/pure-rand-6.0.2.tgz#a9c2ddcae9b68d736a8163036f088a2781c8b306"
   integrity sha512-6Yg0ekpKICSjPswYOuC5sku/TSWaRYlA0qsXqJgM/d/4pLPHPuTxK7Nbf7jFKzAeedUhR8C7K9Uv63FBsSo8xQ==
 
-pure-react-carousel@^1.30.1:
-  version "1.30.1"
-  resolved "https://registry.yarnpkg.com/pure-react-carousel/-/pure-react-carousel-1.30.1.tgz#006a333869b51339dafcdee2afa0561eb46d1743"
-  integrity sha512-B1qi62hZk0OFqRR4cTjtgIeOn/Ls5wo+HsLtrXT4jVf5et8ldBHSt+6LsYRJN86Or8dm+XbnJNEHy6WDJ0/DQw==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    deep-freeze "0.0.1"
-    deepmerge "^2.2.1"
-    equals "^1.0.5"
-    prop-types "^15.6.2"
-
 q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"