From d8841911de40fe2059fd91a9c288f03611afd497 Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 18 Mar 2021 23:41:20 +0100
Subject: [PATCH] website: use <ClientOnly> to prevent issues during SSR

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 website/src/pages/index.jsx | 33 +++++++++++++++++++--------------
 1 file changed, 19 insertions(+), 14 deletions(-)

diff --git a/website/src/pages/index.jsx b/website/src/pages/index.jsx
index a47b74063..0e45951ea 100644
--- a/website/src/pages/index.jsx
+++ b/website/src/pages/index.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import clsx from "clsx";
 import Layout from "@theme/Layout";
 import Link from "@docusaurus/Link";
+import ClientOnly from "@docusaurus/core/lib/client/exports/ClientOnly.js";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
@@ -102,13 +103,15 @@ function Home() {
                         <div className="row">
                             <div className="col col--5">
                                 <div>
-                                    <BeforeAfterSlider
-                                        className={styles.featureImage}
-                                        before={useBaseUrl("img/screen_apps_light.png")}
-                                        after={useBaseUrl("img/screen_apps_dark.png")}
-                                        width={640}
-                                        height={480}
-                                    />
+                                    <ClientOnly>
+                                        <BeforeAfterSlider
+                                            className={styles.featureImage}
+                                            before={useBaseUrl("img/screen_apps_light.png")}
+                                            after={useBaseUrl("img/screen_apps_dark.png")}
+                                            width={640}
+                                            height={480}
+                                        />
+                                    </ClientOnly>
                                 </div>
                             </div>
                             <div className="col col--5 col--offset-2 padding-vert--xl">
@@ -139,13 +142,15 @@ function Home() {
                             </div>
                             <div className="col col--5">
                                 <div>
-                                    <BeforeAfterSlider
-                                        className={styles.featureImage}
-                                        before={useBaseUrl("img/screen_admin_light.png")}
-                                        after={useBaseUrl("img/screen_admin_dark.png")}
-                                        width={640}
-                                        height={480}
-                                    />
+                                    <ClientOnly>
+                                        <BeforeAfterSlider
+                                            className={styles.featureImage}
+                                            before={useBaseUrl("img/screen_admin_light.png")}
+                                            after={useBaseUrl("img/screen_admin_dark.png")}
+                                            width={640}
+                                            height={480}
+                                        />
+                                    </ClientOnly>
                                 </div>
                             </div>
                         </div>