diff --git a/docs/index.md b/docs/index.md
index 5f5958e7f6a09ff27ca110b0eb25462f106ee6b4..b6fc2315717f2c4ad1360cc893c2f1949f7fe4c9 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -19,7 +19,7 @@ For full documentation visit [mkdocs.org](https://www.mkdocs.org).
<div class="result" markdown>
<div class="grid cards" markdown>
-- [test site](testing-nav/test-site.md)
+- grid cards showcase
- grid cards showcase
- grid cards showcase
- grid cards showcase
diff --git a/docs/stylesheets/extra.css b/docs/stylesheets/extra.css
index 174c29cf114804c900b8c2dbfe7ce9703d33e5ea..9a9d1a9992907ca46ae6765c8b15a33d56cb9094 100644
--- a/docs/stylesheets/extra.css
+++ b/docs/stylesheets/extra.css
@@ -19,8 +19,8 @@
--md-footer-fg-color: black;
--md-footer-fg-color--light: ;
--md-footer-fg-color--lighter: ;
- --md-code-bg-color: black;
- --md-code-fg-color: white;
+ --md-code-bg-color: #ffdd4e;
+ --md-code-fg-color: black;
--md-border-color: white;
--md-accent-fg-color: #fdd32b;
--md-accent-fg-color--transparent: #ffdd4e;
@@ -30,6 +30,10 @@
--md-typeset-mark-color: #ffdc4e85;
}
+:root > * {
+ --md-mermaid-edge-color: white !important;
+}
+
.md-logo img {
transform: scale(1.5);
}
diff --git a/docs/tech/api/overview.md b/docs/tech/api/overview.md
index 90253a92782f60d0313995f9e05275e84badcf5f..fa08e0cb6ad94945bd05c22ef4176132d8987e76 100644
--- a/docs/tech/api/overview.md
+++ b/docs/tech/api/overview.md
@@ -1,8 +1,8 @@
-The INJECT API is designed to facilitate communication between the frontend and backend components of the INJECT platform. It enables clients to perform various operations, including data retrieval, manipulation, and real-time updates.
+The INJECT API is designed to facilitate communication between the frontend and backend components of the INJECT Exercise Platform. It enables clients to perform various operations, including data retrieval, manipulation, and real-time updates.
### GraphQL API
-The GraphQL API provides a flexible and efficient way to interact with the INJECT platform. It allows clients to query specific data fields, reducing over-fetching. The [GraphQL documentation](graphql-docs.md) provides detailed information about the available queries, mutations, and subscriptions, along with examples and usage guidelines.
+The GraphQL API provides a flexible and efficient way to interact with the INJECT Exercise Platform. It allows clients to query specific data fields, reducing over-fetching. The [GraphQL documentation](graphql-docs.md) provides detailed information about the available queries, mutations, and subscriptions, along with examples and usage guidelines.
### REST API
-The REST API complements the GraphQL API by providing additional functionality and support for file transfers and other operations not supported by GraphQL. The [REST documentation](swagger-docs.md) covers endpoints, request methods, parameters, and response formats, offering comprehensive guidance for integrating with the INJECT platform.
\ No newline at end of file
+The REST API complements the GraphQL API by providing additional functionality and support for file transfers and other operations not supported by GraphQL. The [REST documentation](swagger-docs.md) covers endpoints, request methods, parameters, and response formats, offering comprehensive guidance for integrating with the INJECT Exercise Platform.
\ No newline at end of file
diff --git a/docs/tech/architecture/overview.md b/docs/tech/architecture/overview.md
index 40a362a37de61bf6ed20e025c3142509453e5bb6..c007b88e3b8e9c56ff4f7067bd0684ac56c77c3d 100644
--- a/docs/tech/architecture/overview.md
+++ b/docs/tech/architecture/overview.md
@@ -1,16 +1,51 @@
-## Key Components
-### Backend Architecture
-The backend component of the INJECT platform handles data management, authentication, and communication with the frontend. It is built using Python and Django, a high-level web development framework. Key components of the backend architecture include:
+## System Overview
-* Python Backend: The backend of the INJECT platform is implemented using Python.
+The INJECT Exercise Platform is architecturally structured into two distinct components: the frontend and the backend. This separation allows for clear delineation of roles and responsibilities, enhancing modularity and scalability within the system.
+
+The architecture of the INJECT Exercise Platform can be visualized as follows:
+
+``` mermaid
+flowchart LR
+ A(INJECT) --> B(BACKEND)
+ A --> C(FRONTEND)
+ C --> D(TRAINEE PANEL)
+ C --> E(INSTRUCTOR PANEL)
+ C --> F(ANALITICS PANEL)
+ C --> J(EXERCISE PANEL)
+ B --> G(EXERCISES)
+ B --> H(EXERCISE DEFINITIONS)
+ B --> I(RUNNING EXERCISE)
+ B --> K(AUTHENTICATION)
+```
+
+This diagram illustrates the high-level architecture of the INJECT Exercise Platform. It is composed out of these parts:
+
+* Frontend: The frontend component serves as the user interface of the INJECT Exercise Platform, allowing users to interact with the system.
+It includes four main parts:
+ * Trainee View: This view is designed for trainees participating in tabletop exercises. It provides functionalities tailored to their role, such as accessing exercise scenarios, submitting responses, and general interaction with the exercise.
+ * Instructor View: This view is tailored for instructors or facilitators overseeing tabletop exercises. It offers capabilities for monitoring trainee progress, and providing guidance during the exercise.
+ * Analytics: The analytics view provides insights and analytics related to the tabletop exercises conducted on the platform. It includes metrics such as participation rates, completion times, and performance trends.
+ * Exercise Panel: The exercise panel enables users to view and manage exercises available on the platform, including creating new exercises, editing existing ones, and organizing exercise-related resources.
+
+* Backend: The backend component serves as the backbone of the INJECT platform, handling data management, authentication, and communication with the frontend. It includes several parts:
+ * Exercises: This module manages the creation, modification, and storage of tabletop exercises on the platform.
+ * Exercise Definitions: The exercise definitions module stores templates and definitions for different types of exercises. These definitions include details such as injects, emails and tools. It also checks and ensures that definitions are correctly configured and set up. For a more in-depth explanation of definitions, please refer to [definitions architecture.](definitions.md)
+ * Running Exercise: This module manages the execution and runtime aspects of tabletop exercises, including tracking the progress of ongoing exercises and managing the flow of injects.
+ * Authentication: Handles user authentication and authorization, ensuring secure access to the platform's functionalities.
+
+## Used Technology
+### Backend Technology
+The backend component of the INJECT Exercise Platform is built using Python and Django, a high-level web development framework. Key components of the backend architecture include:
+
+* Python Backend: The backend of the INJECT Exercise Platform is implemented using Python.
* Django Framework: Django, the most popular web development framework for Python, is used to build the backend application. Django provides robust features for database management, user authentication, and more.
* GraphQL API: The backend exposes a GraphQL API for communication with the frontend. GraphQL allows efficient data fetching and enables the client to request only the data it needs.
* Django REST Framework: For file transfers and other functionalities not supported by GraphQL, a REST API is implemented using Django REST Framework.
-### Frontend Architecture
-The frontend component of the INJECT platform is responsible for providing a user-friendly interface for designing, performing, and evaluating tabletop exercises. It utilizes modern web technologies including:
+### Frontend Technology
+The frontend component of the INJECT Exercise Platform utilizes modern web technologies including:
-* React Frontend: The frontend application of the INJECT platform is developed using React, library for building user interfaces.
+* React Frontend: The frontend application of the INJECT Exercise Platform is developed using React, library for building user interfaces.
* TypeScript: TypeScript is used instead of JavaScript to ensure type safety and improve code quality.
* React Hooks: React hooks play a crucial role in modern React programming, providing essential features such as state management and performing side effects.
* Libraries and Tools: Various libraries and tools, including Yarn, Vite, Apollo Client, and Generouted, are utilized for package management, building, data management, and routing within the frontend application.
\ No newline at end of file
diff --git a/docs/tech/installation/overview.md b/docs/tech/installation/overview.md
index 3f47e2d2248812a3b6c8e675475446b0c9e0a70f..4f41bf451063a29c866576dff9ee2f4959b61389 100644
--- a/docs/tech/installation/overview.md
+++ b/docs/tech/installation/overview.md
@@ -1,10 +1,15 @@
## Installation Guides
+
+The INJECT Exercise Platform consists of two main parts: the frontend and the backend. Below, we'll walk you through the installation process for each part.
+
+For a deeper understanding of the overall architecture of the INJECT Exercise Platform, you can refer to the [architecture overview](../architecture/overview.md) in the documentation.
+
### Frontend Installation Guide
-The frontend of the INJECT project is responsible for providing a user-friendly interface for interacting with exercises and educational content. To get started with the frontend installation and configuration, refer to the [Frontend Installation Guide](front-README.md). This guide will walk you through the necessary steps to set up the frontend environment, install dependencies, and deploy the frontend application.
+The frontend of the INJECT Exercise Platform is responsible for providing a user-friendly interface for interacting with exercises and educational content. To get started with the frontend installation and configuration, refer to the [Frontend Installation Guide](front-README.md). This guide will walk you through the necessary steps to set up the frontend environment, install dependencies, and deploy the frontend application.
### Backend Installation Guide
-The backend of the INJECT project handles data management, authentication, and running the INJECT project. To begin setting up the backend environment and running the backend server, follow the instructions outlined in the [Backend Installation Guide](back-README.md). This guide provides detailed steps for installing dependencies, configuring the backend, and deploying the backend server.
+The backend of the INJECT Exercise Platform handles data management, authentication, and running the INJECT Exercise Platform. To begin setting up the backend environment and running the backend server, follow the instructions outlined in the [Backend Installation Guide](back-README.md). This guide provides detailed steps for installing dependencies, configuring the backend, and deploying the backend server.
-By following the installation guides for both the frontend and backend components, you'll be able to successfully set up and run the INJECT project. If you encounter any issues or need further assistance, please check out our [FAQ](../../faq.md). Additionally, if you encounter any bugs or require further assistance, don't hesitate to report them to us. The [FAQ](../../faq.md) includes instructions on how to report bugs.
+By following the installation guides for both the frontend and backend components, you'll be able to successfully set up and run the INJECT Exercise Platform. If you encounter any issues or need further assistance, please check out our [FAQ](../../faq.md). Additionally, if you encounter any bugs or require further assistance, don't hesitate to report them to us. The [FAQ](../../faq.md) includes instructions on how to report bugs.
diff --git a/docs/testing-nav/test-site.md b/docs/testing-nav/test-site.md
deleted file mode 100644
index 6065634480778990973d240d178cf79a14143e0c..0000000000000000000000000000000000000000
--- a/docs/testing-nav/test-site.md
+++ /dev/null
@@ -1,3 +0,0 @@
-# Čistě testovacà stránka
-
-Zde je nějaký pěkný text
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index ef5e7310f16ca2647009fa13d7bebdcda9520fb5..4be5e8319454519f1fee430e4f53522b27108d74 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -14,13 +14,11 @@ copyright: Copyright © 2024 Masaryk University
nav:
- Home: index.md
- - Test:
- - Test site: testing-nav/test-site.md
- Technical documentation:
- Installation and system requirements:
- Overview: tech/installation/overview.md
- - Front-end installation: tech/installation/front-README.md
- - Back-end installation: tech/installation/back-README.md
+ - Frontend installation: tech/installation/front-README.md
+ - Backend installation: tech/installation/back-README.md
- System architecture:
- Overview: tech/architecture/overview.md
- Definition documentation: tech/architecture/definitions.md
@@ -47,6 +45,11 @@ markdown_extensions:
options:
custom_icons:
- overrides/.icons
+ - pymdownx.superfences:
+ custom_fences:
+ - name: mermaid
+ class: mermaid
+ format: !!python/name:pymdownx.superfences.fence_code_format
extra_css:
- stylesheets/extra.css