diff options
Diffstat (limited to 'subprojects')
-rw-r--r-- | subprojects/docs/package.json | 1 | ||||
-rw-r--r-- | subprojects/docs/src/css/custom.css | 28 | ||||
-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 | ||||
-rw-r--r-- | subprojects/docs/src/types.d.ts | 10 |
7 files changed, 177 insertions, 12 deletions
diff --git a/subprojects/docs/package.json b/subprojects/docs/package.json index 3191c771..b411fdaf 100644 --- a/subprojects/docs/package.json +++ b/subprojects/docs/package.json | |||
@@ -39,6 +39,7 @@ | |||
39 | "@fontsource-variable/jetbrains-mono": "^5.0.20", | 39 | "@fontsource-variable/jetbrains-mono": "^5.0.20", |
40 | "@fontsource-variable/open-sans": "^5.0.28", | 40 | "@fontsource-variable/open-sans": "^5.0.28", |
41 | "@fontsource/open-sans": "^5.0.27", | 41 | "@fontsource/open-sans": "^5.0.27", |
42 | "@material-icons/svg": "^1.0.33", | ||
42 | "@mdx-js/react": "^3.0.1", | 43 | "@mdx-js/react": "^3.0.1", |
43 | "@swc/core": "^1.4.12", | 44 | "@swc/core": "^1.4.12", |
44 | "clsx": "^2.1.0", | 45 | "clsx": "^2.1.0", |
diff --git a/subprojects/docs/src/css/custom.css b/subprojects/docs/src/css/custom.css index 82c0c972..ef02b0c2 100644 --- a/subprojects/docs/src/css/custom.css +++ b/subprojects/docs/src/css/custom.css | |||
@@ -35,6 +35,14 @@ | |||
35 | --ifm-color-primary-lightest: #04b3c7; | 35 | --ifm-color-primary-lightest: #04b3c7; |
36 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); | 36 | --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1); |
37 | --ifm-blockquote-color: var(--ifm-color-content-secondary); | 37 | --ifm-blockquote-color: var(--ifm-color-content-secondary); |
38 | /* elevation=4 shadow from Material UI. */ | ||
39 | --ifm-global-shadow-md: 0px 2px 4px -1px rgba(0,0,0,0.2), | ||
40 | 0px 4px 5px 0px rgba(0,0,0,0.14), | ||
41 | 0px 1px 10px 0px rgba(0,0,0,0.12) !important; | ||
42 | /* elevation=8 shadow from Material UI. */ | ||
43 | --ifm-global-shadow-tl: 0px 5px 5px -3px rgba(0,0,0,0.2), | ||
44 | 0px 8px 10px 1px rgba(0,0,0,0.14), | ||
45 | 0px 3px 14px 2px rgba(0,0,0,0.12) !important; | ||
38 | } | 46 | } |
39 | 47 | ||
40 | [data-theme='dark'] { | 48 | [data-theme='dark'] { |
@@ -59,14 +67,11 @@ code { | |||
59 | 67 | ||
60 | .navbar { | 68 | .navbar { |
61 | --ifm-navbar-background-color: var(--ifm-background-surface-color) !important; | 69 | --ifm-navbar-background-color: var(--ifm-background-surface-color) !important; |
62 | } | 70 | --ifm-navbar-shadow: 0 1px var(--refinery-outer-border-color) !important; |
63 | |||
64 | .navbar { | ||
65 | box-shadow: 0 1px var(--refinery-outer-border-color); | ||
66 | } | 71 | } |
67 | 72 | ||
68 | [data-theme='dark'] .navbar { | 73 | [data-theme='dark'] .navbar { |
69 | box-shadow: var(--ifm-global-shadow-lw); | 74 | --ifm-navbar-shadow: var(--ifm-global-shadow-lw) !important; |
70 | } | 75 | } |
71 | 76 | ||
72 | .button, .navbar__link, .footer__link-item { | 77 | .button, .navbar__link, .footer__link-item { |
@@ -86,14 +91,17 @@ code { | |||
86 | } | 91 | } |
87 | 92 | ||
88 | .navbar__link--try-now { | 93 | .navbar__link--try-now { |
89 | margin: 0 0.5rem 0 0.25rem; | ||
90 | padding: 0.25rem 1.25rem; | ||
91 | color: var(--ifm-font-color-base-inverse); | 94 | color: var(--ifm-font-color-base-inverse); |
92 | background: var(--ifm-color-primary); | 95 | background: var(--ifm-color-primary); |
93 | border-radius: 50em; | ||
94 | transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); | 96 | transition: background var(--ifm-button-transition-duration) var(--ifm-transition-timing-default); |
95 | } | 97 | } |
96 | 98 | ||
99 | .navbar__inner .navbar__link--try-now { | ||
100 | margin: 0 0.5rem 0 0.25rem; | ||
101 | padding: 0.25rem 1.25rem; | ||
102 | border-radius: 50em; | ||
103 | } | ||
104 | |||
97 | .navbar__link--try-now:hover { | 105 | .navbar__link--try-now:hover { |
98 | color: var(--ifm-font-color-base-inverse); | 106 | color: var(--ifm-font-color-base-inverse); |
99 | background: var(--ifm-color-primary-dark); | 107 | background: var(--ifm-color-primary-dark); |
@@ -104,6 +112,10 @@ code { | |||
104 | background: var(--ifm-color-primary-darker); | 112 | background: var(--ifm-color-primary-darker); |
105 | } | 113 | } |
106 | 114 | ||
115 | .menu { | ||
116 | --ifm-menu-color: var(--ifm-color-content-secondary) !important; | ||
117 | } | ||
118 | |||
107 | .footer { | 119 | .footer { |
108 | --ifm-footer-background-color: var(--ifm-background-surface-color) !important; | 120 | --ifm-footer-background-color: var(--ifm-background-surface-color) !important; |
109 | --ifm-footer-link-color: var(--ifm-color-content-secondary) !important; | 121 | --ifm-footer-link-color: var(--ifm-color-content-secondary) !important; |
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 | ||
diff --git a/subprojects/docs/src/types.d.ts b/subprojects/docs/src/types.d.ts new file mode 100644 index 00000000..0d1b2226 --- /dev/null +++ b/subprojects/docs/src/types.d.ts | |||
@@ -0,0 +1,10 @@ | |||
1 | /* | ||
2 | * SPDX-FileCopyrightText: 2024 The Refinery Authors | ||
3 | * | ||
4 | * SPDX-License-Identifier: EPL-2.0 | ||
5 | */ | ||
6 | |||
7 | declare module '*?url' { | ||
8 | const url: string; | ||
9 | export default url; | ||
10 | } | ||