From 2c232bd70d56551ff09fa70fd07adff4af9ee124 Mon Sep 17 00:00:00 2001
From: "Pavel Erokhin (MairwunNx)" <MairwunNx@gmail.com>
Date: Fri, 19 Jun 2020 22:34:32 +0300
Subject: [PATCH] Updates

---
 app.css                                       |  18 ++
 app.tsx                                       |  26 ++
 components/download/download.css              |  40 +++
 components/download/download.tsx              | 119 ++++++++
 components/download/module/module.css         |  54 ++++
 components/download/module/module.tsx         |  86 ++++++
 components/home/feature/feature.css           |  23 ++
 components/home/feature/feature.tsx           |  16 ++
 components/home/home.css                      | 114 ++++++++
 components/home/home.tsx                      |  70 +++++
 components/link/link.css                      |  10 +
 components/link/link.tsx                      |  20 ++
 components/manual/commands/commands.css       |  22 ++
 components/manual/commands/commands.json      |  60 ++++
 components/manual/commands/commands.tsx       | 260 +++++++++++++++++
 .../manual/configuration/configuration.tsx    | 266 ++++++++++++++++++
 components/manual/developer/developer.tsx     |  66 +++++
 .../manual/installation/installation.tsx      |  41 +++
 components/manual/manual.css                  |  27 ++
 components/manual/manual.tsx                  |  32 +++
 components/manual/permissions/permissions.css |  17 ++
 .../manual/permissions/permissions.json       |  24 ++
 components/manual/permissions/permissions.tsx | 118 ++++++++
 components/top/top.css                        |  18 ++
 components/top/top.tsx                        |  44 +++
 index.html                                    |  27 ++
 index.tsx                                     |  11 +
 logo.svg                                      |   7 +
 react-app-env.d.ts                            |  66 +++++
 serviceWorker.ts                              |  88 ++++++
 structs/pair.ts                               |  59 ++++
 31 files changed, 1849 insertions(+)
 create mode 100644 app.css
 create mode 100644 app.tsx
 create mode 100644 components/download/download.css
 create mode 100644 components/download/download.tsx
 create mode 100644 components/download/module/module.css
 create mode 100644 components/download/module/module.tsx
 create mode 100644 components/home/feature/feature.css
 create mode 100644 components/home/feature/feature.tsx
 create mode 100644 components/home/home.css
 create mode 100644 components/home/home.tsx
 create mode 100644 components/link/link.css
 create mode 100644 components/link/link.tsx
 create mode 100644 components/manual/commands/commands.css
 create mode 100644 components/manual/commands/commands.json
 create mode 100644 components/manual/commands/commands.tsx
 create mode 100644 components/manual/configuration/configuration.tsx
 create mode 100644 components/manual/developer/developer.tsx
 create mode 100644 components/manual/installation/installation.tsx
 create mode 100644 components/manual/manual.css
 create mode 100644 components/manual/manual.tsx
 create mode 100644 components/manual/permissions/permissions.css
 create mode 100644 components/manual/permissions/permissions.json
 create mode 100644 components/manual/permissions/permissions.tsx
 create mode 100644 components/top/top.css
 create mode 100644 components/top/top.tsx
 create mode 100644 index.html
 create mode 100644 index.tsx
 create mode 100644 logo.svg
 create mode 100644 react-app-env.d.ts
 create mode 100644 serviceWorker.ts
 create mode 100644 structs/pair.ts

