Add docusaurus frame for website development

.gitignore

+*.swp
+node_modules
+build
+
+.docusaurus
+.cache-loader
+
+.DS_Store
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+

.gitlab-ci.yml

+image: node:latest
+
+cache:
+  untracked: true
+  paths:
+    - node_modules/
+
+before_script:
+  - yarn
+  - ls -rtlh
+
+pages:
+  script:
+    - STAGING=true  yarn build
+    - rm -rf public
+    - mv build public
+  artifacts:
+    paths:
+      - public
+  only:
+    - master

README.md

 # eSSIF-Lab Framework
 
-This repo contains the documents that describe the vision, architecture and other topics that are relevant to the eSSIF-Lab Framework.
\ No newline at end of file
+This repo contains the documents that describe the vision, architecture and other
+topics that are relevant to the eSSIF-Lab Framework.
+
+## Writing docs
+
+This website is built using [Docusaurus 2](https://v2.docusaurus.io/).
+
+Documentation content must appear in `.md` files inside the `docs` folder.
+Each file defines the following attributes at its very beginning:
+
+- `id`, by which the file is referred to across the project
+- `title`, appearing at the top of the file's display
+- `sidebar_label`, the file's name appearing in the sidebar
+
+The `sidebars.js` file contains the basic mechanism for distributing content
+among sections and is self-explanatory (compare with the sidebar appearing [here](https://essif-lab.pages.grnet.gr/essif-lab/docs/introduction)). Subsections within the `.md` file
+(that is, tagged with `##`) will appear at the right part of the page
+(see for example [here](https://essif-lab.pages.grnet.gr/essif-lab/docs/infrastructure)).
+
+Images must be put inside `static` and referred to with their _absolute_ urls.
+
+
+### Installation
+
+You must be able to use `yarn` in order to run the local development server. If
+you face an error similar to `ERROR: There are no scenarios; must have at least one`,
+refer [here](https://github.com/yarnpkg/yarn/issues/2821) for a correct
+re-installation of `yarn`.
+
+### Local Development
+
+```
+$ yarn
+$ yarn start
+```
+
+The first command is for linking dependencies. The seconds starts a local development
+server and open up a browser window. Most changes are reflected live without having
+to restart the server.
+
+### Build
+
+```
+$ yarn build
+```
+
+This command generates static content into the `build` directory and can be served using any static contents hosting service.
+
+### Deployment
+
+Just push your changes to the `master` branch and they will be automatically
+deployed at `https://essif-lab.pages.grnet.gr/framework/`

docs/mdx.md

+---
+id: mdx
+title: Powered by MDX
+---
+
+You can write JSX and use React components within your Markdown thanks to [MDX](https://mdxjs.com/).
+
+export const Highlight = ({children, color}) => ( <span style={{
+      backgroundColor: color,
+      borderRadius: '2px',
+      color: '#fff',
+      padding: '0.2rem',
+    }}> {children} </span> );
+
+<Highlight color="#25c2a0">Docusaurus green</Highlight> and <Highlight color="#1877F2">Facebook blue</Highlight> are my favorite colors.
+
+I can write **Markdown** alongside my _JSX_!

docusaurus.config.js

+module.exports = {
+  title: 'ESSIF-Lab',
+  tagline: 'ESSIF-Lab Framework',
+  url: 'https://essif-lab.pages.grnet.gr/essif-lab',
+  baseUrl: process.env.STAGING && process.env.STAGING === 'true' ? '/essif-lab/' : '/',
+  favicon: 'imgages/favicon.ico',
+  organizationName: 'grnet',
+  projectName: 'essif-lab',
+  themeConfig: {
+    navbar: {
+      // title: 'ESSIF-Lab',
+      logo: {
+        src: 'images/eSSIF-Lab logo.png',
+      },
+      links: [
+        {to: 'docs/essif-lab-vision-and-purpose', label: 'Vision', position: 'left'},
+        {to: 'docs/introduction', label: 'Quick intro', position: 'left'},
+        {
+          href: 'https://gitlab.grnet.gr/essif-lab/essif-lab',
+          label: 'Gitlab',
+          position: 'right',
+        },
+      ],
+    },
+    footer: {
+      style: 'dark',
+      links: [
+        // {
+        //   title: 'Framework',
+        //   items: [
+        //     {
+        //       label: 'Introduction',
+        //       to: 'docs/introduction'
+        //     },
+        //     {
+        //       label: 'Architecture',
+        //       to: 'docs/architecture'
+        //     },
+        //     {
+        //       label: 'Open calls',
+        //       to: 'docs/open_calls'
+        //     },
+        //   ],
+        // },
+        {
+          title: 'Social',
+          items: [
+            {
+              label: 'Gitlab',
+              href: 'https://gitlab.grnet.gr/essif-lab/essif-lab',
+            },
+          ],
+        },
+      ],
+      copyright: `Copyright © ${new Date().getFullYear()} ESSIF-Lab, Inc. Built with Docusaurus.`,
+    },
+  },
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          sidebarPath: require.resolve('./sidebars.js'),
+          editUrl:
+            'https://github.com/facebook/docusaurus/edit/master/website/',
+        },
+        theme: {
+          customCss: require.resolve('./src/css/custom.css'),
+        },
+      },
+    ],
+  ],
+};

package.json

+{
+  "name": "essif-lab",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "docusaurus start",
+    "build": "docusaurus build",
+    "swizzle": "docusaurus swizzle",
+    "deploy": "docusaurus deploy"
+  },
+  "dependencies": {
+    "@docusaurus/core": "^2.0.0-alpha.43",
+    "@docusaurus/preset-classic": "^2.0.0-alpha.43",
+    "classnames": "^2.2.6",
+    "react": "^16.8.4",
+    "react-dom": "^16.8.4"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

sidebars.js

+module.exports = {
+  sidebar_1: {
+    'Framework':
+    [
+        // 'introduction',
+        // 'architecture',
+        // 'open_calls',
+    ],
+    'Functional Architecture':
+    [
+        // 'motive',
+        // 'terminology',
+        // 'overview',
+        // 'infrastructure',
+        // 'network_architecture',
+        // 'high_level_transaction_flows',
+        // 'detailed_transaction_flows'
+    ]
+  },
+};

src/css/custom.css

+/**
+ * Any CSS included here will be global. The classic template
+ * bundles Infima by default. Infima is a CSS framework designed to
+ * work well for content-centric websites.
+ */
+
+/* You can override the default Infima variables here. */
+:root {
+  --ifm-color-primary: #ac3c7a;
+  --ifm-color-primary-dark: #9b366e;
+  --ifm-color-primary-darker: #923368;
+  --ifm-color-primary-darkest: #782a55;
+  --ifm-color-primary-light: #bd4286;
+  --ifm-color-primary-lighter: #c04b8c;
+  --ifm-color-primary-lightest: #c9649c;
+  --ifm-code-font-size: 95%;
+}
+html[data-theme='dark'] {
+  background: var(--ifm-color-emphasis-100);
+}
+
+.docusaurus-highlight-code-line {
+  background-color: rgb(72, 77, 91);
+  display: block;
+  margin: 0 calc(-1 * var(--ifm-pre-padding));
+  padding: 0 var(--ifm-pre-padding);
+}
+
+.hero
+  .button.button--secondary.button--outline:not(.button--active):not(:hover) {
+  color: var(--ifm-color-secondary);
+}

src/pages/index.js

+import React from 'react';
+import classnames from 'classnames';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import useBaseUrl from '@docusaurus/useBaseUrl';
+import styles from './styles.module.css';
+
+function CustomFeature() {
+  const flagUrl = useBaseUrl('images/EU-flag.jpg');
+  const logoUrl = useBaseUrl('images/eSSIF-Lab logo.png');
+  const title = 'Horizon 2020';
+  const description =
+    ' Funded by the European Commission, as part of the Horizon 2020 Research and Innovation Programme.';
+
+  return (
+    <div
+      className={classnames(
+        'col col--6  col--offset-3',
+        styles.feature,
+        styles.centered,
+      )}>
+      <div className={styles.featuredImages}>
+        <img src={flagUrl} alt="Horizon 2020" />
+        <img src={logoUrl} alt="eSSIF Lab logo" />
+      </div>
+      <h3>{title}</h3>
+      <p>{description}</p>
+    </div>
+  );
+}
+
+function Home() {
+  const context = useDocusaurusContext();
+  const {siteConfig = {}} = context;
+  return (
+    <Layout
+      title={`${siteConfig.title}`}
+      description="Description will go into a meta tag in <head />">
+      <header className={classnames('hero hero--primary', styles.heroBanner)}>
+        <div className="container">
+          <h1 className="hero__title">{siteConfig.title}</h1>
+          <p className="hero__subtitle">{siteConfig.tagline}</p>
+          <div className={styles.buttons}>
+            <Link
+              className={classnames(
+                'button button--outline button--secondary button--lg',
+                styles.getStarted,
+              )}
+              to={useBaseUrl('docs/introduction')}>
+              Get Started
+            </Link>
+          </div>
+        </div>
+      </header>
+      <main>
+        <section className={styles.features}>
+          <div className="container">
+            <div className="row">
+              <CustomFeature />
+            </div>
+          </div>
+        </section>
+      </main>
+    </Layout>
+  );
+}
+
+export default Home;

src/pages/styles.module.css

+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+.heroBanner {
+  padding: 4rem 0;
+  text-align: center;
+  position: relative;
+  overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+  .heroBanner {
+    padding: 2rem;
+  }
+}
+
+.buttons {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureImage {
+  height: 200px;
+  width: 200px;
+}
+
+.featuredImages img {
+  height: 60px;
+  display: inline-block;
+  margin: 24px 5px 12px;
+}
+
+.centered {
+  text-align: center;
+}