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

website: add sliders for light/dark mode

Browse source 
Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2021-03-18 20:51:21 +01:00
parent d82dfc65b7
commit e7a8371cbb
4 changed files with 31 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
website/docusaurus.config.js
View file

@ -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",

14
website/package-lock.json generated
View file

@ -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",

1
website/package.json
View file

@ -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": {

17
website/src/pages/index.js → website/src/pages/index.jsx
View file

@ -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>