`;
- }
- return tooltip;
- }
-
- onMouseEnter() {
- this._tooltip.style.display = 'block';
- }
-
- onMouseLeave() {
- this._tooltip.style.display = 'none';
- }
-}
diff --git a/files/chapter_9/script.js b/files/chapter_9/script.js
deleted file mode 100644
index fae958b..0000000
--- a/files/chapter_9/script.js
+++ /dev/null
@@ -1,130 +0,0 @@
-function getCurrHealthPercent(current, max) {
- return (current * 100) / max;
-}
-
-document.addEventListener("keydown", (e) => {
- //Escape Key
- if (e.keyCode === 27) {
- engine.trigger("pause_toggle");
- }
-});
-
-engine.on("pause_toggle", () => {
- PlayerModel.isPaused = !PlayerModel.isPaused;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (PlayerModel.activePauseMenu === "settings" && PlayerModel.isPaused) {
- attachSliderListeners();
- }
-});
-
-function changeScreen(event) {
- if (event.target.classList.contains("tab")) {
- engine.trigger("change_menu", event.target.textContent.toLowerCase());
- }
-}
-
-engine.on("change_menu", (menu) => {
- PlayerModel.activePauseMenu = menu;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (menu === "settings") {
- attachSliderListeners();
- }
-});
-
-function attachSliderListeners() {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
-}
-
-let offsetY, startX, startY, limitX, limitY;
-
-function mapDragStart(event) {
- const mapWrapper = event.currentTarget;
- const map = event.currentTarget.firstChild;
-
- offsetY = mapWrapper.getBoundingClientRect().y;
-
- limitX =
- map.getBoundingClientRect().width -
- mapWrapper.getBoundingClientRect().width;
- limitY =
- map.getBoundingClientRect().height -
- mapWrapper.getBoundingClientRect().height;
-
- startX = event.clientX;
- startY = event.clientY - offsetY;
-
- document.addEventListener("mousemove", mapDrag);
- document.addEventListener("mouseup", mapDragEnd);
-}
-
-function mapDrag(event) {
- MapModel.x = clamp(MapModel.x + event.clientX - startX, -limitX, 0);
- MapModel.y = clamp(
- MapModel.y + event.clientY - startY - offsetY,
- -limitY,
- 0
- );
-
- startX = event.clientX;
- startY = event.clientY - offsetY;
-
- engine.updateWholeModel(MapModel);
- engine.synchronizeModels();
-}
-
-function mapDragEnd() {
- document.removeEventListener("mousemove", mapDrag);
- document.removeEventListener("mouseup", mapDragEnd);
-}
-
-function clamp(value, min, max) {
- return Math.min(Math.max(min, value), max);
-}
-
-function zoom(event) {
- const mapWrapper = event.currentTarget;
- const map = event.currentTarget.firstChild;
-
- offsetY = mapWrapper.getBoundingClientRect().y;
-
- const initialScale = MapModel.zoom;
-
- MapModel.zoom = clamp(MapModel.zoom + event.deltaY * -0.01, 1, 3);
-
- limitX =
- map.getBoundingClientRect().width * (MapModel.zoom / initialScale) -
- mapWrapper.getBoundingClientRect().width;
- limitY =
- map.getBoundingClientRect().height * (MapModel.zoom / initialScale) -
- mapWrapper.getBoundingClientRect().height;
-
- MapModel.x = clamp(
- MapModel.x + event.clientX * (MapModel.zoom - initialScale) * -1,
- -limitX,
- 0
- );
- MapModel.y = clamp(
- MapModel.y + (event.clientY - offsetY) * (MapModel.zoom - initialScale) * -1,
- -limitY,
- 0
- );
-
- engine.updateWholeModel(MapModel);
- engine.synchronizeModels();
-}
diff --git a/files/chapter_9/style.css b/files/chapter_9/style.css
deleted file mode 100644
index ebee52f..0000000
--- a/files/chapter_9/style.css
+++ /dev/null
@@ -1,495 +0,0 @@
-@font-face {
- font-family: 'Jost*';
- src: url(./assets/Jost-400-Book.ttf);
-}
-
-:root {
- --primary: #29c379;
- --secondary: #585453;
- --inactive: #313131;
- --danger: #f85b4a;
- --warning: #d7ba45;
- --scroll-width: 5px;
-}
-
-body {
- font-size: 2.5vh;
- color: white;
- background-color: black;
- font-family: 'Jost*';
- height: 100vh;
- margin: 0;
-}
-
-.hud {
- width: 100vw;
- height: 100vh;
- position: relative;
-}
-
-.button {
- padding: 1vh 2vh;
- border: 0.3vh solid #313131;
- color: var(--secondary);
- margin: 0 1vh;
-}
-
-.button:hover {
- border-color: #524f4e;
- background-color: var(--secondary);
- color: white;
-}
-
-.active {
- border-color: #29c379;
- background-color: var(--primary);
- color: white;
-}
-
-.health-bar-container {
- position: absolute;
- top: 2vh;
- left: 5vh;
- display: flex;
- align-items: center;
-}
-
-.health-bar {
- width: 45vh;
- height: 1vh;
- background-color: var(--secondary);
- margin: 0 2vh;
-}
-
-.health-bar-fill {
- height: 100%;
- width: 100%;
- background-color: var(--primary);
- transition: width 0.6s;
-}
-
-.health-danger {
- background-color: var(--danger);
-}
-
-.health-warning {
- background-color: var(--warning);
-}
-
-.slider {
- font-size: 0.8rem;
-}
-
-.rangeslider {
- width: 45vh;
- height: 5px;
- position: relative;
-}
-
-.rangeslider:hover {
- background-color: var(--secondary);
-}
-
-.rangeslider-handle {
- width: 15px;
- height: 15px;
- top: -5px;
- background-color: white;
- position: relative;
- transform: rotate(45deg);
-}
-
-.rangeslider-handle-fill {
- width: 45vh;
- height: 5px;
- background-color: var(--primary);
- transform-origin: left;
- position: absolute;
-}
-
-.flex-space-between {
- display: flex;
- width: 45vh;
- justify-content: space-between;
- align-items: center;
-}
-
-.option {
- padding: 1px 4px;
-}
-
-.checkbox {
- width: 30px;
- height: 30px;
- background-image: url(./assets/check-empty.png);
- background-size: contain;
-}
-
-.checked {
- background-image: url(./assets/check-mark.png);
-}
-
-.label {
- font-size: 0.8rem;
-}
-
-.minimap-container {
- width: 25vh;
- height: 25vh;
- border: 5px solid white;
- display: flex;
- align-items: center;
- justify-content: center;
- position: absolute;
- bottom: 3vh;
- left: 3vh;
- overflow: hidden;
-}
-
-.minimap {
- position: absolute;
- top: 0;
- left: 0;
- width: 200%;
- height: 200%;
- background-size: cover;
- transform: translateX(25%) translateY(25%);
-}
-
-.marker {
- height: 15px;
- width: 10px;
- border-left: 5px solid transparent;
- border-right: 5px solid transparent;
- border-bottom: 15px solid white;
- z-index: 2;
-}
-
-.map-label {
- position: absolute;
- bottom: 0;
- left: 0;
- font-size: 0.9rem;
-}
-
-.clock {
- font-size: 1.5rem;
- position: absolute;
- bottom: 5vh;
- right: 5vh;
-}
-
-.pause-menu {
- width: 100vw;
- height: 100vh;
- background-color: black;
- overflow-y: scroll;
- position: absolute;
- display: flex;
- align-items: center;
- flex-direction: column;
-}
-
-.settings-menu {
- width: 50vw;
- padding: 20px;
-}
-
-.settings-heading {
- padding-bottom: 10px;
- font-size: 1.8rem;
- border-bottom: 1px solid rgba(255, 255, 255, 0.2);
- margin-bottom: 30px;
-}
-
-.settings-option-row {
- display: flex;
- justify-content: space-between;
- margin-bottom: 10px;
- align-items: center;
-}
-
-.settings-option-column {
- display: flex;
- flex-direction: column;
- margin-bottom: 10px;
-}
-
-.scrollable-container-component {
- height: 100px;
-}
-
-.guic-dropdown-selected {
- display: flex;
- justify-content: center;
- background-color: #313131;
-}
-
-.guic-dropdown-selected:hover {
- border: 0;
-}
-
-.guic-dropdown-options-container {
- border: 0;
- position: absolute;
- top: 100%;
- border-top: rgba(255, 255, 255, 0.7);
- z-index: 2;
-}
-
-.dropdown {
- position: relative;
-}
-
-dropdown-option {
- display: flex;
- justify-content: center;
- background-color: black;
-}
-
-dropdown-option:hover {
- background-color: #313131;
-}
-
-.guic-dropdown-options {
- background-color: transparent;
-}
-
-.guic-dropdown-selected-option {
- border-color: transparent;
- background-color: #313131;
-}
-
-.guic-dropdown-selected-option:hover {
- border-color: rgba(255, 255, 255, 0.7);
-}
-
-.guic-dropdown-option-active {
- background-color: #313131;
-}
-
-.checkbox-component {
- width: 150px;
- display: flex;
- justify-content: center;
-}
-
-.guic-checkbox-wrapper {
- margin-top: 0;
-}
-
-.guic-checkbox-background {
- background-image: url(./assets/check-empty.png);
- background-size: contain;
- border: 0;
-}
-
-.guic-check-mark {
- background-image: url(./assets/check-mark.png);
- background-size: contain;
- width: 30px;
- height: 30px;
- top: 0;
- left: 0;
- background-color: transparent;
-}
-
-.guic-checkbox-wrapper-inner {
- background-color: transparent;
-}
-
-.guic-checkbox-label {
- display: none;
-}
-
-.guic-horizontal-rangeslider-wrapper {
- width: 100%;
- margin: 0;
-}
-
-.guic-horizontal-rangeslider {
- background-color: rgba(255, 255, 255, 0.1);
-}
-
-.guic-horizontal-rangeslider-wrapper:hover .guic-horizontal-rangeslider {
- background-color: rgba(255, 255, 255, 0.2);
-}
-
-.guic-horizontal-rangeslider-handle {
- border-radius: 0;
- transform: translateX(-50%) rotate(45deg);
- background-color: white;
-}
-
-.guic-horizontal-rangeslider-bar {
- background-color: var(--primary);
-}
-
-.volume-value {
- width: 150px;
- display: flex;
- justify-content: center;
-}
-
-.difficulty-value {
- width: 150px;
- display: flex;
- justify-content: center;
-}
-
-.tabs {
- width: 50vw;
- display: flex;
-}
-
-.tab {
- padding: 10px 20px;
-}
-
-.active-tab {
- border-bottom: 3px solid #29c379;
-}
-
-.inventory {
- width: 65vw;
- display: flex;
- padding-top: 20px;
- align-items: center;
- justify-content: center;
-}
-
-.inventory-grid {
- width: 500px;
- display: flex;
- flex-wrap: wrap;
- margin: -5px;
- height: 586px;
-}
-
-.inventory-grid-cell {
- width: 80px;
- height: 80px;
- margin: 5px;
- border: 1px solid rgba(255, 255, 255, 0.3);
-}
-
-.inventory-item {
- width: 100%;
- height: 100%;
- background-size: contain;
- background-repeat: no-repeat;
- border: 3px solid transparent;
-}
-
-.selected-item {
- border-color: #29c379;
-}
-
-.inventory-details {
- width: 40%;
- display: flex;
- justify-content: center;
- flex-direction: column;
- height: 80vh;
-}
-
-.inventory-details-wrapper {
- padding: 20px;
- width: 100%;
- background-color: var(--inactive);
-}
-
-.inventory-row {
- display: flex;
- padding-bottom: 20px;
- border-bottom: 1px solid rgba(255, 255, 255, 0.5);
- margin-bottom: 10px;
-}
-
-.inventory-details-image {
- width: 55px;
- height: 55px;
- background-size: contain;
- background-repeat: no-repeat;
- margin-right: 20px;
- border: 2px solid rgba(255, 255, 255, 0.5);
-}
-
-.inventory-details-title {
- text-transform: uppercase;
-}
-
-.inventory-details-count {
- color: rgba(255, 255, 255, 0.5);
- font-size: 0.9rem;
-}
-
-.inventory-details-description {
- min-height: 200px;
- font-size: 0.9rem;
- color: rgba(255, 255, 255, 0.5);
-}
-
-.map-tile {
- width: 100%;
- padding-bottom: 75%;
- background-size: contain;
- background-repeat: no-repeat;
- coh-rendering-option: aa-off snap-off;
-}
-
-.map {
- width: 100vw;
- height: 93%;
- overflow: hidden;
-}
-
-.map-tile-grid {
- width: 100%;
- margin: 0;
- padding: 0;
- transform-origin: left top;
- position: relative;
- display: flex;
-}
-
-.guic-row {
- margin: 0;
-}
-
-.guic-automatic-grid-cell {
- height: auto;
-}
-
-.point-of-interest-container {
- position: absolute;
-}
-
-.point-of-interest {
- width: 45px;
- height: 45px;
- position: absolute;
- background-repeat: no-repeat;
- background-size: contain;
-}
-
-.tooltip {
- position: absolute;
- left: 100%;
- top: 50%;
- background-color: rgba(0, 0, 0, 0.7);
- min-width: 200px;
- min-height: 100px;
- padding: 5px;
- display: none;
-}
-
-.tooltip-title {
- font-size: 0.8rem;
- margin-bottom: 10px;
-}
-
-.tooltip-description {
- font-size: 0.7rem;
- color: rgba(255, 255, 255, 0.7);
-}
diff --git a/guide/.editorconfig b/guide/.editorconfig
deleted file mode 100644
index dad6b58..0000000
--- a/guide/.editorconfig
+++ /dev/null
@@ -1,11 +0,0 @@
-# editorconfig.org
-
-root = true
-
-[*]
-indent_style = space
-indent_size = 2
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
\ No newline at end of file
diff --git a/guide/.eslintignore b/guide/.eslintignore
deleted file mode 100644
index 57d0057..0000000
--- a/guide/.eslintignore
+++ /dev/null
@@ -1,4 +0,0 @@
-assets/js/index.js
-assets/js/katex.js
-assets/js/vendor
-node_modules
\ No newline at end of file
diff --git a/guide/.eslintrc.json b/guide/.eslintrc.json
deleted file mode 100644
index c926994..0000000
--- a/guide/.eslintrc.json
+++ /dev/null
@@ -1,31 +0,0 @@
-{
- "env": {
- "browser": true,
- "commonjs": true,
- "es6": true,
- "node": true
- },
- "extends": "eslint:recommended",
- "globals": {
- "Atomics": "readonly",
- "SharedArrayBuffer": "readonly"
- },
- "parserOptions": {
- "ecmaVersion": 2018,
- "sourceType": "module"
- },
- "rules": {
- "no-console": 0,
- "quotes": ["error", "single"],
- "comma-dangle": [
- "error",
- {
- "arrays": "always-multiline",
- "objects": "always-multiline",
- "imports": "always-multiline",
- "exports": "always-multiline",
- "functions": "ignore"
- }
- ]
- }
-}
\ No newline at end of file
diff --git a/guide/.gitignore b/guide/.gitignore
deleted file mode 100644
index 8f187f0..0000000
--- a/guide/.gitignore
+++ /dev/null
@@ -1,6 +0,0 @@
-node_modules
-public
-resources
-# Local Netlify folder
-.netlify
-TODO
\ No newline at end of file
diff --git a/guide/.markdownlint.json b/guide/.markdownlint.json
deleted file mode 100644
index a8b885d..0000000
--- a/guide/.markdownlint.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
- "comment": "Hyas rules",
-
- "default": true,
- "line_length": false,
- "no-inline-html": false,
- "no-trailing-punctuation": false,
- "no-duplicate-heading": false,
- "no-bare-urls": false
-}
\ No newline at end of file
diff --git a/guide/.markdownlintignore b/guide/.markdownlintignore
deleted file mode 100644
index a0380d6..0000000
--- a/guide/.markdownlintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-node_modules
-CHANGELOG.md
-README.md
\ No newline at end of file
diff --git a/guide/.stylelintignore b/guide/.stylelintignore
deleted file mode 100644
index 3972095..0000000
--- a/guide/.stylelintignore
+++ /dev/null
@@ -1,3 +0,0 @@
-assets/scss/components/_syntax.scss
-assets/scss/vendor
-node_modules
\ No newline at end of file
diff --git a/guide/.stylelintrc.json b/guide/.stylelintrc.json
deleted file mode 100644
index 1490802..0000000
--- a/guide/.stylelintrc.json
+++ /dev/null
@@ -1,34 +0,0 @@
-{
- "extends": "stylelint-config-standard",
- "rules": {
- "no-empty-source": null,
- "string-quotes": "double",
- "at-rule-no-unknown": [
- true,
- {
- "ignoreAtRules": [
- "extend",
- "at-root",
- "debug",
- "warn",
- "error",
- "if",
- "else",
- "for",
- "each",
- "while",
- "mixin",
- "include",
- "content",
- "return",
- "function",
- "tailwind",
- "apply",
- "responsive",
- "variants",
- "screen"
- ]
- }
- ]
- }
-}
\ No newline at end of file
diff --git a/guide/README.md b/guide/README.md
deleted file mode 100644
index 9fe0666..0000000
--- a/guide/README.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# User Guide Theme
-This user guide uses the [doks theme](https://getdoks.org/)
-
-## Get started
-
-### Install dependencies
-
-```bash
- npm install
-```
-
-### Start development server
-
-```bash
- npm run start
-```
-
-### Build for production
-```bash
- npm run build
-```
-
-### Other commands
-
-Doks comes with [commands](https://getdoks.org/docs/prologue/commands/) for common tasks.
-
-
-## Content
-
-### Edit chapters
-
-To edit the existing chapters simply edit the `.md` files inside the `content` folder
-
-### Add Chapters
-
-To add a new chapter run the following command
-
-```bash
- npm run create [path] [flags]
-```
-Where path will be `chapters/{{name-of-chapter}}/index.md`
-
-To publish your chapter change `draft` to `true`
-
-To add your new chapter to the side menu you must add the following to the page params
-```
-menu:
- chapters:
- parent: "chapters"
-```
-
-The items in the menu are ordered by name, if your chapter is 10 or greater you need to add weight to the params
-
-```
-menu:
- chapters:
- parent: "chapters"
- weight: 0
-```
-
-### Adding images
-
-To add images you can use the img shortcode. The image should be located in the folder of the chapter
-
-```
-{{< img src="" alt="" caption="" class="border-0" >}}
-```
-
-### Adding a new chapter to the main page
-
-To add a new chapter to the main page simply edit `/layouts/index.html`
-
-
-## Documentation
-- [Hugo](https://gohugo.io/documentation/)
-- [Doks](https://getdoks.org/)
-
-## Communities
-- [Hugo Forums](https://discourse.gohugo.io/)
-- [Doks Discussions](https://github.com/h-enk/doks/discussions)
diff --git a/guide/assets/js/alert.js b/guide/assets/js/alert.js
deleted file mode 100644
index bd4ee3d..0000000
--- a/guide/assets/js/alert.js
+++ /dev/null
@@ -1,17 +0,0 @@
-var announcement = document.getElementById('announcement');
-
-if (announcement !== null) {
-
- if (localStorage.getItem('announcement') === null ) {
-
- announcement.classList.remove('d-none');
-
- }
-
- announcement.addEventListener('closed.bs.alert', () => {
-
- localStorage.setItem('announcement', 'closed');
-
- });
-
-}
diff --git a/guide/assets/js/app.js b/guide/assets/js/app.js
deleted file mode 100644
index e69de29..0000000
diff --git a/guide/assets/js/bootstrap.js b/guide/assets/js/bootstrap.js
deleted file mode 100644
index e1f1914..0000000
--- a/guide/assets/js/bootstrap.js
+++ /dev/null
@@ -1,2 +0,0 @@
-import 'bootstrap/dist/js/bootstrap.bundle.min.js'
-// import 'bootstrap/dist/js/bootstrap.min.js'
diff --git a/guide/assets/js/clipboard.js b/guide/assets/js/clipboard.js
deleted file mode 100644
index e1cc861..0000000
--- a/guide/assets/js/clipboard.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import Clipboard from 'clipboard';
-
-var pre = document.getElementsByTagName('pre');
-
-for (var i = 0; i < pre.length; ++ i)
-{
- var element = pre[i];
- var mermaid = element.getElementsByClassName('language-mermaid')[0];
-
- if (mermaid == null) {
- element.insertAdjacentHTML('afterbegin', '');
- }
-}
-
-var clipboard = new Clipboard('.btn-copy', {
-
- target: function(trigger) {
- return trigger.nextElementSibling;
- },
-
-});
-
-clipboard.on('success', function(e) {
-
- /*
- console.info('Action:', e.action);
- console.info('Text:', e.text);
- console.info('Trigger:', e.trigger);
- */
-
- e.clearSelection();
-});
-
-clipboard.on('error', function(e) {
- console.error('Action:', e.action);
- console.error('Trigger:', e.trigger);
-});
diff --git a/guide/assets/js/darkmode-init.js b/guide/assets/js/darkmode-init.js
deleted file mode 100644
index 7218506..0000000
--- a/guide/assets/js/darkmode-init.js
+++ /dev/null
@@ -1,21 +0,0 @@
-const globalDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
-const localMode = localStorage.getItem('theme');
-
-if (globalDark && (localMode === null)) {
-
- localStorage.setItem('theme', 'dark');
- document.documentElement.setAttribute('data-dark-mode', '');
-
-}
-
-if (globalDark && (localMode === 'dark')) {
-
- document.documentElement.setAttribute('data-dark-mode', '');
-
-}
-
-if (localMode === 'dark') {
-
- document.documentElement.setAttribute('data-dark-mode', '');
-
-}
diff --git a/guide/assets/js/darkmode.js b/guide/assets/js/darkmode.js
deleted file mode 100644
index 72c75cb..0000000
--- a/guide/assets/js/darkmode.js
+++ /dev/null
@@ -1,38 +0,0 @@
-const mode = document.getElementById('mode');
-
-if (mode !== null) {
-
- window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', event => {
-
- if (event.matches) {
-
- localStorage.setItem('theme', 'dark');
- document.documentElement.setAttribute('data-dark-mode', '');
-
- } else {
-
- localStorage.setItem('theme', 'light');
- document.documentElement.removeAttribute('data-dark-mode');
-
- }
-
- })
-
- mode.addEventListener('click', () => {
-
- document.documentElement.toggleAttribute('data-dark-mode');
- localStorage.setItem('theme', document.documentElement.hasAttribute('data-dark-mode') ? 'dark' : 'light');
-
- });
-
- if (localStorage.getItem('theme') === 'dark') {
-
- document.documentElement.setAttribute('data-dark-mode', '');
-
- } else {
-
- document.documentElement.removeAttribute('data-dark-mode');
-
- }
-
-}
diff --git a/guide/assets/js/highlight.js b/guide/assets/js/highlight.js
deleted file mode 100644
index a297a5f..0000000
--- a/guide/assets/js/highlight.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import hljs from 'highlight.js/lib/core';
-
-import javascript from 'highlight.js/lib/languages/javascript';
-import json from 'highlight.js/lib/languages/json';
-import bash from 'highlight.js/lib/languages/bash';
-import xml from 'highlight.js/lib/languages/xml';
-import ini from 'highlight.js/lib/languages/ini';
-import yaml from 'highlight.js/lib/languages/yaml';
-import markdown from 'highlight.js/lib/languages/markdown';
-
-hljs.registerLanguage('javascript', javascript);
-hljs.registerLanguage('json', json);
-hljs.registerLanguage('bash', bash);
-hljs.registerLanguage('html', xml);
-hljs.registerLanguage('ini', ini);
-hljs.registerLanguage('toml', ini);
-hljs.registerLanguage('yaml', yaml);
-hljs.registerLanguage('md', markdown);
-
-document.addEventListener('DOMContentLoaded', () => {
- document.querySelectorAll('pre code:not(.language-mermaid)').forEach((block) => {
- hljs.highlightElement(block);
- });
-});
diff --git a/guide/assets/js/index.js b/guide/assets/js/index.js
deleted file mode 100644
index dcf64be..0000000
--- a/guide/assets/js/index.js
+++ /dev/null
@@ -1,162 +0,0 @@
-var suggestions = document.getElementById('suggestions');
-var search = document.getElementById('search');
-
-if (search !== null) {
- document.addEventListener('keydown', inputFocus);
-}
-
-function inputFocus(e) {
- if (e.ctrlKey && e.key === '/' ) {
- e.preventDefault();
- search.focus();
- }
- if (e.key === 'Escape' ) {
- search.blur();
- suggestions.classList.add('d-none');
- }
-}
-
-document.addEventListener('click', function(event) {
-
- var isClickInsideElement = suggestions.contains(event.target);
-
- if (!isClickInsideElement) {
- suggestions.classList.add('d-none');
- }
-
-});
-
-/*
-Source:
- - https://dev.to/shubhamprakash/trap-focus-using-javascript-6a3
-*/
-
-document.addEventListener('keydown',suggestionFocus);
-
-function suggestionFocus(e){
-
- const focusableSuggestions= suggestions.querySelectorAll('a');
- const focusable= [...focusableSuggestions];
- const index = focusable.indexOf(document.activeElement);
-
- const keyDefault = suggestions.classList.contains('d-none');
-
- let nextIndex = 0;
-
- if ((e.keyCode === 38) && (!keyDefault)) {
- e.preventDefault();
- nextIndex= index > 0 ? index-1 : 0;
- focusableSuggestions[nextIndex].focus();
- }
- else if ((e.keyCode === 40) && (!keyDefault)) {
- e.preventDefault();
- nextIndex= index+1 < focusable.length ? index+1 : index;
- focusableSuggestions[nextIndex].focus();
- }
-
-}
-
-/*
-Source:
- - https://github.com/nextapps-de/flexsearch#index-documents-field-search
- - https://raw.githack.com/nextapps-de/flexsearch/master/demo/autocomplete.html
-*/
-
-(function(){
-
- var index = new FlexSearch.Document({
- tokenize: "forward",
- cache: 100,
- document: {
- id: 'id',
- store: [
- "href", "title", "description"
- ],
- index: ["title", "description", "content"]
- }
- });
-
-
- // Not yet supported: https://github.com/nextapps-de/flexsearch#complex-documents
-
- /*
- var docs = [
- {{ range $index, $page := (where .Site.Pages "Section" "docs") -}}
- {
- id: {{ $index }},
- href: "{{ .Permalink }}",
- title: {{ .Title | jsonify }},
- description: {{ .Params.description | jsonify }},
- content: {{ .Content | jsonify }}
- },
- {{ end -}}
- ];
- */
-
- // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
-
- {{ $list := (where .Site.Pages "Section" "docs") -}}
- {{ $len := (len $list) -}}
-
- index.add(
- {{ range $index, $element := $list -}}
- {
- id: {{ $index }},
- href: "{{ .Permalink }}",
- title: {{ .Title | jsonify }},
- description: {{ .Params.description | jsonify }},
- content: {{ .Content | jsonify }}
- })
- {{ if ne (add $index 1) $len -}}
- .add(
- {{ end -}}
- {{ end -}}
- ;
-
- search.addEventListener('input', show_results, true);
- suggestions.addEventListener('click', accept_suggestion, true);
-
- function show_results(){
- const maxResult = 5;
-
- var value = this.value;
- var results = index.search(value, {limit: maxResult, enrich: true});
-
- suggestions.classList.remove('d-none');
- suggestions.innerHTML = "";
-
- //flatSearch now returns results for each index field. create a single list
- const flatResults = {}; //keyed by href to dedupe results
- results.forEach(result=>{
- result.result.forEach(r=>{
- flatResults[r.doc.href] = r.doc;
- });
- });
-
- //construct a list of suggestions list
- for(const href in flatResults) {
- const doc = flatResults[href];
-
- const entry = document.createElement('div');
- entry.innerHTML = '';
-
- entry.querySelector('a').href = href;
- entry.querySelector('span:first-child').textContent = doc.title;
- entry.querySelector('span:nth-child(2)').textContent = doc.description;
-
- suggestions.appendChild(entry);
- if(suggestions.childElementCount == maxResult) break;
- }
- }
-
- function accept_suggestion(){
-
- while(suggestions.lastChild){
-
- suggestions.removeChild(suggestions.lastChild);
- }
-
- return false;
- }
-
-}());
diff --git a/guide/assets/js/instant.page.js b/guide/assets/js/instant.page.js
deleted file mode 100644
index a3485b2..0000000
--- a/guide/assets/js/instant.page.js
+++ /dev/null
@@ -1 +0,0 @@
-import 'instant.page';
diff --git a/guide/assets/js/katex.js b/guide/assets/js/katex.js
deleted file mode 100644
index cb34d31..0000000
--- a/guide/assets/js/katex.js
+++ /dev/null
@@ -1,10 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
- renderMathInElement(document.body, {
- delimiters: [
- {left: '$$', right: '$$', display: true},
- {left: '$', right: '$', display: false},
- {left: '\\(', right: '\\)', display: false},
- {left: '\\[', right: '\\]', display: true},
- ],
- });
-});
diff --git a/guide/assets/js/lazysizes.js b/guide/assets/js/lazysizes.js
deleted file mode 100644
index 5954bc9..0000000
--- a/guide/assets/js/lazysizes.js
+++ /dev/null
@@ -1 +0,0 @@
-import 'lazysizes';
diff --git a/guide/assets/js/mermaid.js b/guide/assets/js/mermaid.js
deleted file mode 100644
index 83350c3..0000000
--- a/guide/assets/js/mermaid.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import mermaid from 'mermaid/dist/mermaid';
-
-var config = {
- theme: 'default',
- fontFamily: '"Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";',
-};
-
-document.addEventListener('DOMContentLoaded', () => {
- mermaid.initialize(config);
- mermaid.init(undefined, '.language-mermaid');
-});
diff --git a/guide/assets/js/vendor/.gitkeep b/guide/assets/js/vendor/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/guide/assets/scss/app.scss b/guide/assets/scss/app.scss
deleted file mode 100644
index c241dab..0000000
--- a/guide/assets/scss/app.scss
+++ /dev/null
@@ -1,34 +0,0 @@
-/** Import Bootstrap functions */
-@import "bootstrap/scss/functions";
-
-/** Import theme variables */
-@import "common/variables";
-
-/** Import Bootstrap */
-@import "bootstrap/scss/bootstrap";
-
-/** Import highlight.js */
-// @import "highlight.js/scss/github-dark-dimmed";
-
-/** Import KaTeX */
-@import "katex/dist/katex";
-
-/** Import theme styles */
-@import "common/fonts";
-@import "common/global";
-@import "common/dark";
-@import "components/alerts";
-@import "components/buttons";
-@import "components/code";
-@import "components/syntax";
-@import "components/comments";
-@import "components/forms";
-@import "components/images";
-@import "components/mermaid";
-@import "components/search";
-@import "components/tables";
-@import "layouts/footer";
-@import "layouts/header";
-@import "layouts/pages";
-@import "layouts/posts";
-@import "layouts/sidebar";
\ No newline at end of file
diff --git a/guide/assets/scss/common/_dark.scss b/guide/assets/scss/common/_dark.scss
deleted file mode 100644
index 5e7e872..0000000
--- a/guide/assets/scss/common/_dark.scss
+++ /dev/null
@@ -1,482 +0,0 @@
-/** Theme variables */
-
-// Source: https://material.io/design/color/dark-theme.html
-
-$body-bg-dark: $gray-900;
-$body-overlay-dark: darken($body-bg-dark, 2.5%);
-
-/*
-$border-dark: darken($body-bg-dark, 2.5%);
-*/
-$border-dark: $gray-800;
-$body-color-dark: $gray-300;
-$dots-dark: darken($body-color-dark, 50%);
-
-$link-color-dark: $blue-300;
-$button-color-dark: $link-color-dark;
-$focus-color-dark: lighten($link-color-dark, 2.5%);
-
-$navbar-dark-color: $body-color-dark;
-$navbar-dark-hover-color: $link-color-dark;
-$navbar-dark-active-color: $link-color-dark;
-
-/** Theme styles */
-
-[data-dark-mode] body {
- background: $body-bg-dark;
- color: $body-color-dark;
-}
-
-[data-dark-mode] body a {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body a.text-body {
- color: $body-color-dark !important;
-}
-
-[data-dark-mode] body .btn-primary {
- @include button-variant($button-color-dark, $button-color-dark);
-
- color: $body-bg-dark !important;
-}
-
-[data-dark-mode] body .btn-outline-primary {
- @include button-outline-variant($button-color-dark, $button-color-dark);
-
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .btn-outline-primary:hover {
- color: $body-bg-dark;
-}
-
-[data-dark-mode] body .btn-doks-light {
- color: $navbar-dark-color;
-}
-
-[data-dark-mode] body .show > .btn-doks-light,
-[data-dark-mode] body .btn-doks-light:hover,
-[data-dark-mode] body .btn-doks-light:active {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .btn-menu svg {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .doks-sidebar-toggle {
- color: $navbar-dark-color;
-}
-
-[data-dark-mode] body .btn-menu:hover,
-[data-dark-mode] body .btn-doks-light:hover,
-[data-dark-mode] body .doks-sidebar-toggle:hover {
- background: $body-overlay-dark;
-}
-
-[data-dark-mode] body .dropdown-menu {
- @extend .dropdown-menu-dark;
-}
-
-[data-dark-mode] body .navbar,
-[data-dark-mode] body .doks-subnavbar {
- background-color: rgba(33, 37, 41, 0.95);
- border-bottom: 1px solid $border-dark;
-}
-
-[data-dark-mode] body.home .navbar {
- border-bottom: 0;
-}
-
-[data-dark-mode] body .offcanvas-header {
- border-bottom: 1px solid $gray-800;
-}
-
-[data-dark-mode] body .offcanvas .nav-link {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .offcanvas .nav-link:hover,
-[data-dark-mode] body .offcanvas .nav-link:focus {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .offcanvas .nav-link.active {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .navbar-light .navbar-brand {
- color: $navbar-dark-color !important;
-}
-
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link {
- color: $navbar-dark-color;
-}
-
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link:hover,
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link:focus {
- color: $navbar-dark-hover-color;
-}
-
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link.disabled {
- color: $navbar-dark-disabled-color;
-}
-
-[data-dark-mode] body .navbar-light .navbar-nav .show > .nav-link,
-[data-dark-mode] body .navbar-light .navbar-nav .active > .nav-link,
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link.show,
-[data-dark-mode] body .navbar-light .navbar-nav .nav-link.active {
- color: $navbar-dark-active-color;
-}
-
-[data-dark-mode] body .navbar-light .navbar-text {
- color: $navbar-dark-color;
-}
-
-[data-dark-mode] body .alert-primary a {
- color: $body-bg-dark;
-}
-
-[data-dark-mode] body .alert-warning {
- background: $body-overlay-dark;
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .page-links a {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .btn-toggle-nav a {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .showcase-meta a {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .showcase-meta a:hover,
-[data-dark-mode] body .showcase-meta a:focus {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .docs-link:hover,
-[data-dark-mode] body .docs-link.active,
-[data-dark-mode] body .page-links a:hover {
- text-decoration: none;
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .btn-toggle {
- color: $body-color-dark;
- background-color: transparent;
- border: 0;
-}
-
-[data-dark-mode] body .btn-toggle:hover,
-[data-dark-mode] body .btn-toggle:focus {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .btn-toggle::before {
- width: 1.25em;
- line-height: 0;
- content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%28222, 226, 230, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
- transition: transform 0.35s ease;
- transform-origin: 0.5em 50%;
- margin-bottom: 0.125rem;
-}
-
-[data-dark-mode] body .btn-toggle[aria-expanded="true"] {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .btn-toggle[aria-expanded="true"]::before {
- transform: rotate(90deg);
-}
-
-[data-dark-mode] body .btn-toggle-nav a:hover,
-[data-dark-mode] body .btn-toggle-nav a:focus {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .btn-toggle-nav a.active {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .navbar-light .navbar-text a {
- color: $navbar-dark-active-color;
-}
-
-[data-dark-mode] body .docs-links h3.sidebar-link a,
-[data-dark-mode] body .page-links h3.sidebar-link a {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .navbar-light .navbar-text a:hover,
-[data-dark-mode] body .navbar-light .navbar-text a:focus {
- color: $navbar-dark-active-color;
-}
-
-[data-dark-mode] body .navbar .btn-link {
- color: $navbar-dark-color;
-}
-
-[data-dark-mode] body .content .btn-link {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .content .btn-link:hover {
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .navbar .btn-link:hover {
- color: $navbar-dark-hover-color;
-}
-
-[data-dark-mode] body .navbar .btn-link:active {
- color: $navbar-dark-active-color;
-}
-
-[data-dark-mode] body .form-control.is-search {
- background: $body-overlay-dark;
- border: 1px solid transparent;
- color: $gray-300;
-
- /*
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: right calc(0.375em + 0.1875rem) center;
- background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
- */
-}
-
-[data-dark-mode] body .form-control.is-search:focus {
- border: 1px solid $link-color-dark;
-}
-
-[data-dark-mode] body .doks-search::after {
- color: $gray-300;
- border: 1px solid $gray-700;
-}
-
-[data-dark-mode] body .text-dark {
- color: $body-color-dark !important;
-}
-
-/*
-[data-dark-mode] body .navbar-form::after {
- color: $gray-600;
- border: 1px solid $gray-800;
-}
-*/
-
-[data-dark-mode] body .form-control {
- color: $gray-300;
-}
-
-[data-dark-mode] body .form-control::placeholder {
- color: $gray-400;
- opacity: 1;
-}
-
-[data-dark-mode] body .border-top {
- border-top: 1px solid $border-dark !important;
-}
-
-@include media-breakpoint-up(lg) {
- [data-dark-mode] body .docs-sidebar {
- order: 0;
- border-right: 1px solid $border-dark;
- }
-}
-
-[data-dark-mode] body .docs-navigation {
- border-top: 1px solid $border-dark;
-}
-
-[data-dark-mode] body pre code::-webkit-scrollbar-thumb {
- background: $gray-400;
-}
-
-[data-dark-mode] body code:not(.hljs) {
- background: $body-overlay-dark;
- color: $body-color-dark;
-}
-
-[data-dark-mode] body pre code:hover {
- scrollbar-width: thin;
- scrollbar-color: $border-dark transparent;
-}
-
-[data-dark-mode] body pre code::-webkit-scrollbar-thumb:hover {
- background: $gray-500;
-}
-
-[data-dark-mode] body blockquote {
- border-left: 3px solid $border-dark;
-}
-
-[data-dark-mode] body .footer {
- border-top: 1px solid $border-dark;
-}
-
-[data-dark-mode] body .docs-links,
-[data-dark-mode] body .docs-toc {
- scrollbar-width: thin;
- scrollbar-color: $body-bg-dark $body-bg-dark;
-}
-
-[data-dark-mode] body .docs-links::-webkit-scrollbar,
-[data-dark-mode] body .docs-toc::-webkit-scrollbar {
- width: 5px;
-}
-
-[data-dark-mode] body .docs-links::-webkit-scrollbar-track,
-[data-dark-mode] body .docs-toc::-webkit-scrollbar-track {
- background: $body-bg-dark;
-}
-
-[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb,
-[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb {
- background: $body-bg-dark;
-}
-
-[data-dark-mode] body .docs-links:hover,
-[data-dark-mode] body .docs-toc:hover {
- scrollbar-width: thin;
- scrollbar-color: $border-dark $body-bg-dark;
-}
-
-[data-dark-mode] body .docs-links:hover::-webkit-scrollbar-thumb,
-[data-dark-mode] body .docs-toc:hover::-webkit-scrollbar-thumb {
- background: $border-dark;
-}
-
-[data-dark-mode] body .docs-links::-webkit-scrollbar-thumb:hover,
-[data-dark-mode] body .docs-toc::-webkit-scrollbar-thumb:hover {
- background: $border-dark;
-}
-
-[data-dark-mode] body .docs-links h3:not(:first-child) {
- border-top: 1px solid $border-dark;
-}
-
-[data-dark-mode] body a.docs-link {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .page-links li:not(:first-child) {
- border-top: 1px dashed $border-dark;
-}
-
-[data-dark-mode] body .card {
- background: $body-bg-dark;
- border: 1px solid $border-dark;
-}
-
-[data-dark-mode] body .card.bg-light {
- background: $body-overlay-dark !important;
-}
-
-[data-dark-mode] body .navbar .menu-icon .navicon {
- background: $navbar-dark-color;
-}
-
-[data-dark-mode] body .navbar .menu-icon .navicon::before,
-[data-dark-mode] body .navbar .menu-icon .navicon::after {
- background: $navbar-dark-color;
-}
-
-[data-dark-mode] body .logo-light {
- display: none !important;
-}
-
-[data-dark-mode] body .logo-dark {
- display: inline-block !important;
-}
-
-[data-dark-mode] body .bg-light {
- background: darken($body-bg-dark, 1.5%) !important;
-}
-
-[data-dark-mode] body .bg-dots {
- background-image: radial-gradient($dots-dark 15%, transparent 15%);
-}
-
-[data-dark-mode] body .text-muted {
- color: darken($body-color-dark, 7.5%) !important;
-}
-
-[data-dark-mode] body .alert-primary {
- background: $link-color-dark;
- color: $body-bg-dark;
-}
-
-[data-dark-mode] body .figure-caption {
- color: $body-color-dark;
-}
-
-[data-dark-mode] body table {
- @extend .table-dark;
-}
-
-[data-dark-mode] body .copy-status::after {
- content: "Copy";
- display: block;
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .copy-status:hover::after {
- content: "Copy";
- display: block;
- color: $link-color-dark;
-}
-
-[data-dark-mode] body .copy-status:focus::after,
-[data-dark-mode] body .copy-status:active::after {
- content: "Copied";
- display: block;
- color: $link-color-dark;
-}
-
-/*
-[data-dark-mode] body .dropdown-toggle:focus,
-[data-dark-mode] body .doks-sidebar-toggle:focus {
- box-shadow: 0 0 0 0.2rem $focus-color-dark;
-}
-*/
-
-[data-dark-mode] body .offcanvas {
- background-color: $body-bg-dark;
-}
-
-[data-dark-mode] body .btn-close {
- background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNkZWUyZTYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0iZmVhdGhlciBmZWF0aGVyLXgiPjxsaW5lIHgxPSIxOCIgeTE9IjYiIHgyPSI2IiB5Mj0iMTgiPjwvbGluZT48bGluZSB4MT0iNiIgeTE9IjYiIHgyPSIxOCIgeTI9IjE4Ij48L2xpbmU+PC9zdmc+");
- background-size: 1.5rem;
-}
-
-@include media-breakpoint-up(md) {
- [data-dark-mode] body .alert-dismissible .btn-close {
- background-size: 1.25rem;
- }
-}
-
-/*
-[data-dark-mode] body .btn-close:focus {
- box-shadow: 0 0 0 0.2rem $focus-color-dark;
-}
-*/
-
-[data-dark-mode] body hr.text-black-50 {
- color: $gray-600 !important;
-}
-
-[data-dark-mode] body .email-form .form-control {
- background: $body-overlay-dark;
- border: 1px solid transparent;
-}
-
-[data-dark-mode] body .email-form .form-control:focus {
- border: 1px solid $link-color-dark;
-}
diff --git a/guide/assets/scss/common/_fonts.scss b/guide/assets/scss/common/_fonts.scss
deleted file mode 100644
index 2eb2187..0000000
--- a/guide/assets/scss/common/_fonts.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-/* jost-regular - latin */
-@font-face {
- font-family: "Jost";
- font-style: normal;
- font-weight: 400;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-regular.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-regular.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* jost-500 - latin */
-@font-face {
- font-family: "Jost";
- font-style: normal;
- font-weight: 500;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-500.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-500.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* jost-700 - latin */
-@font-face {
- font-family: "Jost";
- font-style: normal;
- font-weight: 700;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-700.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-700.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* jost-italic - latin */
-@font-face {
- font-family: "Jost";
- font-style: italic;
- font-weight: 400;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-italic.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* jost-500italic - latin */
-@font-face {
- font-family: "Jost";
- font-style: italic;
- font-weight: 500;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-500italic.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-500italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-
-/* jost-700italic - latin */
-@font-face {
- font-family: "Jost";
- font-style: italic;
- font-weight: 700;
- font-display: swap;
- src:
- local("Jost"),
- url("fonts/vendor/jost/jost-v4-latin-700italic.woff2") format("woff2"),
- url("fonts/vendor/jost/jost-v4-latin-700italic.woff") format("woff"); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
diff --git a/guide/assets/scss/common/_global.scss b/guide/assets/scss/common/_global.scss
deleted file mode 100644
index a18ea4b..0000000
--- a/guide/assets/scss/common/_global.scss
+++ /dev/null
@@ -1,268 +0,0 @@
-.contributors .content,
-.blog .content,
-.page .content,
-.error404 .content,
-.docs.list .content,
-.tutorial.list .content,
-.showcase.list .content {
- padding-top: 1rem;
- padding-bottom: 3rem;
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-.h1,
-.h2,
-.h3,
-.h4,
-.h5,
-.h6 {
- margin: 2rem 0 1rem;
-}
-
-.offcanvas-header {
- border-bottom: 1px solid $gray-300;
- padding-top: 1.0625rem;
- padding-bottom: 0.8125rem;
-}
-
-h5.offcanvas-title {
- margin: 0;
-}
-
-body.docs {
- padding-top: 0 !important;
-}
-
-@include media-breakpoint-up(md) {
- body {
- font-size: $font-size-md;
-
- /*
- padding-top: 4rem !important;
- */
- }
-
- h1,
- h2,
- h3,
- h4,
- h5,
- h6,
- .h1,
- .h2,
- .h3,
- .h4,
- .h5,
- .h6 {
- margin-bottom: 1.125rem;
- }
-}
-
-.home h1 {
- /* font-size: calc(1.375rem + 1.5vw); */
- font-size: calc(1.875rem + 1.5vw);
-}
-
-a:hover,
-a:focus {
- text-decoration: underline;
-}
-
-a.btn:hover,
-a.btn:focus {
- text-decoration: none;
-}
-
-.section {
- padding-top: 5rem;
- padding-bottom: 5rem;
-}
-
-.section-md {
- padding-top: 3rem;
- padding-bottom: 3rem;
-}
-
-.section-sm {
- padding-top: 1rem;
- padding-bottom: 1rem;
-}
-
-/*
-.section svg {
- display: inline-block;
- width: 2rem;
- height: 2rem;
- vertical-align: text-top;
-}
-*/
-
-/*
-body {
- padding-top: 3.5625rem;
-}
-*/
-
-.docs-sidebar {
- order: 2;
-}
-
-@include media-breakpoint-up(lg) {
- .docs-sidebar {
- order: 0;
- border-right: 1px solid $gray-200;
- }
-
- @supports ((position:-webkit-sticky) or (position:sticky)) {
- .docs-sidebar {
- position: -webkit-sticky;
- position: sticky;
- top: 4rem;
- z-index: 1000;
- height: calc(100vh - 4rem);
- }
- }
-}
-
-@include media-breakpoint-up(xl) {
- .docs-sidebar {
- flex: 0 1 320px;
- }
-}
-
-.docs-links {
- padding-bottom: 5rem;
-}
-
-@include media-breakpoint-up(lg) {
- @supports ((position: -webkit-sticky) or (position: sticky)) {
- .docs-links {
- max-height: calc(100vh - 4rem);
- overflow-y: scroll;
- }
- }
-}
-
-@include media-breakpoint-up(lg) {
- .docs-links {
- display: block;
- width: auto;
- margin-right: -1.5rem;
- padding-bottom: 4rem;
- }
-}
-
-.docs-toc {
- order: 2;
-}
-
-@supports ((position:-webkit-sticky) or (position:sticky)) {
- .docs-toc {
- position: -webkit-sticky;
- position: sticky;
- top: 4rem;
- height: calc(100vh - 4rem);
- overflow-y: auto;
- }
-}
-
-.docs-content {
- padding-bottom: 3rem;
- order: 1;
-}
-
-.docs-navigation {
- border-top: 1px solid $gray-200;
- margin-top: 2rem;
- margin-bottom: 0;
- padding-top: 2rem;
-}
-
-.docs-navigation a {
- font-size: $font-size-base * 0.9;
-}
-
-@include media-breakpoint-up(lg) {
- .docs-navigation {
- margin-bottom: -1rem;
- }
-
- .docs-navigation a {
- font-size: $font-size-base;
- }
-}
-
-.navbar a:hover,
-.navbar a:focus {
- text-decoration: none;
-}
-
-#TableOfContents ul {
- padding-left: 0;
- list-style: none;
-}
-
-::selection {
- background: rgba(212, 53, 159, 0.2);
-}
-
-.bg-dots {
- background-image: radial-gradient($gray-300 15%, transparent 15%);
- background-position: 0 0;
- background-size: 1rem 1rem;
- -webkit-mask: linear-gradient(to top, #fff, transparent);
- mask: linear-gradient(to top, #fff, transparent);
- width: 100%;
- height: 9rem;
- margin-top: -10rem;
- z-index: -1;
-}
-
-.bg-dots-md {
- margin-top: -11rem;
-}
-
-.bg-dots-lg {
- margin-top: -12rem;
-}
-
-// https://fossheim.io/writing/posts/css-text-gradient/
-.gradient-text {
- background-color: $primary;
- background-image: linear-gradient(90deg, $primary, $blue-300 50%, $pink-500);
- background-size: 100%;
- background-repeat: repeat;
- -webkit-background-clip: text;
- -moz-background-clip: text;
- -webkit-text-fill-color: transparent;
- -moz-text-fill-color: transparent;
-}
-
-.katex {
- font-size: $font-size-md;
-}
-
-.card-bar {
- border-top: 4px solid;
- border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
- border-image-slice: 1;
-}
-
-.modal-backdrop {
- background-color: #fff;
-}
-
-.modal-backdrop.show {
- opacity: 0.7;
-}
-
-@include media-breakpoint-up(md) {
- .modal-backdrop.show {
- opacity: 0;
- }
-}
diff --git a/guide/assets/scss/common/_variables.scss b/guide/assets/scss/common/_variables.scss
deleted file mode 100644
index 98e9ee4..0000000
--- a/guide/assets/scss/common/_variables.scss
+++ /dev/null
@@ -1,189 +0,0 @@
-// Color system
-
-$white: #fff;
-$gray-100: #f8f9fa;
-$gray-200: #e9ecef;
-$gray-300: #dee2e6;
-$gray-400: #ced4da;
-$gray-500: #adb5bd;
-$gray-600: #6c757d;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$black: #000;
-
-$yellow: #ffe000;
-$black: #1d2d35;
-$beige: #fbf7f0;
-// $red: #e55235;
-$purple: #5d2f86;
-$brown: #aa9c84;
-
-$blue-300: #8ed6fb;
-$pink-100: #fcfaff;
-$pink-500: #d32e9d;
-
-$primary: $purple;
-
-$color-btn-bg: $pink-500;
-$color-btn-border: darken($pink-500, 5%);
-$color-btn-text: $white;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-$enable-caret: true;
-$enable-rounded: true;
-$enable-shadows: false;
-$enable-gradients: false;
-$enable-transitions: true;
-$enable-reduced-motion: true;
-$enable-smooth-scroll: true;
-$enable-grid-classes: true;
-$enable-button-pointers: true;
-$enable-rfs: true;
-$enable-validation-icons: true;
-$enable-negative-margins: true;
-$enable-deprecation-messages: true;
-$enable-important-utilities: true;
-
-/** Bootstrap navbar fix (https://git.io/fADqW) */
-$navbar-dark-toggler-icon-bg: none;
-$navbar-light-toggler-icon-bg: none;
-
-// Options
-//
-// Quickly modify global styling by enabling or disabling optional features.
-
-// $enable-responsive-font-sizes: true;
-
-// Body
-//
-// Settings for the `` element.
-
-$body-bg: $white;
-$body-color: $black;
-
-// Links
-//
-// Style anchor elements.
-
-$link-color: $primary;
-$link-decoration: none;
-
-// Grid containers
-//
-// Define the maximum width of `.container` for different screen sizes.
-
-$container-max-widths: (
- sm: 540px,
- md: 720px,
- lg: 960px,
- xl: 1240px,
- xxl: 1320px
-);
-
-@include _assert-ascending($container-max-widths, "$container-max-widths");
-
-// Grid columns
-//
-// Set the number of columns and specify the width of the gutters.
-
-$grid-columns: 16;
-$grid-gutter-width: 48px;
-$grid-row-columns: 6;
-
-// Components
-//
-// Define common padding and border radius sizes and more.
-
-$border-color: $gray-200;
-
-// Typography
-//
-// Font, line-height, and color for body text, headings, and more.
-
-// stylelint-disable value-keyword-case
-$font-family-sans-serif: "Jost", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-$font-family-monospace: sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;
-$font-family-base: $font-family-sans-serif;
-// stylelint-enable value-keyword-case
-
-$font-size-base: 1rem; // Assumes the browser default, typically `16px`
-$font-size-xl: $font-size-base * 1.375;
-$font-size-lg: $font-size-base * 1.25;
-$font-size-md: $font-size-base * 1.125;
-$font-size-sm: $font-size-base * 0.875;
-
-// $line-height-base: 1.5;
-
-$headings-font-family: null;
-$headings-font-weight: 700;
-
-$lead-font-weight: 400;
-
-// Spacing
-//
-// Control the default styling of most Bootstrap elements by modifying these
-// variables. Mostly focused on spacing.
-// You can add more entries to the $spacers map, should you need more variation.
-
-$spacer: 1rem;
-
-// Navbar
-
-$navbar-padding-y: $spacer / 2;
-$navbar-padding-x: null;
-
-$navbar-nav-link-padding-x: 0.5rem;
-
-$navbar-light-color: $black;
-$navbar-light-hover-color: $primary;
-$navbar-light-active-color: $primary;
-
-// Cards
-
-$card-border-color: $gray-200;
-
-// Alerts
-//
-// Define alert colors, border radius, and padding.
-
-$alert-padding-y: $spacer;
-$alert-padding-x: $spacer * 1.5;
-$alert-margin-bottom: 0;
-$alert-border-radius: 0;
-$alert-link-font-weight: $headings-font-weight;
-$alert-border-width: 0;
-
-$alert-bg-scale: 0;
-$alert-border-scale: 0;
-$alert-color-scale: 0;
-
-// docsearch
-$dropdown-config: (
- main-color: $purple,
- layout-type: normal,
- layout-width: normal,
- layout-alignment: align,
- background-color: $white,
- border-radius: 4,
- border-width: 1,
- border-color: $gray-200,
- box-shadow: none,
- branding-position: bottom,
- spacing: normal,
- include-desc: yes,
- background-category-header: $white,
- font-size: normal,
- header-color: $black,
- title-color: $black,
- subtitle-color: $black,
- text-color: $black,
- highlight-color: $purple,
- highlight-opacity: 0.1,
- highlight-type: underline
-);
-
-$input-btn-focus-width: 0;
diff --git a/guide/assets/scss/components/_alerts.scss b/guide/assets/scss/components/_alerts.scss
deleted file mode 100644
index 5b33f8c..0000000
--- a/guide/assets/scss/components/_alerts.scss
+++ /dev/null
@@ -1,91 +0,0 @@
-.alert {
- font-family: $font-family-monospace;
- font-size: $font-size-sm;
-}
-
-.alert-icon {
- margin-right: 0.75rem;
-}
-
-.docs main .alert {
- margin: 2rem -1.5rem;
-}
-
-.alert .alert-link {
- text-decoration: underline;
-}
-
-.alert-dark {
- color: $white;
- background-color: $black;
-}
-
-.alert-dark .alert-link {
- color: $white;
-}
-
-.alert-light {
- color: $black;
-}
-
-.alert-warning {
- background: $beige;
- color: $black;
-}
-
-/*
-.alert-light {
- color: #215888;
- background: linear-gradient(-45deg, rgb(212, 245, 255), rgb(234, 250, 255), rgb(234, 250, 255), #d3f6ef);
-}
-
-.alert-light .alert-link {
- color: #215888;
-}
-*/
-
-.alert-white {
- background-color: rgba(255, 255, 255, 0.95);
-}
-
-.alert-primary {
- color: $white;
- background-color: $primary;
-}
-
-.alert-primary .alert-link {
- color: $white;
-}
-
-.alert .alert-link:hover,
-.alert .alert-link:focus {
- text-decoration: none;
-}
-
-.alert-dismissible .btn-close {
- position: absolute;
-
- /*
- top: 50%;
- transform: translateY(-50%);
- */
- top: 0.75rem;
- right: 1rem;
- z-index: 2;
- padding: 0.625rem;
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
- background-size: 1.5rem;
- filter: invert(1) grayscale(100%) brightness(200%);
-}
-
-@include media-breakpoint-up(md) {
- .alert-dismissible .btn-close {
- background-size: 1.25rem;
- }
-}
-
-.alert code {
- background: darken($beige, 5%);
- color: $black;
- padding: 0.25rem 0.5rem;
-}
diff --git a/guide/assets/scss/components/_buttons.scss b/guide/assets/scss/components/_buttons.scss
deleted file mode 100644
index 0e5d4bb..0000000
--- a/guide/assets/scss/components/_buttons.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-.navbar .btn-link {
- color: $navbar-light-color;
- padding: 0.4375rem 0;
-}
-
-#mode {
- padding-right: 0.25rem;
- padding-left: 0.25rem;
- margin-right: -0.25rem;
-}
-
-.btn-link:focus {
- outline: 0;
- box-shadow: none;
-}
-
-#navigation {
- margin-left: 1.25rem;
-}
-
-@include media-breakpoint-up(md) {
- #mode {
- margin-left: 1.125rem;
- margin-right: -0.375rem;
- }
-
- .navbar .btn-link {
- padding: 0.5625em 0.25rem 0.5rem 0.125rem;
- }
-}
-
-.navbar .btn-link:hover {
- color: $navbar-light-hover-color;
-}
-
-.navbar .btn-link:active {
- color: $navbar-light-active-color;
-}
-
-body .toggle-dark {
- display: block;
-}
-
-body .toggle-light {
- display: none;
-}
-
-[data-dark-mode] body .toggle-light {
- display: block;
-}
-
-[data-dark-mode] body .toggle-dark {
- display: none;
-}
-
-pre {
- position: relative;
-}
-
-@include media-breakpoint-down(md) {
- .btn-copy {
- display: none;
- }
-}
-
-.btn-copy {
- transition: opacity 0.3s ease-in-out;
- opacity: 0;
- position: absolute;
- right: 0.25rem;
- top: 0.25rem;
- z-index: 10;
- font-family: $font-family-sans-serif;
- font-size: $font-size-sm;
- padding: 0.25rem 0.5rem;
- color: $color-btn-text;
- background-color: $color-btn-bg;
- border-color: $color-btn-border;
-}
-
-.btn-copy:hover {
- color: $color-btn-text;
- background-color: lighten($color-btn-bg, 5%);
- border-color: lighten($color-btn-border, 15%);
-}
-
-.btn-copy:focus {
- color: $color-btn-text;
- background-color: $color-btn-bg;
- border-color: lighten($color-btn-border, 15%);
- box-shadow: none;
-}
-
-.btn-copy:active,
-.btn-copy.active {
- color: $color-btn-text;
- background-color: $color-btn-bg;
- border-color: lighten($color-btn-border, 15%);
-}
-
-.btn-copy:active:focus,
-.btn-copy.active:focus {
- box-shadow: none;
-}
-
-@include media-breakpoint-up(md) {
- pre:hover .btn-copy {
- opacity: 1;
- }
-}
-
-.btn-copy::after {
- content: "Copy";
- display: block;
- color: $color-btn-text;
-}
-
-.btn-copy:hover::after {
- content: "Copy";
- display: block;
- color: $color-btn-text;
-}
-
-.btn-copy:focus::after,
-.btn-copy:active::after {
- content: "Copied";
- display: block;
- color: $color-btn-text;
-}
-
-.collapsible-sidebar {
- margin: 2.125rem 0;
-}
-
-.btn-toggle {
- display: inline-flex;
- align-items: center;
- padding: 0.25rem 0.5rem 0.25rem 0;
- font-weight: $headings-font-weight;
- font-size: $font-size-base;
- text-transform: uppercase;
- color: $body-color;
- background-color: transparent;
- border: 0;
-}
-
-.btn-toggle:hover,
-.btn-toggle:focus {
- color: $body-color;
- background-color: transparent;
- outline: 0;
- box-shadow: none;
-}
-
-.btn-toggle::before {
- width: 1.25em;
- line-height: 0;
- content: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='rgba%2829, 45, 53, 0.75%29' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M5 14l6-6-6-6'/%3e%3c/svg%3e");
- transition: transform 0.35s ease;
- transform-origin: 0.5em 50%;
- margin-bottom: 0.125rem;
-}
-
-.btn-toggle[aria-expanded="true"] {
- color: $body-color;
-}
-
-.btn-toggle[aria-expanded="true"]::before {
- transform: rotate(90deg);
-}
-
-.btn-toggle-nav a {
- display: inline-flex;
- padding: 0.1875rem 0.5rem;
- margin-top: 0.125rem;
- margin-left: 1.25rem;
- text-decoration: none;
-}
-
-.btn-toggle-nav a:hover,
-.btn-toggle-nav a:focus {
- background-color: transparent;
- color: $link-color;
-}
-
-.btn-toggle-nav a.active {
- color: $link-color;
-}
-
-.doks-navbar .dropdown-menu,
-.doks-subnavbar .dropdown-menu {
- font-size: 0.875rem;
-}
-
-.doks-navbar .dropdown-item.current,
-.doks-subnavbar .dropdown-item.current {
- font-weight: 600;
- background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e");
- background-repeat: no-repeat;
- background-position: right 1rem top 0.6rem;
- background-size: 0.75rem 0.75rem;
-}
-
-.btn-close {
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-x'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E");
- background-size: 1.5rem;
-}
-
-.offcanvas-header .btn-close {
- margin-right: 0 !important;
-}
diff --git a/guide/assets/scss/components/_code.scss b/guide/assets/scss/components/_code.scss
deleted file mode 100644
index 9786f54..0000000
--- a/guide/assets/scss/components/_code.scss
+++ /dev/null
@@ -1,66 +0,0 @@
-pre,
-code,
-kbd,
-samp {
- font-family: $font-family-monospace;
- font-size: $font-size-sm;
- border-radius: $border-radius;
-}
-
-code {
- background: $beige;
- color: $black;
- padding: 0.25rem 0.5rem;
-}
-
-pre {
- margin: 2rem 0;
-}
-
-pre code {
- display: block;
- overflow-x: auto;
- line-height: $line-height-base;
- padding: 1.25rem 1.5rem;
- tab-size: 4;
- scrollbar-width: thin;
- scrollbar-color: transparent transparent;
-}
-
-.hljs {
- padding: 1.25rem 1.5rem;
-}
-
-@include media-breakpoint-down(sm) {
- pre,
- code,
- kbd,
- samp {
- border-radius: 0;
- }
-
- pre {
- margin: 2rem -1.5rem;
- }
-}
-
-pre code::-webkit-scrollbar {
- height: 5px;
-}
-
-pre code::-webkit-scrollbar-thumb {
- background: $gray-400;
-}
-
-pre code:hover {
- scrollbar-width: thin;
- scrollbar-color: $gray-500 transparent;
-}
-
-pre code::-webkit-scrollbar-thumb:hover {
- background: $gray-500;
-}
-
-code.language-mermaid {
- background: none;
-}
diff --git a/guide/assets/scss/components/_comments.scss b/guide/assets/scss/components/_comments.scss
deleted file mode 100644
index 9e676de..0000000
--- a/guide/assets/scss/components/_comments.scss
+++ /dev/null
@@ -1,30 +0,0 @@
-.comment-list {
- @extend .list-unstyled;
-}
-
-.comment-list ol {
- list-style: none;
-}
-
-.comment-form p {
- @extend .form-group !optional;
-}
-
-.comment-form input[type="text"],
-.comment-form input[type="email"],
-.comment-form input[type="url"],
-.comment-form textarea {
- @extend .form-control;
-}
-
-.comment-form input[type="submit"] {
- @extend .btn;
- @extend .btn-secondary;
-}
-
-blockquote {
- margin-bottom: 1rem;
- font-size: 1.25rem;
- border-left: 3px solid $gray-300;
- padding-left: 1rem;
-}
diff --git a/guide/assets/scss/components/_forms.scss b/guide/assets/scss/components/_forms.scss
deleted file mode 100644
index d0d88fe..0000000
--- a/guide/assets/scss/components/_forms.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/** Search form */
-.search-form {
- @extend .form-inline !optional;
-}
-
-.search-form label {
- @extend .form-group;
-
- font-weight: normal;
-}
-
-.search-form .search-field {
- @extend .form-control;
-}
-
-.search-form .search-submit {
- @extend .btn;
- @extend .btn-secondary;
-}
diff --git a/guide/assets/scss/components/_images.scss b/guide/assets/scss/components/_images.scss
deleted file mode 100644
index b56294b..0000000
--- a/guide/assets/scss/components/_images.scss
+++ /dev/null
@@ -1,48 +0,0 @@
-figure {
- margin: 2rem 0;
-}
-
-.figure-caption {
- margin: 0.25rem 0 0.75rem;
-}
-
-figure.wide {
- margin: 2rem -1.5rem;
-}
-
-figure.wide .figure-caption {
- margin: 0.25rem 1.5rem 0.75rem;
-}
-
-@include media-breakpoint-up(md) {
- figure.wide {
- margin: 2rem -2.5rem;
- }
-
- figure.wide .figure-caption {
- margin: 0.25rem 2.5rem 0.75rem;
- }
-}
-
-@include media-breakpoint-up(lg) {
- figure.wide {
- margin: 2rem -5rem;
- }
-
- figure.wide .figure-caption {
- margin: 0.25rem 5rem 0.75rem;
- }
-}
-
-.blur-up {
- filter: blur(5px);
-}
-
-.blur-up.lazyloaded {
- filter: unset;
-}
-
-.img-simple {
- margin-top: 0.375rem;
- margin-bottom: 1.25rem;
-}
diff --git a/guide/assets/scss/components/_mermaid.scss b/guide/assets/scss/components/_mermaid.scss
deleted file mode 100644
index 722b5c8..0000000
--- a/guide/assets/scss/components/_mermaid.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-.mermaid {
- margin: 1.5rem 0;
- padding: 1.5rem;
-}
-
-.mermaid svg {
- height: auto;
-}
diff --git a/guide/assets/scss/components/_search.scss b/guide/assets/scss/components/_search.scss
deleted file mode 100644
index 22880f5..0000000
--- a/guide/assets/scss/components/_search.scss
+++ /dev/null
@@ -1,76 +0,0 @@
-.navbar-form {
- position: relative;
-}
-
-#suggestions {
- position: absolute;
- left: 0;
- margin-top: 0.5rem;
- width: calc(100vw - 3rem);
- z-index: $zindex-dropdown;
-}
-
-#suggestions a {
- display: block;
- text-decoration: none;
- padding: 0.75rem;
- margin: 0 0.5rem;
-}
-
-#suggestions a:focus {
- background: $gray-100;
- outline: 0;
-}
-
-#suggestions div:not(:first-child) {
- border-top: 1px dashed $gray-200;
-}
-
-#suggestions div:first-child {
- margin-top: 0.5rem;
-}
-
-#suggestions div:last-child {
- margin-bottom: 0.5rem;
-}
-
-#suggestions a:hover {
- background: $gray-100;
-}
-
-#suggestions span {
- display: flex;
- font-size: $font-size-base;
-}
-
-#suggestions span:first-child {
- font-weight: $headings-font-weight;
- color: $black;
-}
-
-#suggestions span:nth-child(2) {
- color: $gray-700;
-}
-
-@include media-breakpoint-up(sm) {
- #suggestions {
- width: 31.125rem;
- }
-
- #suggestions a {
- display: flex;
- }
-
- #suggestions span:first-child {
- width: 9rem;
- padding-right: 1rem;
- border-right: 1px solid $gray-200;
- display: inline-block;
- text-align: right;
- }
-
- #suggestions span:nth-child(2) {
- width: 19rem;
- padding-left: 1rem;
- }
-}
diff --git a/guide/assets/scss/components/_syntax.scss b/guide/assets/scss/components/_syntax.scss
deleted file mode 100644
index af5a6a0..0000000
--- a/guide/assets/scss/components/_syntax.scss
+++ /dev/null
@@ -1,62 +0,0 @@
-/*
-
-Based on Ascetic by (c) Ivan Sagalaev
-
-*/
-
-.hljs {
- display: block;
- overflow-x: auto;
- padding: 1.25rem 1.5rem;
- background: $beige;
- color: $body-color;
-}
-
-.hljs-string,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-symbol,
-.hljs-bullet,
-.hljs-section,
-.hljs-addition,
-.hljs-attribute,
-.hljs-link {
- color: $pink-500;
-}
-
-.hljs-comment,
-.hljs-quote,
-.hljs-meta,
-.hljs-deletion {
- color: #888;
-}
-
-.hljs-keyword,
-.hljs-selector-tag,
-.hljs-section,
-.hljs-name,
-.hljs-type,
-.hljs-strong {
- font-weight: bold;
-}
-
-.hljs-emphasis {
- font-style: italic;
-}
-
-[data-dark-mode] body .hljs {
- background: $body-overlay-dark;
- color: $body-color-dark;
-}
-
-[data-dark-mode] body .hljs-string,
-[data-dark-mode] body .hljs-variable,
-[data-dark-mode] body .hljs-template-variable,
-[data-dark-mode] body .hljs-symbol,
-[data-dark-mode] body .hljs-bullet,
-[data-dark-mode] body .hljs-section,
-[data-dark-mode] body .hljs-addition,
-[data-dark-mode] body .hljs-attribute,
-[data-dark-mode] body .hljs-link {
- color: $blue-300;
-}
diff --git a/guide/assets/scss/components/_tables.scss b/guide/assets/scss/components/_tables.scss
deleted file mode 100644
index 8f57968..0000000
--- a/guide/assets/scss/components/_tables.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-table {
- @extend .table;
-
- margin: 3rem 0;
-}
diff --git a/guide/assets/scss/layouts/_footer.scss b/guide/assets/scss/layouts/_footer.scss
deleted file mode 100644
index 996f38b..0000000
--- a/guide/assets/scss/layouts/_footer.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-.footer {
- border-top: 1px solid $gray-200;
- padding-top: 1.125rem;
- padding-bottom: 1.125rem;
-}
-
-.footer ul {
- margin-bottom: 0;
-}
-
-.footer li {
- font-size: $font-size-sm;
- margin-bottom: 0;
-}
-
-@include media-breakpoint-up(md) {
- .footer li {
- font-size: $font-size-base;
- }
-}
diff --git a/guide/assets/scss/layouts/_header.scss b/guide/assets/scss/layouts/_header.scss
deleted file mode 100644
index e6f3d88..0000000
--- a/guide/assets/scss/layouts/_header.scss
+++ /dev/null
@@ -1,433 +0,0 @@
-.banner .nav li {
- @extend .nav-item;
-}
-
-.banner .nav a {
- @extend .nav-link;
-}
-
-.navbar-text {
- margin-left: 1rem;
-}
-
-.navbar-brand {
- font-weight: $headings-font-weight;
-}
-
-/*
-.navbar-light .navbar-brand,
-.navbar-light .navbar-brand:hover,
-.navbar-light .navbar-brand:active {
- color: $body-color;
-}
-
-.navbar-light .navbar-nav .active .nav-link {
- color: $primary;
-}
-*/
-
-.navbar {
- z-index: 1000;
- background-color: rgba(255, 255, 255, 0.95);
- border-bottom: 1px solid $gray-200;
-
- /*
- margin-top: 4px;
- */
-}
-
-@include media-breakpoint-up(lg) {
- .navbar {
- z-index: 1025;
- }
-}
-
-@include media-breakpoint-up(md) {
- .navbar-brand {
- font-size: $font-size-xl;
- }
-
- .navbar-text {
- margin-left: 1.25rem;
- }
-}
-
-.navbar-nav {
- flex-direction: row;
-}
-
-.nav-item {
- margin-left: 0;
-}
-
-@include media-breakpoint-up(md) {
- .nav-item {
- margin-left: 0.5rem;
- }
-}
-
-/*
-@include media-breakpoint-down(sm) {
- .nav-item:first-child {
- margin-left: 0;
- }
-}
-*/
-
-@include media-breakpoint-down(md) {
- .navbar .container {
- padding-left: 1.5rem;
- padding-right: 1.5rem;
- }
-}
-
-.break {
- flex-basis: 100%;
- height: 0;
-}
-
-button#doks-languages {
- margin-right: -0.5625rem;
- margin-left: 0.75rem;
-}
-
-button#doks-versions {
- margin-right: -0.5625rem;
- margin-left: 0;
-}
-
-.offcanvas .nav-link {
- color: $body-color;
-}
-
-.doks-subnavbar {
- background-color: rgba(255, 255, 255, 0.95);
- border-bottom: 1px solid $gray-200;
-}
-
-.doks-subnavbar .nav-link {
- padding: 0.5rem 1.5rem 0.5rem 0;
-}
-
-.doks-subnavbar .nav-link:first-child {
- padding: 0.5rem 1.5rem 0.5rem 0;
-}
-
-.offcanvas .nav-link:hover,
-.offcanvas .nav-link:focus {
- color: $link-color;
-}
-
-.offcanvas .nav-link.active {
- color: $link-color;
-}
-
-/*
-.navbar {
- background-color: rgba(255, 255, 255, 0.95);
- border-bottom: 1px solid $gray-200;
- margin-top: 4px;
-}
-*/
-
-.header-bar {
- border-top: 4px solid;
- border-image-source: linear-gradient(90deg, $primary, #8ed6fb 50%, #d32e9d);
- border-image-slice: 1;
-}
-
-.offcanvas .header-bar {
- margin-bottom: -4px;
-}
-
-.home .navbar {
- border-bottom: 0;
-}
-
-/*
-.navbar-form {
- position: relative;
- margin-top: 0.25rem;
-}
-*/
-
-@include media-breakpoint-up(md) {
- .navbar-brand {
- margin-right: 0.75rem !important;
- }
-
- .main-nav .nav-item:first-child .nav-link,
- .social-nav .nav-item:first-child .nav-link {
- padding-left: 0;
- }
-
- .main-nav .nav-item:last-child .nav-link,
- .social-nav .nav-item:last-child .nav-link {
- padding-right: 0;
- }
-
- .doks-search {
- max-width: 20rem;
- margin-top: 0.125rem;
- margin-bottom: 0.125rem;
- }
-
- /*
- .navbar-form {
- margin-top: 0;
- margin-left: 6rem;
- margin-right: 1.5rem;
- }
- */
-}
-
-.form-control.is-search {
- padding-right: 4rem;
- border: 1px solid transparent;
- background: $gray-100;
-}
-
-.form-control.is-search:focus {
- border: 1px solid $primary;
-}
-
-.doks-search::after {
- position: absolute;
- top: 0.4625rem;
- right: 0.5375rem;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 1.5rem;
- padding-right: 0.3125rem;
- padding-left: 0.3125rem;
- font-size: $font-size-base * 0.75;
- color: $gray-700;
- content: "Ctrl + /";
- border: 1px solid $gray-300;
- border-radius: 0.25rem;
-}
-
-/*
-@include media-breakpoint-up(lg) {
- .navbar-form {
- margin-left: 15rem;
- }
-}
-
-@include media-breakpoint-up(xl) {
- .navbar-form {
- margin-left: 30rem;
- }
-}
-*/
-
-/*
-.form-control.is-search {
-*/
-
-/*
- padding-right: calc(1.5em + 0.75rem);
- */
-
-/*
- padding-right: 2.5rem;
- background: $gray-100;
- border: 0;
- */
-
-/*
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%236c757d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
- background-repeat: no-repeat;
- background-position: right calc(0.375em + 0.1875rem) center;
- background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
- */
-
-/*
-}
-*/
-
-/*
-.navbar-form::after {
- position: absolute;
- top: 0.4625rem;
- right: 0.5375rem;
- display: flex;
- align-items: center;
- justify-content: center;
- height: 1.5rem;
- padding-right: 0.4375rem;
- padding-left: 0.4375rem;
- font-size: $font-size-base * 0.75;
- color: $gray-700;
- content: "/";
- border: 1px solid $gray-300;
- border-radius: 0.25rem;
-}
-*/
-
-/*! purgecss start ignore */
-.algolia-autocomplete {
- display: flex !important;
-}
-
-.algolia-autocomplete .ds-dropdown-menu {
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
-}
-
-@include media-breakpoint-down(sm) {
- .algolia-autocomplete .ds-dropdown-menu {
- max-width: 512px !important;
- min-width: 312px !important;
- width: auto !important;
- }
-
- .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column {
- font-weight: normal;
- }
-
- .algolia-autocomplete .algolia-docsearch-suggestion .algolia-docsearch-suggestion--subcategory-column::after {
- content: "/";
- margin-right: 0.25rem;
- }
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--category-header {
- color: $black;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--title {
- margin-bottom: 0;
-}
-
-.algolia-autocomplete .algolia-docsearch-suggestion--highlight {
- padding: 0 0.05em;
-}
-
-.algolia-autocomplete .algolia-docsearch-footer {
- margin-top: 1rem;
- margin-right: 0.5rem;
- margin-bottom: 0.5rem;
-}
-
-/*! purgecss end ignore */
-
-/*
- * Source: https://medium.com/creative-technology-concepts-code/responsive-mobile-dropdown-navigation-using-css-only-7218e4498a99
-*/
-
-/* Style the menu icon for the dropdown */
-
-.navbar .menu-icon {
- cursor: pointer;
-
- /* display: inline-block; */
-
- /* float: right; */
- padding: 1.125rem 0.625rem;
- margin: 0 0 0 -0.625rem;
-
- /* position: relative; */
- user-select: none;
-}
-
-.navbar .menu-icon .navicon {
- background: $navbar-light-color;
- display: block;
- height: 2px;
- position: relative;
- transition: background 0.2s ease-out;
- width: 18px;
-}
-
-.navbar .menu-icon .navicon::before,
-.navbar .menu-icon .navicon::after {
- background: $navbar-light-color;
- content: "";
- display: block;
- height: 100%;
- position: absolute;
- transition: all 0.2s ease-out;
- width: 100%;
-}
-
-.navbar .menu-icon .navicon::before {
- top: 5px;
-}
-
-.navbar .menu-icon .navicon::after {
- top: -5px;
-}
-
-/* Add the icon and menu animations when the checkbox is clicked */
-
-.navbar .menu-btn {
- display: none;
-}
-
-.navbar .menu-btn:checked ~ .navbar-collapse {
- display: block;
- max-height: 100vh;
-}
-
-.navbar .menu-btn:checked ~ .menu-icon .navicon {
- background: transparent;
-}
-
-.navbar .menu-btn:checked ~ .menu-icon .navicon::before {
- transform: rotate(-45deg);
-}
-
-.navbar .menu-btn:checked ~ .menu-icon .navicon::after {
- transform: rotate(45deg);
-}
-
-.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::before,
-.navbar .menu-btn:checked ~ .menu-icon:not(.steps) .navicon::after {
- top: 0;
-}
-
-.btn-menu {
- margin-left: 1rem;
-}
-
-.btn-menu,
-.doks-sidebar-toggle {
- padding-right: 0.25rem;
- padding-left: 0.25rem;
- margin-right: -0.5rem;
-}
-
-.btn-menu:hover,
-.btn-doks-light:hover,
-.doks-sidebar-toggle:hover {
- background: $pink-100;
-}
-
-.btn-menu:focus,
-.doks-sidebar-toggle:focus,
-.doks-mode-toggle:focus {
- outline: 0;
-}
-
-.doks-sidebar-toggle .doks-collapse {
- display: none;
-}
-
-.doks-sidebar-toggle:not(.collapsed) .doks-expand {
- display: none;
-}
-
-.doks-sidebar-toggle:not(.collapsed) .doks-collapse {
- display: inline-block;
-}
-
-.navbar-light .navbar-brand,
-.navbar-light .navbar-brand:hover,
-.navbar-light .navbar-brand:active {
- color: $body-color;
-}
-
-.navbar-light .navbar-nav .active .nav-link {
- color: $primary;
-}
diff --git a/guide/assets/scss/layouts/_pages.scss b/guide/assets/scss/layouts/_pages.scss
deleted file mode 100644
index 7284d6d..0000000
--- a/guide/assets/scss/layouts/_pages.scss
+++ /dev/null
@@ -1,45 +0,0 @@
-.docs-content > h2[id]::before,
-.docs-content > h3[id]::before,
-.docs-content > h4[id]::before {
- display: block;
- height: 6rem;
- margin-top: -6rem;
- content: "";
-}
-
-.anchor {
- visibility: hidden;
- padding-left: 0.5rem;
-}
-
-h1:hover a,
-h2:hover a,
-h3:hover a,
-h4:hover a {
- visibility: visible;
- text-decoration: none;
-}
-
-.card-list {
- margin-top: 2.25rem;
-}
-
-.edit-page {
- margin-top: 3rem;
- font-size: $font-size-base;
-}
-
-.edit-page svg {
- margin-right: 0.5rem;
- margin-bottom: 0.25rem;
-}
-
-p.meta {
- margin-top: 0.5rem;
- font-size: $font-size-base;
-}
-
-.breadcrumb {
- margin-top: 2.25rem;
- font-size: $font-size-base;
-}
diff --git a/guide/assets/scss/layouts/_posts.scss b/guide/assets/scss/layouts/_posts.scss
deleted file mode 100644
index 8cfc463..0000000
--- a/guide/assets/scss/layouts/_posts.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-.home .card,
-.contributors.list .card,
-.blog.list .card {
- margin-top: 2rem;
- margin-bottom: 2rem;
- transition: transform 0.3s;
-}
-
-.home .card:hover,
-.contributors.list .card:hover,
-.blog.list .card:hover {
- transform: scale(1.025);
-}
-
-.home .card-body,
-.contributors.list .card-body,
-.blog.list .card-body {
- padding: 0 2rem 1rem;
-}
-
-.blog-header {
- text-align: center;
- margin-bottom: 2rem;
-}
-
-.blog-footer {
- text-align: center;
-}
diff --git a/guide/assets/scss/layouts/_sidebar.scss b/guide/assets/scss/layouts/_sidebar.scss
deleted file mode 100644
index 96dc191..0000000
--- a/guide/assets/scss/layouts/_sidebar.scss
+++ /dev/null
@@ -1,110 +0,0 @@
-.docs-links,
-.docs-toc {
- scrollbar-width: thin;
- scrollbar-color: $white $white;
-}
-
-.docs-links::-webkit-scrollbar,
-.docs-toc::-webkit-scrollbar {
- width: 5px;
-}
-
-.docs-links::-webkit-scrollbar-track,
-.docs-toc::-webkit-scrollbar-track {
- background: $white;
-}
-
-.docs-links::-webkit-scrollbar-thumb,
-.docs-toc::-webkit-scrollbar-thumb {
- background: $white;
-}
-
-.docs-links:hover,
-.docs-toc:hover {
- scrollbar-width: thin;
- scrollbar-color: $gray-200 $white;
-}
-
-.docs-links:hover::-webkit-scrollbar-thumb,
-.docs-toc:hover::-webkit-scrollbar-thumb {
- background: $gray-200;
-}
-
-.docs-links::-webkit-scrollbar-thumb:hover,
-.docs-toc::-webkit-scrollbar-thumb:hover {
- background: $gray-200;
-}
-
-.docs-links h3,
-.page-links h3 {
- text-transform: uppercase;
- font-size: $font-size-base;
- margin: 1.25rem 0 0.5rem 0;
- padding: 1.5rem 0 0 0;
-}
-
-@include media-breakpoint-up(lg) {
- .docs-links h3,
- .page-links h3 {
- margin: 1.125rem 1.5rem 0.75rem 0;
- padding: 1.375rem 0 0 0;
- }
-}
-
-.docs-links h3:not(:first-child) {
- border-top: 1px solid $gray-200;
-}
-
-a.docs-link {
- color: $body-color;
- display: block;
- padding: 0.125rem 0;
- font-size: $font-size-base;
-}
-
-.page-links li {
- margin-top: 0.375rem;
- padding-top: 0.375rem;
-}
-
-.page-links li ul li {
- border-top: none;
- padding-left: 1rem;
- margin-top: 0.125rem;
- padding-top: 0.125rem;
-}
-
-.page-links li:not(:first-child) {
- border-top: 1px dashed $gray-200;
-}
-
-.page-links a {
- color: $body-color;
- display: block;
- padding: 0.125rem 0;
- font-size: $font-size-base * 0.9375;
-}
-
-.docs-link:hover,
-.docs-link.active,
-.page-links a:hover {
- text-decoration: none;
- color: $link-color;
-}
-
-.docs-links h3.sidebar-link,
-.page-links h3.sidebar-link {
- text-transform: none;
- font-size: $font-size-md;
- font-weight: normal;
-}
-
-.docs-links h3.sidebar-link a,
-.page-links h3.sidebar-link a {
- color: $body-color;
-}
-
-.docs-links h3.sidebar-link a:hover,
-.page-links h3.sidebar-link a:hover {
- text-decoration: underline;
-}
diff --git a/guide/assets/scss/vendor/.gitkeep b/guide/assets/scss/vendor/.gitkeep
deleted file mode 100644
index e69de29..0000000
diff --git a/guide/babel.config.js b/guide/babel.config.js
deleted file mode 100644
index ce9c9de..0000000
--- a/guide/babel.config.js
+++ /dev/null
@@ -1,17 +0,0 @@
-module.exports = {
- presets: [
- [
- '@babel/preset-env',
- {
- targets: {
- browsers: [
- // Best practice: https://github.com/babel/babel/issues/7789
- '>=1%',
- 'not ie 11',
- 'not op_mini all'
- ]
- }
- }
- ]
- ]
-};
\ No newline at end of file
diff --git a/guide/config/_default/config.toml b/guide/config/_default/config.toml
deleted file mode 100644
index c44adb0..0000000
--- a/guide/config/_default/config.toml
+++ /dev/null
@@ -1,124 +0,0 @@
-baseurl = "https://starter.coherent-labs.com"
-canonifyURLs = false
-disableAliases = true
-disableHugoGeneratorInject = true
-enableEmoji = true
-enableGitInfo = false
-enableRobotsTXT = true
-languageCode = "en-US"
-paginate = 7
-rssLimit = 10
-
-# add redirects/headers
-[outputs]
-home = ["HTML", "RSS", "REDIRECTS", "HEADERS"]
-section = ["HTML", "RSS", "SITEMAP"]
-
-# remove .{ext} from text/netlify
-[mediaTypes."text/netlify"]
-suffixes = [""]
-delimiter = ""
-
-# add output format for netlify _redirects
-[outputFormats.REDIRECTS]
-mediaType = "text/netlify"
-baseName = "_redirects"
-isPlainText = true
-notAlternative = true
-
-# add output format for netlify _headers
-[outputFormats.HEADERS]
-mediaType = "text/netlify"
-baseName = "_headers"
-isPlainText = true
-notAlternative = true
-
-# add output format for section sitemap.xml
-[outputFormats.SITEMAP]
-mediaType = "application/xml"
-baseName = "sitemap"
-isHTML = false
-isPlainText = true
-noUgly = true
-rel = "sitemap"
-
-[caches]
- [caches.getjson]
- dir = ":cacheDir/:project"
- maxAge = "10s"
-
-[markup]
- [markup.goldmark]
- [markup.goldmark.extensions]
- linkify = false
- [markup.goldmark.parser]
- autoHeadingID = true
- autoHeadingIDType = "github"
- [markup.goldmark.parser.attribute]
- block = true
- title = true
- [markup.goldmark.renderer]
- unsafe = true
- [markup.highlight]
- codeFences = false
- guessSyntax = false
- hl_Lines = ""
- lineNoStart = 1
- lineNos = false
- lineNumbersInTable = true
- noClasses = false
- style = "dracula"
- tabWidth = 4
-
-[sitemap]
- changefreq = "weekly"
- filename = "sitemap.xml"
- priority = 0.5
-
-[taxonomies]
- contributor = "contributors"
-
-[minify.tdewolff.html]
- keepWhitespace = false
-
-[module]
- [module.hugoVersion]
- extended = true
- min = "0.80.0"
- max = ""
- [[module.mounts]]
- source = "node_modules/@hyas/doks/archetypes"
- target = "archetypes"
-# [[module.mounts]]
-# source = "node_modules/@hyas/doks/content"
-# target = "content"
- [[module.mounts]]
- source = "node_modules/@hyas/doks/data"
- target = "data"
- [[module.mounts]]
- source = "node_modules/@hyas/doks/layouts"
- target = "layouts"
- [[module.mounts]]
- source = "node_modules/flexsearch"
- target = "assets/js/vendor/flexsearch"
- [[module.mounts]]
- source = "node_modules/katex"
- target = "assets/js/vendor/katex"
- [[module.mounts]]
- source = "assets"
- target = "assets"
- [[module.mounts]]
- source = "static"
- target = "static"
- [[module.mounts]]
- source = "content"
- target = "content"
- [[module.mounts]]
- source = "layouts"
- target = "layouts"
- [[module.mounts]]
- source = "archetypes"
- target = "archetypes"
- [[module.mounts]]
- source = "data"
- target = "data"
diff --git a/guide/config/_default/menus.toml b/guide/config/_default/menus.toml
deleted file mode 100644
index e98d08a..0000000
--- a/guide/config/_default/menus.toml
+++ /dev/null
@@ -1,26 +0,0 @@
-[[chapters]]
- name = "Chapters"
- weight = 10
- identifier = "chapters"
- url = "/chapters/"
-
-[[unrealChapters]]
- name = "Unreal Chapters"
- weight = 10
- identifier = "unreal-chapters"
- url = "/unreal-chapters/"
-
-[[main]]
- name = "FrontEnd"
- url = "/chapters/"
- weight = 10
-
-[[main]]
- name = "Unreal Engine"
- url = "/unreal-chapters/"
- weight = 20
-
-# [[footer]]
-# name = "Privacy"
-# url = "/privacy-policy/"
-# weight = 10
diff --git a/guide/config/_default/params.toml b/guide/config/_default/params.toml
deleted file mode 100644
index b80a96d..0000000
--- a/guide/config/_default/params.toml
+++ /dev/null
@@ -1,80 +0,0 @@
-# Meta Data for SEO
-
-## Homepage
-title = "Gameface Starter Guide"
-titleSeparator = "-"
-titleAddition = "A hands-on introduction to building UI with Gameface"
-description = ""
-
-## Open Graph
-images = ["doks.png"]
-ogLocale = "en_US"
-domainTLD = "doks.netlify.app"
-titleHome = "Doks Theme"
-
-## Twitter Cards
-twitterSite = "@getdoks"
-twitterCreator = "@henkverlinde"
-
-## JSON-LD
-# schemaType = "Person"
-schemaType = "Organization"
-schemaName = "Doks"
-schemaAuthor = "Henk Verlinde"
-schemaAuthorTwitter = "https://twitter.com/henkverlinde"
-schemaAuthorLinkedIn = "https://www.linkedin.com/in/henkverlinde/"
-schemaAuthorGitHub = "https://github.com/h-enk"
-schemaLocale = "en-US"
-schemaLogo = "logo-doks.png"
-schemaLogoWidth = 512
-schemaLogoHeight = 512
-schemaImage = "doks.png"
-schemaImageWidth = 1280
-schemaImageHeight = 640
-schemaTwitter = "https://twitter.com/getdoks"
-schemaLinkedIn = ""
-schemaGitHub = "https://github.com/h-enk/doks"
-schemaSection = "blog"
-
-## Sitelinks Search Box
-siteLinksSearchBox = false
-
-## Chrome Browser
-themeColor = "#fff"
-
-# Images
-quality = 85
-bgColor = "#fff"
-landscapePhotoWidths = [900, 800, 700, 600, 500]
-portraitPhotoWidths = [800, 700, 600, 500]
-lqipWidth = "20x"
-
-# Footer
-footer = "Powered by Hugo, and Doks"
-
-# Feed
-copyRight = "Copyright (c) 2020-2021 Henk Verlinde"
-
-# Alert
-alert = false
-alertDismissable = true
-# alertText = "Introducing the Doks child theme, several DX + UX updates, and more! Check out Doks v0.2"
-alertText = "Introducing the Doks child theme, several DX + UX updates, and more! Check out Doks v0.2"
-
-# Edit Page
-docsRepo = "https://github.com/h-enk/doks"
-editPage = false
-
-[options]
- lazySizes = true
- clipBoard = true
- instantPage = true
- flexSearch = true
- darkMode = false
- bootStrapJs = true
- breadCrumb = true
- highLight = true
- kaTex = false
- collapsibleSidebar = true
- multilingualMode = false # Not yet functional
- docsVersioning = false # Not yet functional
diff --git a/guide/config/next/config.toml b/guide/config/next/config.toml
deleted file mode 100644
index 9c5e90d..0000000
--- a/guide/config/next/config.toml
+++ /dev/null
@@ -1 +0,0 @@
-canonifyURLs = false
diff --git a/guide/config/postcss.config.js b/guide/config/postcss.config.js
deleted file mode 100644
index 5a0e028..0000000
--- a/guide/config/postcss.config.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const autoprefixer = require('autoprefixer');
-const purgecss = require('@fullhuman/postcss-purgecss');
-const whitelister = require('purgecss-whitelister');
-
-module.exports = {
- plugins: [
- autoprefixer(),
- purgecss({
- content: [
- './node_modules/@hyas/doks/layouts/**/*.html',
- './node_modules/@hyas/doks/content/**/*.md',
- './layouts/**/*.html',
- './content/**/*.md',
- ],
- safelist: [
- 'lazyloaded',
- 'table',
- 'thead',
- 'tbody',
- 'tr',
- 'th',
- 'td',
- 'h5',
- 'alert-link',
- ...whitelister([
- './node_modules/@hyas/doks/assets/scss/common/_variables.scss',
- './node_modules/@hyas/doks/assets/scss/components/_buttons.scss',
- './node_modules/@hyas/doks/assets/scss/components/_code.scss',
- './node_modules/@hyas/doks/assets/scss/components/_syntax.scss',
- './node_modules/@hyas/doks/assets/scss/components/_search.scss',
- './node_modules/@hyas/doks/assets/scss/common/_dark.scss',
- './node_modules/katex/dist/katex.css',
- ]),
- ],
- }),
- ],
-}
diff --git a/guide/config/production/config.toml b/guide/config/production/config.toml
deleted file mode 100644
index 9c5e90d..0000000
--- a/guide/config/production/config.toml
+++ /dev/null
@@ -1 +0,0 @@
-canonifyURLs = false
diff --git a/guide/content/_index.md b/guide/content/_index.md
deleted file mode 100644
index ecad546..0000000
--- a/guide/content/_index.md
+++ /dev/null
@@ -1,17 +0,0 @@
----
-title : "Welcome to the Gameface Starter Guide!"
-description: ""
-lead: "
-
-
-"
-date: 2020-10-06T08:47:36+00:00
-lastmod: 2020-10-06T08:47:36+00:00
-draft: false
-images: []
----
-
-Gameface is for developers who’d like to utilize modern HTML5 and JavaScript to create a game user interface. Gameface shortens development time by allowing you to use modern and widely available technologies.
-
-
-These are a series of tutorials focused on building a UI and using it in your game engine.
diff --git a/guide/content/chapters/_index.md b/guide/content/chapters/_index.md
deleted file mode 100644
index 97586da..0000000
--- a/guide/content/chapters/_index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Chapters"
-description: ""
-date: 2021-09-15T08:38:10+03:00
-lastmod: 2021-09-15T08:38:10+03:00
-draft: false
-images: []
----
\ No newline at end of file
diff --git a/guide/content/chapters/chapter-1/index.md b/guide/content/chapters/chapter-1/index.md
deleted file mode 100644
index aa47da7..0000000
--- a/guide/content/chapters/chapter-1/index.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: "Chapter 1: Getting Started"
-description: ""
-date: 2021-09-15T08:26:04+03:00
-lastmod: 2021-09-15T08:26:04+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-## Prerequisites:
-
-In order to be able to optimally leverage Gameface’s features, you will need a good understanding of modern HTML, CSS and JavaScript.
-
-## Who is this tutorial for:
-
-This tutorial is for Front End developers who are looking to quickly familiarize with Gameface and its features.
-
-## What is not covered in this tutorial:
-
-This tutorial focuses on Gameface and its features. You would not find any HTML, CSS or JavaScript-specific explanations here.
-
-## How is this tutorial structured:
-
-It’s separated in **10** different chapters, each chapter will go over a specific element of the UI and will demonstrate a feature of Gameface.
-
-## Choosing the right fit for your project:
-
-As with any Front End project, there are numerous ways to create your project. Here we will go over the main supported ones in Gameface.
-
-### Plain JavaScript
-
-The most simple way to start your project is by writing pure HTML with CSS and JavaScript. Here you don’t need to worry about any libraries and dependencies to build your project.
-
-The benefit of writing plain JavaScript is that over time your codebase would not end up needlessly bloated with dependencies and it will have better performance than some of the other frameworks and libraries.
-
-The other major benefit is that plain JS is more widely used and understandable. That is why for the purpose of this tutorial we will be using pure JS with HTML and CSS and only add the libraries that Gameface requires.
-
-The biggest con of using plain JavaScript is the fact that you need to write everything from scratch which will inevitably slow your development time. While this is fine for smaller applications, if you need to build a large scale application it’s worth checking some of the other libraries that are mentioned below.
-
-### jQuery
-
-jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API.
-
-The main benefit of using jQuery is the ease of use. To get started with jQuery all you need to do is include the library in your document and start coding your UI.
-
-The downside of using it is that most of the features it provides can be achieved using plain JavaScript, meaning that you will needlessly add dependencies that could slow down your UI.
-
-### TypeScript
-
-TypeScript is a superset of JavaScript, meaning that it contains all of the functionality of JavaScript and more.
-
-TypeScript inherits major pros of JavaScript, but also offers additional benefits coming from static typing and other concepts specific to TS. These are especially useful when multiple people work on the same project, as TypeScript is predictable and can catch bugs earlier in the development process.
-
-To learn more about how to use TypeScript in Gameface, you can check out our [documentation](https://docs.coherent-labs.com/cpp-gameface/content_development/typescript/).
-
-### React
-
-React is a JavaScript library for building user interfaces.
-
-The biggest advantage of React is that it allows you to create reusable UI components. That way you can manage large applications with ease. For this reason React is one of the most commonly used libraries by our clients.
-
-It’s worth noting however that the React ecosystem is very large and can be easily bloated with unnecessary code, and hence impact the performance of your UI.
-
-You can read more about how to set up a React toolchain with Gameface [here](https://docs.coherent-labs.com/cpp-gameface/content_development/reactsupport/).
-
-### Preact
-
-Preact is a fast 3kB alternative to React with the same modern API.
-
-Compared to React, Preact is a smaller and more performance-optimized library that includes most of React's features.
-
-You can check how to build a Preact app for Gameface using our command line tool [here](https://docs.coherent-labs.com/cpp-gameface/content_development/preactsupport/).
-
-## Setting up our project
-
-In this tutorial we will be using plain JavaScript with the cohtml.js library, which will allow us to communicate with the game.
-
-Since the focus of this tutorial is on Gameface features, we have already set up the project in the chapter_1 folder - you can leverage it for the rest of the tutorial. Inside the folder you will see the following files - index.html, style.css, cohtml.js, script.js and the assets folder which is going to contain all of the assets that we will be using in the next chapters.
-
-The index.html and script.js files are where we will be writing most of our code for this tutorial. The style.css is a premade file with styles that we will be using in the later chapters.
-
-## Improving Development
-
-To help in the development process we have a few tools that you can use:
-
-### Auto Complete
-
-Auto complete is a feature present in code editors that suggests ways to complete code based on the user input.
-
-Since the default auto complete features do not always provide meaningful suggestions, we have used the Language Server Protocol developed by Microsoft to extend the functionalities of built-in auto complete features.
-
-You can see how to install and configure it in our [documentation](https://docs.coherent-labs.com/cpp-gameface/content_development/autocomplete/).
-
-### Linters
-
-#### HTML Lint
-
-The HTML linter is designed to help you reduce the most common syntax errors that happen with data-binding. It catches errors caused by misspelled data-binding attributes, wrong syntax or accessing non-existent properties from the model. It uses HTMLHint - an HTML linter and extends its rules.
-
-You can learn more about how to use it from our [documentation](https://docs.coherent-labs.com/cpp-gameface/content_development/htmllint/)
-
-#### CSS Lint
-
-The CSS linter is designed to allow you to identify unsupported css rules at runtime. It is based on Stylelint which uses PostCSS underneath.
-
-You can see how to install and use it in our [documentation](https://docs.coherent-labs.com/cpp-gameface/content_development/csslinting/).
-
-## Getting started
-
-To get you started right away we have already created a boilerplate that you can use with this guide. You can [download it from here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_1/chapter_1.zip)
diff --git a/guide/content/chapters/chapter-10/chapter-10_1.png b/guide/content/chapters/chapter-10/chapter-10_1.png
deleted file mode 100644
index 040849b..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_10.png b/guide/content/chapters/chapter-10/chapter-10_10.png
deleted file mode 100644
index c73083d..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_10.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_11.png b/guide/content/chapters/chapter-10/chapter-10_11.png
deleted file mode 100644
index 7c32c3d..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_11.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_12.png b/guide/content/chapters/chapter-10/chapter-10_12.png
deleted file mode 100644
index dc756cc..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_12.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_13.png b/guide/content/chapters/chapter-10/chapter-10_13.png
deleted file mode 100644
index 838d16e..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_13.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_14.png b/guide/content/chapters/chapter-10/chapter-10_14.png
deleted file mode 100644
index f8f3d52..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_14.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_15.png b/guide/content/chapters/chapter-10/chapter-10_15.png
deleted file mode 100644
index 32cea8f..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_15.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_16.png b/guide/content/chapters/chapter-10/chapter-10_16.png
deleted file mode 100644
index f29b8d4..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_16.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_17.png b/guide/content/chapters/chapter-10/chapter-10_17.png
deleted file mode 100644
index 0418bf6..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_17.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_18.png b/guide/content/chapters/chapter-10/chapter-10_18.png
deleted file mode 100644
index f0af42d..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_18.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_19.png b/guide/content/chapters/chapter-10/chapter-10_19.png
deleted file mode 100644
index 99d3c5e..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_19.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_2.png b/guide/content/chapters/chapter-10/chapter-10_2.png
deleted file mode 100644
index 38a1dc6..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_20.png b/guide/content/chapters/chapter-10/chapter-10_20.png
deleted file mode 100644
index 5011d0f..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_20.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_3.png b/guide/content/chapters/chapter-10/chapter-10_3.png
deleted file mode 100644
index f14392a..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_4.png b/guide/content/chapters/chapter-10/chapter-10_4.png
deleted file mode 100644
index 23ba0c8..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_4.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_5.png b/guide/content/chapters/chapter-10/chapter-10_5.png
deleted file mode 100644
index 0159e1f..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_6.png b/guide/content/chapters/chapter-10/chapter-10_6.png
deleted file mode 100644
index fbc4555..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_6.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_7.png b/guide/content/chapters/chapter-10/chapter-10_7.png
deleted file mode 100644
index 01d8ad7..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_7.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_8.png b/guide/content/chapters/chapter-10/chapter-10_8.png
deleted file mode 100644
index 644aa32..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_8.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/chapter-10_9.png b/guide/content/chapters/chapter-10/chapter-10_9.png
deleted file mode 100644
index d06d11b..0000000
Binary files a/guide/content/chapters/chapter-10/chapter-10_9.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-10/index.md b/guide/content/chapters/chapter-10/index.md
deleted file mode 100644
index 73c50aa..0000000
--- a/guide/content/chapters/chapter-10/index.md
+++ /dev/null
@@ -1,167 +0,0 @@
----
-title: "Chapter 10: Debugging, Profiling and Optimizations"
-description: ""
-date: 2021-09-15T08:39:28+03:00
-lastmod: 2021-09-15T08:39:28+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 2
----
-
-In this chapter we’ll go over how to use the Dev Tools to debug, profile and then optimize your UI. These concepts are a standard in web development and we'll focus on how to apply them to Gameface.
-
-The `Gameface Dev Tools` look identical to the `Chrome Dev Tools`, but with a more limited functionality. To open them you can either press `F12` in the Player, or go to [http://localhost:9444/](http://localhost:9444/) in the browser of choice.
-
-If you don’t have a running instance of the UI, you won’t be able to connect to the Dev Tools. You also won’t be able to open multiple tabs in your browser, so in case you encounter the following error, it is most likely due to the reasons mentioned above
-
-{{< img src="chapter-10_1.png" alt="chapter-10_1" caption="" class="border-0" >}}
-
-## Debugging
-
-### Inspector Tab
-
-We'll first go over how to use the `Inspector` tab in Gameface.
-
-Just like in Chrome, when you open the `Inspector`, you will see a list of all of the elements that are present in the UI. By selecting an element from this list, you are now able to do the following:
-
-- Delete the element - When you select an element, you can delete it by pressing the delete button. This will remove the element from the DOM and all of its children.
-
-- Change the CSS - When you select an element, you are able to change the styles that were applied to it in the right side of the screen:
-
-{{< img src="chapter-10_2.png" alt="chapter-10_2" caption="Here you can disable and enable styles, change values, or create new ones. Unlike in Chrome, here you are able to only set the styles supported in Gameface. If you try to add an unsupported style, it won’t appear and you will get a warning in the console (in our Inspector we only support the styles and computed tabs)." class="border-0" >}}
-
-- Change the attributes of the html elements - You can do that by double-clicking on the attribute value:
-
-{{< img src="chapter-10_3.png" alt="chapter-10_3" caption="" class="border-0" >}}
-
-- Change the html markup - Again, you can achieve this by double-clicking on the element tag name
-
-{{< img src="chapter-10_4.png" alt="chapter-10_4" caption="" class="border-0" >}}
-
-You can use all of these features to debug elements or styles that don’t appear correctly in your UI.
-
-If you are not sure what element you are selecting, you can open the Player - it will show a blue rectangle, indicating the element bounding box:
-
-{{< img src="chapter-10_5.png" alt="chapter-10_5" caption="" class="border-0" >}}
-
-If the element has padding, it will display it as a green box:
-
-{{< img src="chapter-10_6.png" alt="chapter-10_6" caption="" class="border-0" >}}
-
-And if it has a margin, it will show it as an orange box:
-
-{{< img src="chapter-10_7.png" alt="chapter-10_7" caption="" class="border-0" >}}
-
-### Console Tab
-
-The next tab you can use for debugging is the `Console`. Here you will see the output of some of the errors and warnings you get, and any logs you have added to your code.
-
-{{< alert icon="❗" text="Note: Some CoHTML specific errors and warnings are only available in the Gameface console." />}}
-
-You can also execute JavaScript code inside the console - you can run any arbitrary JS code that is not related to your UI, or you can also run any code to modify your page. Globally available variables are also available in the console.
-
-If the console gets too cluttered, you can also use `CTRL + L` to clear it.
-
-### Sources Tab
-
-The last tool you can use to debug your code is the `Sources` tab. Inside on the left you will see all of the loaded files in your UI:
-
-{{< img src="chapter-10_8.png" alt="chapter-10_8" caption="" class="border-0" >}}
-
-On the right side, you would be able to view the content of the file. You are not allowed to make changes inside these files, but you can use breakpoints for debugging.
-
-A common method for debugging a problem is to insert a lot of `console.log()` statements into the code in order to inspect values as the script executes.
-
-The `console.log()` method may get the job done, but breakpoints can get it done faster. A breakpoint lets you pause your code in the middle of its execution and examine all values at that moment in time. Breakpoints have a few advantages over the `console.log()` method:
-
-- With `console.log()` you need to manually open the source code, find the relevant code, insert the `console.log()` statements, and then reload the page in order to see the messages in the Console. With breakpoints, you can pause on the relevant code without even knowing how the code is structured.
-- In your `console.log()` statements, you need to explicitly specify each value that you want to inspect. With breakpoints, `DevTools` shows you the values of all variables at that moment in time (sometimes there might be variables affecting your code that you're not even aware of).
-
-Adding breakpoints can be done by simply pressing the number of the line next to the code you want to debug:
-
-{{< img src="chapter-10_9.png" alt="chapter-10_9" caption="" class="border-0" >}}
-
-If the line has object values, you can break at that specific value.
-
-Next, you only have to refresh your UI and the code will "break" or pause the execution at the breakpoint we created. We can now hover over the code and get the values that are set for the exact time the code is paused: {{< img src="chapter-10_10.png" alt="chapter-10_10" caption="" class="border-0" >}}
-
-To resume the script execution you can click on the play button in the right panel:
-
-{{< img src="chapter-10_11.png" alt="chapter-10_11" caption="" class="border-0" >}}
-
-{{< alert icon="👉" text="If you have other breakpoints after the resume, the code execution will also pause on them as well." />}}
-
-If you’d like to go step by step through the execution of the code, you can press the button next to the resume one  and it will take you to the next line of code that should execute.
-
-## Profiling
-
-Now that we have covered some of the ways we can use the `Dev Tools` to debug our code, we can look into the ways to profile it and capture any performance issues that we might have.
-
-### Performance Tab
-
-First up is the `Performance` tab. This tab allows us to analyze runtime performance.
-
-Here we can create recordings of our performance and then analyze them. To start a recording, press the record button `(or CTRL + E)` and in the Player, start using your UI (for example press button, trigger events, etc). Once completed, you can press the stop button and you will get a timeline of the JS code that was executed, together with information on how long it took.
-
-{{< img src="chapter-10_13.png" alt="chapter-10_13" caption="Here we can see that there is a large execution in our UI at the 14 second mark." class="border-0" >}}
-
-We can now use the mouse wheel to zoom in and view it in more detail:
-
-{{< img src="chapter-10_14.png" alt="chapter-10_14" caption="" class="border-0" >}}
-
-Here we are able to see that the `Advance` takes the most time - this is the function in the backend that advances the internal timer of the View and runs all animations. If any changes have happened in the page, this call will also trigger a new layout and render on the other threads. The Advance includes all of the JS code executions, animations, hit testing of the mouse, layout recalculations caused by animations or style change from the JS, layout and DOM tree synchronization, etc.
-
-In most cases, a long advance call indicates that there are probably long executions in the JS code. To see them in more details, you can download the profile you’ve generated by using the Save Profile button 
-
-In Chrome, you can load the profile you have saved and you’ll observe the following JS function executions:
-
-{{< img src="chapter-10_16.png" alt="chapter-10_16" caption="" class="border-0" >}}
-
-### Memory Tab
-
-In addition, we can use the `Memory` tab to check the memory consumption of our Front End. It provides information about how a page is using memory. After opening the Memory tab, you are introduced with three options to investigate your UI’s memory usage: you can take a heap snapshot, start allocation instrumentation on a timeline, or begin allocation sampling.
-
-{{< img src="chapter-10_17.png" alt="chapter-10_17" caption="" class="border-0" >}}
-
-{{< alert icon="❗" text="Currently, Heap Snapshots and Allocation Profiles are supported in Gameface." />}}
-
-The quickest option you have is taking a heap snapshot. Once a snapshot is loaded, you can further inspect the memory distribution of the JavaScript objects and DOM nodes (at the time when the snapshot was taken).
-
-{{< img src="chapter-10_18.png" alt="chapter-10_18" caption="" class="border-0" >}}
-
-Now, under the name of the snapshot, we have the overall size of the JavaScript objects that can be reached.
-
-After selecting the loaded snapshot, you can see a table with the constructors and objects deriving from them (grouped by size, distance, and the number of objects retained).
-
-Here is a short overview of the columns in this table:
-
-1. **Constructor**: the JavaScript function used to construct the objects.
-2. **Distance**: distance from the root. The greater the distance, the longer the object takes to load and process.
-3. **Objects** Count: the amount of objects created by the specified constructor.
-4. **Shallow** Size: the shadow size of every object that was created via a particular constructor.
-5. **Retained** Size: the greatest retained size of a set of objects.
-
-However, this is only for the Summary view. You also have the options for the `Comparison`, `Containment` and `Statistics` views.
-
-{{< img src="chapter-10_19.png" alt="chapter-10_19" caption="" class="border-0" >}}
-
-`Comparison` view allows you to find differences between the snapshots you have taken. You can access this option if you have taken more than one snapshot.
-
-By default, it will compare the current snapshot to the previous one and display the detected differences in the table. However, you can select a particular snapshot you want to compare as well.
-
-{{< img src="chapter-10_20.png" alt="chapter-10_20" caption="" class="border-0" >}}
-
-Here is a short overview of the table columns in the Comparison view:
-
-1. .**Constructor**: the JavaScript function used to construct a set of objects.
-2. **#New**: how many new objects have been created.
-3. **#Deleted**: how many objects have been deleted.
-4. **#Delta**: the change in the overall number of objects.
-5. **Alloc**. Size: how much memory has been allocated to be used.
-6. **Freed Size**: how much memory has been freed for new objects.
-7. **Size Delta**: the change in the overall amount of free memory.
-
-The other views - `Containment` and `Statistics`, will display the information from the Summary, but with color coding or charts.
diff --git a/guide/content/chapters/chapter-11/index.md b/guide/content/chapters/chapter-11/index.md
deleted file mode 100644
index 72c7bf6..0000000
--- a/guide/content/chapters/chapter-11/index.md
+++ /dev/null
@@ -1,177 +0,0 @@
----
-title: "Bonus Chapter: How to prepare your UI to work with a backend"
-description: ""
-date: 2021-12-06T15:05:35+02:00
-lastmod: 2021-12-06T15:05:35+02:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 3
----
-
-With our UI complete we can now start integrating it into our game. But before we can do that we need to make a few changes to our FrontEnd code.
-
-## Setting our body to be transparent
-
-For the purpose of this guide we made our UI to have a black background. This allowed us to be able to demonstrate the different features that we made more easily.
-
-This however won't allow us to use the same UI in a game, as it won't show the game underneath. To fix that we'll change the `body` background-color to transparent in our `style.css` file:
-
-```
- background-color: transparent;
-```
-
-## Removing the models and mocked data
-
-Since our models will now be created on the backend, we can remove the `model` and `map` constants we declared in the `model.js` file.
-
-Then we just need to remove the creation of the mock models and we'll be left with the following code in our `model.js`
-
-```
-function getCurrentTime() {
- const date = new Date();
-
- return `${date.getHours()}:${date.getMinutes()}`;
-}
-
-function updateCurrentTime() {
- setInterval(() => {
- PlayerModel.time = getCurrentTime();
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
- }, 60000);
-}
-
-engine.whenReady.then(() => {
- engine.registerBindingAttribute('poi', POIHandler);
-
- engine.createObservableModel("activeItem");
-
- PlayerModel.time = getCurrentTime();
- updateCurrentTime();
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-});
-```
-
-Here as you can see we are leaving the time update function, because we want to use the built in JavaScript functions to get the time.
-
-We are also leaving the `engine.registerBindingAttribute` and the `engine.createObservableModel` functions since they have to be used on the Front End. However, since the observable model's properties need to be synchronized with the model properties from the backend (as to not have a desynchronization between the game and UI), we also need to add a so-called synchronization dependency, in order to be updated accordingly like this:
-
-```
-engine.whenReady.then(() => {
- engine.registerBindingAttribute('poi', POIHandler);
-
- engine.createObservableModel("activeItem");
- engine.addSynchronizationDependency(PlayerModel, activeItem);
-
- PlayerModel.time = getCurrentTime();
- updateCurrentTime();
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-});
-```
-
-## Removing the mocked event listeners
-
-In the previous chapters of the guide we demonstrated how to trigger and listen for events. Since we want to integrate our UI with a game engine we need to remove some of them as the engine will have to handle them now.
-
-In the `script.js` file we'll start by removing the `pause_toggle` event.
-
-Next in the same file, we can remove the `change_menu` event listener as well.
-
-## Expecting events to attach slider listeners
-
-The `attachSliderListeners` function will now become an `engine.on` function, which will expect an event with the same name to be invoked from the backend, to indicate when the slider event listeners should be attached:
-
-```
-function attachSliderListeners() {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
-}
-```
-
-This is changed to:
-
-```
-engine.on("attachSliderListeners", () => {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
-});
-```
-
-## Adding new event triggers
-
-The last step of the process would be to add new event triggers to the `mapDrag` and `zoom` functions in the `script.js` file. This will allow us to make changes to the model inside the engine.
-
-To do that we'll start by removing the following code from the `mapDrag` function:
-
-```
-MapModel.x = clamp(MapModel.x + event.clientX - startX, -limitX, 0);
-MapModel.y = clamp(MapModel.y + event.clientY - startY - offsetY, -limitY, 0);
-```
-
-and replacing it with:
-
-```
-engine.trigger('map_move',
- clamp(MapModel.x + event.clientX - startX, -limitX, 0),
- clamp(MapModel.y + event.clientY - startY - offsetY, -limitY, 0)
-);
-```
-
-Then we can do the same for the `zoom` function. Remove:
-
-```
-MapModel.x = clamp(MapModel.x + event.clientX * (MapModel.zoom - initialScale) * -1, -limitX, 0);
-MapModel.y = clamp(MapModel.y + (event.clientY - offsetY) * (MapModel.zoom - initialScale) * -1, -limitY, 0);
-```
-
-and replace with:
-
-```
-engine.trigger('map_move',
- clamp(MapModel.x + event.clientX * (MapModel.zoom - initialScale) * -1, -limitX, 0),
- clamp(MapModel.y + (event.clientY - offsetY) * (MapModel.zoom - initialScale) * -1, -limitY, 0)
-);
-```
-
-This will allow us to send the move coordinates to the engine so the model can be updated.
-
-And last we need to do the same for the map zoom. Again in the `zoom` functione we'll replace:
-
-```
-MapModel.zoom = clamp(MapModel.zoom + event.deltaY * -0.01, 1, 3);
-```
-
-with
-
-```
-engine.trigger('map_zoom', clamp(MapModel.zoom + event.deltaY * -0.01, 1, 3))
-```
-
-And with that our UI is ready to be used inside a game.
diff --git a/guide/content/chapters/chapter-2/chapter-2_1.png b/guide/content/chapters/chapter-2/chapter-2_1.png
deleted file mode 100644
index a8341ad..0000000
Binary files a/guide/content/chapters/chapter-2/chapter-2_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-2/chapter-2_2.png b/guide/content/chapters/chapter-2/chapter-2_2.png
deleted file mode 100644
index f8db3ab..0000000
Binary files a/guide/content/chapters/chapter-2/chapter-2_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-2/index.md b/guide/content/chapters/chapter-2/index.md
deleted file mode 100644
index 9c59e8a..0000000
--- a/guide/content/chapters/chapter-2/index.md
+++ /dev/null
@@ -1,174 +0,0 @@
----
-title: "Chapter 2: Creating our first UI component"
-description: ""
-date: 2021-09-15T08:38:57+03:00
-lastmod: 2021-09-15T08:38:57+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-Now that we have our project set up and are aware of the different approaches available, we can create our first UI component.
-
-This will be a simple component that will demonstrate one of the most important features of Gameface - its dynamic data-binding. The component will be a Clock, placed in the bottom right corner of our HUD.
-
-## Mocking our data
-
-Before we begin writing our HTML and JavaScript, we need to figure out how we are going to provide the data for our components. In a real-world scenario we will have a game which will provide this data to our UI. Since this tutorial focuses more on the Frontend features of Gameface, we will need a way to mock this data. Luckily, Gameface allows us to use JavaScript models to mock data that will be passed to the UI. This is useful in instances where there is no backend implemented just yet, and allows the UI developers to continue with their work.
-
-{{< alert icon="👉" text="Mocking data from JS is a very common practice that allows UI developers to remain relatively independent and to work on the UI regardless of the progress of the backend." />}}
-
-To start, we are going to create a new file called model.js along with the other project files. Inside, we will make a new constant that will be our model object:
-
-```
-const model = {
-
-}
-```
-
-Since we will be making a clock, we can add the following key to this object:
-
-```
-const model = {
- time: "10:20"
-}
-```
-
-With a random value.
-
-Now that we have our object, we can register it as a model. To do that, first we will need to write the following code:
-
-```
-engine.whenReady.then(() => {
-
-})
-```
-
-This is because we need to wait for Gameface to load before registering our model. To do that we need to use `engine.whenReady` which will return a Promise. After that promise is resolved in our `then()` function, we can register and start using our models.
-
-{{< alert icon="❗" text="A quick note before continuing - as you might have already noticed, every function that we use to leverage Gameface’s features starts with engine. The reason is that the cohtml.js file exports the engine module that contains all of the functions we need to communicate with the backend. You can read more about what the engine module does in our documentation." />}}
-
-Now that we know Gameface is ready, we can register our model. This happens by using the engine.createJSModel function:
-
-```
-engine.whenReady.then(() => {
- engine.createJSModel('PlayerModel', model);
- engine.synchronizeModels();
-})
-```
-
-The first argument is a String and it will be the name of our model. For this example we will use `‘PlayerModel’`. And the second argument is the object that will be registered as a model. Here we will use the one that we created earlier. This now registers our model as a global variable that we can access.
-
-After registering our model we need to call `engine.synchronizeModels()`. That will sync our model with the bindings (if there are any) and update them.
-
-Once we have our model registered, we need to include it in our project. To achieve that, we can add a script tag to our `index.html` with our model.js file. Note, that in order for the engine module to be available, we need to include our script tag bellow the one for `cohtml.js`:
-
-```
-
-
-```
-
-## Creating our component
-
-Once the file has been included, we can proceed with creating the clock component. This is a simple component that will display the hours and minutes of the game, based on the model that is provided.
-
-To create the clock component we will create a wrapped div with the class: **hud** (inside the body tag in the index.html) that will contain all of our HUD elements. Inside that wrapper we will create another div with the class clock and write the time inside to be 22:35 for example.
-
-```
-
-
22:35
-
-```
-
-Before we bind the time of our new clock with the model, we first need to preview if everything looks as expected - we can use the Player for this purpose. {{< alert icon="👉" text="The Player is a standalone desktop application that serves as your playground. It's the easiest way to preview your UI and also provides you with all the necessary tools. You can run it by double-clicking on the Player.bat (if on Windows) or the Player.sh (on Mac)." />}}
-
-Once the Player application has been opened, you can drag and drop the `index.html` file that you modified inside it.
-
-If everything is done correctly you should see the following:
-
-{{< img src="chapter-2_1.png" alt="chapter-2_1" caption="Player with the clock showing in the bottom" class="border-0" >}}
-
-Great, now our clock is visible in the bottom right corner and it shows the time we’ve set. We can now continue with binding its value to the model we registered earlier.
-
-### Binding our mocked data
-
-To achieve this we will use the following attribute *(only available in Gameface)* - `data-bind-value`. `data-bind-value` changes the internal text of the element to the value of the model passed. The value we will pass is `{{PlayerModel.time}}`:
-
-```
-
22:35
-```
-
-{{< alert icon="❗" text="Note that the model is a string and it’s wrapped in double curly braces. This will be the case for all available data-bindings."/>}}
-
-Once completed, we can check the Player and see if the time has been updated to 10:20 as it is in the model. To refresh the Player with the new changes simply press **F5** (as you normally would in the browser).
-
-Now we can see that the time is set to the one from the model:
-
-{{< img src="chapter-2_2.png" alt="chapter-2_2" caption="Clock showing the data from the model" class="border-0" >}}
-
-If we go and change the model to a different time (for example, 12:20), then refresh, we will see the change reflected in the Player.
-
-Data binding is one of the ways we can connect the game with the UI. There are more bindings available apart from value - these will be covered in the next chapters.
-
-### Updating our clock to the system time
-
-Now that the mock data is bound to our UI, we can create a function to automatically change the time each minute.
-
-To do that, first we will create a function that will get us the current time in a HH:MM format. we will call this function `getCurrentTime` and add the following code:
-
-```
-function getCurrentTime() {
- const date = new Date();
-
- return `${date.getHours()}:${date.getMinutes()}`;
-}
-```
-
-This will return us the current hour and minutes.
-
-We can now change the value of our initial time with that of our function:
-
-```
-const model = {
- time: getCurrentTime(),
-};
-```
-
-To have our time update, we can create another function called `updateCurrentTime()` and place the following code inside:
-
-```
-function updateCurrentTime() {
- setInterval(() => {
- PlayerModel.time = getCurrentTime();
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
- }, 60000)
-}
-```
-
-Now every minute the clock will be updated with the current time. (In general, this is not a very accurate way to update time, but it is suitable for the purpose of this tutorial.)
-
-From this code, the most important thing to note is the `engine.updateWholeModel` and `engine.synchronizeModels` functions - those functions need to be called each time an update of the model from the JS side is required. `updateWholeModel` updates the registered model, whereas `synchronizeModel` synchronizes the changes with the bound elements.
-
-We can then call our function in the `engine.whenReady` promise.
-
-```
-engine.whenReady.then(() => {
- engine.createJSModel("PlayerModel", model);
- engine.synchronizeModels();
- updateCurrentTime();
-});
-```
-
-Once we run the page in the Player again, we should see the accurate update of the current time (reflecting the time change every minute).
-
-We have now created our first UI component and successfully connected it to the game (although it was mocked). This concludes Chapter 2. In the sample for this tutorial you can see the complete code in the chapter_2 folder.
-
-Next in **Chapter 3** we will create more mocked data and introduce new types of data-binding
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_2/chapter_2.zip)
diff --git a/guide/content/chapters/chapter-3/chapter-3_1.png b/guide/content/chapters/chapter-3/chapter-3_1.png
deleted file mode 100644
index 193eb0e..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/chapter-3_2.png b/guide/content/chapters/chapter-3/chapter-3_2.png
deleted file mode 100644
index 78f13f5..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/chapter-3_3.png b/guide/content/chapters/chapter-3/chapter-3_3.png
deleted file mode 100644
index f4f3467..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/chapter-3_4.png.png b/guide/content/chapters/chapter-3/chapter-3_4.png.png
deleted file mode 100644
index 396f00f..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_4.png.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/chapter-3_5.png b/guide/content/chapters/chapter-3/chapter-3_5.png
deleted file mode 100644
index 40d65ec..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/chapter-3_6.png b/guide/content/chapters/chapter-3/chapter-3_6.png
deleted file mode 100644
index f764c30..0000000
Binary files a/guide/content/chapters/chapter-3/chapter-3_6.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-3/index.md b/guide/content/chapters/chapter-3/index.md
deleted file mode 100644
index d8b3677..0000000
--- a/guide/content/chapters/chapter-3/index.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: "Chapter 3: Health Bar"
-description: ""
-date: 2021-09-15T08:39:01+03:00
-lastmod: 2021-09-15T08:39:01+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-In this chapter we will create a health bar in our UI using some new types of data-binding.
-
-## Add health values to our model
-
-To get started, we will first add two new properties to our model - `currentHealth` and `maxHealth`. These will be used to determine how much of the health bar is filled and to display the information as a number next to it. For now we will set both to **100**.
-
-```
-currentHealth: 100,
-maxHealth: 100
-```
-
-Next in the `index.html` file we will create a health bar container and inside we will add the health bar:
-
-```
-
-
-
-```
-
-Inside the health bar we will add a health bar fill, which will show how much of the total health we have left.
-
-```
-
-
-
-```
-
-Now if we open our project in the Player, we will see the following:
-
-{{< img src="chapter-3_1.png" alt="chapter-3_1" caption="Health bar showing in the top" class="border-0" >}}
-
-## Binding width
-
-Now that we have the health bar, we can link it to the model. To do that we will use data-binding again - however, this time we will leverage `data-bind-style-width` instead of `data-bind-value`,. This will allow us to control the width of the fill according to the model.
-
-```
-
-```
-
-Per the above code, you can see that after the model there is an added **“+ ‘%’”**. This is because the width property expects a number and a unit (if these are not specified, it will default to pixels). Since we want the health bar fill to be relative to the whole width of the health bar, we will use a percentage.
-
-If we open the `index.html` file in the Player, we will see that nothing has changed. The reason is that we set the `currentHealth` to **100** and this will result in a width of **100** percent. Let’s change it to 50 to see how the health drops down to the middle of the health-bar.
-
-{{< img src="chapter-3_2.png" alt="chapter-3_2" caption="Health drops to the middle of the health-bar" class="border-0" >}}
-
-Great! But what about the `maxHealth` property we set?
-
-Currently, this is set up with a `maxHealth` of **100**, but what if we want it to be **120**? Creating a helper function will allow us to see what percentage of the maximum value the current health is.
-
-In the script js file, we will add the `getCurrHealthPercent` function with parameters current and max. You may now wonder, why do we add parameters to the function if the model is globally available (as we saw in the previous chapter)? The reason is that data-binding expects us to pass a model property to it (regardless if we use it as a parameter to a function).
-
-After we write the function name and parameters, we will add the following code inside:
-
-```
-function getCurrHealthPercent(current, max) {
- return (current * 100) / max;
-}
-```
-
-In the `index.html`, where we wrote the data-bind-style-width attribute, we can now replace the model that we wrote with the following:
-
-```
-
-```
-
-{{< alert icon="💡" text="Quick tip: Since in a real project we would be using data from the game, if we have a lot of models or very large models it will be more efficient to compute values like this in the backend." />}}
-
-Once completed, refreshing the page (using F5) will show no difference to the max health of **100**. But if we change it to **150**, we will see the health bar become ⅓ of the way full instead of half full.
-
-## Adding a value to our health bar
-
-Now that we have a working health bar, we can display the current health as a number to the side of the health bar. To achieve this, we will simply add a new element to the health-bar-container:
-
-```
-
-```
-
-You may be wondering why we would use a paragraph tag instead of a regular div. The reason is that CoHTML doesn’t support inline elements out of the box. On that basis, we have to use the `cohinline` feature which works only with the `
` tag. This will allow us to have all the elements to be inline inside.
-
-{{< alert icon="❗" text="Please note that this is an experimental feature and not everything is supported. You can read more about it here." />}}
-
-To enable it we just need to add `cohinline` to our `
` tag. Inside the paragraph we can add the current health and the HP text.
-
-{{< alert icon="❗" text="Note: in the code we are using $nbsp; which is a non-breaking white space to give some space between the elements" />}}
-
-```
-
-
- HP
-
-```
-
-To display the current and max health we can use the `data-bind-value` attribute we learned from the previous chapter:
-
-```
-
-```
-
-By doing this we can now see exactly how much health we have left:
-
-{{< img src="chapter-3_3.png" alt="chapter-3_3" caption="Health-bar shows 50HP left" class="border-0" >}}
-
-We can now return our `currentHealth` and `maxHealth` to **100** in our model.
-
-## Changing health bar color based on data
-
-Next we can add colors to our health bar based on the percent of health left. For example, if the health percent drops below 50, we want the color of the health bar to reflect this by turning from green to yellow.
-
-To do this we can use the `data-bind-class-toggle` attribute, which allows to add or remove a class based on a value in the model. To utilize this attribute we will write the following code:
-
-```
-data-bind-class-toggle="health-warning:getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) < 50"
-```
-
-It may seem confusing at first, but the logic behind `data-bind-class-toggle` is simple. In order for it to work, we need to pass two elements for the attribute - the class we want to toggle followed by a colon, and the expression which will toggle the class if true.
-
-For example: `data-bind-class-toggle=”class-we-want-to-toggle: {{Model.expression}} === true”` In this case, we will toggle the `health-warning` class if the percent from our `gerCurrHealthPercent` function is less than **50**.
-
-Now we can set the `currentHealth` in our model to 40 and see how the color of the health bar changes.
-
-{{< img src="chapter-3_4.png" alt="chapter-3_4" caption="Health-bar is yellow when bellow 50HP" class="border-0" >}}
-
-But what if we want to add another color? Let’s say we’d like the health bar to turn red if it drops below **25%**. What we can do here is add another expression that will toggle that specific class. To achieve this, we just need to add a new `data-bind-class-toggle` expression, but instead of writing the same attribute again, we can use the already added one and separate the expression with a semicolon:
-
-```
-data-bind-class-toggle="health-warning:getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) < 50;health-danger:getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) <= 25"
-```
-
-Then we set the `currentHealth` in our model to **20**:
-
-{{< img src="chapter-3_5.png" alt="chapter-3_5" caption="Something doesn't seem right here" class="border-0" >}}
-
-Wait a minute, the color of the bar is still yellow and not red. Did we do something wrong?
-
-The reason that this happened is because **20** is still under **50**, which was the first expression we wrote - in instances where both expressions match, the first one that matches will take precedence. To change that, we can change the first expression to match between **25** and **50**.
-
-```
-data-bind-class-toggle="health-warning:getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) > 25 && getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) < 50;health-danger:getCurrHealthPercent({{PlayerModel.currentHealth}}, {{PlayerModel.maxHealth}}) <= 25"
-```
-
-Now when we refresh the page in the Player, we will see that the health bar is red:
-
-{{< img src="chapter-3_6.png" alt="chapter-3_6" caption="This looks better" class="border-0" >}}
-
-But as we can see, the expressions we wrote in our `data-bind-class-toggle` attribute are starting to get too long, thus making them hard to read. To fix this we can write a function in our model that will represent these expressions.
-
-In our model we will add the following functions: `shouldShowHealthWarning()` and `shouldShowHealthDanger()`.
-
-```
-const model = {
- time: getCurrentTime(),
- currentHealth: 20,
- maxHealth: 100,
- shouldShowHealthWarning() {},
- shouldShowHealthDanger() {},
-};
-```
-
-We can now copy the expressions from the data-bind attribute inside these functions. Since we are writing inside the model, we can reference it by using the this keyword.
-
-```
-shouldShowHealthWarning() {
- return (
- getCurrHealthPercent(this.currentHealth, this.maxHealth) > 25 &&
- getCurrHealthPercent(this.currentHealth, this.maxHealth) < 50
- );
-},
-shouldShowHealthDanger() {
- return getCurrHealthPercent(this.currentHealth, this.maxHealth) <= 25;
-},
-```
-
-We can now write the following code inside the `index.html` - it will be both easier to read and more manageable.
-
-```
-data-bind-class-toggle="health-warning:{{PlayerModel}}.shouldShowHealthWarning();health-danger:{{PlayerModel}}.shouldShowHealthDanger()"
-```
-
-In the next chapter we will combine all of the knowledge we have acquired so far, along with a few new data-bindings, and create a minimap component that will move along with the player.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_3/chapter_3.zip)
diff --git a/guide/content/chapters/chapter-4/chapter-4_1.png b/guide/content/chapters/chapter-4/chapter-4_1.png
deleted file mode 100644
index 36d553b..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_10.png b/guide/content/chapters/chapter-4/chapter-4_10.png
deleted file mode 100644
index 73aaad5..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_10.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_11.png b/guide/content/chapters/chapter-4/chapter-4_11.png
deleted file mode 100644
index b512be9..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_11.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_2.png b/guide/content/chapters/chapter-4/chapter-4_2.png
deleted file mode 100644
index c6c0486..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_3.png b/guide/content/chapters/chapter-4/chapter-4_3.png
deleted file mode 100644
index 2505bc9..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_4.png b/guide/content/chapters/chapter-4/chapter-4_4.png
deleted file mode 100644
index 06446e3..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_4.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_5.png b/guide/content/chapters/chapter-4/chapter-4_5.png
deleted file mode 100644
index 3983526..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_6.png b/guide/content/chapters/chapter-4/chapter-4_6.png
deleted file mode 100644
index 83def1a..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_6.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_7.png b/guide/content/chapters/chapter-4/chapter-4_7.png
deleted file mode 100644
index eb9f732..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_7.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_8.png b/guide/content/chapters/chapter-4/chapter-4_8.png
deleted file mode 100644
index 4e173de..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_8.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/chapter-4_9.png b/guide/content/chapters/chapter-4/chapter-4_9.png
deleted file mode 100644
index 99c1f1a..0000000
Binary files a/guide/content/chapters/chapter-4/chapter-4_9.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-4/index.md b/guide/content/chapters/chapter-4/index.md
deleted file mode 100644
index 32087f3..0000000
--- a/guide/content/chapters/chapter-4/index.md
+++ /dev/null
@@ -1,160 +0,0 @@
----
-title: "Chapter 4: Minimap"
-description: ""
-date: 2021-09-15T08:39:05+03:00
-lastmod: 2021-09-15T08:39:05+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-In this chapter we will combine all knowledge about data-binding we have gained so far and build a more complex widget - a minimap.
-
-Before we start, we need to decide on the approach we are going to take. For the purpose of this tutorial, we will use different tiles that are part of a larger map and load them through the model. Each tile will have a number that corresponds to its id.
-
-{{< alert icon="❗" text="Keep in mind that different approaches can vary from project to project and this one may not work for a different project structure." />}}
-
-## Adding the minimap data to our model
-
-First we will need to add to our model the properties for the minimap. To do that we will create a property minimap that will have an object with all the necessary information. Inside the minimap object there will be the following properties: `tileId` (corresponds to the minimap tile that we are on), `x` and `y` (the coordinates that we are on the minimap) and `angle` - this refers to where the player is pointed.
-
-```
-minimap: {
- id: 1,
- x: 100,
- y: 100,
- angle: 0
- }
-```
-
-## Adding the minimap html
-
-Now it’s time to add the minimap to the `index.html`. We are going to make a `minimap-container` with the minimap and the marker. For this approach we will have the marker in the center of the container and we will move the minimap using models.
-
-Let’s add the following markup:
-
-```
-
-
-
-
-```
-
-When we open it in the Player we should see the following:
-
-{{< img src="chapter-4_1.png" alt="chapter-4_1" caption="Minimap container" class="border-0" >}}
-
-## Binding our data to the minimap
-
-Great! Now lets hook up the model to display the map.
-
-### Adding an image
-
-To do that we will use a new data-binding called `data-bind-style-background-image-url`. This attribute accepts a path to display the background image. All of the map tiles are in the assets folder and have the name - `map_1_{{id}}.png`, where id refers to the number of the tile. With that information we can write the following attribute to our minimap element:
-
-```
-
-```
-
-Here we write the first part of the path and then concatenate it with the model. Another option would be to write the full path in the model, but for this tutorial we’d like to keep the models relatively simple. If you have done everything correctly, you should see the map in the Player.
-
-{{< img src="chapter-4_2.png" alt="chapter-4_2" caption="" class="border-0" >}}
-
-If we now change the `id` of the map to 8 for example, the map should change as well:
-
-{{< img src="chapter-4_3.png" alt="chapter-4_3" caption="Minimap with different location" class="border-0" >}}
-
-### Moving the map
-
-We can now start moving the player around the map. In our example we would not be moving the marker but rather the whole map. To do that we will use the `data-bind-style-left` and `data-bind-style-top` attributes. They will allow us to set the left and top coordinates of the map based on the model. Adding these attributes is as simple as writing:
-
-```
-data-bind-style-left="{{PlayerModel.minimap.x}}"
-data-bind-style-top="{{PlayerModel.minimap.y}}"
-```
-
-We will see the following once opened in the Player:
-
-{{< img src="chapter-4_4.png" alt="chapter-4_4" caption="That doesn't look right" class="border-0" >}}
-
-We can see the map being moved by **100 pixels** from the top and left, but the reference point is the top left. While this is not a CSS tutorial, we will demonstrate a way to fix this using pure CSS (as it will be something you might come up against often).
-
-There are a couple of ways to place an absolutely positioned element using the center of it as a reference. You can either use a negative margin with half of the width/height or move them back 50%. Since in this and many other cases you wouldn’t know what the exact width and height of the element that we are positioning are, we will move them back. To do that we will need to write in the `style.css` file in the `.minimap` selector:
-
-```
-transform: translateX(-50%) translateY(-50%);
-```
-
-Opening the Player with that change will yield:
-
-{{< img src="chapter-4_5.png" alt="chapter-4_5" caption="Looks good" class="border-0" >}}
-
-Everything looks back to normal now. .Just to make sure, we will change the `x` and `y` properties of the model to **0**.
-
-{{< img src="chapter-4_6.png" alt="chapter-4_6" caption="Maybe not " class="border-0" >}}
-
-This doesn’t look right again. Shouldn’t having 0, 0 coordinates be in the top left corner of the map? To fix that we can set the `translateX` and `translateY` properties to be a positive **50%**.
-
-{{< img src="chapter-4_7.png" alt="chapter-4_6" caption="Perfect " class="border-0" >}}
-
-One last thing to do now would be to enlarge the minimap so that we are able to move it with the movement of our character without seeing the edges. To do that, we will change the width and height of the `.minimap` selector in the `style.css` file to **200%** and then set the transform property to translate to **25%**. This is because we have doubled the size, hence we need to double down the offset.
-
-```
- width: 200%;
- height: 200%;
- transform: translateX(25%) translateY(25%);
-```
-
-And now we set the `x` and `y` properties in the model back to **100**:
-
-{{< img src="chapter-4_8.png" alt="chapter-4_8" caption="Again? " class="border-0" >}}
-
-Wait a minute. Where did the map go? The explanation is pretty simple - since the 0, 0 coordinate of the map is on the marker (which is in the center), moving the map **100** pixels will move it away from the marker. Fixing that is pretty simple - we just need to add a minus in front of the model. That way, if the player moves a **100** pixels from the edge, the map will move in the opposite direction, creating the illusion of the player moving.
-
-```
-data-bind-style-left="-{{PlayerModel.minimap.x}}"
-data-bind-style-top="-{{PlayerModel.minimap.y}}"
-```
-
-{{< img src="chapter-4_9.png" alt="chapter-4_9" caption="Finally " class="border-0" >}}
-
-### Rotating the map
-
-And with that we have the map set up. Now we can start to rotate the marker based on the direction our character is looking at to complete the feel of the minimap. To do that we will use another data-binding. This time it is `data-bind-style-transform-rotate`. To use it, simply pass a model of the rotation in degrees.
-
-In our case it would be:
-
-```
-
-```
-
-However, since in the beginning of this chapter we set the angle property to **0**, nothing will change in the Player. In order to change that, we will just set the angle to **90**.
-
-{{< img src="chapter-4_10.png" alt="chapter-4_10" caption="Here the marker has rotated in the correct direction " class="border-0" >}}
-
-### Adding a label to our minimap
-
-And with that, we have a complete minimap that responds to our game. But we are not done just yet. To make our map more complete, we will add a label that will show us where exactly on the map we are. We can do this by adding a label property to our model and setting its value to “River Bank” (for example).
-
-```
-label: "River Bank"
-```
-
-In the `index.html` we will add a new element in the `minimap-container` called `map-labe`l. To display the label we have set in the model, we will use `data-bind-value` again.
-
-```
-
-```
-
-{{< img src="chapter-4_11.png" alt="chapter-4_11" caption="" class="border-0" >}}
-
-This is the end of **Chapter 4** and concludes the first part of our tutorial - the HUD. With **Chapter 5** we will start working on the Pause Menu and show more complex features of Gameface like events and conditional data-bindings, the component library that we have developed, and more.
-
-{{< alert icon="👉" text="In this chapter we have used some styling techniques in order to display our map correctly - you can check the style.css file to see what they are." />}}
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_4/chapter_4.zip)
diff --git a/guide/content/chapters/chapter-5/index.md b/guide/content/chapters/chapter-5/index.md
deleted file mode 100644
index 8d385ed..0000000
--- a/guide/content/chapters/chapter-5/index.md
+++ /dev/null
@@ -1,128 +0,0 @@
----
-title: "Chapter 5: Pause Menu"
-description: ""
-date: 2021-09-15T08:39:09+03:00
-lastmod: 2021-09-15T08:39:09+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-In this chapter we will learn:
-
-- how to capture input from the keyboard in the UI,
-- how to emit an event from the UI to the game,
-- mock how the game handles the event.
-
-For this purpose we will create a Pause Menu - it will open when the ESC key on the keyboard is pressed, and close once the same key is pressed again.
-
-First we will start with the model by adding a new property called isPaused with a value false.
-
-```
-isPaused: false
-```
-
-Then in the `index.html` we will create a pause-menu container.
-
-```
-
-
-
-```
-
-To begin with, we will leave this empty - we will start adding content in the next chapter. For now, we only need to toggle it to be visible. If we open the project in the Player we will see a black screen, indicating that the pause menu is showing. Now let’s hide it.
-
-## Hiding our pause menu using data-binding
-
-To do that we will be using yet another data-binding (instead of a styling one, this time it will be a structural one, allowing us to modify the DOM) - data-bind-if. It works as a regular if statement in that if the passed data is true, the element will be resolved; else it would not. For our case we will add:
-
-```
-
-```
-
-If the `isPaused` property in our model is **true**, then the pause menu will show; otherwise it would not. We can confirm this by opening the Player - we can see that the HUD we did in the previous chapters is showing.
-
-## Capturing key strokes
-
-Next, we will trigger the model to change from the keyboard. This can be achieved by adding the following code in the `script.js` file:
-
-```
-document.addEventListener('keydown', (e) => {
-
-});
-```
-
-This will attach the `keydown` event to our document, meaning that the function will trigger whenever we press any key on the keyboard. However, we only want this to work for the ESC key. To be able to discern which the correct key is, we will use the keycode that we get from the event object and create a conditional statement: only if the correct key is pressed would the code execute. In our case, the correct keycode for **ESC** will be **27**.
-
-{{< alert icon="💡" text="To check what keycode is assigned to each button, you can use this website." />}}
-
-Now we can add the following code:
-
-```
-document.addEventListener('keydown', (e) => {
- if (e.keyCode === 27) {
-
- }
-});
-```
-
-Note that everything included as part of the if statement will be executed. Here we can add our code to change the model:
-
-```
- if (e.keyCode === 27) {
- PlayerModel.isPaused = !PlayerModel.isPaused;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
- }
-```
-
-This will set our model to the opposite of what it was (for example, if `false`, it will be set to `true`, and vice versa). If you recall from Chapter 2, every time we change a model we have to update it and then synchronize it - that way our data-bindings would reflect the change. On that basis, if we open the Player, refresh and press the **ESC** key, we can see that the pause menu is toggled.
-
-## Listening and triggering events
-
-While this looks incredibly simple, the truth is that in a real world UI we cannot change the model from the frontend. And even if we could, the game would still go on as it does not know that we have paused it. For this reason, we will mock the way this would be handled if we had a backend.
-
-To accomplish this we will use a method of the `engine` object called `trigger()`. This will allow us to emit an event to the backend so that it knows to pause the game and change the model. Since we do not have one yet, we will be using another function of the engine object called `on()`, which will allow us to listen to emitted events.
-
-In our script.js file we will add the following code:
-
-```
-engine.on('pause_toggle', () => {
-
-});
-```
-
-This will allow us to listen to the `pause_toggle` event that we will emit when pressing the **ESC** key. Inside, we will copy the code from the if statement above.
-
-```
-engine.on("pause_toggle", () => {
- PlayerModel.isPaused = !PlayerModel.isPaused;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-});
-```
-
-{{< alert icon="❗" text="In a real-world situation we would not have to listen to events emitted from the frontend in the frontend (since all of it will need to go through the backend)."/>}}
-
-And now we can emit our event.
-
-```
-document.addEventListener("keydown", (e) => {
- if (e.keyCode === 27) {
- engine.trigger("pause_toggle");
- }
-});
-```
-
-If we save and go to the Player, refresh and press **ESC**, we will see that nothing has changed.The pause menu still opens and closes when we press the button.
-
-In this chapter we learned the other method we have of communicating with the backend. As we can see, the different scenarios have different use cases - you need to decide on which to use, depending on what you need to accomplish.
-
-In **Chapter 6** we will start to fill up our pause menu with a settings screen. We will explain how to use the components library we have created in a way that would make your work faster and more concise.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_5/chapter_5.zip)
diff --git a/guide/content/chapters/chapter-6/chapter-6_1.png b/guide/content/chapters/chapter-6/chapter-6_1.png
deleted file mode 100644
index 72996ed..0000000
Binary files a/guide/content/chapters/chapter-6/chapter-6_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-6/chapter-6_2.png b/guide/content/chapters/chapter-6/chapter-6_2.png
deleted file mode 100644
index b4146ea..0000000
Binary files a/guide/content/chapters/chapter-6/chapter-6_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-6/chapter-6_3.png b/guide/content/chapters/chapter-6/chapter-6_3.png
deleted file mode 100644
index 0717f67..0000000
Binary files a/guide/content/chapters/chapter-6/chapter-6_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-6/chapter-6_4.png b/guide/content/chapters/chapter-6/chapter-6_4.png
deleted file mode 100644
index 32aa240..0000000
Binary files a/guide/content/chapters/chapter-6/chapter-6_4.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-6/chapter-6_5.png b/guide/content/chapters/chapter-6/chapter-6_5.png
deleted file mode 100644
index a108ee4..0000000
Binary files a/guide/content/chapters/chapter-6/chapter-6_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-6/index.md b/guide/content/chapters/chapter-6/index.md
deleted file mode 100644
index f3fe76f..0000000
--- a/guide/content/chapters/chapter-6/index.md
+++ /dev/null
@@ -1,246 +0,0 @@
----
-title: "Chapter 6: Settings Menu"
-description: ""
-date: 2021-09-15T08:39:13+03:00
-lastmod: 2021-09-15T08:39:13+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-Now that we have set up our Pause Menu (in the previous chapter), we can start adding the different menus inside. The first one that we’ll create is the Settings Menu.
-
-For the purpose of this tutorial we’ll add only a handful of options to the Settings. These will be: Volume, Resolution, Difficulty and Subtitles. While these may seem like they are not enough for a Settings Menu, the idea is to only demonstrate how it can be achieved.
-
-In order to create our options we’ll need to use a slider, dropdown and checkbox inputs. Currently, Gameface only supports text input - this is why we have also created a components library that enables users to easily use custom components (such as those mentioned above and more).
-
-## Installing the Gameface components
-
-We’ll start by downloading the components library. To get it you need to use a package manager like npm. You can check the components repository via the following [link](https://github.com/CoherentLabs/GameUIComponents/).
-
-{{< alert icon="💡" text="Quick Note: inside each component folder there is a README and demo which will demonstrate how the component works. Here we’ll go over the basic usage, but you can always read what each component does in more depth." />}}
-
-The components that we’ll be using will be the `checkbox`, `dropdown` and `range slider`. To install them we simply need to run the following commands one by one:
-
-```
-npm install coherent-gameface-components
-```
-
-```
-npm install coherent-gameface-checkbox
-```
-
-```
-npm install coherent-gameface-dropdown
-```
-
-```
-npm install coherent-gameface-rangeslider
-```
-
-## Adding the Gameface components to your project
-
-### Adding the dependencies
-
-Now we can include them in our project. To do that we need to add their respective script, style files and coherent-components script. Each component’s script is located inside the umd folder and follows the naming convention: `.production.min.js`. The components script is found in `/umd/components.production.min`. To include all of the scripts we’ll add the following code to the bottom of our index.html body after the other scripts:
-
-```
-
-
-
-
-```
-
-After the scripts, we need to add the styles as well. These are the default styles of the elements, some of which will be overridden by the `style.css` we already have in place. To add the styles we need to add the following code in the head tag of our index.html (above the style.css) like this:
-
-```
-
-
-
-
-```
-
-### Adding the componets to your html
-
-And now we can start making our Settings Menu. We’ll begin by adding the `.settings-menu` container:
-
-```
-
-```
-
-We can now start adding our custom components. To do that for each option in our menu we’ll wrap them with a `.settings-option-row` or `.settings-option-column` wrapper. This will allow us to position labels to those components.
-
-### Dropdown
-
-First we’ll add a resolution `dropdown`. To achieve this, we’ll add a `.settings-option-row` wrapper and inside we can add the Resolution label and the component. To use the component we only have to add the `` element and add `` tags inside for the options. The options for the resolutions are **1280x720**, **1366x768**, **1440x900**, **1920x1080**, **2560x1440** and **3840x2160**. If we have done everything correctly our code should look something like this:
-
-```
-
-```
-
-And in the Player:
-
-{{< img src="chapter-6_1.png" alt="chapter-6_1" caption="A resolution Dropdown" class="border-0" >}}
-
-### Checkbox
-
-Up next is the show subtitles `checkbox`. We’ll add another `.settings-option-row` div and inside we’ll add the label ‘Enable Subtitles’ again in a `div` and the `checkbox` component. To add the component, you simply need to add the `` element to the `index.html`. Inside this element you can add two slots with the `` element -
-
-- We'll add only a single one for the checkbox background, which is the checkmark:
-
-```
-
-```
-
-We’ll then add it and then put inside - a `div` with a class `.checkbox-background`
-
-```
-
-
-
-
-
-```
-
-In the end the code should look like this:
-```
-
-
Enable Subtitles
-
-
-
-
-
-
-```
-
-The checkbox-background has already been set in our style.css, so if we open the Player we’ll see the following:
-
-{{< img src="chapter-6_2.png" alt="chapter-6_2" caption="The subtitles Checkbox" class="border-0" >}}
-
-### Range slider
-
-For our final options we’ll be using the range slider component. We’ll firstly use it as a way to control the volume of the game, and then to choose the difficulty level. To do this we’ll need to create a `.settings-option-column` container; inside we’ll add another `.settings-option-row`. Inside it, we’ll add a label just like in the previous examples - ‘Volume’ and a new container `.volume-value` that will display the value of the slider inside.
-
-```
-
-
-
Volume
-
0
-
-
-```
-
-Now inside the .settings-options-column we can add our range slider so it can be positioned below the label and value
-
-```
-
-
-
Volume
-
0
-
-
-
-```
-
-If we open the `index.html` in the Player we’ll see:
-
-{{< img src="chapter-6_3.png" alt="chapter-6_3" caption="Volume slider" class="border-0" >}}
-
-However, if we move the slider handle, the value for the volume won’t change. To change it, we need to go to our `script.js` file and add the following code inside the `engine.on(“pause_toggle”)` callback:
-
-```
-const sliderVolume = document.querySelector(".slider-volume");
-const volumeValue = document.querySelector(".volume-value");
-
-sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
-});
-```
-
-Here we are getting both the slider and the `volume-value` wrapper that we created earlier and we are attaching the `sliderupdate` custom event to our slider. This event fires whenever we move the handle of the slider.
-
-The reason why we are putting the code in the `‘pause_toggle’` event is because we are using data-bind-if and when we refresh the Player, the components are not present.
-
-Now if we move the handle in our pause menu, we can see that the volume value gets updated. {{< img src="chapter-6_4.png" alt="chapter-6_4" caption="Volume is 66" class="border-0" >}}
-
-The last option we need to add is the difficulty setting. To do that we’ll use the `range slider` again and to save some time, we’ll just copy the code from the previous option. And now we can change the following things: `Volume` to `Difficulty`, `volume-value` to `difficulty-value` and `slider-volume` to `slider-difficulty`.
-
-```
-
-
-
Difficulty
-
0
-
-
-
-```
-
-It’s important to note that this won’t allow us to change the difficulty of our game, unless we want it to be between 0 and 100. To add some values, we’ll need to use one of the attributes of the range slider - `values`. With `values` we can add an array of values that will be rendered by the range slider. We’ll add the following difficulties: **“Easy”**, **“Normal”**, **“Hard”**, **“Expert”** and **“Nightmare”** by adding the following code to our range slider:
-
-```
-
-```
-
-If we now reload the Player, we will see that handle moves only to 5 spaces, which correspond to our difficulty settings. With that we can copy over our code in the `‘pause_toggle’ `callback and change it appropriately:
-
-```
-const sliderDifficulty = document.querySelector(".slider-difficulty");
-const difficultyValue = document.querySelector(".difficulty-value");
-
-sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
-});
-
-```
-
-{{< img src="chapter-6_5.png" alt="chapter-6_5" caption="" class="border-0" >}} Now we can wrap our event listeners in an if statement, so they only get attached when we open the pause menu
-
-```
-if (PlayerModel.isPaused) {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
-}
-```
-
-And with that we are done with our Settings Menu. {{< alert icon="❗" text="Please note that this is not a tutorial on how to use the components library, but rather an introduction to it. If you want to learn more about each component you can read the relevant README.md files in each component’s folder." />}}
-
-{{< alert icon="👉" text="If you are also interested in how the styles were overwritten, you can check the style.css file." />}}
-
-For the next chapter we’ll see how to add other pages to our pause menu.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_6/chapter_6.zip)
diff --git a/guide/content/chapters/chapter-7/chapter-7_1.png b/guide/content/chapters/chapter-7/chapter-7_1.png
deleted file mode 100644
index 9067b86..0000000
Binary files a/guide/content/chapters/chapter-7/chapter-7_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-7/chapter-7_2.png b/guide/content/chapters/chapter-7/chapter-7_2.png
deleted file mode 100644
index dcd51de..0000000
Binary files a/guide/content/chapters/chapter-7/chapter-7_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-7/index.md b/guide/content/chapters/chapter-7/index.md
deleted file mode 100644
index 575b457..0000000
--- a/guide/content/chapters/chapter-7/index.md
+++ /dev/null
@@ -1,189 +0,0 @@
----
-title: "Chapter 7: Adding more menus"
-description: ""
-date: 2021-09-15T08:39:17+03:00
-lastmod: 2021-09-15T08:39:17+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-Now that we have our Settings Menu, we can start adding other menus like an Inventory and a Map. Since in a real game all of these menus won’t be on the same page, we need to add their content to be dynamically loaded in the Pause Menu. Luckily for us, we can use what we already have learned about data-binding to do that.
-
-The first thing we need to do is to add a new value to our model. This would be `activePauseMenu`, which will control which screen in the Pause Menu is shown.
-
-```
- activePauseMenu: 'settings'
-```
-
-We can now add a new container in the `.pause-menu` called `.tabs` - inside, we’ll add a tab with the Settings text:
-
-```
-
-
Settings
-
-```
-
-With this we can bind the Settings Menu to the model using `data-bind-if`:
-
-```
-
-```
-
-That way when we set the model to another menu, it will hide the settings and show the other. To trigger the change, we can add the following code to our script.js file:
-
-```
-function changeScreen(event) {
- if (event.target.classList.contains("tab")) {
- engine.trigger("change_menu", event.target.textContent.toLowerCase());
- }
-}
-```
-
-This will allow us to send an event to the engine to change the `activePauseMenu`. One thing to note in this code is that this function will be attached to the `.tabs` container and to each individual tab - this allows us to benefit from the event propagation and have only one event attached (regardless of how many tabs there are). Inside this function we then need to check if the click target is a tab before we can trigger the `‘change_menu’` event and pass the text of the target tab.
-
-Just like in [Chapter 5](/chapters/chapter-5/#listening-and-triggering-events) we don’t have a backend, so we need to listen to the `‘change_menu’` event in our frontend. As such, we’ll just write the following code in the `script.js` file:
-
-```
-engine.on('change_menu', (menu) => {
- PlayerModel.activePauseMenu = menu;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-})
-```
-
-Now we can set the `activePauseMenu` property of our model to be the string we passed in our `engine.trigger` function. In addition, we need to attach this event to our `.tabs` element. Since the tabs element is enclosed in a `data-bind-if`, if we make any reference to the `.tabs` element, each time we change the model the reference will be removed. This is why we’ll attach the event directly to our element with `onmousedown`:
-
-```
-
-```
-
-If we now open our Player, we can see that clicking on the Settings tab will have no effect, meaning that everything is working properly. To verify that, we’ll add another tab called ‘Inventory’ which we’ll later use in the next chapter.
-
-```
-
Inventory
-```
-
-And now if we open the Player and click on the Inventory tab, the settings menu should disappear. If we click back on the Settings tab, it should reappear. Now we’ll notice an issue: if we move the sliders, the values don’t get updated. The reason for that is identical to the one above (where we had to add the event listener to the element) - the data-bind-if changes the references.
-
-Hence, we’ll copy over the code we wrote in the previous chapter and wrap it in an if statement, so that the event listeners only get attached when the settings menu is opened.
-
-```
-engine.on("change_menu", (menu) => {
- PlayerModel.activePauseMenu = menu;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (menu === "settings") {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
- }
-});
-```
-
-And inside the `engine.on("pause_toggle")` callback we can do the following:
-
-```
-engine.on("pause_toggle", () => {
- PlayerModel.isPaused = !PlayerModel.isPaused;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (PlayerModel.activePauseMenu === "settings") {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
- }
-});
-```
-
-That leaves us with the same code in two places which is suboptimal. To account for this, we’ll create a function called `attachSliderListeners` and use it in both places:
-
-```
-function attachSliderListeners() {
- const sliderVolume = document.querySelector(".slider-volume");
- const volumeValue = document.querySelector(".volume-value");
-
- sliderVolume.addEventListener("sliderupdate", (e) => {
- volumeValue.textContent = e.detail;
- });
-
- const sliderDifficulty = document.querySelector(".slider-difficulty");
- const difficultyValue = document.querySelector(".difficulty-value");
-
- sliderDifficulty.addEventListener("sliderupdate", (e) => {
- difficultyValue.textContent = e.detail;
- });
-}
-```
-
-And then:
-
-```
-engine.on("pause_toggle", () => {
- PlayerModel.isPaused = !PlayerModel.isPaused;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (PlayerModel.activePauseMenu === "settings") {
- attachSliderListeners();
- }
-});
-
-engine.on("change_menu", (menu) => {
- PlayerModel.activePauseMenu = menu;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-
- if (menu === "settings" && PlayerModel.isPaused) {
- attachSliderListeners();
- }
-});
-```
-
-We can now see the values change when we move the sliders in the Player:
-
-{{< img src="chapter-7_1.png" alt="chapter-7_1" caption="The Inventory Tab is shown" class="border-0" >}}
-
-Before we end this chapter, we will go through one last thing to improve the look of our Pause Menu - set an active state to our tabs. That way, when a tab is pressed, it will set its state to be active and it will change its appearance.
-
-In [Chapter 3](/chapters/chapter-3/#changing-health-bar-color-based-on-data), we have already familiarized you with the approach we’ll take here with `data-bind-class-toggle`. To use it in our tabs, we’ll do the following:
-
-```
-
Settings
-
Inventory
-```
-
-When you select the different tabs in the Player, you will see the active one show:
-
-{{< img src="chapter-7_2.png" alt="chapter-7_2" caption="We now have an indicator of the active tab" class="border-0" >}}
-
-In the next chapter we’ll create our first full UI screen using everything we have learned up to this point plus more.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_7/chapter_7.zip)
diff --git a/guide/content/chapters/chapter-8/chapter-8_1.png b/guide/content/chapters/chapter-8/chapter-8_1.png
deleted file mode 100644
index 8589c02..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/chapter-8_2.png b/guide/content/chapters/chapter-8/chapter-8_2.png
deleted file mode 100644
index 6426f09..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/chapter-8_3.png b/guide/content/chapters/chapter-8/chapter-8_3.png
deleted file mode 100644
index d339ecb..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/chapter-8_4.png b/guide/content/chapters/chapter-8/chapter-8_4.png
deleted file mode 100644
index cafc132..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_4.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/chapter-8_5.png b/guide/content/chapters/chapter-8/chapter-8_5.png
deleted file mode 100644
index a7ca694..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/chapter-8_6.png b/guide/content/chapters/chapter-8/chapter-8_6.png
deleted file mode 100644
index 445f5dc..0000000
Binary files a/guide/content/chapters/chapter-8/chapter-8_6.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-8/index.md b/guide/content/chapters/chapter-8/index.md
deleted file mode 100644
index 09d0044..0000000
--- a/guide/content/chapters/chapter-8/index.md
+++ /dev/null
@@ -1,307 +0,0 @@
----
-title: "Chapter 8: Inventory"
-description: ""
-date: 2021-09-15T08:39:21+03:00
-lastmod: 2021-09-15T08:39:21+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-In this chapter we’ll create our first whole UI page by using everything we have learned about data-binding and event triggering. This will be the inventory where we’ll have a grid (in which we’ll position items) and a details element (that will show the details of the selected item).
-
-## Drawing a grid of cells
-
-To get started we’ll first draw our grid by using data-binding. Our first job is to create an array with empty objects that will represent the item slots in our model. The grid will be 5x6, meaning that we’ll need 30 items in our array. On that basis, we’ll add the following key:
-
-```
-inventoryItems: [
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null
- ],
-```
-
-{{< alert icon="❗" text="Please note that there are multiple ways to create an inventory - it all depends on your preferences, use case and the size of inventory. While this is the simplest way to achieve our current goal, this might not necessarily be the most optimal approach for yours." />}}
-
-## Building the inventory grid
-
-We can now start building our Inventory grid - we will first add a new screen in the `index.html` file in the `.pause-menu` beneath the `.settings-menu` called “inventory” and data-bind it like we did for the Settings Menu in the previous chapter. This time, however, the `activePauseMenu` should be inventory instead of settings.
-
-```
-
-
-
-```
-
-Inside we’ll add:
-
-```
-
-
-
-
-
-
-```
-
-### Looping through the inventory elements
-
-To build the grid, we’ll use another data-binding called `data-bind-for`. This is a structural data-binding just like data-bind-if and allows you to loop through an array and duplicate html elements based on that array.
-
-The syntax for data-bind-for is `“iterator:{{Model}}”`, which is quite similar to `data-bind-class-toggle`. Here we have an iterator and the model; optionally, we can also use the index of the looped element if we need it - `“index, iterator:{{Model}}”`. We can then leverage the iterator or index as a separate model that corresponds to that array item.
-
-In our case we’ll make a div element with the `.inventory-grid-cell` class and inside we’ll add another with the `.inventory-item` one and place them in the `.inventory-grid` element:
-
-```
-
-
-
-
-
-```
-
-It’s time to fill our inventoryItems model objects with data:
-
-```
- inventoryItems: [
- {
- title: 'Sharp Spear',
- count: 1,
- image: 'spear',
- description: 'A thrusting or throwing weapon with long shaft and sharp head or blade. Great for medium to long range combat'
- },
- null,
- null,
- null,
- null,
- null,
- {
- title: 'Horned Helmet',
- count: 1,
- image: 'helmet',
- description: 'Head covering made of a hard material to resist impact with two sharp horns on the side'
- },
- {
- title: 'Axe',
- count: 1,
- image: 'axe',
- description: 'Cutting tool that consists of a heavy edged head fixed to a handle with the edge parallel to the handle and that is used especially for felling trees and chopping and splitting wood or your enemies.'
- },
- {
- title: 'Longbow',
- count: 1,
- image: 'bow',
- description: 'Hand-drawn wooden bow held vertically and used especially by medieval English archers'
- },
- {
- title: 'Arrow',
- count: 5,
- image: 'arrow',
- description: 'Shot from a bow and usually having a slender shaft, a pointed head, and feathers at the butt'
- },
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- null,
- {
- title: 'Beer',
- count: 2,
- image: 'beer',
- description: 'Carbonated, fermented alcoholic beverage that is usually made from malted cereal grain (especially barley) and is flavored with hops'
- },
- null,
- null,
- null,
- null,
- null,
- null,
- ],
-```
-
-We are going to only add data to a handful of objects to show how they can be arranged. In our case, we already have the css styling set in the `.inventory-grid` element to have a grid of 5 rows and 6 columns.
-
-If we open the Player, all we’ll see is the single cell we’ve added earlier:
-
-{{< img src="chapter-8_1.png" alt="chapter-8_1" caption="" class="border-0" >}}
-
-To show the rest of the cells, we’ll add the following code to the cell item:
-
-```
-
-```
-
-This will create **30** cells, corresponding to the amount of objects we have in the `inventoryItems` key in our model (which we can now see in the Player):
-
-{{< img src="chapter-8_2.png" alt="chapter-8_2" caption="" class="border-0" >}}
-
-We can now start filling up our cells. To do that, we’ll add a background image for each item that has an image key - we can achieve this by using `data-bind-style-background-image-url` (which we used in [chapter 4](/chapters/chapter-4/#adding-an-image) to set our minimap background image).
-
-In the `.inventory-item` element, we’ll add the following:
-
-```
-
-```
-
-where item is each object in the model.
-
-We’ll now be able to see the images of our inventory items in the Coherent Player:
-
-{{< img src="chapter-8_3.png" alt="chapter-8_3" caption="We now have items in our inventory" class="border-0" >}}
-
-Since some of the objects in the model are empty, their `data-bind-style-background-image-url` will be resolved as `‘./assets/undefined.png’`, which is fine for now, but may become an issue later on. In order to resolve that we’ll use `data-bind-if` to check if the item's `count` property is greater than **0** and if it isn’t to render the `.inventory-item`. We can do that in the following way:
-
-```
-
-```
-
-Now there won’t be any items in the cells with `null` objects.
-
-## Showing the item information
-
-### Selecting the item
-
-We have now created our inventory grid and displayed our items. The last thing we need to do for this chapter is to display a selected item’s information.
-
-This can easily be done by using data-binding again, but this time we’ll data-bind an event to our inventory item. We are using data-binding instead of just adding an event so we can have access to our model and use the index of each item to select it. To add a data-binding event all we need to do is write `data-bind-[event]`, where event is one of the supported events in [Gameface](https://docs.coherent-labs.com/cpp-gameface/integration/optional_features/htmldatabinding_native/#data-binding-events).
-
-The function that we’ll attach to our data-bound event will be in the model, as the purpose of data-bound events is to allow you to execute code from the backend more easily.
-
-In our model we’ll add the following:
-
-```
-selectedItem: 0,
-itemSelect: (index) => {
- PlayerModel.selectedItem = index;
- engine.updateWholeModel(PlayerModel);
- engine.synchronizeModels();
-}
-```
-
-where the selected item will be the index of the item we have selected (in this case **0** as we’ll default to the first item of our inventory, and the `itemSelect` function will change it based on the index of the item).
-
-To attach our event listener through data-binding, we just need to add to our `inventory-item`:
-
-```
-data-bind-click="PlayerModel.itemSelect({{index}})"
-```
-
-Now every time we click on an inventory item we’ll change the selected item to be the index of the clicked one. (If you try it in the Player right now, nothing will happen as we haven’t added any visual indicators.) The simplest to achieve this would be to add a class when an item is selected. From the previous chapters you already know how to use `data-bind-class-toggle`, so you are already familiar with the concept. In this case the data-binding will be:
-
-```
-data-bind-class-toggle="selected-item:{{index}} === {{PlayerModel.selectedItem}}"
-```
-
-Here we simply check if the index of the item matches the `selectedItem`. If we open it in the Player, we’ll see a green border around our selected item.
-
-{{< img src="chapter-8_4.png" alt="chapter-8_4" caption="We have the spear selected" class="border-0" >}}
-
-### Displaying the selected item
-
-The last part of this chapter will look at how to display the selected item information to the side of our grid. To achieve this we simply have to add a few elements and data-bind the value of the selected item. The trickier part here is binding the value, as the selected item is not an object but a number. This however can be solved very easily by remembering that the `inventoryItems` are still an array, and we can access array items by using the index of the item. In our case it would be something like `data-bind-value=”PlayerModel.inventoryItems[{{PlayerModel.selectedItem}}].description”`
-
-Let’s create a title, image, count and description div elements in the .inventory-details-wrapper we added earlier and data-bind the selected item value:
-
-```
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-If we open the Player we’ll see the details of the first item appear:
-
-{{< img src="chapter-8_5.png" alt="chapter-8_5" caption="" class="border-0" >}}
-
-Since we have already set up our logic for changing the selected item, if we click on other items their details will be shown:
-
-{{< img src="chapter-8_6.png" alt="chapter-8_6" caption="We have two beers, nice!" class="border-0" >}}
-
-While this works, it’s not an ideal solution for when we have large codebases or models, as it will make our code harder to read and increase the chance of making mistakes. This is why Gameface allows the use of something called an [Observable model](https://docs.coherent-labs.com/cpp-gameface/integration/optional_features/htmldatabinding_native/#observable-models).
-
-An `Observable model` is a smart object which will automatically push itself for update when some of its properties are changed. This is especially useful in situations where we need to keep an active state (as is our case in the inventory active item).
-
-To create an Observable model, we’ll just need to create the `observableModel` in our `model.js` file in the `engine.whenReady`:
-
-```
- engine.createJSModel("PlayerModel", model);
-
- engine.createObservableModel("activeItem");
- activeItem.item = PlayerModel.inventoryItems[PlayerModel.selectedItem];
-
- engine.synchronizeModels();
-```
-
-Here we are using `engine.createObservableModel` to create our Observable model. Now each time the `activeItem` item changes, it will reflect in the data-binding where we’ve used our new model. To make this change we’ll add to the `PlayerModel.itemSelect` function:
-
-```
- engine.updateWholeModel(PlayerModel);
- activeItem.item = PlayerModel.inventoryItems[PlayerModel.selectedItem];
- engine.synchronizeModels();
-```
-
-{{< alert icon="❗" text="Keep in mind that any changes to the Observable model need to be made before we synchronize the models so that our changes can appear." />}}
-
-We can now change in the `index.html` the bindings with the new `Observable model`:
-
-```
-
-
-
-
-
-```
-
-If we save and check the Player, we can see that nothing has changed. With this we conclude chapter 8. In the next chapter we’ll create a Map screen using some more advanced features of Gameface.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_8/chapter_8.zip)
diff --git a/guide/content/chapters/chapter-9/chapter-9_1.png b/guide/content/chapters/chapter-9/chapter-9_1.png
deleted file mode 100644
index a6dea71..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_1.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_2.png b/guide/content/chapters/chapter-9/chapter-9_2.png
deleted file mode 100644
index 81f87f8..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_2.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_3.png b/guide/content/chapters/chapter-9/chapter-9_3.png
deleted file mode 100644
index 7217f64..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_3.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_4.png b/guide/content/chapters/chapter-9/chapter-9_4.png
deleted file mode 100644
index bf23bb2..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_4.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_5.png b/guide/content/chapters/chapter-9/chapter-9_5.png
deleted file mode 100644
index 2a5a93f..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_5.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_6.png b/guide/content/chapters/chapter-9/chapter-9_6.png
deleted file mode 100644
index d1d9d5a..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_6.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/chapter-9_7.png b/guide/content/chapters/chapter-9/chapter-9_7.png
deleted file mode 100644
index 090c464..0000000
Binary files a/guide/content/chapters/chapter-9/chapter-9_7.png and /dev/null differ
diff --git a/guide/content/chapters/chapter-9/index.md b/guide/content/chapters/chapter-9/index.md
deleted file mode 100644
index 957b5bb..0000000
--- a/guide/content/chapters/chapter-9/index.md
+++ /dev/null
@@ -1,596 +0,0 @@
----
-title: "Chapter 9: Map"
-description: ""
-date: 2021-09-15T08:39:24+03:00
-lastmod: 2021-09-15T08:39:24+03:00
-draft: false
-images: []
-menu:
- chapters:
- parent: "chapters"
- weight: 1
----
-
-In this chapter we’ll show you how to use some of the more advanced features and techniques in Gameface to create a map. We’ll look at how to make a large tiled map that can be moved around with the mouse and zoomed in and out. The map will also have a custom cursor and points of interest that will show the relevant information when hovered over. All of this will be achieved through data-binding.
-
-## Adding a new model for the map
-
-As with all previous chapters, we will start by adding data to our model. This time however we’ll make a new model for the map as we'll be updating the model every time we interact with the map. If we keep everything in a single model we are risking performance issues as the model grows bigger.
-
-We’ll start by creating a new map object with the following values - `zoom`, `x`, `y`, `pointsOfInterest` and `mapTiles`.
-
-```
-const map = {
- zoom: 1,
- x: 0,
- y: 0,
- pointsOfInterest: [],
- mapTiles: Array.from(Array(64))
-}
-```
-
-Then in our `whenReady` promise resolve, we’ll register the new model next to our `PlayerModel` and we also need to make sure it's before the `engine.synchronizeModels`
-
-```
-engine.createJSModel("MapModel", map);
-```
-
-While all of the values are pretty self explanatory, the `mapTiles` seems out of place as it’s just an array of empty values. While it is indeed not necessary to have this value, we’ll be using it to avoid having to manually set up each map tile. The tiles we have provided in the assets folder are for an **8 x 8** map, or **64** tiles in total. So instead of having to write an element for each tile, we can now easily write one with `data-bind-for` and create all **64** tiles at once.
-
-## Adding a grid of tiles
-
-To do that we’ll use another component called `automatic-grid`, which will allow us to create an **8x8** grid easily. To install it, we’ll do the same thing we did in [Chapter 6](/chapters/chapter-6/#adding-the-dependencies) and use the node package manager. For this particular component we’ll also need to use the grid component style as it’s built on top of it.
-
-To install both components we’ll use:
-
-```
-npm install coherent-gameface-automatic-grid
-npm install coherent-gameface-grid
-```
-
-And then in our index.html we’ll add the style for the `grid` and the `automatic-grid`.
-
-```
-
-
-```
-
-Plus the script for the `automatic-grid`:
-
-```
-
-```
-
-To create our automatic grid, we just need to add the `automatic-grid` element to our `html`. Before that, however, we need to create a new tab, just like we did for the inventory and settings:
-
-```
-
Map
-
-
-
-
-```
-
-And then we’ll add:
-
-```
-
-
-
-```
-
-To set the columns and rows in our `automatic-grid` we just need to add them as attributes to our `automatic-grid` element like this:
-
-```
-
-
-
-```
-
-With this we now have an **8x8** grid. But we still need to add the map tiles to it, for which we’ll use a `component-slot` element. `Component-slot` elements are elements that are added as children to the component and are then used in the component template based on their data-name attribute. Here, we’ll need a `component-slot` with a `data-name=”item”`
-
-```
-
-
-
-```
-
-And inside this component slot we can add our map tile:
-
-```
-
-
-
-```
-
-But we have **64** tiles and we don’t want to write a component slot for each one of them. Instead, we’ll use the `mapTiles` we added to our model and by using `data-bind-for`, we’ll create **64** of those component slots
-
-```
-
-```
-
-We now have **64** tiles that will be arranged in an **8x8** grid. But we still don’t have the images for them. This can be easily fixed by adding a `data-bind-style-background-image-url` just as we did in the previous chapter:
-
-```
-
-```
-
-where we need **index + 1** because the map tiles start from **1**, but the index starts with **0** and to indicate that it’s a number, otherwise it will be resolved to - `“./assets/map-1_01.jpg”`
-
-If we open the Player, we’ll see the map displayed:
-
-{{< img src="chapter-9_1.png" alt="chapter-9_1" caption="" class="border-0" >}}
-
-## Add interactivity to the map
-
-Our next step is to make the map more interactive by attaching an event listener and moving it around by dragging. Since we also want to be able to zoom in and out, we’ll be using a single data-binding to achieve both. This can be done with `data-bind-style-transform2d`, which accepts a matrix of **6** numbers in the following order: `scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY()`. For our case, we’ll be needing `scaleX and Y` and `translateX and Y`.
-
-To get started we’ll create a function called `mapDragStart()` in our `script.js` and attach it on `mousedown` to our map:
-
-```
-function mapDragStart(event) {
-
-}
-```
-
-```
-
-```
-
-If we click on the map now nothing will happen, as the function we attached is empty. Before we start adding some logic to it, let’s add the data-binding to our `automatic-grid`, as the map will only serve as a container. Since we only need a few transforms, our `data-bind-style-transform2d` will look something like this:
-
-```
-
-```
-
-It may look a bit confusing, but the `transform2d` binding expects a string, so we must concatenate our values to be a string. If we open the Player we should see that nothing has changed.
-
-Next, we need to create two more functions - `mapDrag` (which will control the dragging) and `mapDragEnd` (which will clear any changes we made so as to not interfere with the other operations).
-
-```
-function mapDrag(event) {
-
-}
-```
-
-```
-function mapDragEnd() {
-
-}
-```
-
-Once these are in place, we can attach them to our event listeners. However, unlike with the `mousedown` event, we’ll be attaching these to the document in order to have the map drag even while we go outside. This will allow us to not set a flag that we are dragging the map. So in the `mapDragStart` we’ll add the following:
-
-```
-function mapDragStart(event) {
- document.addEventListener('mousemove', mapDrag);
- document.addEventListener('mouseup', mapDragEnd);
-}
-```
-
-And in the `mapDragEnd` function we’ll remove these listeners, so that we stop dragging when the mouse button is released:
-
-```
-function mapDragEnd() {
- document.removeEventListener('mousemove', mapDrag);
- document.removeEventListener('mouseup', mapDragEnd);
-}
-```
-
-If we now drag the map in the Player nothing will happen, as we haven’t added any code to our function to be executed. To start we’ll actually add a few global variables, namely `offsetY` (the offset of our map because of the tabs) `startX` and `startY` which will allow us to drag the map based on the starting position of the drag:
-
-{{< img src="chapter-9_2.png" alt="chapter-9_2" caption="Why offsetY" class="border-0" >}}
-
-```
-let offsetY, startX, startY;
-```
-
-We’ll set these variables in the `mapDragStart` function :
-
-```
-function mapDragStart(event) {
- offsetY = event.currentTarget.getBoundingClientRect().y;
-
- startX = event.clientX;
- startY = event.clientY - offsetY;
-
- document.addEventListener("mousemove", mapDrag);
- document.addEventListener("mouseup", mapDragEnd);
-}
-```
-
-And in the `mapDrag` function we’ll use these variables to change the model and create the dragging motion:
-
-```
-function mapDrag(event) {
- MapModel.x += event.clientX - startX;
- MapModel.y += event.clientY - startY - offsetY;
-
- startX = event.clientX;
- startY = event.clientY - offsetY;
-
- engine.updateWholeModel(MapModel);
- engine.synchronizeModels();
-}
-```
-
-Here we add to the model the difference between the starting coordinates and the mouse coordinates - that way, if we move the mouse to the left, we’ll receive a negative number (and so on). We then set the new starting points, so on the next move we’ll only add the distance that the mouse has moved. Lastly, we have to update the model and synchronize it in order for all of these changes to appear on screen.
-
-If we open the Player and drag our map we’ll see it move:
-
-{{< img src="chapter-9_3.png" alt="chapter-9_3" caption="" class="border-0" >}}
-
-But as we can see, our map can be dragged infinitely, meaning that we can remove it entirely from the map. To fix that we’ll need to make another two global variables - `limitX` and `limitY`, which we’ll use to control the dragging. And in the mapDragStart function we’ll do the following:
-
-```
- const mapWrapper = event.currentTarget;
- const map = event.currentTarget.firstChild;
-
- offsetY = mapWrapper.getBoundingClientRect().y;
-
- limitX = (map.getBoundingClientRect().width - mapWrapper.getBoundingClientRect().width) / 2;
- limitY = (map.getBoundingClientRect().height - mapWrapper.getBoundingClientRect().height) / 2;
-
-```
-
-where we have added a constant, so that we don’t have to write `event.currentTarget` and `event.currentTarget.firstChild` everywhere.
-
-This limit is the difference between the `width/height` of the map and the `width/height` of the wrapper divided by two (that way we can drag the map to the left as well as to the right, up and down, respectively).
-
-To add the limits, we’ll just clamp the model values. Clamping is a way to limit a value between two others - a min and max value. To make the clamping, we’ll make a helper function called `clamp()` in the `script.j`s file, which will take on a `value`, a `minimum` and `maximum value`:
-
-```
-function clamp(value, min, max) {
- return Math.min(Math.max(min, value), max);
-}
-```
-
-And in the `mapDrag` function:
-
-```
-MapModel.x = clamp(MapModel.x + event.clientX - startX, -limitX, 0);
-MapModel.y = clamp(MapModel.y + event.clientY - startY - offsetY, -limitY, 0);
-```
-
-If we drag the map now it won’t move past the edges.
-
-The next kind of functionality we will give the map is the ability to zoom in and out using the mouse scroll. To do that, we’ll make another function called zoom and attach it to the wheel event of our map:
-
-```
-function zoom(event) {
-
-}
-```
-
-```
-
-```
-
-We can now start adding the zoom logic to our function. For our use case, we need the map to zoom in on our mouse coordinates - there are a couple of ways to do that, but we are going to do it by moving the `x` and `y` coordinates of the map, based on the scale.
-
-We’ll start by changing the scale of our map based on the mouse wheel movement. To do that we’ll be using the `deltaY` of our event and multiply it by **-0.01** (The delta is always **40** and it will be too large of a scale; the reason why it’s a negative number is that the delta is negative when you scroll up and positive when down. If we don’t reverse them, we’ll have to scroll down to zoom out and vice versa, which is very counterintuitive). Since we don’t want to scale the map to be infinitely small, we’ll reuse the clamping function we made earlier:
-
-```
- MapModel.zoom = clamp(MapModel.zoom + (event.deltaY * -0.01), 1, 3);
-```
-
-If we now try to zoom in on any point in our map, we’ll see that it zooms in and out based on the top left corner where our origin point is located. Аs mentioned previously, to fix that we’ll change the `x` and `y` coordinates of the map.
-
-{{< alert icon="❗" text="Note that if we just change them, the map will move outside the limits again, meaning that we need to set the limits again when we are zooming." />}}
-
-The first thing we’ll add to our code are the map constants from the `mapDragStart` function
-
-```
- const mapWrapper = event.currentTarget;
- const map = event.currentTarget.firstChild;
-```
-
-Then we’ll set the `offsetY` again ( if we start to zoom without having dragged the map, our calculations will be off)
-
-```
- offsetY = mapWrapper.getBoundingClientRect().y;
-```
-
-And then save the initialScale of the map:
-
-```
- const initialScale = MapModel.zoom;
-```
-
-We need to save the initial scale because when we scale an element, it scales based on its initial values. For example, if we have a square that is **100x100** and we scale it twice, it will become **200x200**; however, if we change the scale to be **4**, it won’t become **800x800** but **400x400** (hence we’ll need this value to compensate for the difference).
-
-After that comes the zoom logic we wrote earlier; once set, we can proceed with setting our limits:
-
-```
- MapModel.zoom = clamp(MapModel.zoom + event.deltaY * -0.01, 1, 3);
-
- limitX = map.getBoundingClientRect().width * (MapModel.zoom / initialScale) - mapWrapper.getBoundingClientRect().width;
- limitY = map.getBoundingClientRect().height * (MapModel.zoom / initialScale) - mapWrapper.getBoundingClientRect().height;
-```
-
-As you can see, setting the limits is the same as in the `mapDragStart` function, but with an addition. When we set the limits, we haven’t yet updated and synchronized the model - this means that the map width is not scaled to the new scale yet. To compensate for this difference, we’ll divide the new scale by the old one and multiply it by the width of the map, so we can get scaled width. Same goes for the height.
-
-With the limits set, we can set the new map `x` and `y` coordinates:
-
-```
- MapModel.x = clamp(MapModel.x + event.clientX * (MapModel.zoom - initialScale) * -1, -limitX, 0);
-```
-
-```
- MapModel.y = clamp(MapModel.y + (event.clientY - offsetY) * (MapModel.zoom - initialScale) * -1, -limitY, 0);
-```
-
-Again, we have a slight difference to the `mapDragStart` and `mapDrag` functions. We have to compensate for the scale again, by subtracting the current scale to the old scale, then multiplying by **-1**. The purpose of the multiplication is to have the map move in the correct direction.
-
-And then we finish by updating and synchronizing our model:
-
-```
- engine.updateWholeModel(MapModel);
- engine.synchronizeModels();
-```
-
-Now when we open the Player we’ll see that we can zoom in and out in the map using the mouse scroll:
-
-{{< img src="chapter-9_4.png" alt="chapter-9_4" caption="" class="border-0" >}}
-
-## Adding Point Of Interest markers to the map
-
-With that done we can move to the last component of our map, the points of interest. These will be markers on the map, that when hovered over will show a tooltip with more information about the point. We can do this by combining a couple of different data-bindings, but in this case we’ll demonstrate how to create your own data-binding attribute and use it.
-
-To start we’ll create a new file, called `poi-data-binding.js` and we’ll include it in the `index.html` between the `cohtml` script and the `model.js` file:
-
-```
-
-
-
-```
-
-We can now start making our custom data-binding attribute. The first thing we need to do is to make a class in the `poi-data-binding` file we just created which we’ll call `POIHandler` (the names of the files and classes are arbitrary, you can set them to anything that make sense to your use case)
-
-```
-class POIHandler {
-
-}
-```
-
-Inside this class we always need to add 3 functions - `init`, `update` and `deinit`. These functions receive our model value and allow us to control what happens with the custom data-binding. The `init` function runs the first time we attach the custom data-binding, the `update` function - each time the model changes, and the `deinit` is when we remove the data-binding.
-
-Each function accepts the following parameters:
-
-```
- init(element, value) {
-
- }
-
- update(element, value) {
-
- }
-
- deinit(element) {
-
- }
-```
-
-where element is the element we have added our custom data-binding attribute to and value is the value of our model.
-
-The first thing we need to do is to decide on the type of data our custom data-binding will work with. In our case, these will be objects that have `x and y coordinates`, `image`, `title`, `description` and an indication if it’s `locked`.
-
-In our `MapModel` in `pointsOfInterest` we’ll add a couple of objects:
-
-```
- pointsOfInterest: [
- {
- x: 10.3004,
- y: 45.7164,
- icon: 'village',
- title: 'Village',
- description: 'The village where you were raised.',
- locked: false
- },
- {
- x: 22.6609,
- y: 14.1493,
- icon: 'town',
- title: 'Town',
- description: 'The town of Málhildur.',
- locked: false
- },
- {
- x: 74.9957,
- y: 42.1492,
- icon: 'statue',
- title: 'Statue of Freya',
- description: 'Statue of the goddess Freya. Only thing left from a sunken village.',
- locked: true
- }
- ],
-```
-
-Now we can start making our tooltips. To start, we’ll create a couple of additional functions in the poi-data-binding:
-
-```
- createTooltip(title, description, locked) {
-
- }
-
- onMouseEnter() {
-
- }
-
- onMouseLeave() {
-
- }
-```
-
-The `createTooltip` will create the tooltip that will show when we hover over a POI and the `onMouseEnter` and `onMouseLeave` will be responsible for showing and hiding the tooltip.
-
-We can now start adding logic to our init function and set the position and images of our points:
-
-```
- init(element, value) {
- element.parentNode.style.left = `${value.x}%`;
- element.parentNode.style.top = `${value.y}%`;
- element.style.backgroundImage = `url(./assets/map-${value.icon}-icon.png)`;
- }
-```
-
-As you can see we are adding the position to the poi parent, rather than the element. This is because, we need to separate the element with the `data-bind-for` from the other `data-binded` elements as the order of evaluations might be incorrect, but we need to change it's position, rather than the childs.
-
-Let’s test if everything we’ve done so far works. We’ll first need to register our custom data-binding attribute. In the `model.js` file (in the `engine.whenReady`, above the part where we register our model), we’ll add the following:
-
-```
-engine.registerBindingAttribute('poi', POIHandler);
-```
-
-We can now use our custom data-binding attribute as: `data-bind-poi`.
-
-Before we use it, we need to make a few structural changes to our html. In the `index.html`, we’ll wrap the `automatic-grid` in a new div that will have the same class and data-binding as the grid:
-
-```
-
-
-
-
-
-
-
-```
-
-This will allow us to place our points of interest relative to the grid, so that when we make any changes (e.g. scale, move), it will affect them as well.
-
-We can now add a `.point-of-interest-container` element inside the `map-tile-grid`; using `data-bind-for`, we’ll multiply it to the number of points in our model and then we'll add a `.point-of-interest` our custom data-binding should position it correctly on the map:
-
-```
-
-
-
-```
-
-If we open the Player, we should see the icons positioned correctly:
-
-{{< img src="chapter-9_5.png" alt="chapter-9_5" caption="" class="border-0" >}}
-
-Next we’ll add a tooltip and event listeners that will show or hide the tooltip if we hover over the icon. In the `poi-data-binding.js` we’ll add the following code to the `createTooltip` function
-
-```
- createTooltip(title, description, locked) {
- const tooltip = document.createElement("div");
- tooltip.classList.add("tooltip");
- tooltip.innerHTML = `
${title}
${description}
`;
- return tooltip;
- }
-```
-
-And in our init function, we can add the following code:
-
-```
-this._tooltip = this.createTooltip(value.title, value.description, value.locked);
-```
-
-This will make the tooltip available in other functions as well - namely the onMouseEnter and onMouseLeave.The reason why we don’t add it to the init function is that the update function always fires on `synchronizeModels`, hence we don’t need to run it twice.
-
-With our tooltip created, we can append it to our element.
-```
- element.appendChild(this._tooltip);
-```
-
-Then in the `update` function we need to update the tooltip with the new data, whenever it has been updated. We also :
-
-```
-this._tooltip.innerHTML = `
${value.title}
${value.description}
`;
-```
-
-Now, we can attach our event listeners to the element in the `init` function, and remove them in the `deinit`:
-
-```
- init(element, value) {
- element.style.left = `${value.x}px`;
- element.style.top = `${value.y}px`;
- element.style.backgroundImage = `url(./assets/map-${value.icon}-icon.png)`;
-
- this._tooltip = this.createTooltip(value.title, value.description, value.locked);
- element.appendChild(this._tooltip);
-
- element.addEventListener('mouseenter', this.onMouseEnter);
- element.addEventListener('mouseleave', this.onMouseLeave);
- }
-
- deinit(element) {
- element.removeEventListener('mouseenter', this.onMouseEnter);
- element.removeEventListener('mouseleave', this.onMouseLeave);
- }
-```
-
-And in the `onMouseEnter` and `onMouseLeave` functions we can add:
-
-```
- onMouseEnter() {
- this._tooltip.style.display = 'block';
- }
-
- onMouseLeave() {
- this._tooltip.style.display = 'none';
- }
-```
-
-If we open the Player and hover over the point of interest, we won't see anything; alternatively, if we open the logs, we’ll see an error. The reason is that inside the `onMouseEnter` and `onMouseLeave` functions, this points to a different object. To fix that we need to create constructor function and add the following:
-
-```
- constructor() {
- this.onMouseEnter = this.onMouseEnter.bind(this);
- this.onMouseLeave = this.onMouseLeave.bind(this);
- }
-```
-
-If we try this now, the tooltips will appear.
-
-{{< img src="chapter-9_6.png" alt="chapter-9_6" caption="" class="border-0" >}}
-
-But what about the locked flag we added to our model? We can use this to lock a POI, show a different icon and not display the tooltip. To do this, we’ll change where we set the icon inside the init function:
-
-```
-element.style.backgroundImage = `url(./assets/map-${!value.locked ? value.icon : 'locked'}-icon.png)`;
-```
-
-We’ll also change the code of the `createTooltip` function to be:
-
-```
- createTooltip(title, description, locked) {
- const tooltip = document.createElement("div");
- if (!locked) {
- tooltip.classList.add("tooltip");
- tooltip.innerHTML = `
${title}
${description}
`;
- }
- return tooltip;
- }
-```
-
-And inside the `update` function we need to add the following check so that whenever we update the model data, the poi doesn't fill the tooltip.
-
-```
-if (value.locked) return;
-```
-
-The last thing to complete is to change some of the points of interest in our model to be locked, like the statue for example:
-
-```
-{
- x: 968,
- y: 409,
- icon: 'statue',
- title: 'Statue of Freya',
- description: 'Statue of the goddess Freya. Only thing left from a sunken village.',
- locked: true
-}
-```
-
-And in the Player:
-
-{{< img src="chapter-9_7.png" alt="chapter-9_7" caption="" class="border-0" >}}
-
-With that we can now wrap up this chapter. In the final chapter, we’ll go over the ways to debug and profile your app.
-
-## Get the chapter files
-
-You can download the completed chapter from [here](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_9/chapter_9.zip)
diff --git a/guide/content/unreal-chapters/_index.md b/guide/content/unreal-chapters/_index.md
deleted file mode 100644
index 50da050..0000000
--- a/guide/content/unreal-chapters/_index.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: "Unreal Chapters"
-description: ""
-date: 2021-09-15T08:38:10+03:00
-lastmod: 2021-09-15T08:38:10+03:00
-draft: false
-images: []
----
\ No newline at end of file
diff --git a/guide/content/unreal-chapters/ue-chapter-1/index.md b/guide/content/unreal-chapters/ue-chapter-1/index.md
deleted file mode 100644
index ac67133..0000000
--- a/guide/content/unreal-chapters/ue-chapter-1/index.md
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: "Unreal Engine Chapter 1: Getting Started"
-description: ""
-date: 2021-12-03T17:10:11+02:00
-lastmod: 2021-12-03T17:10:11+02:00
-draft: false
-images: []
-menu:
- unrealChapters:
- parent: "unreal-chapters"
- weight: 0
----
-## Overview
-
-This guide is meant to demonstrate how to translate the frontend model data and process events from the original guide to Unreal Engine C++, while also showcasing the powerful and convenient automatic data-binding feature that we have for Unreal.
-
-### Structure
-
-Unlike the Front End guide where you were supposed to implement the logic on your own for each chapter, the Unreal guide aims to be more of a "walkthrough" in terms of how the data transition was realized. Each chapter will cover how each model was "translated" from JavaScript to C++ and you will be able to directly inspect the end result in the files (as well as in the guide).
-
-### Assets
-
-Reading this, you should have obtained our Unreal Engine plugin already, which will contain the assets (located in our CoherentSample directory that is included in the archive, or alternatively installed through our installer) that we will go over in this guide. These assets include:
-
-- A `StarterGuide` map, located under `'CoherentSample/Content/Maps/StarterGuide.umap'`.
-- `StarterGuideGameMode` Blueprint, located under `'CoherentSample/Content/MapAssets/StarterGuideGameModeBP.uasset'`.
-- Frontend resources, located under `'CoherentSample/Content/uiresources/StarterGuide'`. These include the same HTML/CSS/JS files from the original guide, with some minor alterations to be suitable for our C++ data models.
- - Alternatively obtainable from this [link](https://github.com/CoherentLabs/StarterGuide/raw/master/files/chapter_11/chapter_11.zip).
- - These are based off the state in which they were set up in [Chapter 11](https://starter.coherent-labs.com/chapters/chapter-11/), which explains how to prepare them for a backend.
-- C++ files that contain logic for the HUD and different models (`Map`, `Player`, `Minimap` and `Inventory`).
-
-{{< alert icon="❗" text="Note: The Unreal assets will work with Unreal Engine versions >= 4.25" />}}
diff --git a/guide/content/unreal-chapters/ue-chapter-2/index.md b/guide/content/unreal-chapters/ue-chapter-2/index.md
deleted file mode 100644
index 7c14598..0000000
--- a/guide/content/unreal-chapters/ue-chapter-2/index.md
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: "Unreal Engine Chapter 2: Map setup"
-description: ""
-date: 2021-12-03T18:13:19+02:00
-lastmod: 2021-12-03T18:13:19+02:00
-draft: false
-images: []
-menu:
- unrealChapters:
- parent: "unreal-chapters"
- weight: 0
----
-
-In this chapter we will go over how the `StarterGuide` map was configured. Since the map is supposed to be a quick and simple demonstration, we won't go over details such as how to setup a `View` in Blueprint, as this information is already available in our [Getting started section](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/d7/dac/_getting_started.html) of our [documentation](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/).
-
-### Creating the Map
-
-The `StarterGuide` map was duplicated from the `Example` map, since it contained most of the required setup that we need, like setting up the `View`. In this example, the two [in-world Cohtml Planes](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/dd/d3d/_cohtml_components.html#Cohtml_Views_for_in_game_Surfaces) from the `Example` map were removed, as we don't need them for our purpose. The map should essentially look like this:
-
-{{< img-simple src="ue-chapter-2_1.png" alt="ue-chapter-2_1" caption="" class="border-0" >}}
-
-### Loading the Starter Guide HTML page
-
-Next we need to modify the `Level Blueprint`, so that the correct HTML page gets loaded by our `View`. Once we've opened up the `Blueprint Editor` of our map and are on the `Event Graph` tab, we just need to modify the `Page Url` in the `Setup View` object to point to `coui://uiresources/StarterGuide/index.html`. Here is a screenshot of the end result:
-
-{{< img-simple src="ue-chapter-2_2.png" alt="ue-chapter-2_2" caption="" class="border-0" >}}
-
-{{< img-simple src="ue-chapter-2_3.png" alt="ue-chapter-2_3" caption="" class="border-0" >}}
-
-This will now allow us to launch the UI that was created in the original Starter Guide, and will look exactly the same as it does by the end of [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/).
-
-### Adding a HUD and Game Mode
-
-Now we need to create a new C++ HUD, which will hold our `View` and do our model creation. This HUD needs to have `CohtmlGameHUD` as its parent class and call it `StarterGuideHUD`, to be created under `CoherentSample/Source/CoherentSample/StarterGuide`. Anyone familiar with Unreal, will find this straightforward, but for demonstration's sake, this screenshot showcases how this is accomplished:
-
-{{< img-simple src="ue-chapter-2_4.png" alt="ue-chapter-2_4" caption="" class="border-0" >}}
-
-{{< img-simple src="ue-chapter-2_5.png" alt="ue-chapter-2_5" caption="" class="border-0" >}}
-
-Once we have our C++ files created, we can proceed to create our Game Mode Blueprint asset, through which we will set the HUD to our newly-created class. This is done through the `Add/Import` button in the `Content Browser` tab (while in `Content/MapAssets/StarterGuide`), clicking on `Blueprint Class` and selecting Game Mode Base as the parent Blueprint class. The created asset can be named as `StarterGuideGameMode_BP`.
-
-Again, nothing complicated for the regular Unreal Engine user, but once again to ensure an easy time for a broader audience, here is another screenshot:
-
-{{< img-simple src="ue-chapter-2_6.png" alt="ue-chapter-2_6" caption="" class="border-0" >}}
-
-All that's left is to do is to use the `World Override` settings to change the Game Mode to our newly-created `StarterGuideGameMode_BP` asset and then switch the HUD to our `StarterGuideHUD` class. Here's another screenshot showcasing this:
-
-{{< img-simple src="ue-chapter-2_7.png" alt="ue-chapter-2_7" caption="" class="border-0" >}}
-
-We're all set up now! In the next chapter we will finally start implementing the more interesting parts of this guide, namely the first model!
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_1.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_1.png
deleted file mode 100644
index 26489d1..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_1.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_2.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_2.png
deleted file mode 100644
index 8310921..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_2.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_3.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_3.png
deleted file mode 100644
index 8b7907a..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_3.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_4.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_4.png
deleted file mode 100644
index 908915e..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_4.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_5.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_5.png
deleted file mode 100644
index f96946c..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_5.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_6.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_6.png
deleted file mode 100644
index 398b7e8..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_6.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_7.png b/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_7.png
deleted file mode 100644
index 14f93e3..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-2/ue-chapter-2_7.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-3/index.md b/guide/content/unreal-chapters/ue-chapter-3/index.md
deleted file mode 100644
index 6dd9fe2..0000000
--- a/guide/content/unreal-chapters/ue-chapter-3/index.md
+++ /dev/null
@@ -1,405 +0,0 @@
----
-title: "Unreal Engine Chapter 3: Creating the Player Model, Minimap and Inventory"
-description: ""
-date: 2021-12-03T23:02:33+02:00
-lastmod: 2021-12-03T23:02:33+02:00
-draft: false
-images: []
-menu:
- unrealChapters:
- parent: "unreal-chapters"
- weight: 0
----
-
-In this chapter we will start translating the JavaScript data in the `model.js` file (in the state that it is at the end of [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/)) to Unreal C++ and introduce our **automatic data-binding feature**, exclusive to our Unreal Engine plugin.
-
-## Introducing the UType Binder
-
-By far the most convenient feature we have (and will start demonstrating starting from this chapter onwards) available is the automatic data-binding. We have [a whole section](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/db/d1c/_java_script_interactions.html) in our documentation that covers the feature in great detail, but for this guide all you need to know is that we're going to basically expose class member data through Unreal's reflection system and this is done by simply including the relevant header file that we have available.
-
-### Overview of the required Player model data
-
-If you've followed the original guide, the JavaScript `model` object should be quite familiar. We're now going to translate all of its data from the [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/) `model.js` over to Unreal C++. For this purpose we obviously need to create another class through the Unreal Editor, let's call it `PlayerModel` and for simplicity's sake (to spare us unnecessary noise), let's have it's parent class be `UObject`. Since this should by now be a familiar process, we won't add a screenshot this time.
-
-Looking at the `model.js` file, let's quickly go over what kind of data we require:
-
-- We want to include `CohtmlUTypeBinder.h`, `CohtmlFStringBinder.h` and `CohtmlTArrayBinder.h`
-- We want to specify our class constructor
-- We want a `time` variable, which is a string that holds the current time, so we will declare it as an `FString`
-- We want `currentHealth` and `maxHealth` variables, which will be `int32`s
-- We want two methods returning `bool` - `shouldShowHealthWarning` and `shouldShowHealthDanger`
-- We want a `minimap` object, which will be a `USTRUCT`
- - It requires:
- - An `id` variable, which will be of type `int32`
- - An `x`, `y` and `angle` variable, which can will of type `float`
- - A `label`, which will be an `FString`
-- We want a `isPaused` `bool` variable
-- We want a `activePauseMenu` `FString` variable
-- We want `inventoryItems`, which is going to be a `TArray` containing `InventoryItem` objects (another `USTRUCT`)
- - The `InventoryItem` requires:
- - A `title`, `image` and `description` variable, all of which will be `FString`
- - A `count` variable, which will be `int32`
-- We want `selectedItem`, which will be an `int32` variable
-- We want an `itemSelect` `void` method
-- Additionally, we will also declare a `const` `uint32` variable for the "inventory size", as well as an `FItemSelectDelegate` (this one will be explained [later](#registering-the-player-model))
-- Lastly, for the C++ implementation, we also want an `itemToDisplay` variable of type `FInventoryItem`, which we will use to create a synchronization dependency so that we won't have to update the currently selected inventory item every time a different one is selected.
-
-{{< alert icon="❗" text="Keep in mind, that we need to preserve the same variable name casing, so that the interaction with the frontend code will happen correctly. You can alternatively visit your Gameface settings and toggle the lowercase name exposure option."/>}}
-
-Before we dive into the code, let's get a few things explained - to successfully utilize the automatic binding of our data, we require the binder header files for certain types like `FString` and `TArray`, hence the additional include directives.
-
-As mentioned previously in order for all of this to work, we utilize Unreal's reflection system, which means that our class/struct needs to be have the Unreal respective `UCLASS`/`USTRUCT` macro used. But what's more - every data we want exposed to JavaScript needs to be a `UPROPERTY`. We can also expose methods using `UFUNCTION`. Additional details can be once again be found in our [JavaScript interactions](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/db/d1c/_java_script_interactions.html) section of our [documentation](https://coherent-labs.com/Documentation/UnrealEngine4-gameface/).
-
-### Preparing for the model creation
-
-Before we start implementing the Player model, let's first do a quick setup in our `StarterGuideHUD` class. We need to add a couple of things:
-
-- We want to include the `CohtmlUTypeBinder.h`
-- We want to specify our class constructor
-- We want to override our `BeginPlay` method
-- We want to add a `BindUI` method
-- We want to have a pointer to the `View` that we are going to use
-
-Considering all of these, our `StarterGuideHUD.h` needs to look like this in the end:
-
-```
-#pragma once
-
-#include
-
-#include "GameFramework/HUD.h"
-#include "CohtmlGameHUD.h"
-
-#include "StarterGuideHUD.generated.h"
-
-UCLASS()
-class COHERENTSAMPLE_API AStarterGuideHUD : public ACohtmlGameHUD
-{
- GENERATED_BODY()
-
-public:
- AStarterGuideHUD(const FObjectInitializer& PCIP);
-
- virtual void BeginPlay() override;
-
- void BindUI();
-
-private:
- cohtml::View* View;
-};
-```
-
-Ok, now let's go over to the `StarterGuideHUD.cpp` side:
-
-- Because it takes around 2-3 frames for the View to be ready to do data-binding and we don't want people to implement waiting logic for this themselves, we have a convenient event available (an `Unreal Signature`), to which we can subscribe our `BindUI` method.
-- In the `BindUI` body, we want to retrieve the View and assign it to our pointer. By including `CohtmlGameHUD.h`, we will have access to a very convenient method called `GetCohtmlHUD`, which does exactly what its name implies. Not only that, but it also holds the aforementioned signature, to which we can subscribe our `BindUI` method.
-
-With all of this explained, this is how all of this looks actually in code:
-
-```
-#include "StarterGuide/StarterGuideHUD.h"
-
-#include "CohtmlGameHUD.h"
-
-AStarterGuideHUD::AStarterGuideHUD(const FObjectInitializer& PCIP)
- : Super(PCIP)
-{
- GetCohtmlHUD()->ReadyForBindings.AddDynamic(this, &AStarterGuideHUD::BindUI);
-}
-
-void AStarterGuideHUD::BeginPlay()
-{
- Super::BeginPlay();
-}
-
-void AStarterGuideHUD::BindUI()
-{
- View = GetCohtmlHUD()->GetView();
- if (!View)
- {
- UE_LOG(LogTemp, Error, TEXT("Failed to retrieve View!"));
- return;
- }
-}
-```
-
-And that's it! We can now continue further.
-
-### Implementing the Player model
-
-On to the actual code of the `PlayerModel.h` now:
-
-- This is the code for the includes and a delegate declaration (once again, will be explained [later](#registering-the-player-model)):
-
-```
-#pragma once
-
-#include "CohtmlUTypeBinder.h"
-#include
-#include
-
-#include "PlayerModel.generated.h"
-
-
-DECLARE_DYNAMIC_MULTICAST_DELEGATE(FItemSelectDelegate);
-```
-
-- Next comes the minimap `USTRUCT`:
-
-```
-USTRUCT()
-struct FSGMinimap
-{
- GENERATED_USTRUCT_BODY()
-
- FSGMinimap()
- : id(8)
- , x(100.0f)
- , y(100.0f)
- , angle(90.0f)
- , label("River Bank")
- {
- }
-
- UPROPERTY()
- int32 id;
-
- UPROPERTY()
- float x;
-
- UPROPERTY()
- float y;
-
- UPROPERTY()
- float angle;
-
- UPROPERTY()
- FString label;
-};
-```
-
-- Next is the inventory item `USTRUCT`:
-
-```
-USTRUCT()
-struct FInventoryItem
-{
- GENERATED_USTRUCT_BODY()
-
- FInventoryItem()
- : count(0)
- {
- }
-
- FInventoryItem(FString Title, int32 Count, FString Image, FString Description)
- : title(Title)
- , count(Count)
- , image(Image)
- , description(Description)
- {
- }
-
- UPROPERTY()
- FString title;
-
- UPROPERTY()
- int32 count;
-
- UPROPERTY()
- FString image;
-
- UPROPERTY()
- FString description;
-};
-```
-
-- And lastly the Player model `UCLASS`:
-
-```
-UCLASS()
-class UPlayerModel : public UObject
-{
- GENERATED_BODY()
-
-public:
- UPlayerModel();
-
- UPROPERTY()
- FString time;
-
- UPROPERTY()
- int32 currentHealth;
-
- UPROPERTY()
- int32 maxHealth;
-
- UFUNCTION()
- bool shouldShowHealthWarning()
- {
- int currentHealthPercent = (currentHealth * 100) / maxHealth;
- return currentHealthPercent > 25 && currentHealthPercent < 50;
- }
-
- UFUNCTION()
- bool shouldShowHealthDanger()
- {
- int currentHealthPercent = (currentHealth * 100) / maxHealth;
- return currentHealthPercent <= 25;
- }
-
- UPROPERTY()
- FSGMinimap minimap;
-
- UPROPERTY()
- bool isPaused;
-
- UPROPERTY()
- FString activePauseMenu;
-
- UPROPERTY()
- TArray inventoryItems;
-
- UPROPERTY()
- FInventoryItem itemToDisplay;
-
- UPROPERTY()
- int32 selectedItem;
-
- UPROPERTY()
- FItemSelectDelegate ItemSelectDelegate;
-
- UFUNCTION()
- void itemSelect(int index)
- {
- selectedItem = index;
- itemToDisplay = inventoryItems[selectedItem];
- ItemSelectDelegate.Broadcast();
- }
-
-private:
- const uint32 INVENTORY_SIZE = 30;
-};
-```
-
-On the `PlayerModel.cpp` side, we just need to do our initializations as well as place the iventory items at the same indices, where they are located in the original `model.js`:
-
-```
-#include "StarterGuide/PlayerModel.h"
-
-UPlayerModel::UPlayerModel()
- : currentHealth(100)
- , maxHealth(100)
- , isPaused(false)
- , activePauseMenu("settings")
- , selectedItem(0)
-{
- inventoryItems.SetNum(INVENTORY_SIZE);
-
- // Adding items in the same slot as originally added in the JS version
- inventoryItems[0] = FInventoryItem("Sharp Spear", 1, "spear", TEXT(
- "A thrusting or throwing weapon with long shaft and sharp head or blade. Great for medium to long range combat"));
-
- inventoryItems[6] = FInventoryItem("Horned Helmet", 1, "helmet", TEXT(
- "Head covering made of a hard material to resist impact with two sharp horns on the side"));
-
- inventoryItems[7] = FInventoryItem("Axe", 1, "axe", TEXT(
- "Cutting tool that consists of a heavy edged head fixed to a handle with the edge parallel to the "
- "handle and that is used especially for felling trees and chopping and splitting wood or your enemies."));
-
- inventoryItems[8] = FInventoryItem("Longbow", 1, "bow", TEXT(
- "Hand-drawn wooden bow held vertically and used especially by medieval English archers"));
-
- inventoryItems[9] = FInventoryItem("Arrow", 5, "arrow", TEXT(
- "Shot from a bow and usually having a slender shaft, a pointed head, and feathers at the butt"));
-
- inventoryItems[23] = FInventoryItem("Beer", 2, "beer", TEXT(
- "Carbonated, fermented alcoholic beverage that is usually made from "
- "malted cereal grain (especially barley) and is flavored with hops"));
-
- itemToDisplay = inventoryItems[selectedItem];
-}
-```
-
-### Registering the Player model
-
-Now we need to add the `PlayerModel` object to the `StarterGuideHUD` and use the `View` to invoke the creation of the model. We also need to add an `UpdateItemSelect` method this time around, which will be hooked to the `ItemSelectDelegate` that we added to the `PlayerModel` class.
-
-This is needed for when the inventory items get clicked and the currently-selected item has to be changed:
-
-- First the `PlayerModel`'s `itemSelect` method gets invoked from the frontend
-- We successfully update the `PlayerModel`'s `selectedItem` variable with the new `index` that is provided
-- Lastly, we update the `itemToDisplay`
-
-One problem remains, however - for this change to be reflected in the frontend, we need to **update** the JavaScript model and **synchronize**. This is done by the `View`, and only the HUD has access to the it.
-
-And this is basically why we needed [the delegate](#implementing-the-player-model) - because now the `StarterGuideHUD` will be notified that a new inventory item was selected and then it can update the model accordingly, which will cause the synchronization dependency between the C++ model and the JavaScript observable model to happen and in turn - their properties to be synchronized.
-
-This is one very powerful approach that can be applied in many different situations and allows for endless possibilities!
-
-And now to wrap up with the actual code! In the `StarterGuideHUD.h`:
-
-```
-class UPlayerModel;
-
-UCLASS()
-class COHERENTSAMPLE_API AStarterGuideHUD : public ACohtmlGameHUD
-{
- GENERATED_BODY()
-
-public:
- AStarterGuideHUD(const FObjectInitializer& PCIP);
-
- virtual void BeginPlay() override;
-
- void BindUI();
-
- UFUNCTION()
- void UpdateItemSelect();
-
- UPROPERTY()
- UPlayerModel* model;
-
-private:
- cohtml::View* View;
-};
-```
-
-In the `StarterGuideHUD.cpp`:
-
-```
-#include "StarterGuide/StarterGuideHUD.h"
-#include "StarterGuide/PlayerModel.h"
-
-#include "CohtmlGameHUD.h"
-
-void AStarterGuideHUD::BeginPlay()
-{
- Super::BeginPlay();
- model = NewObject();
-}
-
-void AStarterGuideHUD::BindUI()
-{
- View = GetCohtmlHUD()->GetView();
- if (!View)
- {
- UE_LOG(LogTemp, Error, TEXT("Failed to retrieve View!"));
- return;
- }
-
- View->CreateModel("PlayerModel", model);
- View->SynchronizeModels();
-
- model->ItemSelectDelegate.AddDynamic(this, &AStarterGuideHUD::UpdateItemSelect);
-
- UE_LOG(LogTemp, Log, TEXT("UI is bound!"));
-}
-
-void AStarterGuideHUD::UpdateItemSelect()
-{
- View->UpdateWholeModel(model);
- View->SynchronizeModels();
-}
-```
-
-In the next chapter we will go over how we will bind the Map model.
diff --git a/guide/content/unreal-chapters/ue-chapter-4/index.md b/guide/content/unreal-chapters/ue-chapter-4/index.md
deleted file mode 100644
index addcfa8..0000000
--- a/guide/content/unreal-chapters/ue-chapter-4/index.md
+++ /dev/null
@@ -1,236 +0,0 @@
----
-title: "Unreal Engine Chapter 4: Creating the Map and Point of Interest"
-description: ""
-date: 2021-12-04T01:44:53+02:00
-lastmod: 2021-12-04T01:44:53+02:00
-draft: false
-images: []
-menu:
- unrealChapters:
- parent: "unreal-chapters"
- weight: 0
----
-
-In this chapter we will wrap up the data transitioning from JavaScript to Unreal C++. This will be marked by the implementation of the Map model.
-
-### Overview of the required Map model data
-
-Looking at the data of the `map` object from the [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/) `model.js` of the original Starter Guide, we will require another C++ class to be created from the Editor, called `MapModel` and once again, to spare us unnecessary code noise, we can set its parent class to be `UObject`.
-
-Now let's go over the things we will need:
-
-- We want to once again include the three binders - `CohtmlUTypeBinder.h`,`CohtmlFStringBinder.h` and `CohtmlTArrayBinder.h`
-- We want to specify our class constructor
-- We want a `zoom`, `x` and `y` variable of type `float`
-- We want a `pointsOfInterest` variable, which will be a `TArray` of `PointOfInterest` objects
- - `PointOfInterest` will be a `USTRUCT`, which requires:
- - A `x` and `y` variable of type `float`
- - An `icon`, `title` and `description` variable of type `FString`
- - A `locked` variable of type `bool`
-- We want a `mapTiles` variable, which is going to be another `TArray`, containing `MapTile` objects
- - This will be a dummy `USTRUCT`, that will contain no data, but is required since the `data-bind-for` expression in the `index.html` depends on its existance the way it is implemented, but essentially does nothing. It is a struct, because the `data-bind-for` won't generate the tiles if the array consists of primitive types
- - We will also add a `const` `uint32` variable for the tile size
-
-Once again, all of these member variables will be exposed by using the `UPROPERTY` macro.
-
-### Implementing the Map model
-
-Now that we have a list of the data that we need, we can start going over the actual code. Let's start with the `MapModel.h`:
-
-```
-#pragma once
-
-#include
-#include
-#include
-
-#include "MapModel.generated.h"
-
-USTRUCT()
-struct FPointOfInterest
-{
- GENERATED_BODY()
-
- FPointOfInterest()
- : x(0.0f)
- , y(0.0f)
- , locked(false)
- {
- }
-
- FPointOfInterest(float X, float Y, FString Icon, FString Title, FString Description, bool Locked)
- : x(X)
- , y(Y)
- , icon(Icon)
- , title(Title)
- , description(Description)
- , locked(Locked)
- {
- }
-
- UPROPERTY()
- float x;
-
- UPROPERTY()
- float y;
-
- UPROPERTY()
- FString icon;
-
- UPROPERTY()
- FString title;
-
- UPROPERTY()
- FString description;
-
- UPROPERTY()
- bool locked;
-};
-
-// This struct is needed for the automatic generation of the
-// map tiles, through the usage of the data-bind-for expression
-// in the index.html.
-USTRUCT()
-struct FMapTile
-{
- GENERATED_BODY()
-
- int32 id;
-};
-
-UCLASS()
-class COHERENTSAMPLE_API UMapModel : public UObject
-{
- GENERATED_BODY()
-
-public:
- UMapModel();
-
- UPROPERTY()
- float zoom;
-
- UPROPERTY()
- float x;
-
- UPROPERTY()
- float y;
-
- UPROPERTY()
- TArray pointsOfInterest;
-
- UPROPERTY()
- TArray mapTiles;
-
-private:
- const uint32 MAP_TILES_SIZE = 64;
-};
-```
-
-Evidently it is as simple as can be. Same goes for the `MapModel.cpp`, where we just need to perform the variable initialization and add the 3 "*points of interest*":
-
-```
-#include "StarterGuide/MapModel.h"
-
-UMapModel::UMapModel()
- : zoom(1.0f)
- , x(0.0f)
- , y(0.0f)
-{
- pointsOfInterest.Add(FPointOfInterest(10.3004f, 45.7164f, "village", "Village", "The village where you were raised.", false));
- pointsOfInterest.Add(FPointOfInterest(22.6609f, 14.1493f, "town", "Town", TEXT("The town of Málhildur."), false));
- pointsOfInterest.Add(FPointOfInterest(74.9957f, 42.1492f, "statue", "Statue of Freya", "Statue of the goddess Freya. Only thing left from a sunken village.", true));
-
- mapTiles.SetNum(MAP_TILES_SIZE);
-}
-```
-
-### Registering the Map model
-
-The final step is of course to register the `MapModel` class we just created. This is as simple as it sounds - we will add the object, initialize it and use the `View` to create the model.
-
-The `StarterGuideHUD.h` should now look like this:
-
-```
-class UPlayerModel;
-class UMapModel;
-
-UCLASS()
-class COHERENTSAMPLE_API AStarterGuideHUD : public ACohtmlGameHUD
-{
- GENERATED_BODY()
-
-public:
- AStarterGuideHUD(const FObjectInitializer& PCIP);
-
- virtual void BeginPlay() override;
-
- void BindUI();
-
- UFUNCTION()
- void UpdateItemSelect();
-
- UPROPERTY()
- UPlayerModel* model;
-
- UPROPERTY()
- UMapModel* map;
-
-private:
- cohtml::View* View;
-};
-```
-
-And lastly, the `StarterGuideHUD.cpp` should look like this:
-
-```
-#include "StarterGuide/StarterGuideHUD.h"
-#include "StarterGuide/PlayerModel.h"
-#include "StarterGuide/MapModel.h"
-
-#include "CohtmlGameHUD.h"
-
-AStarterGuideHUD::AStarterGuideHUD(const FObjectInitializer& PCIP)
- : Super(PCIP)
-{
- GetCohtmlHUD()->ReadyForBindings.AddDynamic(this, &AStarterGuideHUD::BindUI);
-}
-
-void AStarterGuideHUD::BeginPlay()
-{
- Super::BeginPlay();
- model = NewObject();
- map = NewObject();
-}
-
-void AStarterGuideHUD::BindUI()
-{
- View = GetCohtmlHUD()->GetView();
- if (!View)
- {
- UE_LOG(LogTemp, Error, TEXT("Failed to retrieve View!"));
- return;
- }
-
- View->CreateModel("PlayerModel", model);
- View->CreateModel("MapModel", map);
- View->SynchronizeModels();
-
- model->ItemSelectDelegate.AddDynamic(this, &AStarterGuideHUD::UpdateItemSelect);
-
- UE_LOG(LogTemp, Log, TEXT("UI is bound!"));
-}
-
-void AStarterGuideHUD::UpdateItemSelect()
-{
- View->UpdateWholeModel(model);
- View->SynchronizeModels();
-}
-```
-
-And here is the result:
-
-{{< img-simple src="ue-chapter-4_1.png" alt="ue-chapter-4_1" caption="" class="border-0" >}}
-
-{{< img-simple src="ue-chapter-4_2.png" alt="ue-chapter-4_2" caption="" class="border-0" >}}
-
-In the last chapter of this guide, we will implement the handling of events triggered from JavaScript.
diff --git a/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_1.png b/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_1.png
deleted file mode 100644
index 412f945..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_1.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_2.png b/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_2.png
deleted file mode 100644
index 2e01c38..0000000
Binary files a/guide/content/unreal-chapters/ue-chapter-4/ue-chapter-4_2.png and /dev/null differ
diff --git a/guide/content/unreal-chapters/ue-chapter-5/index.md b/guide/content/unreal-chapters/ue-chapter-5/index.md
deleted file mode 100644
index 32350ee..0000000
--- a/guide/content/unreal-chapters/ue-chapter-5/index.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: "Unreal Engine Chapter 5: Handling events received from JavaScript"
-description: ""
-date: 2021-12-08T17:45:44+02:00
-lastmod: 2021-12-08T17:45:44+02:00
-draft: false
-images: []
-menu:
- unrealChapters:
- parent: "unreal-chapters"
- weight: 0
----
-
-In this final chapter we will demonstrate how the `change_menu`, `pause_toggle`, `map_move` and `map_zoom` events triggered from JavaScript can be handled in Unreal C++.
-
-### Overview of the requirements
-
-To implement these events, we need to check what kind of data some will be passing over to C++ (as per [Chapter 11](https://starter.coherent-labs.com/chapters/chapter-11/)), as well as see what kind of behavior is expected to happen afterwards in C++ (as per the implementation in [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/)).
-
-For each event that we will handle, we will create a corresponding C++ method in our `StarterGuideHUD` class. We will trivially name them as their JavaScript counterparts:
-
-- `PauseToggle` - no parameters will be passed
-- `ChangeMenu` - a `string` parameter will be passed with the menu setting name, which we will expect as an `FString`
-- `MapMove` - two `number` parameters will be passed for the `x` and `y` coordinates, which we will expect as `float`s
-- `MapZoom` - a number parameter will be passed for the zoom amount, which we will expect as a `float`
-- All of the methods will be marked as `UPROPERTY`
-
-The `PauseToggle` and `ChangeMenu` methods will both perform make a `View->TriggerEvent` call, which will be caught in JavaScript, in our `script.js` file, where we will have an `engine.on` function, which will invoke the `attachSliderListeners` function.
-
-In the `BindUI` method of our `StarterGuideHUD` class we will call the `RegisterForEvent` of our `View` to tell what the name of each event that we expect will be, and create a `handler` specifying which method will be doing the *handling*.
-
-### Implementation
-
-First let's add the `engine.on` expectation in the `script.js` file:
-
-```
-engine.on("AttachSliderListeners", () => {
- attachSliderListeners();
-});
-```
-
-The `StarterGuideHUD.h` file should look like this after our declarations:
-
-```
-UCLASS()
-class COHERENTSAMPLE_API AStarterGuideHUD : public ACohtmlGameHUD
-{
- GENERATED_BODY()
-
-public:
- AStarterGuideHUD(const FObjectInitializer& PCIP);
-
- virtual void BeginPlay() override;
- virtual void Tick(float DeltaTime) override;
-
- UFUNCTION()
- void BindUI();
-
- UFUNCTION()
- void UpdateItemSelect();
-
- UFUNCTION()
- void PauseToggle();
-
- UFUNCTION()
- void ChangeMenu(FString& menu);
-
- UFUNCTION()
- void MapMove(float x, float y);
-
- UFUNCTION()
- void MapZoom(float zoom);
-
- UPROPERTY()
- UPlayerModel* model;
-
- UPROPERTY()
- UMapModel* map;
-
-private:
- cohtml::View* View;
-};
-```
-
-Now over in the `StarterGuideHUD.cpp`:
-
-- In the `BindUI` method we will do the aforementioned event registering:
-
-```
-void AStarterGuideHUD::BindUI()
-{
- View = GetCohtmlHUD()->GetView();
- if (!View)
- {
- UE_LOG(LogTemp, Error, TEXT("Failed to retrieve View!"));
- return;
- }
-
- View->RegisterForEvent("change_menu", cohtml::MakeHandler(this, &AStarterGuideHUD::ChangeMenu));
- View->RegisterForEvent("pause_toggle", cohtml::MakeHandler(this, &AStarterGuideHUD::PauseToggle));
- View->RegisterForEvent("map_move", cohtml::MakeHandler(this, &AStarterGuideHUD::MapMove));
- View->RegisterForEvent("map_zoom", cohtml::MakeHandler(this, &AStarterGuideHUD::MapZoom));
-
- View->CreateModel("PlayerModel", model);
- View->CreateModel("MapModel", map);
- View->SynchronizeModels();
-
- model->ItemSelectDelegate.AddDynamic(this, &AStarterGuideHUD::UpdateItemSelect);
-
- UE_LOG(LogTemp, Log, TEXT("UI is bound!"));
-}
-```
-
-- And here is the translated logic that we had in the `script.js` file by the end of [Chapter 9](https://starter.coherent-labs.com/chapters/chapter-9/) for the events that we will be handling in the `StarterGuideHUD.cpp`:
-
-```
-void AStarterGuideHUD::PauseToggle()
-{
- model->isPaused = !model->isPaused;
- View->UpdateWholeModel(model);
- View->SynchronizeModels();
-
- if (model->activePauseMenu == "settings" && model->isPaused)
- {
- View->TriggerEvent("AttachSliderListeners");
- }
-}
-
-void AStarterGuideHUD::ChangeMenu(FString& menu)
-{
- model->activePauseMenu = menu;
- View->UpdateWholeModel(model);
- View->SynchronizeModels();
-
- if (menu == "settings")
- {
- View->TriggerEvent("AttachSliderListeners");
- }
-}
-
-void AStarterGuideHUD::MapMove(float x, float y)
-{
- map->x = x;
- map->y = y;
- View->UpdateWholeModel(map);
- View->SynchronizeModels();
-}
-
-void AStarterGuideHUD::MapZoom(float zoom)
-{
- map->zoom = zoom;
- View->UpdateWholeModel(map);
- View->SynchronizeModels();
-}
-```
-
-Now every event sent by JavaScript will be properly handled. And with this we can now conclude the **Unreal Engine Starter Guide**!
diff --git a/guide/functions/hi-from-lambda.js b/guide/functions/hi-from-lambda.js
deleted file mode 100644
index 88e4fa0..0000000
--- a/guide/functions/hi-from-lambda.js
+++ /dev/null
@@ -1,11 +0,0 @@
-exports.handler = (event, context, callback) => {
- callback (null, {
- statusCode: 200,
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify({
- message: 'Hi from Lambda.',
- }),
- });
-}
diff --git a/guide/layouts/chapters/list.html b/guide/layouts/chapters/list.html
deleted file mode 100644
index 86010c4..0000000
--- a/guide/layouts/chapters/list.html
+++ /dev/null
@@ -1,22 +0,0 @@
-{{ define "main" }}
-
-
-
-
{{ .Title }}
-
{{ .Content }}
-
- {{ $currentSection := .CurrentSection }}
- {{ range where .Site.RegularPages.ByDate "Section" .Section }}
- {{ if in (.RelPermalink | string) $currentSection.RelPermalink }}
-
Posted {{ .PublishDate.Format "January 2, 2006" }} by {{ if .Params.contributors -}}{{ range $index, $contributor := .Params.contributors }}{{ if gt $index 0 }} and {{ end }}{{ . }}{{ end -}}{{ end -}} ‐ {{ .ReadingTime -}} min read
\ No newline at end of file
diff --git a/guide/layouts/partials/main/breadcrumb.html b/guide/layouts/partials/main/breadcrumb.html
deleted file mode 100644
index f5c96b1..0000000
--- a/guide/layouts/partials/main/breadcrumb.html
+++ /dev/null
@@ -1,4 +0,0 @@
-{{ with .Parent -}}
- {{ partial "main/breadcrumb.html" . -}}
-
-{{ end -}}
\ No newline at end of file
diff --git a/guide/layouts/partials/main/docs-navigation.html b/guide/layouts/partials/main/docs-navigation.html
deleted file mode 100644
index b9b6cd0..0000000
--- a/guide/layouts/partials/main/docs-navigation.html
+++ /dev/null
@@ -1,24 +0,0 @@
-{{ if or .Prev .Next -}}
-
-
- {{ $pages := where site.RegularPages "Section" .Section -}}
- {{ with $pages.Next . -}}
-
-
-{{ end -}}
\ No newline at end of file
diff --git a/guide/layouts/partials/main/edit-page.html b/guide/layouts/partials/main/edit-page.html
deleted file mode 100644
index 7e53f1c..0000000
--- a/guide/layouts/partials/main/edit-page.html
+++ /dev/null
@@ -1 +0,0 @@
-
- {{ end -}}
- {{ end -}}
-{{ end -}}
\ No newline at end of file
diff --git a/guide/layouts/partials/sidebar/docs-menu.html b/guide/layouts/partials/sidebar/docs-menu.html
deleted file mode 100644
index e49f241..0000000
--- a/guide/layouts/partials/sidebar/docs-menu.html
+++ /dev/null
@@ -1,39 +0,0 @@
-{{ if .Site.Params.options.collapsibleSidebar -}}
-
- {{ end -}}
- {{ end -}}
-{{ end -}}
\ No newline at end of file
diff --git a/guide/layouts/partials/sidebar/docs-toc.html b/guide/layouts/partials/sidebar/docs-toc.html
deleted file mode 100644
index 49ae432..0000000
--- a/guide/layouts/partials/sidebar/docs-toc.html
+++ /dev/null
@@ -1,6 +0,0 @@
-{{ if ne .Params.toc false -}}
-
-
On this page
- {{ .TableOfContents }}
-
-{{ end -}}
\ No newline at end of file
diff --git a/guide/layouts/shortcodes/alert.html b/guide/layouts/shortcodes/alert.html
deleted file mode 100644
index e943cb0..0000000
--- a/guide/layouts/shortcodes/alert.html
+++ /dev/null
@@ -1,12 +0,0 @@
-
-
{{ with .Get "icon" }}{{.}} {{ end }}
- {{ with .Get "text"}}
-
{{ . | safeHTML }}
- {{ else }}
- {{ with .Inner}}
-
{{ . | markdownify}}
- {{ else }}
- {{ errorf "No valid text variable or Inner content given"}}
- {{ end }}
- {{ end}}
-
diff --git a/src/components/Highlight.astro b/src/components/Highlight.astro
new file mode 100644
index 0000000..e58472a
--- /dev/null
+++ b/src/components/Highlight.astro
@@ -0,0 +1,21 @@
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/components/Link.astro b/src/components/Link.astro
new file mode 100644
index 0000000..d2b3362
--- /dev/null
+++ b/src/components/Link.astro
@@ -0,0 +1,9 @@
+---
+interface Props {
+ href: string,
+}
+
+const { href } = Astro.props;
+---
+
+
\ No newline at end of file
diff --git a/src/components/Summary.astro b/src/components/Summary.astro
new file mode 100644
index 0000000..2be7eb4
--- /dev/null
+++ b/src/components/Summary.astro
@@ -0,0 +1,12 @@
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/content.config.ts b/src/content.config.ts
new file mode 100644
index 0000000..d9ee8c9
--- /dev/null
+++ b/src/content.config.ts
@@ -0,0 +1,7 @@
+import { defineCollection } from 'astro:content';
+import { docsLoader } from '@astrojs/starlight/loaders';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+ docs: defineCollection({ loader: docsLoader(), schema: docsSchema() }),
+};
diff --git a/src/content/docs/core-concepts/hello-world.mdx b/src/content/docs/core-concepts/hello-world.mdx
new file mode 100644
index 0000000..8a7b9e2
--- /dev/null
+++ b/src/content/docs/core-concepts/hello-world.mdx
@@ -0,0 +1,6 @@
+---
+title: "Hello World"
+description: "Your first steps into the world of Gameface development. Learn how to set up your environment, create a simple 'Hello World' interface, and understand the basics of Gameface's architecture."
+---
+
+Placeholder content for the "Hello World" guide. This section will cover the initial setup and creation of a simple interface using Gameface. Stay tuned for updates!
\ No newline at end of file
diff --git a/src/content/docs/ecosystem-tools/hello-world.mdx b/src/content/docs/ecosystem-tools/hello-world.mdx
new file mode 100644
index 0000000..8a7b9e2
--- /dev/null
+++ b/src/content/docs/ecosystem-tools/hello-world.mdx
@@ -0,0 +1,6 @@
+---
+title: "Hello World"
+description: "Your first steps into the world of Gameface development. Learn how to set up your environment, create a simple 'Hello World' interface, and understand the basics of Gameface's architecture."
+---
+
+Placeholder content for the "Hello World" guide. This section will cover the initial setup and creation of a simple interface using Gameface. Stay tuned for updates!
\ No newline at end of file
diff --git a/src/content/docs/index.mdx b/src/content/docs/index.mdx
new file mode 100644
index 0000000..1fcaa0b
--- /dev/null
+++ b/src/content/docs/index.mdx
@@ -0,0 +1,58 @@
+---
+title: Mastering Gameface
+description: Your step-by-step journey to building high-performance, cinematic game interfaces using HTML5 technology!.
+template: splash
+hero:
+ tagline: Your step-by-step journey to building high-performance, cinematic game interfaces using HTML5 technology!
+ actions:
+ - text: Get started
+ link: /introduction/hello-world
+ icon: right-arrow
+ - text: Resume
+ link: https://starlight.astro.build
+ icon: external
+ variant: secondary
+---
+import { Card, CardGrid, Steps } from '@astrojs/starlight/components';
+import CourseCard from '../../components/CourseCard.astro';
+import {content} from '../../data/content.ts';
+import AuroraGlowBg from '../../components/AuroraGlowBg.astro';
+import CoursesTimeline from '../../components/CoursesTimeline.astro';
+
+
+
+
+
\ No newline at end of file
diff --git a/src/content/docs/introduction/hello-world.mdx b/src/content/docs/introduction/hello-world.mdx
new file mode 100644
index 0000000..8a7b9e2
--- /dev/null
+++ b/src/content/docs/introduction/hello-world.mdx
@@ -0,0 +1,6 @@
+---
+title: "Hello World"
+description: "Your first steps into the world of Gameface development. Learn how to set up your environment, create a simple 'Hello World' interface, and understand the basics of Gameface's architecture."
+---
+
+Placeholder content for the "Hello World" guide. This section will cover the initial setup and creation of a simple interface using Gameface. Stay tuned for updates!
\ No newline at end of file
diff --git a/src/data/content.ts b/src/data/content.ts
new file mode 100644
index 0000000..5c69b81
--- /dev/null
+++ b/src/data/content.ts
@@ -0,0 +1,33 @@
+
+export const content = [
+ {
+ heading: 'Phase 1: Getting Started',
+ desc: 'An introduction to the guide and the Gameface Player, showcasing how to test data-binding and debug your UI without a C++ backend.',
+ link: '/phase-1-getting-started/introduction',
+ current: true,
+ },
+ {
+ heading: 'Phase 2: Planning & Setup',
+ desc: "Configuring your development environment, establishing your recommended tech stack, and understanding core UI concepts within Gameface. Introduction to prototyping with Gameface UI.",
+ link: '/phase-2-planning-and-setup/development-environment-and-tools',
+ current: false,
+ },
+ {
+ heading: 'Phase 3: Layout, Assets & Styling',
+ desc: "Learn best practices for building clean, fast and scalable game UIs with Gameface. We cover layouts, styling, animations, and asset management to help you translate designs into polished interfaces that scale across different aspect ratios.",
+ link: '/phase-3-layout-assets-and-styling/laying-out-the-screen',
+ current: false,
+ },
+ {
+ heading: 'Phase 4: Logic & Interactions',
+ desc: "Bridge the gap between static designs and dynamic interfaces. Learn how to mock game data, bind UI state, and manage complex user inputs like gamepad and spatial navigation.",
+ link: '/phase-4-logic-and-interactions/mocking-data',
+ current: false,
+ },
+ {
+ heading: 'Phase 5: Polishing',
+ desc: "The final steps to make your UI production-ready. Master native localization, accessibility features, and deep performance profiling while utilizing Gameface-exclusive rendering effects.",
+ link: '/phase-5-polishing/accessibility',
+ current: false,
+ },
+];
\ No newline at end of file
diff --git a/files/chapter_1/script.js b/src/styles/custom.css
similarity index 100%
rename from files/chapter_1/script.js
rename to src/styles/custom.css
diff --git a/tools/add_git_hooks.py b/tools/add_git_hooks.py
deleted file mode 100644
index bbfcfa8..0000000
--- a/tools/add_git_hooks.py
+++ /dev/null
@@ -1,35 +0,0 @@
-import os
-import glob
-import stat
-
-
-def generate_hooks(repo_root, hooks_dir, dest):
- stub_format = """#!/bin/bash
-if [ -f "{0}" ]
-then
- exec "{0}" $@
-else
- echo "Skipping hook {0} since it does not exist."
-fi
-"""
- hooks_list = glob.glob(hooks_dir + "/*")
- for hook in hooks_list:
- hook_name = os.path.join(dest, os.path.basename(hook))
- hook_from_repo = os.path.relpath(hook, repo_root)
-
- with open(hook_name, 'w') as f:
- f.write(stub_format.format(hook_from_repo.replace('\\', '/')))
- os.chmod(hook_name, stat.S_IRWXU)
-
-
-def copy_hooks(base_dir):
- hooks_dir = os.path.join(base_dir, 'tools/hooks')
- dest = os.path.join(base_dir, '.git/hooks')
- generate_hooks(base_dir, hooks_dir, dest)
-
-
-if __name__ == '__main__':
- print('Copying hooks')
- base_dir = os.path.join(os.path.dirname(os.path.realpath(__file__)), '..')
- copy_hooks(base_dir)
- print('Done')
\ No newline at end of file
diff --git a/tools/hooks/pre-commit b/tools/hooks/pre-commit
deleted file mode 100644
index 94d088f..0000000
--- a/tools/hooks/pre-commit
+++ /dev/null
@@ -1,31 +0,0 @@
-#!/bin/sh
-
-ret=$?
-if [ $ret -ne 0 ]; then
- exit 1
-fi
-
-if git rev-parse --verify HEAD >/dev/null 2>&1
-then
- against=HEAD
-else
- # Initial commit: diff against an empty tree object
- against=$(git hash-object -t tree /dev/null)
-fi
-
-changed_files=$(git diff --cached --name-only --diff-filter=ACM $against |
- tr '\r\n' ' ' | tr '\n' ' ')
-
-case "$changed_files" in
- *"guide/content"*)
- # echo $changed_files
- # Uncomment when we add spellcheck.py
- # echo 'Documentation is changed. Running spellcheck...'
- # python guide/spellcheck.py --report
- echo 'Checking for split sentences...'
- python guide/split_sentence_checker.py -d "guide/content"
- ret=$?
- if [ $ret -ne 0 ]; then
- exit 1
- fi
-esac
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..8bf91d3
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,5 @@
+{
+ "extends": "astro/tsconfigs/strict",
+ "include": [".astro/types.d.ts", "**/*"],
+ "exclude": ["dist"]
+}