Commit b23a8921 authored by fmerg's avatar fmerg

Add docusaurus frame for website development

parent 7db435fa
*.swp
node_modules
build
.docusaurus
.cache-loader
.DS_Store
npm-debug.log*
yarn-debug.log*
yarn-error.log*
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
# 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/`
---
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_!
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'),
},
},
],
],
};
{
"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"
]
}
}
module.exports = {
sidebar_1: {
'Framework':
[
// 'introduction',
// 'architecture',
// 'open_calls',
],
'Functional Architecture':
[
// 'motive',
// 'terminology',
// 'overview',
// 'infrastructure',
// 'network_architecture',
// 'high_level_transaction_flows',
// 'detailed_transaction_flows'
]
},
};
/**
* 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);
}
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;
/**
* 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;
}
This diff is collapsed.
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment