From 419fcdbfd0aed6892ee4fb1fdb0d50eea55dead8 Mon Sep 17 00:00:00 2001 From: Kristóf Marussy Date: Thu, 18 Apr 2024 18:40:31 +0200 Subject: refactor(docs): update video cover Also adds responsive-loader support for images. --- subprojects/docs/package.json | 2 + .../docs/src/components/Video/cover-background.png | Bin 0 -> 1979050 bytes .../components/Video/cover-background.png.license | 9 + subprojects/docs/src/components/Video/cover.svg | 1 + .../docs/src/components/Video/cover.svg.license | 3 + .../docs/src/components/Video/index.module.css | 75 ++++++ subprojects/docs/src/components/Video/index.tsx | 62 +++++ subprojects/docs/src/pages/index.tsx | 272 +++++++++------------ subprojects/docs/src/pages/video-cover.webp | Bin 147992 -> 0 bytes .../docs/src/pages/video-cover.webp.license | 3 - subprojects/docs/src/plugins/loadersPlugin.ts | 39 ++- subprojects/docs/src/types.d.ts | 33 ++- 12 files changed, 331 insertions(+), 168 deletions(-) create mode 100644 subprojects/docs/src/components/Video/cover-background.png create mode 100644 subprojects/docs/src/components/Video/cover-background.png.license create mode 100644 subprojects/docs/src/components/Video/cover.svg create mode 100644 subprojects/docs/src/components/Video/cover.svg.license create mode 100644 subprojects/docs/src/components/Video/index.module.css create mode 100644 subprojects/docs/src/components/Video/index.tsx delete mode 100644 subprojects/docs/src/pages/video-cover.webp delete mode 100644 subprojects/docs/src/pages/video-cover.webp.license (limited to 'subprojects') diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json index d928c5b1..853e3e46 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 00000000..11369ae3 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 00000000..50ad65f2 --- /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 00000000..b263c8b3 --- /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 00000000..b80566a0 --- /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 00000000..209c5d64 --- /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 00000000..bd36eaa4 --- /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 ? ( +