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

website: migrate to react-before-after-slider-component

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-07-13 12:10:08 +02:00
parent fd197ceee7
commit b7835a751b
4 changed files with 47 additions and 43 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

50
website/package-lock.json generated
View file

@ -15,7 +15,7 @@
"postcss": "^8.3.5",
"rapidoc": "^9.0.0",
"react": "^17.0.2",
"react-before-after-slider": "^1.0.4",
"react-before-after-slider-component": "^0.7.4",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-toggle": "^4.1.2"
@ -3963,9 +3963,9 @@
}
},
"node_modules/classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"node_modules/clean-css": {
"version": "5.1.2",
@ -10696,20 +10696,18 @@
"pure-color": "^1.2.0"
}
},
"node_modules/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==",
"node_modules/react-before-after-slider-component": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
"integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
"dependencies": {
"classnames": "^2.2.5",
"react-block-image": "^1.0.0"
"classnames": "^2.3.1"
},
"peerDependencies": {
"react": "^17.0.2",
"react-dom": "^17.0.2"
}
},
"node_modules/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="
},
"node_modules/react-dev-utils": {
"version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -18174,9 +18172,9 @@
}
},
"classnames": {
"version": "2.2.6",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q=="
"version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
},
"clean-css": {
"version": "5.1.2",
@ -23170,20 +23168,14 @@
"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==",
"react-before-after-slider-component": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
"integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
"requires": {
"classnames": "^2.2.5",
"react-block-image": "^1.0.0"
"classnames": "^2.3.1"
}
},
"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",

2
website/package.json
View file

@ -19,7 +19,7 @@
"postcss": "^8.3.5",
"rapidoc": "^9.0.0",
"react": "^17.0.2",
"react-before-after-slider": "^1.0.4",
"react-before-after-slider-component": "^0.7.4",
"react-dom": "^17.0.2",
"react-feather": "^2.0.9",
"react-toggle": "^4.1.2"

4
website/src/css/custom.css
View file

@ -37,6 +37,10 @@
}
.before-after-slider img {
max-width: none;
}
table {
display: table;
}

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

@ -6,8 +6,8 @@ import BrowserOnly from "@docusaurus/core/lib/client/exports/BrowserOnly";
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
import useBaseUrl from "@docusaurus/useBaseUrl";
import styles from "./styles.module.css";
import BeforeAfterSlider from 'react-before-after-slider'
import Comparison from "../comparison";
import 'react-before-after-slider-component/dist/build.css';
const features = [
{
@ -105,12 +105,16 @@ function Home() {
<div>
<BrowserOnly>
{() => {
return <BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_apps_light.jpg")}
after={useBaseUrl("img/screen_apps_dark.jpg")}
width={640}
height={480}
const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
return <ReactBeforeSliderComponent
firstImage={{
id: 1,
imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
}}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
}}
/>
}}
</BrowserOnly>
@ -146,12 +150,16 @@ function Home() {
<div>
<BrowserOnly>
{() => {
return <BeforeAfterSlider
className={styles.featureImage}
before={useBaseUrl("img/screen_admin_light.jpg")}
after={useBaseUrl("img/screen_admin_dark.jpg")}
width={640}
height={480}
const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
return <ReactBeforeSliderComponent
firstImage={{
id: 1,
imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
}}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
}}
/>
}}
</BrowserOnly>