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 

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", "postcss": "^8.3.5",
"rapidoc": "^9.0.0", "rapidoc": "^9.0.0",
"react": "^17.0.2", "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-dom": "^17.0.2",
"react-feather": "^2.0.9", "react-feather": "^2.0.9",
"react-toggle": "^4.1.2" "react-toggle": "^4.1.2"
@ -3963,9 +3963,9 @@
} }
}, },
"node_modules/classnames": { "node_modules/classnames": {
"version": "2.2.6", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
}, },
"node_modules/clean-css": { "node_modules/clean-css": {
"version": "5.1.2", "version": "5.1.2",
@ -10696,20 +10696,18 @@
"pure-color": "^1.2.0" "pure-color": "^1.2.0"
} }
}, },
"node_modules/react-before-after-slider": { "node_modules/react-before-after-slider-component": {
"version": "1.0.4", "version": "0.7.4",
"resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz", "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
"integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==", "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
"dependencies": { "dependencies": {
"classnames": "^2.2.5", "classnames": "^2.3.1"
"react-block-image": "^1.0.0" },
"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": { "node_modules/react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz",
@ -18174,9 +18172,9 @@
} }
}, },
"classnames": { "classnames": {
"version": "2.2.6", "version": "2.3.1",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
"integrity": "sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==" "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
}, },
"clean-css": { "clean-css": {
"version": "5.1.2", "version": "5.1.2",
@ -23170,20 +23168,14 @@
"pure-color": "^1.2.0" "pure-color": "^1.2.0"
} }
}, },
"react-before-after-slider": { "react-before-after-slider-component": {
"version": "1.0.4", "version": "0.7.4",
"resolved": "https://registry.npmjs.org/react-before-after-slider/-/react-before-after-slider-1.0.4.tgz", "resolved": "https://registry.npmjs.org/react-before-after-slider-component/-/react-before-after-slider-component-0.7.4.tgz",
"integrity": "sha512-zXuaiDqJkgkZ/9RaHKXS5Dh+zsOQW5b9nPgQbXt1fcI1bF4q+l/KCM50qhhH/EHKLhbtUYAb7nhqViowFbC3ZQ==", "integrity": "sha512-KkTBnun7TtNYhGwROqnBSc9yjY+RSk/Xm08u8Mci/KBrdNrKpa77c2nhw/GIbONXk9k4hR7Me7ogZLy3KN2LEg==",
"requires": { "requires": {
"classnames": "^2.2.5", "classnames": "^2.3.1"
"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": { "react-dev-utils": {
"version": "11.0.4", "version": "11.0.4",
"resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-11.0.4.tgz", "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", "postcss": "^8.3.5",
"rapidoc": "^9.0.0", "rapidoc": "^9.0.0",
"react": "^17.0.2", "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-dom": "^17.0.2",
"react-feather": "^2.0.9", "react-feather": "^2.0.9",
"react-toggle": "^4.1.2" "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 { table {
display: 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 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";
import BeforeAfterSlider from 'react-before-after-slider'
import Comparison from "../comparison"; import Comparison from "../comparison";
import 'react-before-after-slider-component/dist/build.css';
const features = [ const features = [
{ {
@ -105,12 +105,16 @@ function Home() {
<div> <div>
<BrowserOnly> <BrowserOnly>
{() => { {() => {
return <BeforeAfterSlider const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
className={styles.featureImage} return <ReactBeforeSliderComponent
before={useBaseUrl("img/screen_apps_light.jpg")} firstImage={{
after={useBaseUrl("img/screen_apps_dark.jpg")} id: 1,
width={640} imageUrl: useBaseUrl("img/screen_apps_light.jpg"),
height={480} }}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_apps_dark.jpg"),
}}
/> />
}} }}
</BrowserOnly> </BrowserOnly>
@ -146,12 +150,16 @@ function Home() {
<div> <div>
<BrowserOnly> <BrowserOnly>
{() => { {() => {
return <BeforeAfterSlider const ReactBeforeSliderComponent = require('react-before-after-slider-component').default;
className={styles.featureImage} return <ReactBeforeSliderComponent
before={useBaseUrl("img/screen_admin_light.jpg")} firstImage={{
after={useBaseUrl("img/screen_admin_dark.jpg")} id: 1,
width={640} imageUrl: useBaseUrl("img/screen_admin_light.jpg"),
height={480} }}
secondImage={{
id: 2,
imageUrl: useBaseUrl("img/screen_admin_dark.jpg"),
}}
/> />
}} }}
</BrowserOnly> </BrowserOnly>