website: use <ClientOnly> to prevent issues during SSR
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
parent
fe054136b1
commit
d8841911de
|
@ -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>
|
||||||
|
|
Reference in New Issue