Using glide carousel.

package.json

@@ -17,6 +17,7 @@
   },
   "repository": "https://github.com/LemmyNet/joinlemmy-site",
   "dependencies": {
+    "@glidejs/glide": "3.5.2",
     "@typescript-eslint/parser": "^6.7.5",
     "classnames": "^2.3.2",
     "express": "~4.18.2",
@@ -37,14 +38,15 @@
     "@babel/plugin-proposal-class-properties": "^7.18.6",
     "@babel/plugin-transform-runtime": "^7.23.2",
     "@babel/plugin-transform-typescript": "^7.22.15",
-    "@types/qrcode": "^1.5.4",
     "@babel/preset-env": "7.23.2",
     "@babel/preset-typescript": "^7.23.2",
     "@babel/runtime": "^7.23.2",
     "@tailwindcss/typography": "^0.5.10",
     "@types/express": "^4.17.19",
+    "@types/glidejs__glide": "^3.6.3",
     "@types/node": "^20.8.4",
     "@types/node-fetch": "^2.6.6",
+    "@types/qrcode": "^1.5.4",
     "@typescript-eslint/eslint-plugin": "^6.7.5",
     "babel-loader": "^9.1.3",
     "babel-plugin-inferno": "^6.7.0",

src/server/index.tsx

@@ -87,6 +87,7 @@ server.get("/*", async (req, res) => {
 
            <!-- Styles -->
            <link rel="stylesheet" type="text/css" href="/static/styles/styles.css" />
+           <link rel="stylesheet" href="/static/assets/glide.core.min.css">
            <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Inter">
 
            ${helmet.link.toString()}

src/shared/components/instances-definitions.ts

@@ -142,7 +142,7 @@ export const RECOMMENDED_INSTANCES: RecommendedInstance[] = [
   {
     domain: "lemmygrad.ml",
     languages: ["en"],
-    topics: [GENERAL, POLITICS],
+    topics: [GENERAL, POLITICS, LGBTQ],
   },
   {
     domain: "sopuli.xyz",

src/shared/components/main.tsx

@@ -13,6 +13,7 @@ import {
 } from "./common";
 import { InstancePicker } from "./instance-picker";
 import classNames from "classnames";
+import Glide from "@glidejs/glide";
 
 interface MainProps {
   i: Main;
@@ -39,25 +40,33 @@ const carouselImages = [
 
 const CarouselBlock = () => (
   <div>
-    <div className="carousel carousel-center p-8 space-x-8 rounded-box mt-16">
+    <div class="glide p-8 space-x-8 rounded-box mt-16">
-      {carouselImages.map((image, i) => (
+      <div class="glide__track" data-glide-el="track">
-        <div id={`item-${i}`} className="carousel-item w-9/12 lg:w-5/12">
+        <ul class="glide__slides">
-          <img
+          {carouselImages.map((image, i) => (
-            src={image}
+            <img
-            className={classNames("rounded-box border-8 z-10", {
+              src={image}
-              "border-primary/[.15]": i & 1,
+              className={classNames("rounded-box border-8 z-10 glide__slide", {
-              "border-secondary/[.15]": !(i & 1),
+                "border-primary/[.15]": i & 1,
-            })}
+                "border-secondary/[.15]": !(i & 1),
-          />
+              })}
-        </div>
+            />
-      ))}
+          ))}
-    </div>
+        </ul>
-    <div className="flex justify-center w-full py-2 gap-4">
+      </div>
-      {carouselImages.map((_, i) => (
+      <div
-        <a href={`#item-${i}`} className={TEXT_GRADIENT}>
+        className="glide__bullets flex justify-center w-full py-2 gap-4"
-          ●
+        data-glide-el="controls[nav]"
-        </a>
+      >
-      ))}
+        {carouselImages.map((_, i) => (
+          <button
+            data-glide-dir={`=${i}`}
+            className={`glide__bullet ${TEXT_GRADIENT}`}
+          >
+            ●
+          </button>
+        ))}
+      </div>
     </div>
   </div>
 );
@@ -453,6 +462,18 @@ export class Main extends Component<Props, State> {
   }
 
   componentDidMount() {
+    new Glide(".glide", {
+      type: "carousel",
+      gap: 50,
+      perView: 3,
+      breakpoints: {
+        800: {
+          perView: 1,
+        },
+      },
+      autoplay: 3000,
+      hoverpause: true,
+    }).mount();
     if (isBrowser()) {
       window.scrollTo(0, 0);
     }

yarn.lock

@@ -1261,6 +1261,11 @@
   resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.51.0.tgz#6d419c240cfb2b66da37df230f7e7eef801c32fa"
   integrity sha512-HxjQ8Qn+4SI3/AFv6sOrDB+g6PpUTDwSJiQqOrnneEk8L71161srI9gjzzZvYVbzHiVg/BvcH95+cK/zfIt4pg==
 
+"@glidejs/glide@3.5.2":
+  version "3.5.2"
+  resolved "https://registry.yarnpkg.com/@glidejs/glide/-/glide-3.5.2.tgz#7012c5920ecf202bbda44d8526fc979984b6dd54"
+  integrity sha512-7jGciNJ2bQ4eZLSNlSZ+VAyW63kALf420CvkEpK4lEsUfWJq9odqimci0YCiyNyMUFB+pWHwLYyNc57dijYsCg==
+
 "@humanwhocodes/config-array@^0.11.11":
   version "0.11.11"
   resolved "https://registry.yarnpkg.com/@humanwhocodes/config-array/-/config-array-0.11.11.tgz#88a04c570dbbc7dd943e4712429c3df09bc32844"
@@ -1494,6 +1499,11 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
+"@types/glidejs__glide@^3.6.3":
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/@types/glidejs__glide/-/glidejs__glide-3.6.3.tgz#3ce8309b2f79443219bddfcc0b4647592662c52f"
+  integrity sha512-Nv07hqI/PgZ/PnWwhQ+rynEz02kU/mdfOU8T7Z7hYYT85mZjSD5jJyOZzE+EWvQFCbryLCNf1u+M4n4XVVVoDQ==
+
 "@types/glob@^7.1.1":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb"