From fdc3200ef4718eb98bd8a713f956222a9bf85ac9 Mon Sep 17 00:00:00 2001 From: Fabian Mastenbroek Date: Thu, 4 Aug 2022 16:40:44 +0200 Subject: docs: Add initial version of Docusaurus based docs This change updates the repository with a new Docusaurus-based documentation website. This allows us to create our documentation using Markdown, MDX and React. This will serve as the main entry point for users visiting https://opendc.org. The actual OpenDC application will be moved to https://app.opendc.org. --- site/src/components/HomepageFeatures/index.js | 71 ++++++++++ .../HomepageFeatures/screenshot-construction.png | Bin 0 -> 217107 bytes .../HomepageFeatures/screenshot-explore.png | Bin 0 -> 249975 bytes .../HomepageFeatures/screenshot-results.png | Bin 0 -> 234713 bytes .../components/HomepageFeatures/styles.module.css | 11 ++ site/src/components/HomepageIntro/index.js | 57 ++++++++ .../src/components/HomepageIntro/styles.module.css | 34 +++++ site/src/components/TeamMembers/index.js | 144 +++++++++++++++++++++ site/src/components/TeamMembers/styles.module.css | 38 ++++++ site/src/css/custom.css | 49 +++++++ site/src/pages/index.js | 44 +++++++ site/src/pages/index.module.css | 22 ++++ 12 files changed, 470 insertions(+) create mode 100644 site/src/components/HomepageFeatures/index.js create mode 100644 site/src/components/HomepageFeatures/screenshot-construction.png create mode 100644 site/src/components/HomepageFeatures/screenshot-explore.png create mode 100644 site/src/components/HomepageFeatures/screenshot-results.png create mode 100644 site/src/components/HomepageFeatures/styles.module.css create mode 100644 site/src/components/HomepageIntro/index.js create mode 100644 site/src/components/HomepageIntro/styles.module.css create mode 100644 site/src/components/TeamMembers/index.js create mode 100644 site/src/components/TeamMembers/styles.module.css create mode 100644 site/src/css/custom.css create mode 100644 site/src/pages/index.js create mode 100644 site/src/pages/index.module.css (limited to 'site/src') 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: () => 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: () => ( + Explore alternative scenarios with OpenDC + ), + description: ( + <> + Explore scenarios around emerging datacenter technologies such as cloud computing,{' '} + serverless computing, big data, and machine learning. + + ), + }, + { + title: 'Simplified Analysis', + Svg: () => ( + 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 ( +
+
+ +
+
+

{title}

+

{description}

+
+
+ ) +} + +export default function HomepageFeatures() { + return ( +
+
+
+ {FeatureList.map((props, idx) => ( + + ))} +
+
+
+ ) +} 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 Binary files /dev/null and b/site/src/components/HomepageFeatures/screenshot-construction.png differ 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 Binary files /dev/null and b/site/src/components/HomepageFeatures/screenshot-explore.png differ 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 Binary files /dev/null and b/site/src/components/HomepageFeatures/screenshot-results.png differ 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 ( +
+
+
+
+

The datacenter (DC) industry...

+
    +
  • Is worth over $200 bn, and growing
    • +
  • Has many hard-to-grasp concepts
    • +
  • Needs to become accessible to many
    • +
+
+
+ Schematic top-down view of a datacenter +
+
+

OpenDC provides...

+
    +
  • Online cloud DC modeling
    • +
  • Diverse and effective DC simulation
    • +
  • Rapid exploratory DC feedback
    • +
+
+
+
+
+ ) +} 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 ( +
+ + {`${name} + +
+
{name}
+ {title && {title}} +
+
+ ) +} + +export default function TeamMembers() { + return ( +
+
+ {leads.map(({ name, title, avatar, url }) => ( + + ))} + {members.map(({ name, avatar, url }) => ( + + ))} +
+
+ ) +} 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 ( +
+
+

{siteConfig.title}

+

{siteConfig.tagline}

+ +
+ + Getting Started with OpenDC - 10min ⏱️ + +
+
+
+ ) +} + +export default function Home() { + const { siteConfig } = useDocusaurusContext() + return ( + + +
+ + +
+ + ) +} 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; +} -- cgit v1.2.3