From e7a8371cbbce2aaddc95861eb4d9b8cd804e58fb Mon Sep 17 00:00:00 2001
From: Jens Langhammer <jens.langhammer@beryju.org>
Date: Thu, 18 Mar 2021 20:51:21 +0100
Subject: [PATCH] website: add sliders for light/dark mode

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
---
 website/docusaurus.config.js              |  2 +-
 website/package-lock.json                 | 14 ++++++++++++++
 website/package.json                      |  1 +
 website/src/pages/{index.js => index.jsx} | 17 +++++++++++++++--
 4 files changed, 31 insertions(+), 3 deletions(-)
 rename website/src/pages/{index.js => index.jsx} (85%)

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index e4f87934d..9fb2cb974 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -1,6 +1,6 @@
 module.exports = {
     title: "authentik",
-    tagline: "The authentication glue you need.",
+    tagline: "Making authentication simple.",
     url: "https://goauthentik.io",
     baseUrl: "/",
     onBrokenLinks: "throw",
diff --git a/website/package-lock.json b/website/package-lock.json
index 3af14bb11..e18d1a5fa 100644
--- a/website/package-lock.json
+++ b/website/package-lock.json
@@ -14687,6 +14687,20 @@
                 "pure-color": "^1.2.0"
             }
         },
+        "react-before-after-slider": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz",
+            "integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==",
+            "requires": {
+                "classnames": "^2.2.5",
+                "react-block-image": "^1.0.0"
+            }
+        },
+        "react-block-image": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/react-block-image/-/react-block-image-1.0.0.tgz",
+            "integrity": "sha1-XEbXoRX6fvpw1HeiWA7AybIQYoM="
+        },
         "react-dev-utils": {
             "version": "11.0.4",
             "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
diff --git a/website/package.json b/website/package.json
index aeb1e072d..b772c824e 100644
--- a/website/package.json
+++ b/website/package.json
@@ -17,6 +17,7 @@
         "clsx": "^1.1.1",
         "postcss": "^8.2.8",
         "react": "^17.0.1",
+        "react-before-after-slider": "^1.0.4",
         "react-dom": "^17.0.1"
     },
     "browserslist": {
diff --git a/website/src/pages/index.js b/website/src/pages/index.jsx
similarity index 85%
rename from website/src/pages/index.js
rename to website/src/pages/index.jsx
index 54394e452..c4d05813b 100644
--- a/website/src/pages/index.js
+++ b/website/src/pages/index.jsx
@@ -5,6 +5,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import useBaseUrl from "@docusaurus/useBaseUrl";
 import styles from "./styles.module.css";
+import BeforeAfterSlider from 'react-before-after-slider'
 
 const features = [
     {
@@ -100,7 +101,13 @@ function Home() {
                         <div className="row">
                             <div className="col col--5">
                                 <div>
-                                    <img className={styles.featureImage} src={useBaseUrl('img/screen_apps_light.png')} alt="library screenshot"/>
+                                    <BeforeAfterSlider
+                                        className={styles.featureImage}
+                                        before={useBaseUrl("img/screen_apps_light.png")}
+                                        after={useBaseUrl("img/screen_apps_dark.png")}
+                                        width={640}
+                                        height={480}
+                                    />
                                 </div>
                             </div>
                             <div className="col col--5 col--offset-2 padding-vert--xl">
@@ -131,7 +138,13 @@ function Home() {
                             </div>
                             <div className="col col--5">
                                 <div>
-                                    <img className={styles.featureImage} src={useBaseUrl('img/screen_admin_light.png')} alt="library screenshot" />
+                                    <BeforeAfterSlider
+                                        className={styles.featureImage}
+                                        before={useBaseUrl("img/screen_admin_light.png")}
+                                        after={useBaseUrl("img/screen_admin_dark.png")}
+                                        width={640}
+                                        height={480}
+                                    />
                                 </div>
                             </div>
                         </div>