Help (#410)

* chore: create help pages routes

* chore: added base layout and header for help

* chore: startup sidebar menu

* chore: basic sidebar

* chore: basic vitepress setup

* chore: make buttons on startpage work with i18n

* chore: start student help nl

* chore: cleanup capitals

* chore: student help page nl

* chore: finished first draft of help for students

* chore: lint fix

* chore:teacher join command

* chore: fix linter

* fix: little fixes

* fix: en translations

* chore: small cleanup

* chore: add scafolding for other types of users their help pages

* chore: refactor to cleanup for other types of help pages

* chore: add teacher help page (wip)

* chore: add assistant help page (WIP)

* chore: add poetry.lock

* fix: little cleanup

* fix: assistants help

---------

Co-authored-by: Bram Meir <bram.meir@ugent.be>

docs/en/admin-examples.md

@@ -0,0 +1,25 @@
+# Admin Help Page
+
+This page describes how to interact with Ypovoli as a admin.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)

docs/en/assistant-examples.md

@@ -0,0 +1,101 @@
+# Assistant Help Page
+
+This page describes how to interact with Ypovoli as an assistant.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)
+
+## Change Mode
+
+::: danger Caution!
+- Only possible if the user has multiple roles like student, teacher, assistant, or admin.
+:::
+
+- Click on the arrow next to the currently selected role at the top of the navigation bar.
+- Choose the new role with which you want to view the page.
+
+![mode choice button](../assets/assistant/en/modus-change.png)
+
+## Course Details
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the details button next to the desired course.
+
+![course card](../assets/course-card.png)
+
+::: tip
+- If you want to view a course from a previous academic year, select the correct year in the academic year selector.
+:::
+
+## Creating a Project
+
+- Option 1:
+    - Click on "Dashboard" in the navigation bar.
+    - Click on "Create new project".
+- Option 2:
+    - Click on "Calendar" in the navigation bar.
+    - Click on "Create new project".
+- Option 3:
+    - Go to the detail page of a course (see [Course Details](#course-details)).
+    - Scroll to "Current Projects".
+    - Click on the + button.
+
+## Viewing Projects
+
+![projects list](../assets/en/project-list.png)
+
+- Option 1:
+  - Click on "Dashboard" in the navigation bar.
+  - At the top of the page, there is a "Current Projects" section.
+  ::: info
+  - Here are all the projects with a deadline within the next 7 days on the left and all projects on the right.
+  - Use the toggle button at the top to view projects with expired deadlines.
+  :::
+- Option 2:
+  - Click on "Calendar" in the navigation bar.
+  - On the calendar, an indication of the number of deadlines on a specific day is given using a red circle.
+  - Select a day with projects and click on the desired project.
+- Option 3:
+  - Click on "Dashboard" in the navigation bar.
+  - Scroll to the "My Courses" section.
+  - Click on the course of the desired project.
+  - Under the "Current Projects" section, you will see all projects for this specific course.
+- Option 4:
+  - Click on "Projects" in the navigation bar.
+  - You will see an overview of all your projects.
+
+::: info Project Card Explanation
+<!-- TODO maybe add a photo and indicate with numbers -->
+![project card](../assets/en/project-card.png)
+
+The card is divided as follows:
+- Name of the associated course.
+- Brief description of this course.
+- Start date and deadline of the project.
+- Progress bar of all students, including the number of submissions and the number of groups.
+- Status of the tests performed for these submissions.
+:::
+
+## Searching for Course Instructors
+- Go to the detail page of the course (see [Course Details](#course-details)).
+- Scroll to the "Instructors Linked to This Course" section.
+- Here you will find a list of the instructors for this course.

docs/en/student-examples.md

@@ -34,13 +34,13 @@ This page describes how to interact with Ypovoli as a student.
 - Click on the arrow next to the currently selected role at the top of the navigation bar.
 - Choose the new role with which you want to view the page.
 
-![mode choice button](../assets/modus-change.png)
+![mode choice button](../assets/student/modus-change.png)
 
 ## Enroll in/Leave Course
 
 <div style="display: flex; align-items: center;">
-    <img src="../assets/en/join-course.png" alt="course enroll button" style="width: auto; height: auto; margin-right: 10px;">
-    <img src="../assets/en/leave-course.png" alt="course leave button" style="width: auto; height: auto;">
+    <img src="../assets/student/en/join-course.png" alt="course enroll button" style="width: auto; height: auto; margin-right: 10px;">
+    <img src="../assets/student/en/leave-course.png" alt="course leave button" style="width: auto; height: auto;">
 </div>
 
 **Enroll**
@@ -117,13 +117,13 @@ This page describes how to interact with Ypovoli as a student.
 
   **Join**
 
-  ![group join](../assets/en/group-join.png)
+  ![group join](../assets/student/en/group-join.png)
 - Go to the detail page for the chosen project.
 - Click on the chosen group and click on "Choose group".
 - You are successfully enrolled in this group.
 
 **Leave**
-  ![group leave](../assets/en/group-leave.png)
+  ![group leave](../assets/student/en/group-leave.png)
 - Go to the project detail page.
 - Click on leave group.
 

docs/en/teacher-examples.md

@@ -0,0 +1,124 @@
+# Teacher Help Page
+
+This page describes how to interact with Ypovoli as a teacher.
+
+## Login/Logout
+
+**Login**
+
+- On the login page, there is a button with the text "UGent login".
+
+![login button](../assets/login-button.png)
+- Click on this button. You will be redirected to the UGent login page.
+- Select the desired account and follow the login steps. You will be redirected to the dashboard.
+
+**Logout**
+
+- Click on your name in the navigation bar.
+
+![logout button](../assets/en/logout-button.png)
+
+## Change Language
+
+- Click on the arrow next to EN at the top of the navigation bar and select the desired language.
+
+![language choice button](../assets/en/lang-change.png)
+
+## Change Mode
+
+::: danger Caution!
+- Only possible if the user has multiple roles like student, teacher, assistant, or admin.
+:::
+
+- Click on the arrow next to the currently selected role at the top of the navigation bar.
+- Choose the new role with which you want to view the page.
+
+![mode choice button](../assets/teacher/en/modus-change.png)
+
+## Creating a Course
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the + button.
+
+![course creation button](../assets/teacher/en/course-create-button.png)
+
+:::info
+If you only want to make your course available via an invitation link, you can do so using this button.
+![private course button](../assets/teacher/en/private-course-button.png)
+
+:::danger
+- Activate this link via the share button (maximum validity is 28 days).
+<div style="display: flex; align-items: center;">
+    <img src="../assets/teacher/course-share-button.png" alt="course share button" style="width: auto; height: 75px; margin-right: 10px;">
+</div>
+:::
+
+## Course Details
+- Click on "Dashboard" in the navigation bar.
+- Scroll down to the "My Courses" section.
+- Click on the details button next to the desired course.
+
+![course card](../assets/course-card.png)
+
+::: tip
+- If you want to view a course from a previous academic year, select the correct year in the academic year selector.
+:::
+
+## Creating a Project
+
+- Option 1:
+    - Click on "Dashboard" in the navigation bar.
+    - Click on "Create new project".
+- Option 2:
+    - Click on "Calendar" in the navigation bar.
+    - Click on "Create new project".
+- Option 3:
+    - Go to the detail page of a course (see [Course Details](#course-details)).
+    - Scroll to "Current Projects".
+    - Click on the + button.
+
+## Viewing Projects
+
+![projects list](../assets/en/project-list.png)
+
+- Option 1:
+  - Click on "Dashboard" in the navigation bar.
+  - At the top of the page, there is a "Current Projects" section.
+  ::: info
+  - Here are all the projects with a deadline within the next 7 days on the left and all projects on the right.
+  - Use the toggle button at the top to view projects with expired deadlines.
+  :::
+- Option 2:
+  - Click on "Calendar" in the navigation bar.
+  - On the calendar, an indication of the number of deadlines on a specific day is given using a red circle.
+  - Select a day with projects and click on the desired project.
+- Option 3:
+  - Click on "Dashboard" in the navigation bar.
+  - Scroll to the "My Courses" section.
+  - Click on the course of the desired project.
+  - Under the "Current Projects" section, you will see all projects for this specific course.
+- Option 4:
+  - Click on "Projects" in the navigation bar.
+  - You will see an overview of all your projects.
+
+::: info Project Card Explanation
+<!-- TODO maybe add a photo and indicate with numbers -->
+![project card](../assets/en/project-card.png)
+
+The card is divided as follows:
+- Name of the associated course.
+- Brief description of this course.
+- Start date and deadline of the project.
+- Progress bar of all students, including the number of submissions and the number of groups.
+- Status of the tests performed for these submissions.
+:::
+
+## Searching and Editing Course Instructors
+- Go to the detail page of the course (see [Course Details](#course-details)).
+- Scroll to the "Instructors Linked to This Course" section.
+- Here you will find a list of the instructors for this course.
+
+::: info
+- Via the edit button, you can add/remove instructors to/from this course.
+- Via the trash can icon, you can remove instructors from this course (only if there is more than one remaining instructor).
+:::

docs/nl/admin-examples.md

@@ -0,0 +1,25 @@
+# Admin help pagina
+
+Deze pagina beschrijft hoe u als administrator met Ypovoli interageert.
+
+## Login/Logout
+
+**Login**
+
+- Op de login pagina staat een knop met tekst UGent login.
+
+![login knop](../assets/login-button.png)
+- Druk op deze knop. U wordt doorverwezen naar de UGent inlogpagina.
+- Selecteer het gewenste account en volg de login stappen. U wordt doorverwezen naar het dashboard.
+
+**Logout**
+
+- Druk op uw naam in de navigatiebalk.
+
+![logout knop](../assets/nl/logout-button.png)
+
+## Taal veranderen
+
+- Druk bovenaan in de navigatiebalk op het pijltje naast NL en selecteer de gewenste taal.
+
+![taal keuze knop](../assets/nl/lang-change.png)