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 {
-  position: absolute;
-  bottom: 5px;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  pointer-events: none;
+.navButton.navButtonNext {
+  right: 0.1rem;
 }
 
-.dotGroup > :global(.carousel__dot) {
-  pointer-events: auto;
-  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%);
+.navButton.navButtonPrev {
+  left: 0.1rem;
 }
 
 .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 {
-  CarouselProvider,
-  Slider,
-  Slide,
-  ButtonBack,
-  ButtonNext,
-  DotGroup,
-} from 'pure-react-carousel';
+import React, {type ComponentProps, type ReactNode, useRef} from 'react';
+import clsx from 'clsx';
+
 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
-      naturalSlideWidth={1}
-      naturalSlideHeight={1 / aspectRatio}
-      totalSlides={sites.length}
-      infinite
-      className={styles.carousel}>
-      <Slider>
-        {sites.map((site, index) => (
-          <SiteSlide key={index} index={index} site={site} />
-        ))}
-      </Slider>
-      <ButtonNext className={styles.navButton} style={{right: -20}}>
-        {'>'}
-      </ButtonNext>
-      <ButtonBack className={styles.navButton} style={{left: -20}}>
-        {'<'}
-      </ButtonBack>
-      <DotGroup className={styles.dotGroup} />
-    </CarouselProvider>
+    <div className={styles.cssCarousel} style={{aspectRatio}}>
+      <div
+        ref={sliderRef}
+        className={styles.cssCarouselSlider}
+        style={{aspectRatio}}>
+        {sites.map((site, index) => {
+          return (
+            <div key={index} className={styles.cssCarouselItem}>
+              <SiteSlide index={index} site={site} />
+            </div>
+          );
+        })}
+        <button
+          className={clsx(styles.navButton, styles.navButtonPrev)}
+          type="button"
+          onClick={scrollPrev}>
+          {'<'}
+        </button>
+        <button
+          className={clsx(styles.navButton, styles.navButtonNext)}
+          type="button"
+          onClick={scrollNext}>
+          {'>'}
+        </button>
+      </div>
+    </div>
   );
 }