Skip to content
Snippets Groups Projects
Commit 5519e0b8 authored by Ilya Zhukov's avatar Ilya Zhukov
Browse files

add files

parents
No related branches found
No related tags found
No related merge requests found
Showing
with 876 additions and 0 deletions
# Dependencies
/node_modules
# Production
/build
# Generated files
.docusaurus
.cache-loader
# Misc
.DS_Store
.env.local
.env.development.local
.env.test.local
.env.production.local
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Website
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
### Installation
```
$ yarn
```
### Local Development
```
$ yarn start
```
This command starts a local development server and opens 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
Using SSH:
```
$ USE_SSH=true yarn deploy
```
Not using SSH:
```
$ GIT_USER=<Your GitHub username> yarn deploy
```
If you are using GitHub pages for hosting, this command is a convenient way to build the website and push to the `gh-pages` branch.
module.exports = {
presets: [require.resolve('@docusaurus/core/lib/babel/preset')],
};
---
slug: first-blog-post
title: First Blog Post
authors:
name: Gao Wei
title: Docusaurus Core Team
url: https://github.com/wgao19
image_url: https://github.com/wgao19.png
tags: [hola, docusaurus]
---
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
---
slug: long-blog-post
title: Long Blog Post
authors: endi
tags: [hello, docusaurus]
---
This is the summary of a very long blog post,
Use a `<!--` `truncate` `-->` comment to limit blog post size in the list view.
<!--truncate-->
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque elementum dignissim ultricies. Fusce rhoncus ipsum tempor eros aliquam consequat. Lorem ipsum dolor sit amet
---
slug: mdx-blog-post
title: MDX Blog Post
authors: [slorber]
tags: [docusaurus]
---
Blog posts support [Docusaurus Markdown features](https://docusaurus.io/docs/markdown-features), such as [MDX](https://mdxjs.com/).
:::tip
Use the power of React to create interactive blog posts.
```js
<button onClick={() => alert('button clicked!')}>Click me!</button>
```
<button onClick={() => alert('button clicked!')}>Click me!</button>
:::
blog/2021-08-26-welcome/docusaurus-plushie-banner.jpeg

93.9 KiB

---
slug: welcome
title: Welcome
authors: [slorber, yangshun]
tags: [facebook, hello, docusaurus]
---
[Docusaurus blogging features](https://docusaurus.io/docs/blog) are powered by the [blog plugin](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-content-blog).
Simply add Markdown files (or folders) to the `blog` directory.
Regular blog authors can be added to `authors.yml`.
The blog post date can be extracted from filenames, such as:
- `2019-05-30-welcome.md`
- `2019-05-30-welcome/index.md`
A blog post folder can be convenient to co-locate blog post images:
![Docusaurus Plushie](./docusaurus-plushie-banner.jpeg)
The blog supports tags as well!
**And if you don't want a blog**: just delete this directory, and use `blog: false` in your Docusaurus config.
endi:
name: Endilie Yacop Sucipto
title: Maintainer of Docusaurus
url: https://github.com/endiliey
image_url: https://github.com/endiliey.png
yangshun:
name: Yangshun Tay
title: Front End Engineer @ Facebook
url: https://github.com/yangshun
image_url: https://github.com/yangshun.png
slorber:
name: Sébastien Lorber
title: Docusaurus maintainer
url: https://sebastienlorber.com
image_url: https://github.com/slorber.png
---
sidebar_position: 2
---
# Baseline measurement
In this part we are going to build and run specific benchmark to identify how long does it run without and specific tools (also called as a reference/baseline run). A reference run provides a valuable point of comparison and context for performance analysis, enabling more informed decision-making and effective optimization efforts.We
## Initial setup
First of all let's login into JUSUF using ssh
```bash
$ ssh -X userid@jusuf.fz-juelich.de
```
The **-X** option is necessary to enable X11 forwarding. X11 forwarding is a SSH protocol that enables users to run graphical applications on a remote server and interact with them using their local display and I/O devices.
Now we need to create our own directory for the exercises
```bash
$ mkdir -p /p/project/training2410/$USER/PerfHandsOn
```
The **-p** suppresses error message if directory already exists
Then we need to load required software, e.g. compiler, MPI, text editor
```bash
$ module load GCC ParaStationMPI nano
```
## Build benchmark
Copy tutorial sources to our working directory
```bash
$ cd /p/project/training2410/$USER/PerfHandsOn
$ tar zxvf /p/project/training2410/zhukov1/tarball/NPB3.3-MZ-MPI.tar.gz .
$ cd /p/project/training2410/$USER/PerfHandsOn/NPB3.3-MZ-MPI
```
For this tutorial we are going to use the NAS Parallel Benchmark suite (MPI+OpenMP version). It is available [here](http://www.nas.nasa.gov/Software/NPB), and includes three benchmarks written in Fortran77. You can configurable benchmarrk for various sizes and classes.
:::info
NPB solves discretized versions of the unsteady, compressible Navier- Stokes equations in three spatial dimensions. Each operates on a structured discretization mesh that is a logical cube. In realistic applications, however, a single such mesh is often not sufficient to de- scribe a complex domain, and multiple meshes or zones are used to cover it.
Multi-zone versions of NPB (NPB-MZ) are designed to exploit multiple levels of parallelism in applications and to test the effectiveness of multi-level and hybrid parallelization paradigms and tools. There are three types of benchmark problems derived from single-zone pseudo applications of NPB:
* **Block Tri-diagonal (BT)** - uneven-size zones within a problem class, increased number of zones as problem class grows
* **Scalar Penta-diagonal (SP)** - even-size zones within a problem class, increased number of zones as problem class grows
* **Lower-Upper Symmetric Gauss-Seidel (LU)** - even-size zones within a problem class, a fixed number of zones for all problem classes
Benchmark Classes
* Class **S**: small for quick test purposes
* Class **W**: workstation size (a 90's workstation; now likely too small)
* Classes **A**, **B**, **C**: standard test problems; ~4X size increase going from one class to the next
* Classes **D**, **E**, **F**: large test problems; ~16X size increase from each of the previous classes
MPI is used for communication across zones whereas OpenMP threads for computation inside zones. More technical details are provided in the [paper.](https://www.nas.nasa.gov/assets/nas/pdf/techreports/2003/nas-03-010.pdf)
:::
Move into the NPB3.3-MZ-MPI root directory and chechh what is inside
```bash
$ ls
bin/ common/ jobscript/ Makefile README.install SP-MZ/
BT-MZ/ config/ LU-MZ/ README README.tutorial sys/
```
Subdirectories ```BT-MZ```, ```LU-MZ``` and ```SP-MZ``` contain source code for each benchmark, ```config``` and ```common``` include additional configuration and common code. The provided distribution has already been configured for the hands-on, such that it is ready to be build.
During this hands-on we will focus on ```BT-MZ``` exercise. It performs 200 time-steps on a regular 3-dimensional grid. It uses combination of MPI and OpenMP.
Type ```make``` for instructions
```bash
$ make
===========================================
= NAS PARALLEL BENCHMARKS 3.3 =
= MPI+OpenMP Multi-Zone Versions =
= F77 =
===========================================
To make a NAS multi-zone benchmark type
make <benchmark-name> CLASS=<class> NPROCS=<nprocs>
where <benchmark-name> is "bt-mz", "lu-mz", or "sp-mz"
<class> is "S", "W", "A" through "F"
<nprocs> is number of processes
To make a set of benchmarks, create the file config/suite.def
according to the instructions in config/suite.def.template and type
make suite
***************************************************************
* Custom build configuration is specified in config/make.def *
* Suggested tutorial exercise configuration for LiveDVD: *
* make bt-mz CLASS=C NPROCS=8 *
***************************************************************
```
To build application specify:
* The benchmark configuration benchmark name (bt-mz, lu-mz, sp-mz): bt-mz
* The number of MPI processes: NPROCS=8
* The benchmark class (S, W, A, B, C, D, E): CLASS=C
* Or use ```make suite```
```bash
$ make bt-mz CLASS=C NPROCS=8
===========================================
= NAS PARALLEL BENCHMARKS 3.3 =
= MPI+OpenMP Multi-Zone Versions =
= F77 =
===========================================
cd BT-MZ; make CLASS=C NPROCS=8 VERSION=
make[1]: Entering directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/BT-MZ'
make[2]: Entering directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/sys'
cc -o setparams setparams.c -lm
make[2]: Leaving directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/sys'
../sys/setparams bt-mz 8 C
make[2]: Entering directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/BT-MZ'
mpif77 -c -O3 -fopenmp bt.f
mpif77 -c -O3 -fopenmp initialize.f
mpif77 -c -O3 -fopenmp exact_solution.f
mpif77 -c -O3 -fopenmp exact_rhs.f
mpif77 -c -O3 -fopenmp set_constants.f
mpif77 -c -O3 -fopenmp adi.f
mpif77 -c -O3 -fopenmp rhs.f
mpif77 -c -O3 -fopenmp zone_setup.f
mpif77 -c -O3 -fopenmp x_solve.f
mpif77 -c -O3 -fopenmp y_solve.f
mpif77 -c -O3 -fopenmp exch_qbc.f
mpif77 -c -O3 -fopenmp solve_subs.f
mpif77 -c -O3 -fopenmp z_solve.f
mpif77 -c -O3 -fopenmp add.f
mpif77 -c -O3 -fopenmp error.f
mpif77 -c -O3 -fopenmp verify.f
mpif77 -c -O3 -fopenmp mpi_setup.f
cd ../common; mpif77 -c -O3 -fopenmp print_results.f
cd ../common; mpif77 -c -O3 -fopenmp timers.f
mpif77 -O3 -fopenmp -o ../bin/bt-mz_C.8 bt.o initialize.o exact_solution.o exact_rhs.o set_constants.o adi.o rhs.o zone_setup.o x_solve.o y_solve.o exch_qbc.o solve_subs.o z_solve.o add.o error.o verify.o mpi_setup.o ../common/print_results.o ../common/timers.o
make[2]: Leaving directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/BT-MZ'
Built executable ../bin/bt-mz_C.8
make[1]: Leaving directory '/p/project/training2410/zhukov1/PerfHandsOn/NPB3.3-MZ-MPI/BT-MZ'
```
Executable you can find in the ```bin``` directory.
## Run benchmark
Lets go to the ```bin``` directory, copy prepared batch script and examine what it does
```
$ cd bin
$ cp ../jobscript/bridges2/reference.sbatch.C.8 .
$ nano reference.sbatch.C.8
```
Here is what you should see in your batch script
```bash
#!/bin/bash
#SBATCH --job-name=mzmpibt # Job name
#SBATCH -A training2410. # Account we are going to use
#SBATCH --output=mzmpibt.o%j # Name of stdout output file(%j expands to jobId)
#SBATCH --error=mzmpibt.e%j # Name of stderr output file(%j expands to jobId)
#SBATCH --partition=batch # Use batch partition
#SBATCH --nodes=2 # Total number of nodes requested (24 cores/node)
#SBATCH --ntasks=8 # Total number of MPI tasks requested
#SBATCH --ntasks-per-node=4 # Number of MPI task per node
#SBATCH --cpus-per-task=6 # Number of OpenMP threads per MPI task
#SBATCH --time=00:05:00 # Max. wall-clock time (hh:mm:ss) - 5 minutes
# Benchmark configuration (disable load balancing with threads)
export NPB_MZ_BLOAD=0
PROCS=8
CLASS=C
# Run the application
export SRUN_CPUS_PER_TASK=${SLURM_CPUS_PER_TASK}
srun ./bt-mz_$CLASS.$PROCS
```
To exit text editor you can use ```Ctrl+X```
On JUSUF we are going to use:
* 2 standard compute nodes with 2 x AMD EPYC 7742 64-Core Processor
* 64 cores per CPU, 128 cores per node
* 256GB RAM each
Now we are ready to submit our batch script
```
sbatch reference.sbatch.C.8
```
:::info
To submit the job use ```squeue --me```
To check status of all your jobs use ```squeue --me```
To cancel specific job use ```scancel <jobid you want to cancel>```
:::
Once job has finished you will see two files in your directory , one with standard output ```mzmpibt.o<jobid>``` and one with standadt error output ```mzmpibt.e<jobid>```. The former one should include all output provided by your application and the latter one only system specific output. Let's examine standard output file
```
NAS Parallel Benchmarks (NPB3.3-MZ-MPI) - BT-MZ MPI+OpenMP Benchmark
Number of zones: 16 x 16
Iterations: 200 dt: 0.000100
Number of active processes: 8
Use the default load factors with threads
Total number of threads: 48 ( 6.0 threads/process)
Calculated speedup = 47.97
Time step 1
Time step 20
Time step 40
Time step 60
Time step 80
Time step 100
Time step 120
Time step 140
Time step 160
Time step 180
Time step 200
Verification being performed for class C
accuracy setting for epsilon = 0.1000000000000E-07
Comparison of RMS-norms of residual
1 0.3457703287806E+07 0.3457703287806E+07 0.1092202750127E-12
2 0.3213621375929E+06 0.3213621375929E+06 0.1320422658492E-12
3 0.7002579656870E+06 0.7002579656870E+06 0.1496217033982E-13
4 0.4517459627471E+06 0.4517459627471E+06 0.2254882500313E-13
5 0.2818715870791E+07 0.2818715870791E+07 0.1486830094937E-14
Comparison of RMS-norms of solution error
1 0.2059106993570E+06 0.2059106993570E+06 0.1539214400532E-12
2 0.1680761129461E+05 0.1680761129461E+05 0.2132015705369E-12
3 0.4080731640795E+05 0.4080731640795E+05 0.3084595553087E-13
4 0.2836541076778E+05 0.2836541076778E+05 0.1026032398931E-12
5 0.2136807610771E+06 0.2136807610771E+06 0.2334508972703E-12
Verification Successful
BT-MZ Benchmark Completed.
Class = C
Size = 480x 320x 28
Iterations = 200
Time in seconds = 27.19
Total processes = 8
Total threads = 48
Mop/s total = 89244.25
Mop/s/thread = 1859.26
Operation type = floating point
Verification = SUCCESSFUL
Version = 3.3.1
Compile date = 19 Apr 2024
```
The most important metric in the output is "Time in seconds" which indicates how much time application spent executing 200 inerations (pre and post. processing are excluded form time measurements) and "Validation" it indicates if the computation completed successfully (e.g. converged). Please note time value you recieved, we are going to refer to its value in the next section.
:::info
For time measurements you can use ```time``` utility which is used to measure the execution time of a program or command. It provides information about how long a particular process took to execute, including user time, system time, and real time, i.e.
* **User time** is the time spent executing user-space instructions.
* **System time** is the time spent executing system calls.
* **Real time** is the actual time elapsed from start to finish, including all waiting and execution time.
It's a handy tool for performance analysis and optimization.
:::
\ No newline at end of file
---
sidebar_position: 1
---
import ReactPlayer from 'react-player'
# Watch Me First
Please watch this video first
<ReactPlayer playing controls url='https://www.youtube.com/watch?v=Y2t-7zBQddI' />
import {themes as prismThemes} from 'prism-react-renderer';
import type {Config} from '@docusaurus/types';
import type * as Preset from '@docusaurus/preset-classic';
const config: Config = {
title: 'Performance Analysis',
tagline: 'Hands-On',
favicon: 'img/logo.ico',
// Set the production url of your site here
url: 'https://your-docusaurus-site.example.com',
// Set the /<baseUrl>/ pathname under which your site is served
// For GitHub pages deployment, it is often '/<projectName>/'
baseUrl: '/perf_analysis',
// GitHub pages deployment config.
// If you aren't using GitHub pages, you don't need these.
//organizationName: 'facebook', // Usually your GitHub org/user name.
//projectName: 'docusaurus', // Usually your repo name.
onBrokenLinks: 'throw',
onBrokenMarkdownLinks: 'warn',
// Even if you don't use internationalization, you can use this field to set
// useful metadata like html lang. For example, if your site is Chinese, you
// may want to replace "en" with "zh-Hans".
i18n: {
defaultLocale: 'en',
locales: ['en'],
},
presets: [
[
'classic',
{
docs: {
sidebarPath: './sidebars.ts',
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
//editUrl:
// 'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},
/* blog: {
showReadingTime: true,
// Please change this to your repo.
// Remove this to remove the "edit this page" links.
editUrl:
'https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/',
},*/
theme: {
customCss: './src/css/custom.css',
},
} satisfies Preset.Options,
],
],
themes: [
// ... Your other themes.
[
require.resolve("@easyops-cn/docusaurus-search-local"),
/** @type {import("@easyops-cn/docusaurus-search-local").PluginOptions} */
({
// ... Your options.
// `hashed` is recommended as long-term-cache of index file is possible.
hashed: true,
// For Docs using Chinese, The `language` is recommended to set to:
// ```
// language: ["en", "zh"],
// ```
indexDocs: true,
}),
],
],
themeConfig: {
colorMode: {
defaultMode: 'light',
disableSwitch: true,
// respectPrefersColorScheme: false,
},
// Replace with your project's social card
//image: 'img/docusaurus.png',
navbar: {
title: 'Home',
/* logo: {
alt: 'My Site Logo',
src: 'img/logo.svg',
},*/
items: [
{
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: 'Hands-On',
},
/*
{to: '/blog', label: 'Blog', position: 'left'},
*/
],
},
footer: {
style: 'dark',
links: [
/* {
title: 'Docs',
items: [
{
label: 'Tutorial',
to: '/docs/intro',
},
],
},*/
{
title: 'Communication',
items: [
{
label: 'Zoom',
href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
{
label: 'Slack',
href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
},
{
title: 'Useful Links',
items: [
{
label: 'Hands-On',
to: '/docs/intro',
},
{
label: 'Agenda',
href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
},
{
title: 'More',
items: [
{
label: 'Authors',
href: 'https://www.youtube.com/watch?v=dQw4w9WgXcQ',
},
],
},
],
copyright: `Copyright © ${new Date().getFullYear()} Forschungszentrum Jülich`,
},
prism: {
theme: prismThemes.github,
darkTheme: prismThemes.dracula,
},
} satisfies Preset.ThemeConfig,
};
export default config;
This diff is collapsed.
{
"name": "perf-analysis",
"version": "0.0.0",
"private": true,
"scripts": {
"docusaurus": "docusaurus",
"start": "docusaurus start",
"build": "docusaurus build",
"swizzle": "docusaurus swizzle",
"deploy": "docusaurus deploy",
"clear": "docusaurus clear",
"serve": "docusaurus serve",
"write-translations": "docusaurus write-translations",
"write-heading-ids": "docusaurus write-heading-ids",
"typecheck": "tsc"
},
"dependencies": {
"@docusaurus/core": "3.2.1",
"@docusaurus/preset-classic": "3.2.1",
"@easyops-cn/docusaurus-search-local": "^0.40.1",
"@mdx-js/react": "^3.0.0",
"clsx": "^2.0.0",
"prism-react-renderer": "^2.3.0",
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-player": "^2.16.0"
},
"devDependencies": {
"@docusaurus/module-type-aliases": "3.2.1",
"@docusaurus/tsconfig": "3.2.1",
"@docusaurus/types": "3.2.1",
"typescript": "~5.2.2"
},
"browserslist": {
"production": [
">0.5%",
"not dead",
"not op_mini all"
],
"development": [
"last 3 chrome version",
"last 3 firefox version",
"last 5 safari version"
]
},
"engines": {
"node": ">=18.0"
}
}
import type {SidebarsConfig} from '@docusaurus/plugin-content-docs';
/**
* Creating a sidebar enables you to:
- create an ordered group of docs
- render a sidebar for each doc of that group
- provide next/previous navigation
The sidebars can be generated from the filesystem, or explicitly defined here.
Create as many sidebars as you want.
*/
const sidebars: SidebarsConfig = {
// By default, Docusaurus generates a sidebar from the docs folder structure
tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
// But you can create a sidebar manually
/*
tutorialSidebar: [
'intro',
'hello',
{
type: 'category',
label: 'Tutorial',
items: ['tutorial-basics/create-a-document'],
},
],
*/
};
export default sidebars;
import clsx from 'clsx';
import Heading from '@theme/Heading';
import styles from './styles.module.css';
type FeatureItem = {
title: string;
Svg: React.ComponentType<React.ComponentProps<'svg'>>;
description: JSX.Element;
};
const FeatureList: FeatureItem[] = [
{
title: 'How to Start?',
Svg: require('@site/static/img/rocket.svg').default,
description: (
<>
Read the document and follow the instructions.
Do it at your own pace.
You can skip some exercises if you are already familiar with the content.
</>
),
},
{
title: 'I need help!',
Svg: require('@site/static/img/hands-up.svg').default,
description: (
<>
Ask questions!
</>
),
},
{
title: 'Done! What\'s next?',
Svg: require('@site/static/img/medal.svg').default,
description: (
<>
Let us know!
</>
),
},
];
function Feature({title, Svg, description}: FeatureItem) {
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">
<Heading as="h3">{title}</Heading>
<p>{description}</p>
</div>
</div>
);
}
export default function HomepageFeatures(): JSX.Element {
return (
<section className={styles.features}>
<div className="container">
<div className="row">
{FeatureList.map((props, idx) => (
<Feature key={idx} {...props} />
))}
</div>
</div>
</section>
);
}
.features {
display: flex;
align-items: center;
padding: 2rem 0;
width: 100%;
}
.featureSvg {
height: 200px;
width: 200px;
}
/**
* 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: #023d6b;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/*
:root {
--fzj-color-blue: #023d6b;
--fzj-color-lightblue: #adbde3;
--fzj-color-gray: #ebebeb;
--fzj-color-yellow: #faeb5a;
--fzj-color-red: #eb5f73;
--fzj-color-green: #b9d25f;
--fzj-color-violet: #af82b9;
--fzj-color-orange: #fab45a;
}
*/
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #adbde3;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
\ No newline at end of file
/**
* 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: #2e8555;
--ifm-color-primary-dark: #29784c;
--ifm-color-primary-darker: #277148;
--ifm-color-primary-darkest: #205d3b;
--ifm-color-primary-light: #33925d;
--ifm-color-primary-lighter: #359962;
--ifm-color-primary-lightest: #3cad6e;
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
}
/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #25c2a0;
--ifm-color-primary-dark: #21af90;
--ifm-color-primary-darker: #1fa588;
--ifm-color-primary-darkest: #1a8870;
--ifm-color-primary-light: #29d5b0;
--ifm-color-primary-lighter: #32d8b4;
--ifm-color-primary-lightest: #4fddbf;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}
/**
* 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: 996px) {
.heroBanner {
padding: 2rem;
}
}
.buttons {
display: flex;
align-items: center;
justify-content: center;
}
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment