trustchain-oc1-orchestral/authentik
Archived
10
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

website: use <ClientOnly> to prevent issues during SSR

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-18 23:41:20 +01:00
parent fe054136b1
commit d8841911de
1 changed files with 19 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
website/src/pages/index.jsx
View file

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