1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
|
/*
* SPDX-FileCopyrightText: 2024 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import Link from '@docusaurus/Link';
// import PlayCircle from 'vg';
import Layout from '@theme/Layout';
import clsx from 'clsx';
import { useState } from 'react';
import styles from './index.module.css';
import videoCover from './video-cover.webp?url';
function Hero() {
return (
<header className={clsx('hero', 'hero--dark', styles['hero'])}>
<div className="container">
<h1 className="hero__title">Refinery</h1>
<p className="hero__subtitle">
An efficient graph solver for generating well-formed models
</p>
<div className={styles['buttons']}>
<Link
href="https://refinery.services/"
className={clsx(
'button',
'button--lg',
'button--primary',
styles['button'],
)}
>
Try online
</Link>
<Link
to="/learn/docker"
className={clsx(
'button',
'button--lg',
'button--secondary',
styles['button'],
)}
>
Try in Docker
</Link>
<Link
to="/learn/tutorials/file-system"
className={clsx(
'button',
'button--lg',
'button--secondary',
styles['button'],
)}
>
Tutorial
</Link>
</div>
</div>
</header>
);
}
function Video() {
const [started, setStarted] = useState(false);
return (
<section className={clsx(styles['section'], styles['section--video'])}>
<div className="container">
<div className={styles['video__container']}>
{started ? (
<iframe
width="560"
height="315"
src="https://www.youtube-nocookie.com/embed/Qy_3udNsWsM?autoplay=1"
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerPolicy="strict-origin-when-cross-origin"
allowFullScreen
className={styles['video']}
/>
) : (
<button
type="button"
title="Play video (requires acceping cookies from YouTube)"
onClick={() => setStarted(true)}
className={styles['video__button']}
>
<h2>Modeling with Graphs</h2>
<p>
Graph based models are widely used in software engineering for
systems models, the analysis of data structures, databases, and
AI test environments.
</p>
<p>
Testing, benchmarking or design-space exploration scnearios rely
on the automated generation of consistent models!
</p>
<img src={videoCover} alt="" className={styles['video__cover']} />
<div className={styles['video__play']} />
</button>
)}
</div>
</div>
</section>
);
}
export default function Home() {
return (
<Layout>
<Hero />
<Video />
</Layout>
);
}
|
