diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json index d928c5b19..853e3e469 100644 --- a/subprojects/docs/package.json +++ b/subprojects/docs/package.json @@ -49,6 +49,8 @@ "react": "^18.2.0", "react-dom": "^18.2.0", "remark-smartypants": "^2.1.0", + "responsive-loader": "^3.1.2", + "sharp": "^0.33.3", "swc-loader": "^0.2.6", "terser-webpack-plugin": "^5.3.10", "unified": "^11.0.4", diff --git a/subprojects/docs/src/components/Video/cover-background.png b/subprojects/docs/src/components/Video/cover-background.png new file mode 100644 index 000000000..11369ae37 Binary files /dev/null and b/subprojects/docs/src/components/Video/cover-background.png differ diff --git a/subprojects/docs/src/components/Video/cover-background.png.license b/subprojects/docs/src/components/Video/cover-background.png.license new file mode 100644 index 000000000..50ad65f2c --- /dev/null +++ b/subprojects/docs/src/components/Video/cover-background.png.license @@ -0,0 +1,9 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 + +Modified image based on "Low Angle Shot of Manufacturing Plant under Blue Sky" +available under the CC-1.0 license at +https://www.pexels.com/photo/low-angle-shot-of-manufacturing-plant-under-blue-sky-257700/ +Original image "Bulgaria, Vratsa, Abandoned image. Free for use." by "2427999" also available at +https://pixabay.com/photos/bulgaria-vratsa-abandoned-industry-1351947/ diff --git a/subprojects/docs/src/components/Video/cover.svg b/subprojects/docs/src/components/Video/cover.svg new file mode 100644 index 000000000..b263c8b3f --- /dev/null +++ b/subprojects/docs/src/components/Video/cover.svg @@ -0,0 +1 @@ +Videointroduction diff --git a/subprojects/docs/src/components/Video/cover.svg.license b/subprojects/docs/src/components/Video/cover.svg.license new file mode 100644 index 000000000..b80566a0e --- /dev/null +++ b/subprojects/docs/src/components/Video/cover.svg.license @@ -0,0 +1,3 @@ +SPDX-FileCopyrightText: 2024 The Refinery Authors + +SPDX-License-Identifier: EPL-2.0 diff --git a/subprojects/docs/src/components/Video/index.module.css b/subprojects/docs/src/components/Video/index.module.css new file mode 100644 index 000000000..209c5d64f --- /dev/null +++ b/subprojects/docs/src/components/Video/index.module.css @@ -0,0 +1,75 @@ +/* + * SPDX-FileCopyrightText: 2024 The Refinery Authors + * + * SPDX-License-Identifier: EPL-2.0 + */ + +:global(.videocolor) { + fill: var(--ifm-color-primary); +} + +[data-theme='dark'] :global(.videocolor) { + fill: var(--ifm-color-primary-darker); +} + +.video__container { + position: relative; + width: 100%; + height: auto; + aspect-ratio: 560/315; + box-shadow: var(--ifm-global-shadow-lw); + transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); +} + +.video__container:hover, +.video__container:focus-within { + box-shadow: var(--ifm-global-shadow-md); +} + +.video, +.video__button, +.video__image, +.video__svg, +.video__svg > svg { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.video__svg text { + font-family: var(--ifm-font-family-base); +} + +.video__button { + margin: 0; + padding: 0; + border: none; + cursor: pointer; + background-size: cover; +} + +.video__cover { + z-index: 1; +} + +:global(.videoplay) { + fill: rgb(255 255 255 / 40%); + transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); +} + +.video__container:hover :global(.videoplay), +.video__container:focus-within :global(.videoplay) { + fill: rgb(255 255 255 / 70%); +} + +:global(.videotitle) * { + fill: #303846; + transition: fill var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); +} + +.video__container:hover :global(.videotitle) *, +.video__container:focus-within :global(.videotitle) * { + fill: #21252b; +} diff --git a/subprojects/docs/src/components/Video/index.tsx b/subprojects/docs/src/components/Video/index.tsx new file mode 100644 index 000000000..bd36eaa42 --- /dev/null +++ b/subprojects/docs/src/components/Video/index.tsx @@ -0,0 +1,62 @@ +/* + * SPDX-FileCopyrightText: 2024 The Refinery Authors + * + * SPDX-License-Identifier: EPL-2.0 + */ + +import { useState } from 'react'; + +import coverBackground from './cover-background.png?sizes[]=1920&sizes[]=1288&sizes[]=1108&&sizes[]=644&sizes[]=322&placeholder=true&rl'; +import Cover from './cover.svg'; +import styles from './index.module.css'; + +export default function Video() { + const [started, setStarted] = useState(false); + return ( + <> +

Check out the intro video

+
+
+ {started ? ( +