merge: Add documentation using Docusaurus (#97)

This pull request implements the new OpenDC documentation website using Docusaurus 2.

## Implementation Notes :hammer_and_pick:

* Add initial Docusaurus website.
* Migrate existing docs to Docusaurus.
* Configure Prettier for Docusaurus.
* Add tutorials to OpenDC website (#28)
* Add deployment workflow via GitHub actions

## External Dependencies :four_leaf_clover:

* Docusaurus 2

Closes #28

12 files changed, 470 insertions, 0 deletions

diff --git a/site/src/components/HomepageFeatures/index.js b/site/src/components/HomepageFeatures/index.js
new file mode 100644
index 00000000..5beee68d
--- /dev/null
+++ b/site/src/components/HomepageFeatures/index.js
@@ -0,0 +1,71 @@
+import React from 'react'
+import clsx from 'clsx'
+import styles from './styles.module.css'
+
+const FeatureList = [
+    {
+        title: 'Easy to Use',
+        Svg: () => <img src={require('./screenshot-construction.png').default} alt="Building a datacenter in OpenDC" />,
+        description: (
+            <>
+                OpenDC is designed from the ground up to be easily installed and used via its online interface to get
+                your experiments running quickly.
+            </>
+        ),
+    },
+    {
+        title: 'Versatile Models',
+        Svg: () => (
+            <img src={require('./screenshot-explore.png').default} alt="Explore alternative scenarios with OpenDC" />
+        ),
+        description: (
+            <>
+                Explore scenarios around emerging datacenter technologies such as <em>cloud computing</em>,{' '}
+                <em>serverless computing</em>, <em>big data</em>, and <em>machine learning</em>.
+            </>
+        ),
+    },
+    {
+        title: 'Simplified Analysis',
+        Svg: () => (
+            <img
+                src={require('./screenshot-results.png').default}
+                alt="Automated plots and visual summaries generated by OpenDC"
+            />
+        ),
+        description: (
+            <>
+                Investigate datacenter performance using the automated plots and visual summaries provided
+                out-of-the-box by OpenDC.
+            </>
+        ),
+    },
+]
+
+function Feature({ Svg, title, description }) {
+    return (
+        <div className={clsx('col col--4')}>
+            <div className="text--center">
+                <Svg className={styles.featureSvg} role="img" />
+            </div>
+            <div className="text--center padding-horiz--md">
+                <h3>{title}</h3>
+                <p>{description}</p>
+            </div>
+        </div>
+    )
+}
+
+export default function HomepageFeatures() {
+    return (
+        <section className={styles.features}>
+            <div className="container">
+                <div className="row">
+                    {FeatureList.map((props, idx) => (
+                        <Feature key={idx} {...props} />
+                    ))}
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/site/src/components/HomepageFeatures/screenshot-construction.png b/site/src/components/HomepageFeatures/screenshot-construction.png
new file mode 100644
index 00000000..8e26526b
--- /dev/null
+++ b/site/src/components/HomepageFeatures/screenshot-construction.png
diff --git a/site/src/components/HomepageFeatures/screenshot-explore.png b/site/src/components/HomepageFeatures/screenshot-explore.png
new file mode 100644
index 00000000..307aaa1f
--- /dev/null
+++ b/site/src/components/HomepageFeatures/screenshot-explore.png
diff --git a/site/src/components/HomepageFeatures/screenshot-results.png b/site/src/components/HomepageFeatures/screenshot-results.png
new file mode 100644
index 00000000..f7e5858a
--- /dev/null
+++ b/site/src/components/HomepageFeatures/screenshot-results.png
diff --git a/site/src/components/HomepageFeatures/styles.module.css b/site/src/components/HomepageFeatures/styles.module.css
new file mode 100644
index 00000000..509d8c75
--- /dev/null
+++ b/site/src/components/HomepageFeatures/styles.module.css
@@ -0,0 +1,11 @@
+.features {
+    display: flex;
+    align-items: center;
+    padding: 2rem 0;
+    width: 100%;
+}
+
+.featureSvg {
+    height: 200px;
+    width: 200px;
+}
diff --git a/site/src/components/HomepageIntro/index.js b/site/src/components/HomepageIntro/index.js
new file mode 100644
index 00000000..33df7256
--- /dev/null
+++ b/site/src/components/HomepageIntro/index.js
@@ -0,0 +1,57 @@
+/*
+ * Copyright (c) 2022 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import clsx from 'clsx'
+import React from 'react'
+
+import styles from './styles.module.css'
+import DatacenterImage from '@site/static/img/datacenter-drawing.png'
+
+export default function HomepageInto() {
+    return (
+        <section id="intro" className={styles.intro}>
+            <div className="container padding-vert--lg">
+                <div className="row">
+                    <div className={clsx('col col--4', styles.textCol)}>
+                        <h3>The datacenter (DC) industry...</h3>
+                        <ul>
+                            <li>Is worth over $200 bn, and growing</li>
+                            <li>Has many hard-to-grasp concepts</li>
+                            <li>Needs to become accessible to many</li>
+                        </ul>
+                    </div>
+                    <div className="col col--3 text--center">
+                        <img src={DatacenterImage} alt="Schematic top-down view of a datacenter" />
+                    </div>
+                    <div className={clsx('col col--4', styles.textCol)}>
+                        <h3>OpenDC provides...</h3>
+                        <ul>
+                            <li>Online cloud DC modeling</li>
+                            <li>Diverse and effective DC simulation</li>
+                            <li>Rapid exploratory DC feedback</li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+        </section>
+    )
+}
diff --git a/site/src/components/HomepageIntro/styles.module.css b/site/src/components/HomepageIntro/styles.module.css
new file mode 100644
index 00000000..53c6f1bb
--- /dev/null
+++ b/site/src/components/HomepageIntro/styles.module.css
@@ -0,0 +1,34 @@
+/*
+ * Copyright (c) 2022 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.intro {
+    background: var(--ifm-color-emphasis-100);
+}
+
+.intro > :global(.container) > :global(.row) {
+    justify-content: center;
+}
+
+.textCol {
+    align-self: center;
+    max-width: 350px;
+}
diff --git a/site/src/components/TeamMembers/index.js b/site/src/components/TeamMembers/index.js
new file mode 100644
index 00000000..45c658e2
--- /dev/null
+++ b/site/src/components/TeamMembers/index.js
@@ -0,0 +1,144 @@
+/*
+ * Copyright (c) 2022 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+import React from 'react'
+import clsx from 'clsx'
+
+import styles from './styles.module.css'
+
+const leads = [
+    {
+        name: 'Prof.dr.ir. Alexandru Iosup',
+        title: 'Project Lead',
+        avatar: 'https://www.atlarge-research.com/images/people/aiosup_large.png',
+        url: 'https://www.atlarge-research.com/aiosup/',
+    },
+    {
+        name: 'Fabian Mastenbroek',
+        title: 'Technology Lead',
+        avatar: 'https://www.atlarge-research.com/images/people/fmastenbroek_large.png',
+        url: 'https://www.atlarge-research.com/fmastenbroek/',
+    },
+    {
+        name: 'Georgios Andreadis',
+        title: 'Former Technology Lead (2018-2020)',
+        avatar: 'https://www.atlarge-research.com/images/people/gandreadis_large.png',
+        url: 'https://www.atlarge-research.com/gandreadis/',
+    },
+    {
+        name: 'Vincent van Beek',
+        title: 'Former Technology Lead (2017-2018)',
+        avatar: 'https://www.atlarge-research.com/images/people/vvanbeek_large.png',
+        url: 'https://www.atlarge-research.com/vvanbeek/',
+    },
+]
+
+const members = [
+    {
+        name: 'Matthijs Bijman',
+        avatar: 'https://www.atlarge-research.com/images/people/mbijman_large.png',
+        url: 'https://www.atlarge-research.com/mbijman/',
+    },
+    {
+        name: 'Jaro Bosch',
+        avatar: 'https://www.atlarge-research.com/images/people/jbosch_large.png',
+        url: 'https://www.atlarge-research.com/jbosch/',
+    },
+    {
+        name: 'Jacob Burley',
+        avatar: 'https://www.atlarge-research.com/images/people/jburley_large.png',
+        url: 'https://www.atlarge-research.com/jburley/',
+    },
+    {
+        name: 'Erwin van Eyk',
+        avatar: 'https://www.atlarge-research.com/images/people/evaneyk_large.png',
+        url: 'https://www.atlarge-research.com/evaneyk/',
+    },
+    {
+        name: 'Hongyu He',
+        avatar: 'https://www.atlarge-research.com/images/people/hhe_large.png',
+        url: 'https://www.atlarge-research.com/hhe/',
+    },
+    {
+        name: 'Soufiane Jounaid',
+        avatar: 'https://www.atlarge-research.com/images/people/sjounaid_large.png',
+        url: 'https://www.atlarge-research.com/sjounaid/',
+    },
+    {
+        name: 'Wenchen Lai',
+        avatar: 'https://www.atlarge-research.com/images/people/wlai_large.png',
+        url: 'https://www.atlarge-research.com/wlai/',
+    },
+    {
+        name: 'Leon Overweel',
+        avatar: 'https://www.atlarge-research.com/images/people/loverweel_large.png',
+        url: 'https://www.atlarge-research.com/loverweel/',
+    },
+
+    {
+        name: 'Sacheendra Talluri',
+        avatar: 'https://www.atlarge-research.com/images/people/stalluri_large.png',
+        url: 'https://www.atlarge-research.com/stalluri/',
+    },
+    {
+        name: 'Laurens Versluis',
+        avatar: 'https://www.atlarge-research.com/images/people/lfdversluis_large.png',
+        url: 'https://www.atlarge-research.com/lfdversluis/',
+    },
+]
+
+function TeamMember({ className, name, title, avatar, url, size = 'lg' }) {
+    return (
+        <div className={clsx('avatar avatar--vertical', styles.member, className)}>
+            <a className={`avatar__photo-link avatar__photo avatar__photo--${size}`} href={url}>
+                <img alt={`${name} Profile`} src={avatar} />
+            </a>
+            <div className={clsx(styles.memberIntro, 'avatar__intro')}>
+                <div className="avatar__name">{name}</div>
+                {title && <small className="avatar__subtitle">{title}</small>}
+            </div>
+        </div>
+    )
+}
+
+export default function TeamMembers() {
+    return (
+        <div className="container">
+            <div className={clsx(styles.members, 'row')}>
+                {leads.map(({ name, title, avatar, url }) => (
+                    <TeamMember
+                        key={name}
+                        className="col col--3"
+                        name={name}
+                        title={title}
+                        avatar={avatar}
+                        url={url}
+                        size="xl"
+                    />
+                ))}
+                {members.map(({ name, avatar, url }) => (
+                    <TeamMember key={name} className="col col--2" name={name} avatar={avatar} url={url} />
+                ))}
+            </div>
+        </div>
+    )
+}
diff --git a/site/src/components/TeamMembers/styles.module.css b/site/src/components/TeamMembers/styles.module.css
new file mode 100644
index 00000000..34d9135d
--- /dev/null
+++ b/site/src/components/TeamMembers/styles.module.css
@@ -0,0 +1,38 @@
+/*
+ * Copyright (c) 2022 AtLarge Research
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all
+ * copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ * SOFTWARE.
+ */
+
+.members {
+    justify-content: center;
+}
+
+.member {
+    padding: 0.5em;
+}
+
+.memberIntro {
+    justify-content: normal;
+    margin-top: 0.5em;
+}
+
+.memberIntro > :global(.avatar__subtitle) {
+    max-width: 155px;
+}
diff --git a/site/src/css/custom.css b/site/src/css/custom.css
new file mode 100644
index 00000000..2484ff81
--- /dev/null
+++ b/site/src/css/custom.css
@@ -0,0 +1,49 @@
+:root {
+    --ifm-code-font-size: 95%;
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
+
+    counter-reset: figure-counter;
+}
+
+[data-theme='dark'] {
+    --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
+}
+
+.header-github-link:hover {
+    opacity: 0.6;
+}
+
+.header-github-link::before {
+    content: '';
+    width: 24px;
+    height: 24px;
+    display: flex;
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+[data-theme='dark'] .header-github-link::before {
+    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
+        no-repeat;
+}
+
+.header-app-link {
+    color: var(--ifm-button-color);
+}
+
+.header-app-link.navbar__item {
+    margin-top: 2px;
+}
+
+.header-app-link:hover {
+    color: var(--ifm-button-color);
+}
+
+.figure {
+    counter-increment: figure-counter;
+}
+
+.figure > figcaption:before {
+    content: 'Figure ' counter(figure-counter) ': ';
+    font-weight: bold;
+}
diff --git a/site/src/pages/index.js b/site/src/pages/index.js
new file mode 100644
index 00000000..9dd7457c
--- /dev/null
+++ b/site/src/pages/index.js
@@ -0,0 +1,44 @@
+import React from 'react'
+import clsx from 'clsx'
+import Link from '@docusaurus/Link'
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
+import Layout from '@theme/Layout'
+import HomepageInto from '@site/src/components/HomepageIntro'
+import HomepageFeatures from '@site/src/components/HomepageFeatures'
+
+import styles from './index.module.css'
+import Logo from '@site/static/img/logo.svg'
+
+function HomepageHeader() {
+    const { siteConfig } = useDocusaurusContext()
+    return (
+        <header className={clsx('hero hero--primary', styles.heroBanner)}>
+            <div className="container">
+                <h1 className="hero__title">{siteConfig.title}</h1>
+                <p className="hero__subtitle">{siteConfig.tagline}</p>
+                <Logo role="img" width="100" height="100" alt="OpenDC logo" className={styles.logo} />
+                <div className={styles.buttons}>
+                    <Link className="button button--secondary button--lg" to="/docs/intro">
+                        Getting Started with OpenDC - 10min ⏱️
+                    </Link>
+                </div>
+            </div>
+        </header>
+    )
+}
+
+export default function Home() {
+    const { siteConfig } = useDocusaurusContext()
+    return (
+        <Layout
+            title={`${siteConfig.title} cloud datacenter simulator`}
+            description="Collaborative Datacenter Simulation and Exploration for Everybody"
+        >
+            <HomepageHeader />
+            <main>
+                <HomepageInto />
+                <HomepageFeatures />
+            </main>
+        </Layout>
+    )
+}
diff --git a/site/src/pages/index.module.css b/site/src/pages/index.module.css
new file mode 100644
index 00000000..3838b4f5
--- /dev/null
+++ b/site/src/pages/index.module.css
@@ -0,0 +1,22 @@
+.heroBanner {
+    padding: 4rem 0;
+    text-align: center;
+    position: relative;
+    overflow: hidden;
+}
+
+@media screen and (max-width: 996px) {
+    .heroBanner {
+        padding: 2rem;
+    }
+}
+
+.logo {
+    margin: 0 0 var(--ifm-paragraph-margin-bottom);
+}
+
+.buttons {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}