diff --git a/app.css b/app.css
new file mode 100644
index 0000000..76a5ca5
--- /dev/null
+++ b/app.css
@@ -0,0 +1,18 @@
+@import "@jetbrains/ring-ui/components/global/variables.css";
+
+html, .app-root {
+  height: 100%;
+}
+
+.app-root {
+  margin: 0;
+  padding: 0;
+  background: var(--ring-content-background-color);
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.app-content {
+  margin: calc(var(--ring-unit) * 4);
+}
diff --git a/app.tsx b/app.tsx
new file mode 100644
index 0000000..45e31ee
--- /dev/null
+++ b/app.tsx
@@ -0,0 +1,26 @@
+import React, {Component} from 'react'
+import {pushStateLocationPlugin, UIRouter, UIView} from "@uirouter/react"
+import Top from './components/top/top'
+import Home from "./components/home/home"
+import Download from "./components/download/download"
+import './app.css'
+import Manual from "./components/manual/manual";
+
+const states = [
+  {name: 'base', url: '/', component: Home},
+  {name: 'download', url: '/download', component: Download},
+  {name: 'manual', url: '/manual', component: Manual}
+]
+
+const plugins = [pushStateLocationPlugin]
+
+export default class App extends Component {
+  render = () => (
+    <div>
+      <Top/>
+      <UIRouter plugins={plugins} states={states}>
+        <UIView/>
+      </UIRouter>
+    </div>
+  )
+}
diff --git a/components/download/download.css b/components/download/download.css
new file mode 100644
index 0000000..9e63354
--- /dev/null
+++ b/components/download/download.css
@@ -0,0 +1,40 @@
+.download-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.download-cards-container {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-self: center;
+  justify-content: center;
+  max-width: 1000px;
+  margin-bottom: 25px;
+}
+
+.download-cards-container > div:nth-child(even) {
+  background-color: #fafbfc;
+}
+
+.download-cards-container > div:nth-child(odd) {
+  background-color: #fff;
+}
+
+.download-title {
+  text-align: center;
+  background-color: #FAFBFC;
+  width: 100%;
+  align-self: center;
+  justify-self: center;
+  padding: 26px 0;
+  font-size: 18px;
+  margin-bottom: 25px;
+  margin-left: 0px!important;
+  margin-right: 0px!important;
+}
+
+.download-footer {
+  margin-top: 25px!important;
+  margin-bottom: -40px!important;
+}
diff --git a/components/download/download.tsx b/components/download/download.tsx
new file mode 100644
index 0000000..b2d4089
--- /dev/null
+++ b/components/download/download.tsx
@@ -0,0 +1,119 @@
+import React from "react";
+
+import './download.css'
+import Module from "./module/module";
+import {Struct} from "../../structs/pair";
+import ImmutablePair = Struct.ImmutablePair;
+
+export default class Download extends React.Component {
+  render = () => (
+    <div className="download-container">
+      <p className="greetings-subtitle download-title">{'Download the Project Essentials'}</p>
+      <div className="download-cards-container">
+        <Module
+          name={"Core Module"}
+          urlend={"core"}
+          description={"API for creating modules of Project Essentials and reduce code duplication, also core module contains kotlin runtime and libraries. Also contains some settings for vanilla commands and events."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Core/releases/download/2.1.0%2BMC-1.15.2/Project.Essentials.Core-MOD-2.1.0+MC-1.15.2.jar", "2.1.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Core/releases/download/2.1.0%2BMC-1.14.4/Project.Essentials.Core-MOD-2.1.0+MC-1.14.4.jar", "2.1.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Basic Module"}
+          urlend={null}
+          description={"A basic module of Project Essentials. This module adds a few basic commands in minecraft for the project. Many of the commands in this module will be familiar to you from EssentialsX."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Basic-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Basic-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Permissions Module"}
+          urlend={"permissions"}
+          description={"API for controlling the activities of the player on the server and client. You can limit some commands to the player, his activities in the world and more."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Permissions/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Permissions-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Permissions/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Permissions-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Spawn Module"}
+          urlend={"spawn"}
+          description={"How we control spawn point! Adds literally two commands to configure players spawn point in the game world."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Spawn/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Spawn-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Spawn/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Spawn-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Spawn/releases/download/2.0.1-RC.1%2BMC-1.15.2/Project.Essentials.Spawn-2.0.1-RC.1+MC-1.15.2.jar", "2.1.0-RC.1")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Spawn/releases/download/2.0.1-RC.1%2BMC-1.14.4/Project.Essentials.Spawn-2.0.1-RC.1+MC-1.14.4.jar", "2.1.0-RC.1")
+          )}
+        />
+        <Module
+          name={"Warps Module"}
+          urlend={"warps"}
+          description={"Share the ender portal with players! Adds the ability to control public points in different worlds."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Warps/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Warps-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Warps/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Warps-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Home Module"}
+          urlend={"home"}
+          description={"A wonderful module not to lose your home! The module allows you to create, delete and teleport to homes."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Home/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Home-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Home/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Home-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Backup Module"}
+          urlend={"backup"}
+          description={"Lightweight module for controlling the backup of the game world and configuration files on the server and in a single world."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Backup/releases/download/2.0.0%2BMC-1.15.2/Project.Essentials.Backup-2.0.0+MC-1.15.2.jar", "2.0.0")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Backup/releases/download/2.0.0%2BMC-1.14.4/Project.Essentials.Backup-2.0.0+MC-1.14.4.jar", "2.0.0")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Chat Module"}
+          urlend={"chat"}
+          description={"A lightweight chat manager for forge servers, with simple anti-spam and anti-advertising and anti-swearing protection, mutes, ranged chat, and other stuff."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Chat/releases/download/v1.15.2-1.1.1/Project.Essentials.Chat-1.15.2-1.1.1.jar", "1.1.1")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Chat/releases/download/v1.14.4-1.1.1/Project.Essentials.Chat-1.14.4-1.1.1.jar", "1.1.1")
+          )}
+          previewMap={new Map()}
+        />
+        <Module
+          name={"Cooldown Module"}
+          urlend={"cooldown"}
+          description={"A lightweight cooldown manager for item using and command executing, helps reduce the command and item using spam."}
+          map={new Map().set(
+            "1.15.2", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Cooldown/releases/download/v1.15.2-1.0.2/Project.Essentials.Cooldown-1.15.2-1.0.2.jar", "1.0.2")
+          ).set(
+            "1.14.4", ImmutablePair.of("https://github.com/ProjectEssentials/ProjectEssentials-Cooldown/releases/download/v1.14.4-1.0.5/Project.Essentials.Cooldown-1.14.4-1.0.5.jar", "1.0.5")
+          )}
+          previewMap={new Map()}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/components/download/module/module.css b/components/download/module/module.css
new file mode 100644
index 0000000..07c1f53
--- /dev/null
+++ b/components/download/module/module.css
@@ -0,0 +1,54 @@
+.module-card {
+  display: flex;
+  flex-direction: column;
+  width: 16.66666666665%;
+  min-width: 290px;
+  border: 1px #e1e4e8 solid;
+  box-sizing: border-box;
+  border-radius: 6px;
+  padding: 40px;
+  margin: 10px;
+}
+
+.module-title {
+  margin-bottom: 15px;
+  font-size: 20px;
+  font-weight: 500;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.module-div {
+  display: flex;
+  flex-direction: column;
+}
+
+.download-link {
+  margin: 4px 0;
+}
+
+.other-stuff-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  height: 100%;
+}
+
+.module-description-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+}
+
+.module-description {
+  font-size: 14px;
+  color: #586069;
+  text-align: left;
+  max-width: 700px;
+}
+
+.download-link-container {
+  display: flex;
+  flex-direction: column;
+  margin: 20px 0 -10px 0;
+}
diff --git a/components/download/module/module.tsx b/components/download/module/module.tsx
new file mode 100644
index 0000000..deb6094
--- /dev/null
+++ b/components/download/module/module.tsx
@@ -0,0 +1,86 @@
+import React from "react";
+import Link from "../../link/link";
+import Footer from '@jetbrains/ring-ui/components/footer/footer';
+
+import './module.css'
+import {Struct} from "../../../structs/pair";
+import ImmutablePair = Struct.ImmutablePair;
+
+interface ModuleProperties {
+  name: string
+  urlend: string | null
+  description: string
+  map: Map<string, ImmutablePair<string, string>>
+  previewMap: Map<string, ImmutablePair<string, string>>
+}
+
+export default class Module extends React.Component<ModuleProperties, any> {
+  render = () => (
+    <div className="module-card">
+      <p className="module-title">{this.props.name}</p>
+      <div className="module-div">
+        {
+          mapTheMap(this.props.map, (k: string, v: ImmutablePair<string, string>) => {
+            return (
+              <Link
+                className="download-link"
+                href={v.first}
+                content={`Latest /${v.second}/ — for ${k} >`}
+              />
+            )
+          })
+        }
+      </div>
+      {
+        Array.from(this.props.previewMap.keys()).length != 0 ? (
+          <div>
+            <Footer className="download-footer"/>
+            <div className="module-div">
+              {
+                mapTheMap(this.props.previewMap, (k: string, v: ImmutablePair<string, string>) => {
+                  return (
+                    <Link
+                      className="download-link"
+                      href={v.first}
+                      content={`Preview /${v.second}/ — for ${k} >`}
+                    />
+                  )
+                })
+              }
+            </div>
+          </div>
+        ) : null
+      }
+      <Footer className="download-footer"/>
+      <div className="other-stuff-container">
+        <div className="module-description-container">
+          <p className="module-description">{this.props.description}</p>
+        </div>
+        <Footer className="download-footer"/>
+        <div className="download-link-container">
+          <Link
+            className="download-link"
+            href={
+              this.props.urlend != null ? `https://github.com/ProjectEssentials/ProjectEssentials-${this.props.urlend}` : "https://github.com/ProjectEssentials/ProjectEssentials"
+            }
+            content={`Source Code >`}
+          />
+          <Link
+            className="download-link"
+            href={
+              this.props.urlend != null ? `https://www.curseforge.com/minecraft/mc-mods/project-essentials-${this.props.urlend}` : "https://www.curseforge.com/minecraft/mc-mods/project-essentials"
+            }
+            content={`CurseForge Page >`}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function mapTheMap(map, cb) {
+  let i = 0;
+  let out = new Array(map.size);
+  map.forEach((val, key) => out[i++] = cb(key, val));
+  return out;
+}
diff --git a/components/home/feature/feature.css b/components/home/feature/feature.css
new file mode 100644
index 0000000..99fd23c
--- /dev/null
+++ b/components/home/feature/feature.css
@@ -0,0 +1,23 @@
+.feature-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  width: 33.3333333333%;
+  min-width: 300px;
+}
+
+.feature-title {
+  margin-bottom: 4px;
+  font-size: 18px;
+  font-weight: 500;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.feature-description {
+  text-align: left;
+  font-size: 16px;
+  padding-right: 24px;
+  padding-left: 24px;
+  margin-bottom: 15px;
+  color: #6a737d;
+}
diff --git a/components/home/feature/feature.tsx b/components/home/feature/feature.tsx
new file mode 100644
index 0000000..7a67310
--- /dev/null
+++ b/components/home/feature/feature.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import './feature.css'
+
+interface FeatureProperties {
+  title: string
+  description: string
+}
+
+export class Feature extends React.Component<FeatureProperties, any> {
+  render = () => (
+    <div className="feature-container">
+      <p className="feature-title">{this.props.title}</p>
+      <p className="feature-description">{this.props.description}</p>
+    </div>
+  )
+}
diff --git a/components/home/home.css b/components/home/home.css
new file mode 100644
index 0000000..4164f7a
--- /dev/null
+++ b/components/home/home.css
@@ -0,0 +1,114 @@
+body {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.greetings-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-top: 64px;
+}
+
+.greetings-logo {
+  width: 72px;
+  align-self: center;
+  margin-bottom: 22px;
+}
+
+.greetings-title {
+  font-size: 16px;
+  font-weight: 500;
+  color: #6a737d;
+  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace !important;
+}
+
+.greetings-title-badge {
+  border: 1px solid #34d058;
+  color: #28a745;
+  margin-left: 8px;
+}
+
+.greetings-subtitle {
+  font-size: 48px;
+  font-weight: 500;
+  margin-bottom: 16px;
+  line-height: 1.4;
+  padding-left: 30px;
+  padding-right: 30px;
+  margin-top: 12px;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.download-button-container {
+  display: flex;
+  flex-direction: column;
+  align-content: center;
+  margin-top: 10px;
+}
+
+.download-button {
+  height: auto;
+  align-self: center !important;
+  vertical-align: center !important;
+  font-weight: 500 !important;
+  font-size: 14px !important;
+  padding: 16px 24px !important;
+}
+
+.documentation-container {
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  margin-top: 25px;
+}
+
+.documentation-title {
+  font-size: 16px;
+  color: #586069;
+  padding-left: 60px;
+  padding-right: 60px;
+  align-self: center;
+  max-width: 700px;
+}
+
+.documentation-link {
+  color: #1074e7 !important;
+  font-weight: 500;
+  font-size: 16px;
+  text-decoration: none;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
+}
+
+.features-caption-container {
+  display: flex;
+  flex-direction: column;
+  background-color: #fafbfc !important;
+  text-align: center;
+  margin-top: 30px;
+}
+
+.features-caption {
+  margin-left: 24px;
+  margin-right: 24px;
+  font-size: 32px;
+  line-height: 1.25;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
+
+.features-container {
+  display: flex;
+  flex-direction: column;
+  margin-top: 30px;
+  margin-bottom: 55px;
+  align-self: center;
+}
+
+.features-sub-container {
+  display: flex;
+  flex-direction: row;
+  align-self: center;
+  text-align: center;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  max-width: 950px;
+}
diff --git a/components/home/home.tsx b/components/home/home.tsx
new file mode 100644
index 0000000..0606ad9
--- /dev/null
+++ b/components/home/home.tsx
@@ -0,0 +1,70 @@
+import React from "react";
+import Badge from '@jetbrains/ring-ui/components/badge/badge';
+import Button from '@jetbrains/ring-ui/components/button/button';
+
+import EssLogo from '../../logo.svg'
+import './home.css'
+import {Feature} from "./feature/feature";
+
+export default class Home extends React.Component {
+  render = () => (
+    <div>
+      <div className="greetings-container">
+        <img src={EssLogo} className="greetings-logo" alt={'Project Essentials logo.'}/>
+        <div>
+          <span className="greetings-title">{'Project Essentials'}</span>
+          <Badge className="greetings-title-badge">{'2.x'}</Badge>
+        </div>
+        <p className="greetings-subtitle">{'Take Essentials to the Minecraft'}</p>
+      </div>
+      <div className="download-button-container">
+        <Button
+          className="download-button"
+          href="/download"
+          title="Download for Forge"
+          button-primary="true"
+          key={'button-primary'}
+          data-test={'button-primary'}
+          {...{['primary']: true}}
+        >{'Download for Forge'}</Button>
+      </div>
+      <div className="documentation-container">
+        <p className="documentation-title">
+          Check out Project Essentials docs for more info and view all 59 commands and permissions.
+        </p>
+        <a className="documentation-link" href={"/manual"}>Read the manual {">"}</a>
+      </div>
+      <div className="features-caption-container">
+        <p className="features-caption">{'I make forge server more powerful'}</p>
+      </div>
+      <div className="features-container">
+        <div className="features-sub-container">
+          <Feature
+            title="Easy to configure"
+            description="The Project Essentials configurations adhere to the json format, that's easy to configure, that's format understandable for most minecraft community."
+          />
+          <Feature
+            title="Module system"
+            description="Install only the modules you need. It will also help reduce server overload. That's also means quickly updating project parts for new minecraft versions."
+          />
+          <Feature
+            title="Client independence"
+            description="All modules are completely independent of their presence on the client. You will not experience localization problems if you configure the modules correctly."
+          />
+          <Feature
+            title="Really essentials"
+            description="The project includes many functions that are divided into different modules. The project consists of 8 modules and 2 modules which are in the process of work."
+          />
+          <Feature
+            title="Performance"
+            description="The project will not load your server even if all modules installed. Does not require a lot of RAM. Does not require a Super Duper processor."
+          />
+          <Feature
+            title="Multi version support"
+            description="Now the project works on Minecraft versions `1.14.4` and `1.15.2`. As soon as a new version of Minecraft is released, I will definitely update the project to a new version."
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/link/link.css b/components/link/link.css
new file mode 100644
index 0000000..98433db
--- /dev/null
+++ b/components/link/link.css
@@ -0,0 +1,10 @@
+.link {
+  max-width: max-content;
+  word-wrap: break-word;
+  color: #1074e7;
+  font-size: 14px;
+  font-weight: 500;
+  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  text-decoration: none;
+  z-index: 2;
+}
diff --git a/components/link/link.tsx b/components/link/link.tsx
new file mode 100644
index 0000000..9dbab6b
--- /dev/null
+++ b/components/link/link.tsx
@@ -0,0 +1,20 @@
+import React from "react";
+
+import './link.css'
+
+interface LinkProperties {
+  href: string
+  content: string
+  className: string
+}
+
+export default class Link extends React.Component<LinkProperties, any> {
+  render = () => (
+    <a
+      className={`link ${this.props.className}`}
+      href={this.props.href}
+    >
+      {this.props.content.trim()}
+    </a>
+  )
+}
diff --git a/components/manual/commands/commands.css b/components/manual/commands/commands.css
new file mode 100644
index 0000000..686e684
--- /dev/null
+++ b/components/manual/commands/commands.css
@@ -0,0 +1,22 @@
+.table-container {
+  margin-top: 20px;
+  overflow: auto;
+}
+
+.inline-code {
+  margin: 5px 2px;
+  padding-right: 0 !important;
+}
+
+.inline-code > code:nth-child(1) {
+  max-width: unset!important;
+  padding: 5px 10px 5px !important;
+}
+
+.cell_a14:last-child {
+  max-width: unset!important;
+}
+
+.permissions-container {
+  margin-top: 25px;
+}
diff --git a/components/manual/commands/commands.json b/components/manual/commands/commands.json
new file mode 100644
index 0000000..4a3ce8e
--- /dev/null
+++ b/components/manual/commands/commands.json
@@ -0,0 +1,60 @@
+[
+  {"command": "afk [~list [page]]", "permission": "ess.afk.[set/0|~list/3]", "description": "Marks you as away-from-keyboard.", "provider": "basic"},
+  {"command": "air [~players]", "permission": "ess.air.[self/2|~other/3]", "description": "Make air suppliers fully for you or given player.", "provider": "basic"},
+  {"command": "back", "permission": "ess.back/2", "description": "Teleports you to your location prior to tp/spawn/warp.", "provider": "core"},
+  {"command": "break", "permission": "ess.break/3", "description": "Breaks the block you are looking at.", "provider": "basic"},
+  {"command": "burn <duration:s> ~[~~players]", "permission": "ess.burn.[~self/2|~~other/3]", "description": "Set a player on fire.", "provider": "basic"},
+  {"command": "enderchest [~player]", "permission": "ess.enderchest.open/3[~.other/4]", "description": "Lets you see inside an you enderchest or other player.", "provider": "basic"},
+  {"command": "ext [~players]", "permission": "ess.ext.[self/2|~other/3]", "description": "Extinguish you or given players.", "provider": "basic"},
+  {"command": "feed [~players]", "permission": "ess.feed.[self/2|~other/3]", "description": "Satisfy the hunger of you or given player.", "provider": "basic"},
+  {"command": "fly [~players]", "permission": "ess.fly.[self/2|~other/3]", "description": "Enables fly mode for you or given player.", "provider": "basic"},
+  {"command": "glow [~players]", "permission": "ess.glow.[self/2|~other/3]", "description": "Enables glowing of you or given player.", "provider": "basic"},
+  {"command": "god [~players]", "permission": "ess.god.[self/2|~other/3]", "description": "Enables god mode for you or given player.", "provider": "basic"},
+  {"command": "heal [~players]", "permission": "ess.heal.[self/2|~other/3]", "description": "Heals you or the given player.", "provider": "basic"},
+  {"command": "help [page]", "permission": "native.help/0", "description": "Views a list of available commands.", "provider": "basic"},
+  {"command": "invsee <player>", "permission": "ess.inventory.see/3", "description": "See the inventory of other players.", "provider": "basic"},
+  {"command": "jump", "permission": "ess.jump/3", "description": "Jumps to the nearest block in the line of sight.", "provider": "basic"},
+  {"command": "kit [<name> ~[target]|~~list [page]]", "permission": "ess.kit.[receive.<kit-name>/0[~.other/3]|~~list/0]", "description": "Obtains the specified kit.", "provider":  "basic"},
+  {"command": "lightning <targets>", "permission": "ess.lightning/3", "description": "Strike at target players.", "provider": "basic"},
+  {"command": "more", "permission": "ess.more/3", "description": "Fills the item stack in hand to maximum size.", "provider": "basic"},
+  {"command": "ping", "permission": "ess.ping/0", "description": "Sends result to player his ping to server.", "provider": "basic"},
+  {"command": "platform-status", "permission": "ess.platformstatus/0", "description": "Reports memory, uptime and tick info.", "provider": "basic"},
+  {"command": "repair [all]", "permission": "ess.repair.[one/2|~all/3]", "description": "Repairs the durability of one or all items.", "provider": "basic"},
+  {"command": "send-pos <targets>", "permission": "ess.sendpos/0", "description": "Sends your position to other selected players.", "provider": "basic"},
+  {"command": "skull <nick>", "permission": "ess.skull/2", "description": "Gives a skull of other player by name.", "provider": "basic"},
+  {"command": "suicide", "permission": "ess.suicide/2", "description": "Causes you to perish.", "provider": "basic"},
+  {"command": "vanish [~players]", "permission": "ess.vanish.[self/2|~other/3]", "description": "Enables invisibility for your or given player.", "provider": "basic"},
+  {"command": "workbench", "permission": "ess.workbench.open/3", "description": "Opens up a workbench.", "provider": "basic"},
+  {"command": "top", "permission": "ess.teleport.top/2", "description": "Teleports you to top at current Y axis.", "provider": "basic"},
+  {"command": "tp-accept", "permission": "ess.teleport.tpaccept/0", "description": "Accepts the last teleport request.", "provider": "basic"},
+  {"command": "tp-all <player>", "permission": "ess.teleport.tpall/4", "description": "Teleports all players to target player.", "provider": "basic"},
+  {"command": "tp-deny", "permission": "ess.teleport.tpdeny/0", "description": "Does deny a last teleport request.", "provider": "basic"},
+  {"command": "tp-here <player>", "permission": "ess.teleport.tphere/3", "description": "Teleports target player to position at you stay.", "provider": "basic"},
+  {"command": "tp-pos <position>", "permission": "ess.teleport.tppos/2", "description": "Teleports you to selected position in current world.", "provider": "basic"},
+  {"command": "tp-toggle", "permission": "ess.teleport.tptoggle/3", "description": "Toggles on/off your wish to getting teleport requests.", "provider": "basic"},
+  {"command": "tpa-all", "permission": "ess.teleport.tpaall/2", "description": "Sends a teleport request to the all players.", "provider": "basic"},
+  {"command": "tpa-cancel", "permission": "ess.teleport.tpacancel/0", "description": "Cancels the last teleport request to somebody.", "provider": "basic"},
+  {"command": "tpa <player>", "permission": "ess.teleport.tpa/0", "description": "Sends a teleport request to selected player.", "provider": "basic"},
+  {"command": "tpa-here <player>", "permission": "ess.teleport.tpahere/0", "description": "Sends a \"teleport to you\" request to selected player.", "provider": "basic"},
+  {"command": "set-spawn", "permission": "ess.spawn.set/4", "description": "Sets new spawn point for all players at your position in current world.", "provider": "spawn"},
+  {"command": "spawn", "permission": "ess.spawn.teleport/0", "description": "Teleports you to spawn point.", "provider": "spawn"},
+  {"command": "set-home <home>", "permission": "ess.home.set/0", "description": "Saves new home point at position you stay.", "provider": "home"},
+  {"command": "del-home <home>", "permission": "ess.home.remove/0", "description": "Removes selected home.", "provider": "home"},
+  {"command": "home [home]", "permission": "ess.home.teleport/0", "description": "Teleports you to selected home.", "provider": "home"},
+  {"command": "set-warp <warp>", "permission": "ess.warp.set/0", "description": "Saves new warp point at position you stay.", "provider": "warps"},
+  {"command": "del-warp <warp>", "permission": "ess.warp.remove/0", "description": "Removes selected warp.", "provider": "warps"},
+  {"command": "warp <warp>", "permission": "ess.warp.teleport/0", "description": "Teleports you to selected warp.", "provider": "warps"},
+  {"command": "backup <on|off|now>", "permission": "ess.backup.[on|off|now]/4", "description": "Force makes a backup or preventing backup cycle or continue it.", "provider": "backup"},
+  {"command": "chat-clear [only for you?]", "permission": "ess.chat.clear/3", "description": "Do clear chat on server and client (different effect!).", "provider": "chat"},
+  {"command": "mute <player> [reason]", "permission": "ess.chat.moderation.mute/3", "description": "Mute selected player.", "provider": "chat"},
+  {"command": "unmute <player>", "permission": "ess.chat.moderation.unmute/3", "description": "Unmutes selected player.", "provider": "chat"},
+  {"command": "unmute-all", "permission": "ess.chat.moderation.unmuteall/3", "description": "Unmutes all muted players.", "provider": "chat"},
+  {"command": "muted-players [page]", "permission": "ess.chat.moderation.mutedplayers/3", "description": "Lists you muted players.", "provider": "chat"},
+  {"command": "temp-mute <player> <time> <reason>", "permission": "ess.chat.moderation.tempmute/3", "description": "Temporary mutes selected player.", "provider": "chat"},
+  {"command": "configure-essentials <setting> set <value>", "permission": "ess.configure.essentials.[setting]/4", "description": "Changes value for selected setting.", "provider": "core"},
+  {"command": "configure-warps <setting> set <value>", "permission": "ess.configure.warps.[setting]/4", "description": "Changes value for selected setting.", "provider": "warps"},
+  {"command": "configure-home <setting> set <value>", "permission": "ess.configure.home.[setting]/4", "description": "Changes value for selected setting.", "provider": "home"},
+  {"command": "configure-permissions <setting> set <value>", "permission": "ess.configure.permissions.[setting]/4", "description": "Changes value for selected setting.", "provider": "permissions"},
+  {"command": "configure-backup <setting> set <value>", "permission": "ess.configure.backup.[setting]/4", "description": "Changes value for selected setting.", "provider": "backup"},
+  {"command": "configure-chat <setting> set <value>", "permission": "ess.configure.chat.[setting]/4", "description": "Changes value for selected setting.", "provider": "chat"}
+]
diff --git a/components/manual/commands/commands.tsx b/components/manual/commands/commands.tsx
new file mode 100644
index 0000000..0574b94
--- /dev/null
+++ b/components/manual/commands/commands.tsx
@@ -0,0 +1,260 @@
+import React from "react"
+import Markdown from '@jetbrains/ring-ui/components/markdown/markdown'
+import {Col, Grid, Row} from '@jetbrains/ring-ui/components/grid/grid'
+import Pager from '@jetbrains/ring-ui/components/pager/pager'
+import Code from '@jetbrains/ring-ui/components/code/code'
+import Table from '@jetbrains/ring-ui/components/table/table'
+import Selection from '@jetbrains/ring-ui/components/table/selection'
+const mock = require('./commands.json');
+
+import './commands.css'
+
+export class Commands extends React.Component {
+  state = {
+    data: [],
+    selection: new Selection(),
+    caption: undefined,
+    selectable: false,
+    draggable: false,
+    page: 1,
+    pageSize: 12,
+    total: mock.length,
+    sortKey: 'command',
+    sortOrder: true
+  }
+
+  componentDidMount = () => this.loadPage()
+
+  componentDidUpdate(prevProps, prevState) {
+    const {page, sortKey, sortOrder} = this.state
+    if (
+      page !== prevState.page ||
+      sortKey !== prevState.sortKey ||
+      sortOrder !== prevState.sortOrder
+    ) this.loadPage()
+  }
+
+  columns = [
+    {
+      id: 'command', title: 'Command', sortable: true,
+      getValue: ({command}) => <Code className="inline-code" code={command}/>
+    },
+    {
+      id: 'permission', title: 'Permission/Op level',
+      getValue: ({permission}) => <Code className="inline-code" code={permission}/>
+    },
+    {id: 'description', title: 'Description'},
+    {id: 'provider', title: 'Provider', getValue: ({provider}) => <b>{provider}</b>}
+  ]
+
+  onSort = ({column: {id: sortKey}, order: sortOrder}) => this.setState({sortKey, sortOrder})
+
+  onPageChange = page => this.setState({page})
+
+  loadPage = () => {
+    const {page, pageSize, sortKey, sortOrder} = this.state
+    let data = [...mock]
+    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1))
+    data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize)
+    const selection = new Selection({data})
+    this.setState({data, selection})
+  }
+
+  render = () => {
+    const {
+      data, caption, selectable, draggable, page, pageSize, total, selection, sortKey, sortOrder
+    } = this.state
+
+    return (
+      <div>
+        <Markdown
+          source={`
+            # Commands
+
+            ## Syntax introduction
+
+            As you see table below includes some strange syntax for describing command and permission node.
+
+            ### Some definitions for understanding that:
+
+            1. \`[]\` - not mandatory argument, command can works without that.
+            2. \`<>\` - mandatory argument, required for executing the command.
+            3. \`~\` - reference symbol, does relate argument to part of permission node.
+            4. \`/X\` - required operator level if you uses other permissions provider or without that.
+            5. \`|\` - **or** operator.
+
+            ### Still not understand some nodes or command? Let's see some examples:
+
+            1. \`vanish [~players]\` *(permission is \`ess.vanish.[self/2|~other/3]\`)* able for use two commands:
+              - \`vanish\`, will affects yourself, and requires permission \`ess.vanish.self\` or requires operator level 2.
+              - \`vanish MairwunNx\`, will affects for selected player, and requires permission \`ess.vanish.other\` or requires operator level 3.
+
+            2. \`kit [<name> ~[target]|~~list [page]]\` *(permission is \`ess.kit.[receive.<kit-name>/0[~.other/3]|~~list/0]\`)* able for use few commands:
+              - \`kit starter\` - gives to you selected kit, requires permission \`ess.kit.receive.starter\` or requires operator level 0.
+              - \`kit starter MairwunNx\` - gives to selected player selected kit, requires permission \`ess.kit.receive.starter.other\` or requires operator level 3.
+              - \`kit list\` - lists first page of kits, requires permission \`ess.kit.list\` or requires operator level 0.
+              - \`kit list 2\` - lists selected page of kits, requires the same as simple list.
+
+            ### Still feeling confusing?
+
+            1. Open the issue in related module repository.
+            2. Ask about it in telegram or discord chat.
+
+            ## Table of commands
+          `}
+        />
+        <div className="table-container">
+          <Table
+            data={data}
+            columns={this.columns}
+            selection={selection}
+            onSelect={newSelection => this.setState({selection: newSelection})}
+            onReorder={({data: newData}) => this.setState({data: newData})}
+            loading={false}
+            onSort={this.onSort}
+            sortKey={sortKey}
+            sortOrder={sortOrder}
+            caption={caption}
+            selectable={selectable}
+            draggable={draggable}
+            autofocus
+          />
+          <Grid>
+            <Row>
+              <Col>
+                <Pager
+                  total={total}
+                  pageSize={pageSize}
+                  currentPage={page}
+                  disablePageSizeSelector
+                  onPageChange={this.onPageChange}
+                />
+              </Col>
+            </Row>
+          </Grid>
+        </div>
+        <Markdown
+          className={"permissions-container"}
+          source={`
+            ## Another commands
+
+            Sorry for this, permissions commands contains a big nodes, that can't be described in the common command table.
+
+            What about this? See below, that's permissions commands, for controlling permissions configuration. You already know about command syntax, it will easy for understand.
+
+            ### User management:
+
+            \`\`\`
+                \`/perm save\`
+                    - description: saves permissions configuration.
+                    - required node: ess.permissions.store.save
+
+                \`/perm reload\`
+                    - description: does reload permissions configuration.
+                    - required node: ess.permissions.store.reload
+
+                \`/perm user <user-name> info\`
+                    - description: displays information about user.
+                    - required node: ess.permissions.user.read.info
+
+                \`/perm user <user-name> remove\`
+                    - description: does remove user if he is present in users list.
+                    - required node: ess.permissions.user.remove
+
+                \`/perm user permissions <user-name> add <node>\`
+                    - description: adds permission node to target user.
+                    - required node: ess.permissions.user.permissions.add
+
+                \`/perm user permissions <user-name> remove <node>\`
+                    - description: does remove permission node from user if it exist.
+                    - required node: ess.permissions.user.permissions.remove
+
+                \`/perm user permissions <user-name> list [deep [page]] [page]\`
+                    - description: displays all permissions of user. (if you want get all permissions of user you need pass \`deep\` argument).
+                    - required node: ess.permissions.user.read.permissions
+
+                \`/perm user group set <group-name> for <user-name>\`
+                    - description: sets group for target user.
+                    - required node: ess.permissions.user.group.set
+            \`\`\`
+
+            ### Group management:
+
+            \`\`\`
+                \`/perm group list [page]\`
+                    - description: displays all registered groups.
+                    - required node: ess.permissions.group.read.list
+
+                \`/perm group set-default <group-name>\`
+                    - description: switch \`isDefault\` group factor to new target group.
+                    - required node: ess.permissions.group.default.set
+
+                \`/perm group create <group-name>\`
+                    - description: creates new group with specified name.
+                    - required node: ess.permissions.group.create
+
+                \`/perm group remove <group-name>\`
+                    - description: removes group by name. (Only if that group is not default).
+                    - required node: ess.permissions.group.remove
+
+                \`/perm group permissions <group-name> add <node>\`
+                    - description: adds permission node to target group.
+                    - required node: ess.permissions.group.permissions.add
+
+                \`/perm group permissions <group-name> remove <node>\`
+                    - description: does remove permission node from user if it exist.
+                    - required node: ess.permissions.group.permissions.remove
+
+                \`/perm group permissions <group-name> list [deep [page]] [page]\`
+                    - description: displays all permissions of group. (deep arguments works as in similar command for user).
+                    - required node: ess.permissions.group.read.permissions
+
+                \`/perm group inherit <group-name> add <child-group>\`
+                    - description: adds new inherit group to target group.
+                    - required node: ess.permissions.group.inherit.add
+
+                \`/perm group inherit <group-name> remove <child-group>\`
+                    - description: removes inherit group from target group.
+                    - required node: ess.permissions.group.inherit.remove
+
+                \`/perm group inherit <group-name> list [page]\`
+                    - description: display all inherits groups of target group.
+                    - required node: ess.permissions.group.read.inherit
+
+                \`/perm group prefix <group-name>\`
+                    - description: displays the current prefix of group in the chat.
+                    - required node: ess.permissions.group.read.prefix
+
+                \`/perm group prefix <group-name> <prefix>\`
+                    - description: sets new prefix for target group.
+                    - required node: ess.permissions.group.prefix.set
+            \`\`\`
+
+            ## What about vanilla?
+
+            Yea, vanilla commands also overriden and "injected" a permissions checking code.
+
+            All vanilla, i.e "native" commands has simple permission node, for example:
+
+            1. \`scoreboard\` command will has a \`native.scoreboard\` permission node.
+            2. \`time\` command will has a \`native.time\` permission node.
+
+            **Note: all vanilla commands also have the same op levels like in vanilla. (read more you can at minecraft wiki)**
+
+            But, some permission has not a standard permission notation, you can see some native commands permissions mapping in configuration file \`native-mappings.json\`.
+            Also, some commands have a improved permissions checking, you can see that below:
+
+            1. \`enchant\` command: \`native.enchant.other\` - allows enchants item of other player.
+            2. \`gamemode\` command: \`native.gamemode.<mode>\` - allows switch own mode to specific game mode.
+            3. \`reload\` command: \`native.server.reload\` - allows to reload server configurations.
+            4. \`save-all\` command: \`native.save.all\` - allows to save player, configuration, world data.
+            5. \`time set\` command: \`native.time.change.set\` - allows to change current world time.
+            6. \`time add\` command: \`native.time.change.add\` - allows to add time to current world time.
+            7. \`time query\` command: \`native.time.query\` - allows to query world time.
+            8. \`weather\` command: \`native.weather.<weather>\` - allows to change world weather to specified. (for weather clear is \`weather.sun\`).
+          `}
+        />
+      </div>
+    );
+  }
+}
diff --git a/components/manual/configuration/configuration.tsx b/components/manual/configuration/configuration.tsx
new file mode 100644
index 0000000..ba3cbb1
--- /dev/null
+++ b/components/manual/configuration/configuration.tsx
@@ -0,0 +1,266 @@
+import React from "react";
+import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';
+
+export default class Configuration extends React.Component {
+  render = () => (
+    <div>
+      <Markdown
+        source={`
+          # Configuration Introduction
+
+          ## Requirements
+
+          1. JSON syntax knowledge's.
+          2. About ~1 minute for reading this.
+
+          ## Witty notes and tips
+
+          1. If you have a problem with configuration just remove it, server will re-create that.
+          2. Before doing 1 variant, check your configuration for syntax errors.
+          3. Some world specific configurations stores in \`ProjectEssentials\\<world-name>\`.
+          4. Configuration stores in \`.\\config\\ProjectEssentials\` directory.
+
+          # Configuration Description
+
+          ## general.properties
+
+          ### This configuration related to core module also has a regular java properties type.
+
+          ### Syntax excursion
+
+          - Define an empty list: \`[]\`
+          - Define an filled list: \`["1", "2", "3"]\` (\`"\` can be removed).
+          - Commentary starts with symbol \`#\`.
+
+          ### Properties and description
+
+          \`\`\`properties
+          help-command-max-lines-out                        # Type Int      | Provider: Basic   | Lines for one page in /help command out.
+          enable-native-command-aliases-replace             # Type Boolean  | Provider: Core    | If this value will true then aliases for vanilla commands will processed and registered.
+          feed-max-food-level                               # Type Int      | Provider: Basic   | Maximum feed level will regenerated after executing /feed command.
+          v2-localization-fallback-lang                     # Type String   | Provider: Core    | Fallback language for v2 localization, uses when localization string not found for specified language.
+          afk-idleness-kick-time                            # Type Int      | Provider: Basic   | Idleness time in afk state of player, player will kicked from server after this time.
+          afk-handle-activity                               # Type Boolean  | Provider: Basic   | If this value will true then afk will do handling player activity.
+          first-join-commands                               # Type List     | Provider: Basic   | First join commands, commands in this list will executed if player plays on server at first time.
+          enable-console-colors                             # Type Boolean  | Provider: Core    | Enables color messages in server console, if you use not CMD 😄, you can set this value to true.
+          feed-max-food-saturation-level                    # Type Float    | Provider: Basic   | The saturation level that will be obtained when the command is executed.
+          disable-safely-enchant-level                      # Type Boolean  | Provider: Core    | If this value is true disables safely enchantment level, i.e allows to enchant item for 1000 lvl.
+          auto-fly-mode-on-join-enabled                     # Type Boolean  | Provider: Basic   | If this value is true enables fly mode automatically if player was in fly mode before leaving from server.
+          fly-worlds-disabled                               # Type List     | Provider: Basic   | Words in which fly mode is restricted.
+          list-max-elements-in-page                         # Type Int      | Provider: Core    | In-chat lines for one page in commands which out is list info.
+          disable-portal-spawning                           # Type Boolean  | Provider: Core    | If this value is true portal spawning by players in world will suppressed.
+          v2-localization-enabled                           # Type Boolean  | Provider: Core    | If this value is true enables experimental server-side only localization (but it also works on client, side independent).
+          teleport-request-timeout                          # Type Int      | Provider: Basic   | Teleport request time out in seconds. (for tpa, tpa-here commands).
+          invsee-disable-danger-slots                       # Type Boolean  | Provider: Basic   | If this value is true will restricts and suppresses any actions with "fake" slots in invsee.
+          god-worlds-disabled                               # Type List     | Provider: Basic   | Like fly-worlds-disabled.
+          locate-command-find-radius                        # Type Int      | Provider: Core    | Max radius which locate command will search structures in the game world.
+          enable-native-command-replace                     # Type Boolean  | Provider: Core    | If this value is true SOME vanilla commands will replaced by core module.
+          auto-god-mode-on-join-enabled                     # Type Boolean  | Provider: Basic   | Like auto-fly-mode-on-join-enabled.
+          disabled-commands                                 # Type List     | Provider: Basic   | List with restricted commands on the server.
+          enable-native-command-require-predicate-replace   # Type Boolean  | Provider: Core    | If this value is true require predicate of vanilla commands will replaced, i.e permission checking algorithm will replaced.
+          replace-native-help-command                       # Type Boolean  | Provider: Basic   | If this value is true help command will replaced on enchanted help command by basic module.
+          \`\`\`
+
+          ---
+
+          ## native-mappings.json
+
+          ### This configuration controlling native command permissions and aliases mappings.
+
+          1. \`permissions\` object has type a \`Map\` with key type \`String\` and value type also \`String\`.
+
+          \`\`\`json
+            "ban": "native.moderation.ban@3"
+          \`\`\`
+
+          \`ban\` is property (key), - command which you want change permission.
+          \`native.moderation.ban@3\` - is value of property, \`@\` symbol separate permission node and min required op level.
+
+          If you will remove this core will use generated permission basing on command name, e.g for ban command it will \`native.ban\` and operator level by vanilla.
+
+          2. \`aliases\` object has type like \`permissions\` object.
+
+          \`\`\`json
+            "locate": "find,where"
+          \`\`\`
+
+          \`locate\` is target command for applying aliases.
+          \`find,where\` is aliases to apply for \`locate\` command.
+
+          ---
+
+          ## permissions-settings.json
+
+          ### This configuration stores settings of permissions module.
+
+          \`\`\`json
+          {
+            "useSimplifiedWorldPermissions": false, // If this value is true for checking world actions permissions will used simplified permission nodes.
+            "replaceWorldEditPermissionsHandler": true, // If this value is true WorldEdit permission checking compatibility will enabled.
+            "debugMode": false, // If this value is true debug mode will enabled (checked nodes in logs).
+            "handleBlockBreaking": true, // If this value is true block breaking event will handled.
+            "handleBlockPlacing": true, // If this value is true block placing event will handled.
+            "handleFarmlandTrampling": false, // If this value is true farmland trampling event will handled.
+            "handleItemUsing": false // If this value is true item using event will handled.
+          }
+          \`\`\`
+
+          ---
+
+          ## permissions.json
+
+          ### This configuration stores all user permissions and groups.
+
+          \`\`\`json
+          {
+            // Important node: comments not supports in regular json. If you will copy this - remove comments!
+            "groups": [ // <- groups object, contains groups.
+              {
+                "name": "default", // <- group name, must be unique and not empty. (String type)
+                "isDefault": true, // <- is default group? (Boolean type)
+                "permissions": [ // <- list with permission nodes (every node has String type).
+                  "native.help", // <- regular permission node.
+                  "ess.warp.*", // <- permission node with allowing all nodes after last dot.
+                  "^native.event.world.overworld.block.bedrock.break" // <- inverted permission node.
+                ],
+                "inheritFrom": [
+                  // "fly" <- inherit permissions from fly group (for example).
+                ],
+                "prefix": "" // <- prefix of group.
+              }, // <- semicolon for enumerating next group :D.
+              { // <- one more group object!
+                "name": "owner", // <- I think you understand what it is ;).
+                "isDefault": false, // <- I think owner group must be not default :|.
+                "permissions": [
+                  "*" // <- "star" or "all permissions notation". (Like Operator level).
+                ],
+                "inheritFrom": [ // <- no need to inherit something =).
+                ],
+                "prefix": "§c[§7owner§c]" // <- custom and pretty prefix in chat.
+              } // <- no need semicolon if it last group.
+            ], // <- end of groups list.
+            "users": [ // <- stores users. List with users.
+              {
+                "nickname": "*", // <- nickname of user, "star" mean all nicknames, like user by default.
+                "group": "default", // <- group of user (in this context for all users).
+                "permissions": [ // <- no specific permissions of user.
+                ]
+              },
+              {
+                "nickname": "MairwunNx", // <- nickna... yea, you know about it. Btw he is project creator.
+                "group": "owner", // <- his group. (Of course he is owner he is creator of this module lol)
+                "permissions": [
+                ]
+              },
+              { // <- One more user.
+                "nickname": "JopaBibBib",
+                "group": "owner", // <- his group.
+                "permissions": [ // <- ok, he is can execute all commands because he is owner with except /stop.
+                  "^native.server.stop" // <- yea, it's permission node.
+                ]
+              } // <- last user, no need to semicolon here.
+            ]
+          } // <- god bless you, man. This end of file. Relax.
+          \`\`\`
+
+          ---
+
+          ## warps-settings.json
+
+          \`\`\`json
+          {
+            "playSoundOnTeleport": true, // plays a teleport sound after your teleporting.
+            "showEffectOnTeleport": true, // makes a teleport effects after your teleporting.
+            "addResistanceEffect": true, // adds resistance effect after your teleporting, as "shield".
+            "resistanceEffectDuration": 200, // resistance effect duration in ticks. 200 / 20 is 10 seconds.
+            "warpsLimitations": { // contains pairs of limitations. Defined this groups must have permission \`ess.warp.limit.<group-name>\`.
+              "default": 6, // default group can create 6 warps maximum.
+              "better-than-default": 8 // another group.
+            }
+          }
+          \`\`\`
+
+          ---
+
+          ## home-settings.json
+
+          \`\`\`json
+          {
+            "respawnAtHomeAfterDeath": true, // respawn player at home after death? If value will false player will respawned at spawn or bed point.
+            "respawnHomeSelectStrategy": "Last", // respawn home selecting strategy, if you want player respawn at fist his home, pass the value "First".
+            "playSoundOnTeleport": false, // plays sound after teleporing to home?
+            "showEffectOnTeleport": true, // show a teleport effect after teleporting to home?
+            "homeLimitations": { // like warp limitations, see above. (But permission is \`ess.home.limit.<group-name>\`.)
+              "default": 2
+            }
+          }
+          \`\`\`
+
+          ---
+
+          ## backup-settings.json
+
+          \`\`\`json
+          {
+            "backupEnabled": true, // backup cycle is enabled?
+            "firstLaunchDelay": true, // do delay for first launch of backup cycle?
+            "backupConfigurations": true, // do backup configuration? (config directory).
+            "backupCreationDelay": 300, // backup creation delay in seconds.
+            "backupCompressionLevel": 3, // backup compression level between 1 and 10 (inclusive).
+            "backupDirectoryPath": "backup", // backup directory path, allowed relative and absolute path.
+            "backupDateFormat": "yyyy-MM-dd_HH.mm.ss", // backup date format.
+            "maxBackupFiles": 10, // maximum backup files in out dir, between 1 and 2,147,483,647 (inclusive).
+            "rollingBackupFilesEnabled": true, // enable backup files rolling? (what is it? see this https://en.wikipedia.org/wiki/Log_rotation).
+            "notifyPlayersAboutBackup": false, // Need notification to player with specified permission about backup done?
+            "purgeBackupOutDirectory": true, // Do purge backup directory? (clean up from other files).
+            "purgeExtensionsExceptions": [], // Exceptions of files which specified extension while purging. (Files with passed extensions will not removed.)
+            "purgeNamesExceptions": [] // Exceptions of file names while purging. (Files with passed names will not removed.)
+          }
+          \`\`\`
+
+          ---
+
+          ## kits.json
+
+          \`\`\`json
+          {
+            "kits": [ // <- kits array start this.
+              { // <- kit "data class".
+                "name": "newbies", <- kit name.
+                "delay": 43200, <- kit receiving delay, in seconds, value between -1 and 2,147,483,647.
+                "requiredMinOpLevel": 0, // <- required min op level for receiving kit, if you plays without any permissions providers.
+                "items": [ // <- Items array for this kit.
+                  { // <- Item start this :).
+                    "name": "oak_wood", <- Item index (since 1.13 ID not uses).
+                    "count": 8, <- Count of this item.
+                    "displayName": "&7[&cStarter %player's Item&7]", <- Display name of this item. (%player and %kit as variables available now).
+                    "enchantments": [] // <- Enchantments for this item. I think oak no need to enchant lol.
+                  }, // <- DON'T FORGET THIS, SAINT COMMA!
+                  {
+                    // I think no need comments here.
+                    "name": "cow_spawn_egg", // <- yea, even the egg.
+                    "count": 1,
+                    "displayName": "&7[&c%player's cow&7]",
+                    "enchantments": []
+                  },
+                  {
+                    "name": "diamond_sword",
+                    "count": 1, // <- you can also make it more lol :D.
+                    "displayName": "&7[&dGod's Sword&7]",
+                    "enchantments": [
+                      {
+                        "enchantment": "knockback", // <- Enchantment (see other here https://minecraft.gamepedia.com/Enchanting -> Data values)
+                        "level": 1 // <- Level of enchantment, probably allowed to use any unsafe level (bigger than normal).
+                      }
+                    ]
+                  }
+                ]
+              }
+            ]
+          }
+          \`\`\`
+        `}
+      />
+    </div>
+  )
+}
diff --git a/components/manual/developer/developer.tsx b/components/manual/developer/developer.tsx
new file mode 100644
index 0000000..70ef75f
--- /dev/null
+++ b/components/manual/developer/developer.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';
+
+export class Developer extends React.Component {
+  render = () => (
+    <div>
+      <Markdown
+        source={`
+          # Developer API
+
+          ## Declare the repository
+
+          ### build.gradle file
+
+          \`\`\`groovy
+          /*
+              That's code must be placed after the plugins applying.
+          */
+          String packagesToken = new String(package_public_token.decodeBase64())
+
+          repositories {
+              maven {
+                  name = package_maven_repo_name
+                  /*
+                      "xxx" is a module name in lower case, for example: core.
+                  */
+                  url = uri "$package_maven_repo-xxx"
+                  credentials {
+                      username = package_maven_repo_mail
+                      password = packagesToken
+                  }
+              }
+          }
+          \`\`\`
+
+          ### gradle.properties file
+
+          \`\`\`properties
+          package_public_token=ZDhjMjgyNjlhM2E0ZTQ0MmM2Mjk5ZWI4YmMyZjI0YzNjOTNkMDVkZA==
+          package_maven_repo=https://maven.pkg.github.com/projectessentials/projectessentials
+          package_maven_repo_name=GitHubPackages
+          package_maven_repo_mail=MairwunNx@gmail.com
+          \`\`\`
+
+          ## Get a dependency
+
+          ### build.gradle file
+
+          \`\`\`groovy
+          /*
+              "xxx" is a module name in lower case, like in declared repo.
+              "zzz" is a module version, can be found in repo releases or packages.
+          */
+          implementation("com.projectessentials.xxx:ProjectEssentials-xxx:zzz") {
+              transitive = false
+          }
+          \`\`\`
+
+          **API is simple for understanding if you know how to use your IDE and some lower english knowledge.**
+
+          *If you have questions about working with the API, feel free to ask them in the appropriate repository.*
+        `}
+      />
+    </div>
+  )
+}
diff --git a/components/manual/installation/installation.tsx b/components/manual/installation/installation.tsx
new file mode 100644
index 0000000..d7d6114
--- /dev/null
+++ b/components/manual/installation/installation.tsx
@@ -0,0 +1,41 @@
+import React from "react";
+import Markdown from '@jetbrains/ring-ui/components/markdown/markdown';
+
+export default class Installation extends React.Component {
+  render = () => (
+    <div>
+      <Markdown
+        source={`
+          # Installation
+
+          ## Requirements
+
+          Project Essentials runs on the Java edition of Minecraft, either on your single player/local game or a dedicated server.
+
+          **At now Project Essentials supports only Forge, so you can install only on Forge.**
+
+          ### Basic requirements/recommendations for Forge version:
+
+          * For Minecraft 1.14.4 is Forge 28.2.X.
+          * For Minecraft 1.15.2 is Forge 31.2.X.
+
+          ## Installing
+
+          1. In your game/server root folder, create a "mods" folder if one does not yet exist.
+          2. Download or copy "Project Essentials XXX-[version].jar" into the "mods" folder.
+          3. Don't forget install dependencies (if you install one of not main modules).
+          4. Start your server or client.
+
+          ## Localization?
+
+          **You see it because probably you have this problem.**
+
+          That's function by default disabled in configuration so if you want using Project Essentials modules on server side only "as spigot plugin" then you need configure \`general.properties\` in \`.\\config\\ProjectEssentials\`. You can fix it by two ways:
+
+          1. Open the \`general.properties\` file via any text editor (*I recommend VS Code*), find the \`v2-localization-enabled\` property and change his value to \`true\`, save the file and reload the server.
+          2. In-game way: (*you need operator rights or * permission*), execute the command \`/configure-essentials v2-localization-enabled set true\`, **voila**!
+        `}
+      />
+    </div>
+  )
+}
diff --git a/components/manual/manual.css b/components/manual/manual.css
new file mode 100644
index 0000000..c63579f
--- /dev/null
+++ b/components/manual/manual.css
@@ -0,0 +1,27 @@
+.tab-bar {
+  flex-wrap: wrap;
+}
+
+.tab-bar > div:nth-child(1) {
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+.manual-base-container {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.documentation-tabs-container {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  max-width: 950px;
+  margin: 25px;
+  padding: 40px;
+  background-color: #fff;
+  box-sizing: border-box;
+  width: 100%;
+}
diff --git a/components/manual/manual.tsx b/components/manual/manual.tsx
new file mode 100644
index 0000000..bc3a4f3
--- /dev/null
+++ b/components/manual/manual.tsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+import './manual.css'
+
+import {SmartTabs, Tab} from '@jetbrains/ring-ui/components/tabs/tabs';
+import {Developer} from "./developer/developer";
+import Installation from "./installation/installation";
+import {Commands} from "./commands/commands";
+import {Permissions} from "./permissions/permissions";
+import Configuration from "./configuration/configuration";
+
+export default class Manual extends React.Component {
+  state = {selected: 'installation'};
+
+  render = () => (
+    <div className="manual-base-container">
+      <div className="documentation-tabs-container">
+        <SmartTabs
+          className="tab-bar"
+          selected={this.state.selected}
+          onSelect={selected => this.setState({selected})}
+        >
+          <Tab id="installation" title="Installation"><Installation/></Tab>
+          <Tab id="commands" title="Commands"><Commands/></Tab>
+          <Tab id="permissions" title="Permissions"><Permissions/></Tab>
+          <Tab id="configurations" title="Configurations"><Configuration/></Tab>
+          <Tab id="developer" title="Developer API"><Developer/></Tab>
+        </SmartTabs>
+      </div>
+    </div>
+  )
+}
diff --git a/components/manual/permissions/permissions.css b/components/manual/permissions/permissions.css
new file mode 100644
index 0000000..464ce63
--- /dev/null
+++ b/components/manual/permissions/permissions.css
@@ -0,0 +1,17 @@
+.table-container {
+  margin-top: 20px;
+  overflow: auto;
+}
+
+.inline-code {
+  margin: 5px 2px;
+  padding-right: 0 !important;
+}
+
+.inline-code > code:nth-child(1) {
+  padding: 5px 10px 5px !important;
+}
+
+.permissions-container {
+  margin-top: 25px;
+}
diff --git a/components/manual/permissions/permissions.json b/components/manual/permissions/permissions.json
new file mode 100644
index 0000000..5dc0580
--- /dev/null
+++ b/components/manual/permissions/permissions.json
@@ -0,0 +1,24 @@
+[
+  { "permission": "ess.back.ondeath / 3", "description": "Allows to teleport to death location via back command." },
+  { "permission": "ess.notification.support / 4", "description": "Allows to see project essentials notification." },
+  { "permission": "ess.vanish.auto / 4", "description": "Allows enable vanish mode automatically on join." },
+  { "permission": "ess.fly.auto / 3", "description": "Allows enable fly mode automatically on join." },
+  { "permission": "ess.god.auto / 3", "description": "Allows enable god mode automatically on join." },
+  { "permission": "ess.afk.kick.bypass / 3", "description": "Bypass for kicking for long time afk." },
+  { "permission": "ess.kit.bypass / 4", "description": "Bypass for kit cooldown." },
+  { "permission": "ess.inventory.edit / 4", "description": "Allows to edit player inventory in invsee command." },
+  { "permission": "ess.backup.notify / 4", "description": "Allows to notify player about backup done." },
+  { "permission": "ess.home.limit.except / 4", "description": "Allows to sets LITERALLY 2,147,483,647 homes." },
+  { "permission": "ess.home.limit.<group-name> / ~", "description": "Allows to sets specified count of homes for this group." },
+  { "permission": "ess.warp.limit.except / 4", "description": "Allows to sets LITERALLY 2,147,483,647 warps." },
+  { "permission": "ess.warp.remove.other / 4", "description": "Allows to remove warp created by other player." },
+  { "permission": "ess.warp.limit.<group-name> / ~", "description": "Allows to sets specified count of warps for this group." },
+  { "permission": "native.event.world.<dim-registry-name>.block.<block-registry-name>.break / ~", "description": "Allows to break specified block in world." },
+  { "permission": "native.event.world.<dim-registry-name>.block.<block-registry-name>.place / ~", "description": "Allows to break specified place in world." },
+  { "permission": "native.event.world.block.break / ~", "description": "That simplified permission of above, works if useSimplifiedWorldPermissions setting is enabled." },
+  { "permission": "native.event.world.block.place / ~", "description": "That simplified permission of above, works if useSimplifiedWorldPermissions setting is enabled." },
+  { "permission": "native.event.world.<dim-registry-name>.block.farmland.trample / ~", "description": "Allows to trample farmland in specified dimension." },
+  { "permission": "native.event.world.block.farmland.trample / ~", "description": "That simplified permission of above, works if useSimplifiedWorldPermissions setting is enabled." },
+  { "permission": "native.event.world.<dim-registry-name>.item.<item-registry-name>.use / ~", "description": "Allows to use specified item in specified dimenstion." },
+  { "permission": "native.event.world.item.use / ~", "description": "That simplified permission of above, works if useSimplifiedWorldPermissions setting is enabled." }
+]
diff --git a/components/manual/permissions/permissions.tsx b/components/manual/permissions/permissions.tsx
new file mode 100644
index 0000000..113a5bd
--- /dev/null
+++ b/components/manual/permissions/permissions.tsx
@@ -0,0 +1,118 @@
+import React from "react"
+import Markdown from '@jetbrains/ring-ui/components/markdown/markdown'
+import {Col, Grid, Row} from '@jetbrains/ring-ui/components/grid/grid'
+import Pager from '@jetbrains/ring-ui/components/pager/pager'
+import Code from '@jetbrains/ring-ui/components/code/code'
+import Table from '@jetbrains/ring-ui/components/table/table'
+import Selection from '@jetbrains/ring-ui/components/table/selection'
+const mock = require('./permissions.json')
+
+import './permissions.css'
+
+export class Permissions extends React.Component {
+  state = {
+    data: [],
+    selection: new Selection(),
+    caption: undefined,
+    selectable: false,
+    draggable: false,
+    page: 1,
+    pageSize: 11,
+    total: mock.length,
+    sortKey: 'permission',
+    sortOrder: true
+  }
+
+  componentDidMount = () => this.loadPage()
+
+  componentDidUpdate(prevProps, prevState) {
+    const {page, sortKey, sortOrder} = this.state
+    if (
+      page !== prevState.page ||
+      sortKey !== prevState.sortKey ||
+      sortOrder !== prevState.sortOrder
+    ) this.loadPage()
+  }
+
+  columns = [
+    {
+      id: 'permission', title: 'Permission',
+      getValue: ({permission}) => <Code className="inline-code" code={permission}/>
+    },
+    {id: 'description', title: 'Description'}
+  ]
+
+  onPageChange = page => this.setState({page})
+
+  loadPage = () => {
+    const {page, pageSize, sortKey, sortOrder} = this.state
+    let data = [...mock]
+    data.sort((a, b) => a[sortKey].localeCompare(b[sortKey]) * (sortOrder ? 1 : -1))
+    data = data.slice((page - 1) * pageSize, (page - 1) * pageSize + pageSize)
+    const selection = new Selection({data})
+    this.setState({data, selection})
+  }
+
+  render = () => {
+    const {
+      data, caption, selectable, draggable, page, pageSize, total, selection, sortKey, sortOrder
+    } = this.state;
+
+    return (
+      <div>
+        <Markdown
+          source={`
+            # Permissions
+
+            ## Syntax introduction
+
+            As you see table below includes some syntax for describing permission nodes.
+
+            ### Some definitions for understanding that:
+
+            1. \`/ X\` - required callback operator level.
+            2. \`/ ~\` - operator level can't be related to permission node.
+            3. \`<>\` - argument can have a any value.
+
+            ### Still feeling confusing?
+
+            1. Open the issue in related module repository.
+            2. Ask about it in telegram or discord chat.
+
+            ## Table of permissions
+          `}
+        />
+        <div className="table-container">
+          <Table
+            data={data}
+            columns={this.columns}
+            selection={selection}
+            onSelect={newSelection => this.setState({selection: newSelection})}
+            onReorder={({data: newData}) => this.setState({data: newData})}
+            loading={false}
+            onSort={undefined}
+            sortKey={sortKey}
+            sortOrder={sortOrder}
+            caption={caption}
+            selectable={selectable}
+            draggable={draggable}
+            autofocus
+          />
+          <Grid>
+            <Row>
+              <Col>
+                <Pager
+                  total={total}
+                  pageSize={pageSize}
+                  currentPage={page}
+                  disablePageSizeSelector
+                  onPageChange={this.onPageChange}
+                />
+              </Col>
+            </Row>
+          </Grid>
+        </div>
+      </div>
+    );
+  }
+}
diff --git a/components/top/top.css b/components/top/top.css
new file mode 100644
index 0000000..bc8ad7c
--- /dev/null
+++ b/components/top/top.css
@@ -0,0 +1,18 @@
+body {
+  margin: 0;
+}
+
+.top {
+  overflow: auto;
+}
+
+.logo {
+  height: 36px;
+  width: 36px;
+  vertical-align: middle;
+  padding-bottom: 4px;
+}
+
+.github-button {
+  padding-bottom: 59px;
+}
diff --git a/components/top/top.tsx b/components/top/top.tsx
new file mode 100644
index 0000000..cb20619
--- /dev/null
+++ b/components/top/top.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import Link from '@jetbrains/ring-ui/components/link/link'
+import Tray from '@jetbrains/ring-ui/components/header/tray'
+import TrayIcon from '@jetbrains/ring-ui/components/header/tray-icon'
+import Button from '@jetbrains/ring-ui/components/button/button'
+import Header from '@jetbrains/ring-ui/components/header/header'
+import GitIcon from '@jetbrains/icons/git.svg'
+import Theme from '@jetbrains/ring-ui/components/global/theme';
+
+import EssLogo from '../../logo.svg'
+import './top.css'
+
+export default class Top extends React.Component {
+  render = () => (
+    <Header className="top" theme={Theme.LIGHT}>
+      <a title="Project Essentials" href="/">
+        <img
+          alt={'A red pen, is Project Essentials logo'}
+          src={EssLogo}
+          className="logo"
+        />
+      </a>
+      <Link href={"/download"}>{'Download'}</Link>
+      <Link href={"/manual"}>{'Manual'}</Link>
+      <Tray>
+        <TrayIcon
+          className="github-button"
+          href="https://github.com/ProjectEssentials"
+          primary
+          title="GitHub"
+          icon={GitIcon}
+        />
+        <Button
+          href="https://gist.github.com/MairwunNx/fda95062618db6880ef8ee06e1bba54f"
+          title="Support"
+          button-primary="true"
+          key={'button-primary'}
+          data-test={'button-primary'}
+          {...{['primary']: true}}
+        >{'Support'}</Button>
+      </Tray>
+    </Header>
+  )
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..07b8683
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <base href="./">
+  <meta
+    name="viewport"
+    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+  >
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
+  <link
+    href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap"
+    rel="stylesheet"
+  >
+  <link
+    href="${require('!!file-loader?name=favicon.ico!@jetbrains/logos/jetbrains/favicon.ico')}"
+    rel="shortcut icon"
+    type="image/x-icon"
+  />
+  <title>Project Essentials</title>
+</head>
+
+<body class="app-root">
+<div id="root"></div>
+</body>
+</html>
diff --git a/index.tsx b/index.tsx
new file mode 100644
index 0000000..85f78cd
--- /dev/null
+++ b/index.tsx
@@ -0,0 +1,11 @@
+import React from "react"
+import ReactDOM from 'react-dom'
+import * as serviceWorker from './serviceWorker'
+import App from './app'
+
+ReactDOM.render(
+  <React.StrictMode><App/></React.StrictMode>,
+  document.getElementById('root')
+)
+
+serviceWorker.unregister()
diff --git a/logo.svg b/logo.svg
new file mode 100644
index 0000000..802c5b1
--- /dev/null
+++ b/logo.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96pt" height="96pt"
+     viewBox="0 0 96 96" version="1.1">
+  <g id="surface1">
+    <path style=" stroke:none;fill-rule:nonzero;fill:#F0625F;fill-opacity:1;"
+          d="M 88 8.125 C 80 12.125 68.046875 24.1875 65.625 26.875 L 68 36.125 L 64 28 C 63.125 28.84375 51.6875 41.078125 48 48.125 L 52 56.125 L 46.125 50.25 C 46.125 50.25 32 64 40 72 C 40 72 52 63.96875 64 48.125 C 72.703125 36.625 80 24 80 24 C 80 24 76 40 64 56 C 58.625 63.15625 44 76 44 76 C 56 88 70.125 64.25 70.125 64.25 L 64 60.125 L 72 60.125 C 72 60.125 78.8125 51.75 80 48 L 72 48.125 L 81 45 C 81.09375 44.71875 88 24.125 88 8.125 Z M 44 76 L 40 72 C 40 72 28 80 8 84 L 12 88 C 32 84 44 76 44 76 Z "/>
+  </g>
+</svg>
diff --git a/react-app-env.d.ts b/react-app-env.d.ts
new file mode 100644
index 0000000..2d04829
--- /dev/null
+++ b/react-app-env.d.ts
@@ -0,0 +1,66 @@
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+
+declare namespace NodeJS {
+  interface ProcessEnv {
+    readonly NODE_ENV: 'development' | 'production' | 'test'
+    readonly PUBLIC_URL: string
+  }
+}
+
+declare module '*.bmp' {
+  const src: string
+  export default src
+}
+
+declare module '*.gif' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpg' {
+  const src: string
+  export default src
+}
+
+declare module '*.jpeg' {
+  const src: string
+  export default src
+}
+
+declare module '*.png' {
+  const src: string
+  export default src
+}
+
+declare module '*.webp' {
+    const src: string
+    export default src
+}
+
+declare module '*.svg' {
+  import * as React from 'react'
+
+  export const ReactComponent: React.FunctionComponent<React.SVGProps<
+    SVGSVGElement
+  > & { title?: string }>
+
+  const src: string
+  export default src
+}
+
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string }
+  export default classes
+}
diff --git a/serviceWorker.ts b/serviceWorker.ts
new file mode 100644
index 0000000..fe7eb10
--- /dev/null
+++ b/serviceWorker.ts
@@ -0,0 +1,88 @@
+const isLocalhost = Boolean(
+  window.location.hostname === 'localhost' ||
+  window.location.hostname === '[::1]' ||
+  window.location.hostname.match(
+    /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+  )
+)
+
+type Config = {
+  onSuccess?: (registration: ServiceWorkerRegistration) => void
+  onUpdate?: (registration: ServiceWorkerRegistration) => void
+}
+
+export function register(config?: Config) {
+  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
+    const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href)
+    if (publicUrl.origin !== window.location.origin) return
+
+    window.addEventListener('load', () => {
+      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`
+
+      if (isLocalhost) {
+        checkValidServiceWorker(swUrl, config)
+        navigator.serviceWorker.ready.then(() => {
+          console.log(
+            'This web app is being served cache-first by a service ' +
+            'worker. To learn more, visit https://bit.ly/CRA-PWA'
+          )
+        })
+      } else registerValidSW(swUrl, config)
+    })
+  }
+}
+
+function registerValidSW(swUrl: string, config?: Config) {
+  navigator.serviceWorker
+    .register(swUrl)
+    .then(registration => {
+      registration.onupdatefound = () => {
+        const installingWorker = registration.installing
+        if (installingWorker == null) return
+        installingWorker.onstatechange = () => {
+          if (installingWorker.state === 'installed') {
+            if (navigator.serviceWorker.controller) {
+              console.log(
+                'New content is available and will be used when all ' +
+                'tabs for this page are closed. See https://bit.ly/CRA-PWA.'
+              )
+              if (config && config.onUpdate) config.onUpdate(registration)
+            } else {
+              console.log('Content is cached for offline use.')
+              if (config && config.onSuccess) config.onSuccess(registration)
+            }
+          }
+        }
+      }
+    }).catch(error => {
+    console.error('Error during service worker registration:', error)
+  })
+}
+
+function checkValidServiceWorker(swUrl: string, config?: Config) {
+  fetch(swUrl, {headers: {'Service-Worker': 'script'}}).then(response => {
+    const contentType = response.headers.get('content-type')
+    if (
+      response.status === 404 ||
+      (contentType != null && contentType.indexOf('javascript') === -1)
+    ) {
+      navigator.serviceWorker.ready.then(registration => {
+        registration.unregister().then(() => {
+          window.location.reload()
+        })
+      })
+    } else registerValidSW(swUrl, config)
+  }).catch(() => {
+    console.log('No internet connection found. App is running in offline mode.')
+  })
+}
+
+export function unregister() {
+  if ('serviceWorker' in navigator) {
+    navigator.serviceWorker.ready.then(registration => {
+      registration.unregister()
+    }).catch(error => {
+      console.error(error.message)
+    })
+  }
+}
diff --git a/structs/pair.ts b/structs/pair.ts
new file mode 100644
index 0000000..da04942
--- /dev/null
+++ b/structs/pair.ts
@@ -0,0 +1,59 @@
+export namespace Struct {
+  export interface Pair<K, V> {
+    first: K
+    second: V
+  }
+
+  export class ImmutablePair<K, V> implements Pair<K, V> {
+    private readonly _first: K
+    private readonly _second: V
+
+    public constructor(first: K, second: V) {
+      this._first = first
+      this._second = second
+    }
+
+    public get second() {
+      return this._second
+    }
+
+    public get first() {
+      return this._first
+    }
+
+    public static of<K, V>(first: K, second: V) {
+      return new ImmutablePair(first, second)
+    }
+  }
+
+  export class MutablePair<K, V> implements Pair<K, V> {
+    private _first: K
+    private _second: V
+
+    public constructor(first: K, second: V) {
+      this._first = first
+      this._second = second
+    }
+
+    get first() {
+      return this._first
+    }
+
+    set first(value: K) {
+      this._first = value
+    }
+
+    get second() {
+      return this._second
+    }
+
+    set second(value: V) {
+      this._second = value
+    }
+
+    public static of<K, V>(first: K, second: V) {
+      return new MutablePair(first, second)
+    }
+  }
+}
+