diff options
author | Kristóf Marussy <kristof@marussy.com> | 2024-04-09 20:17:15 +0200 |
---|---|---|
committer | Kristóf Marussy <kristof@marussy.com> | 2024-04-09 20:17:15 +0200 |
commit | 0dec88bb991bc8c6de402e04161e9d0ca24bccf5 (patch) | |
tree | 5cfeca80c9dcc4a0ca53fb1b902196c3d72ea28b /subprojects/docs/src/pages | |
parent | docs: add existing tutorial (diff) | |
download | refinery-0dec88bb991bc8c6de402e04161e9d0ca24bccf5.tar.gz refinery-0dec88bb991bc8c6de402e04161e9d0ca24bccf5.tar.zst refinery-0dec88bb991bc8c6de402e04161e9d0ca24bccf5.zip |
docs: add embedded video
Diffstat (limited to 'subprojects/docs/src/pages')
-rw-r--r-- | subprojects/docs/src/pages/index.module.css | 74 | ||||
-rw-r--r-- | subprojects/docs/src/pages/index.tsx | 73 | ||||
-rw-r--r-- | subprojects/docs/src/pages/video-cover.webp | bin | 0 -> 147992 bytes | |||
-rw-r--r-- | subprojects/docs/src/pages/video-cover.webp.license | 3 |
4 files changed, 146 insertions, 4 deletions
diff --git a/subprojects/docs/src/pages/index.module.css b/subprojects/docs/src/pages/index.module.css index a86689d1..533e8db1 100644 --- a/subprojects/docs/src/pages/index.module.css +++ b/subprojects/docs/src/pages/index.module.css | |||
@@ -7,5 +7,79 @@ | |||
7 | .buttons { | 7 | .buttons { |
8 | display: flex; | 8 | display: flex; |
9 | flex-direction: row; | 9 | flex-direction: row; |
10 | flex-wrap: wrap; | ||
10 | gap: 1rem; | 11 | gap: 1rem; |
11 | } | 12 | } |
13 | |||
14 | .section { | ||
15 | padding: 4rem 0; | ||
16 | } | ||
17 | |||
18 | @media (max-width: 576px) { | ||
19 | .hero, .section { | ||
20 | padding-top: 2rem; | ||
21 | padding-bottom: 2rem; | ||
22 | } | ||
23 | |||
24 | .button { | ||
25 | flex-grow: 1; | ||
26 | } | ||
27 | } | ||
28 | |||
29 | .section--video { | ||
30 | background: var(--ifm-background-surface-color); | ||
31 | } | ||
32 | |||
33 | .video__container { | ||
34 | position: relative; | ||
35 | width: 100%; | ||
36 | height: auto; | ||
37 | aspect-ratio: 560/315; | ||
38 | box-shadow: var(--ifm-global-shadow-lw); | ||
39 | transition: box-shadow var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); | ||
40 | } | ||
41 | |||
42 | .video__container:hover, | ||
43 | .video__container:focus-within { | ||
44 | box-shadow: var(--ifm-global-shadow-md); | ||
45 | } | ||
46 | |||
47 | .video, .video__button, .video__cover { | ||
48 | position: absolute; | ||
49 | top: 0; | ||
50 | left: 0; | ||
51 | width: 100%; | ||
52 | height: 100%; | ||
53 | } | ||
54 | |||
55 | .video__button { | ||
56 | margin: 0; | ||
57 | padding: 0; | ||
58 | border: none; | ||
59 | cursor: pointer; | ||
60 | } | ||
61 | |||
62 | .video__cover { | ||
63 | z-index: 1; | ||
64 | } | ||
65 | |||
66 | .video__play { | ||
67 | position: absolute; | ||
68 | top: 50%; | ||
69 | left: 50%; | ||
70 | transform: translate(-50%, -50%); | ||
71 | z-index: 1; | ||
72 | aspect-ratio: 1/1; | ||
73 | height: 16rem; | ||
74 | width: auto; | ||
75 | max-height: 50%; | ||
76 | background: var(--ifm-color-primary); | ||
77 | mask-image: url(@material-icons/svg/svg/play_circle/outline.svg); | ||
78 | mask-size: contain; | ||
79 | transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); | ||
80 | } | ||
81 | |||
82 | .video__button:hover .video__play, | ||
83 | .video__button:focus .video__play { | ||
84 | background: var(--ifm-color-primary-dark); | ||
85 | } | ||
diff --git a/subprojects/docs/src/pages/index.tsx b/subprojects/docs/src/pages/index.tsx index 632ee3d6..5190b88b 100644 --- a/subprojects/docs/src/pages/index.tsx +++ b/subprojects/docs/src/pages/index.tsx | |||
@@ -5,14 +5,63 @@ | |||
5 | */ | 5 | */ |
6 | 6 | ||
7 | import Link from '@docusaurus/Link'; | 7 | import Link from '@docusaurus/Link'; |
8 | // import PlayCircle from 'vg'; | ||
8 | import Layout from '@theme/Layout'; | 9 | import Layout from '@theme/Layout'; |
10 | import clsx from 'clsx'; | ||
11 | import { useState } from 'react'; | ||
9 | 12 | ||
10 | import styles from './index.module.css'; | 13 | import styles from './index.module.css'; |
14 | import videoCover from './video-cover.webp?url'; | ||
15 | |||
16 | function Video() { | ||
17 | const [started, setStarted] = useState(false); | ||
18 | return ( | ||
19 | <section className={clsx(styles['section'], styles['section--video'])}> | ||
20 | <div className="container"> | ||
21 | <div className={styles['video__container']}> | ||
22 | {started ? ( | ||
23 | <iframe | ||
24 | width="560" | ||
25 | height="315" | ||
26 | src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1" | ||
27 | title="YouTube video player" | ||
28 | frameBorder="0" | ||
29 | allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" | ||
30 | referrerPolicy="strict-origin-when-cross-origin" | ||
31 | allowFullScreen | ||
32 | className={styles['video']} | ||
33 | /> | ||
34 | ) : ( | ||
35 | <button | ||
36 | type="button" | ||
37 | title="Play video (requires acceping cookies from YouTube)" | ||
38 | onClick={() => setStarted(true)} | ||
39 | className={styles['video__button']} | ||
40 | > | ||
41 | <h2>Modeling with Graphs</h2> | ||
42 | <p> | ||
43 | Graph based models are widely used in software engineering for | ||
44 | systems models, the analysis of data structures, databases, and | ||
45 | AI test environments. | ||
46 | </p> | ||
47 | <p> | ||
48 | Testing, benchmarking or design-space exploration scnearios rely | ||
49 | on the automated generation of consistent models! | ||
50 | </p> | ||
51 | <img src={videoCover} alt="" className={styles['video__cover']} /> | ||
52 | <div className={styles['video__play']} /> | ||
53 | </button> | ||
54 | )} | ||
55 | </div> | ||
56 | </div> | ||
57 | </section> | ||
58 | ); | ||
59 | } | ||
11 | 60 | ||
12 | export default function Home() { | 61 | export default function Home() { |
13 | return ( | 62 | return ( |
14 | <Layout> | 63 | <Layout> |
15 | <header className="hero hero--dark"> | 64 | <header className={clsx('hero', 'hero--dark', styles['hero'])}> |
16 | <div className="container"> | 65 | <div className="container"> |
17 | <h1 className="hero__title">Refinery</h1> | 66 | <h1 className="hero__title">Refinery</h1> |
18 | <p className="hero__subtitle"> | 67 | <p className="hero__subtitle"> |
@@ -21,25 +70,41 @@ export default function Home() { | |||
21 | <div className={styles['buttons']}> | 70 | <div className={styles['buttons']}> |
22 | <Link | 71 | <Link |
23 | href="https://refinery.services/" | 72 | href="https://refinery.services/" |
24 | className="button button--lg button--primary" | 73 | className={clsx( |
74 | 'button', | ||
75 | 'button--lg', | ||
76 | 'button--primary', | ||
77 | styles['button'], | ||
78 | )} | ||
25 | > | 79 | > |
26 | Try online | 80 | Try online |
27 | </Link> | 81 | </Link> |
28 | <Link | 82 | <Link |
29 | to="/docs/docker" | 83 | to="/docs/docker" |
30 | className="button button--lg button--secondary" | 84 | className={clsx( |
85 | 'button', | ||
86 | 'button--lg', | ||
87 | 'button--secondary', | ||
88 | styles['button'], | ||
89 | )} | ||
31 | > | 90 | > |
32 | Try in Docker | 91 | Try in Docker |
33 | </Link> | 92 | </Link> |
34 | <Link | 93 | <Link |
35 | to="/docs/tutorials/file-system" | 94 | to="/docs/tutorials/file-system" |
36 | className="button button--lg button--secondary" | 95 | className={clsx( |
96 | 'button', | ||
97 | 'button--lg', | ||
98 | 'button--secondary', | ||
99 | styles['button'], | ||
100 | )} | ||
37 | > | 101 | > |
38 | Tutorial | 102 | Tutorial |
39 | </Link> | 103 | </Link> |
40 | </div> | 104 | </div> |
41 | </div> | 105 | </div> |
42 | </header> | 106 | </header> |
107 | <Video /> | ||
43 | </Layout> | 108 | </Layout> |
44 | ); | 109 | ); |
45 | } | 110 | } |
diff --git a/subprojects/docs/src/pages/video-cover.webp b/subprojects/docs/src/pages/video-cover.webp new file mode 100644 index 00000000..50ebe1ab --- /dev/null +++ b/subprojects/docs/src/pages/video-cover.webp | |||
Binary files differ | |||
diff --git a/subprojects/docs/src/pages/video-cover.webp.license b/subprojects/docs/src/pages/video-cover.webp.license new file mode 100644 index 00000000..ff75bc7c --- /dev/null +++ b/subprojects/docs/src/pages/video-cover.webp.license | |||
@@ -0,0 +1,3 @@ | |||
1 | SPDX-FileCopyrightText: 2023 The Refinery Authors <https://refinery.tools/> | ||
2 | |||
3 | SPDX-License-Identifier: EPL-2.0 | ||