Test with moving docs and website wiki to contributor docs

.gitignore

@@ -363,4 +363,5 @@ MigrationBackup/
 FodyWeavers.xsd
 
 _site
-jp_tmp/*
+jp_tmp/*
+.idea

en/contributors/documentation/content.md

@@ -0,0 +1,244 @@
+# Table of Contents
+
+- [Content Updates](#content-updates)
+  - [Small Updates](#small-updates)
+  - [Major Updates](#major-updates)
+  - [Updating Wiki](#updating-wiki)
+- [Manual](#manual)
+  - [Creating New Page](#creating-new-manual-page)
+- [Tutorial](#tutorial)
+  - [Creating New Tutorial](#creating-new-tutorial-page)
+- [Creating New Post](#creating-new-post)
+  - [Post Naming Convention](#post-naming-convention)
+  - [Post Front Matter](#post-front-matter)
+  - [Post Content](#post-content)
+  - [Excerpt](#excerpt)
+- [Creating New Page](#creating-new-page)
+  - [Page Front Matter](#page-front-matter)
+- [Shortcodes and Includes](#shortcodes-and-includes)
+  - [Alert](#alert)
+  - [Alert Banner](#alert-banner)
+  - [Image](#image)
+  - [Video](#video)
+- [Web Assets](#web-assets)
+- [Styling](#styling)
+  - [Bootstrap Customization](#bootstrap-customization)
+  - [CSS Guidelines](#css-guidlines)
+- [Submitting your Changes](#submitting-your-changes)
+
+# Content Updates
+
+If you want to contribute and update the website, please follow the instructions below.
+
+Small updates can be done directly in the GitHub web interface, for bigger updates the local development environment is required, which is described in the [Installation](Installation) section.
+
+You can use any text editor to make changes. If you are using **Visual Studio**, you can open `Stride.Docs.sln` solution file in the root of the repository and start making your updates directly from this IDE.
+
+You are always welcome to create an issue to discuss your changes before you start working on them. 
+
+## Small Updates
+
+Creating an issue is not required for small updates, but it is recommended to let others know what you are working on. If you are not sure whether your update is small or not, please create an issue first.
+
+### What is a small update?
+
+We can define small updates as changes to the content of the website:
+
+- Update the content of an existing page (manual, tutorial or release note)
+- Add a [new manual](#creating-new-manual) or [tutorial](#creating-new-tutorial)
+- Fix a typo
+
+### Steps
+
+**Note:** This guide assumes you are already familiar with updating files in GitHub.
+
+1. Go to the [Stride Docs GitHub](https://github.com/stride3d/stride-docs) repository.
+1. Locate the file you wish to edit.
+1. Click the `Edit this file` (pencil) icon in the top right corner.
+1. If prompted, fork the repository by clicking `Fork this repository`.
+1. Make your changes to the file, then write a brief commit message describing the changes.
+1. Click on the `Propose changes` button.
+1. On the next screen, click the `Create pull request` button.
+1. Provide a title and description for your pull request, and click on `Create pull request` again.
+1. Wait for the review and merge.
+
+## Major Updates
+
+[Creating an issue](https://github.com/stride3d/stride-docs/issues) is **required** for major updates, so that others can comment on your changes and provide feedback.
+
+We can define bigger updates as changes to the design of the website, where you would like to see the impact of your changes beforehand to assess the desired result:
+
+- Update docfx version
+- Update layouts
+
+You would start with the local development environment, which is described in the [Installation](Installation) section.
+
+Then you would make your changes and test them locally. Once you are happy with the result, you can create a pull request to merge your changes into the `master` branch.
+
+## Updating Wiki
+
+While wiki pages can be updated directly in the GitHub web interface, this feature is restricted only to contributors who can edit the wiki directly. We have decided to move our wiki pages to a regular folder in this repository called `wiki`, allowing us to use the same process as we do for the website content. If any changes are made directly on the wiki pages, they will be overwritten by the next wiki deployment.
+
+Wiki pages are deployed through a separate GitHub action, `stride-docs-wiki.yml`, which is triggered by updates in the `wiki` folder or can be triggered manually. The `wiki` folder is ignored by the docfx build process, ensuring that the wiki pages are not deployed to the website. Additionally, any pushes to the `wiki` folder will not trigger the website deployment.
+
+You can update the wiki pages as any other content pages, by following the steps in the [Small Updates](#small-updates) section.
+
+⚠️**Important:** If you are updating any headers in the wiki pages, please make sure to update the *Table of Contents* at the top of the page, [Home](Home) page and `_Sidebar.md`. Also, you might need to search for all the links to the updated header and update them as well.
+
+# Manual
+
+These pages contain information about how to use Stride, an open-source C# game engine.
+
+## Creating New Manual Page
+
+1. Create a new file in the `manual` folder, in the already existing folders (e.g. animation, audio, ..) or create a new folder in the `manual` folder.
+   - If you created a new folder, make sue that you create also index.md file in this folder.
+1. Use any existing page as a template for the new page.
+1. Update `toc.md` file in the `manual` folder to include the new page or folder. The `toc.md` file contains the table of contents for the manual pages, which is displayed on the left side of the manual pages.
+
+## Naming Convention
+
+Observe existing pages and folders for the naming convention.
+
+## Media
+
+You can observe that existing folders might have a `media` folder. This folder contains images and videos used in the manual pages. You can use this folder or create a new one in your folder. If possible make sure that images are `.webp` format and videos are `.mp4` format.
+
+# Tutorial
+
+These pages contain tutorials on how to use Stride, an open-source C# game engine.
+
+## Creating New Tutorial Page
+
+1. Create a new tutorial folder in the `tutorial` folder.
+1. Create a new index.md file in this folder. Observe existing tutorials for the content of this file.
+1. Create markdown files for each step of the tutorial. Observe existing tutorials structure for the content of these files.
+1. Update `toc.md` file in the `tutorial` folder to include the new tutorial folder. The `toc.md` file contains the table of contents for the tutorial pages, which is displayed on the left side of the tutorial pages.
+
+## Naming Convention
+
+Observe existing pages and folders for the naming convention.
+
+## Media
+
+You can observe that existing tutorials have a `media` folder. This folder contains images. If possible make sure that images are `.webp` format. The videos should be uploaded to YouTube and embedded in the tutorial pages.
+
+# Shortcodes and Includes
+
+Read docfx documentation about [shortcodes and inludes](https://dotnet.github.io/docfx/docs/markdown.html?tabs=linux%2Cdotnet). Some of them are briefly described below.
+
+## Alert
+
+```liquid
+> [!NOTE]
+> Information the user should notice even if skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Essential information required for user success.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+> [!WARNING]
+> Dangerous certain consequences of an action.
+```
+
+## Video
+
+We should consider hosting our videos on YouTube whenever possible. 
+
+You can embed a video by using the following Markdown syntax:
+
+`> [!Video embed_link]`
+
+Replace `embed_link` with the YouTube video link. This shortcode renders as:
+
+Example:
+```md
+> [!Video https://www.youtube.com/embed/-IXw64hZAqg]
+```
+
+To embed a video hosted elsewhere, use the following shortcode:
+
+### Hosting our own videos
+
+`{% video 'url' %}`
+
+Replace `url` with the video URL (e.g., .mp4 file). Make sure you have a matching .jpg file with the same name as the .mp4 file for the poster attribute. This shortcode renders as:
+
+```html
+<!-- jpgUrl = url.replace(".mp4", ".jpg") // make sure you have a pair .mp4 and .jpg -->
+<div class="ratio ratio-16x9 mb-2"><video autoplay loop class="responsive-video" poster="jpgUrl"><source src="url" type="video/mp4"></video></div>
+```
+
+### How to encode videos
+
+Videos can be generated by many software in various formats & size, so they might end up being incompatible with web browsers or mobile, or simply be way too large.
+It is better to stick to a format with low requirements such as H264 baseline profile (works almost everywhere).
+
+To do so, process the file using [fmpeg](https://ffmpeg.org/download.html):
+
+```
+ffmpeg -i myvideo_original.mp4 -profile:v baseline -level 3.0 -an myvideo.mp4
+```
+
+Also, generate a static thumbnail so that people can preview it before downloading the video (very important on mobile):
+
+ToDo: Check if webp can be generated from ffmpeg
+
+```
+ffmpeg -i myvideo.mp4 -vframes 1 -f image2 -y myvideo.jpg
+```
+
+ToDo: Maybe we could provide a simple tool to do that without using command line.
+
+
+
+# Web Assets
+
+Our main web assets are:
+
+- `css/custom-bootstrap.scss` - Slightly modified Bootstrap theme
+  - Some Bootstrap variables are overridden
+  - Some Bootstrap parts are disabled so they don't bloat the website (e.g. button-group, breadcrumb, ..)
+- `css/styles.scss` - Main stylesheet
+  - Styles also Dark Mode
+- `css/syntax-highlighting.scss` - Imported prismjs styling, Light and Dark Mode
+- `assets/search.liquid` - Script for search
+- `assets/site.liquid` - Not used
+- `assets/theme-selector.liquid` - Script for Ligth and Dark Mode selection
+- `search.liquid` - Renders as `search.json` contains search meta
+
+
+# Styling
+
+## Bootstrap Customization
+
+Our website uses the [Bootstrap](https://getbootstrap.com/) framework, version **5.3**.
+
+Prioritize using Bootstrap styling before introducing any custom styles. 
+
+## CSS Guidelines
+
+We aim to write minimum CSS code to keep the website lightweight and use the Bootstrap framework as much as possible. 
+
+Further, we are using also [FontAwesome](https://fontawesome.com/) free icons. The icons are loaded in the `src/_includes/css/main.css` file.
+
+# Submitting your Changes
+
+Assuming you have made all necessary changes and tested them on the development server, you can submit a pull request to the `master` branch. The pull request will be reviewed and merged by the website maintainers.
+
+Steps to contribute your updates:
+
+1. Commit your changes to your forked repository:
+   - Commit the changes with a meaningful message
+   - Push the changes to your forked repository
+1. Create a pull request to the main repository:
+   - You can create a pull request from your forked repository by navigating to Pull requests page and click **New pull request** button
+   - Select the **master** branch as the base branch and your branch as the compare branch
+   - Click **Create pull request** button
+
+Once your pull request has been reviewed and approved, your changes will be merged into the main repository and deployed to the website.

en/contributors/documentation/deployment-azure.md

@@ -0,0 +1,73 @@
+# Table of Contents
+
+- [Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS](#step-by-step-guide-to-deploying-azure-web-apps-windows-with-iis)
+  - [Setting up a new Azure Web App (Windows) with IIS](#setting-up-a-new-azure-web-app-windows-with-iis)
+  - [Adjusting the Web App Configuration](#adjusting-the-web-app-configuration)
+  - [Modifying the GitHub Action](#modifying-the-github-action)
+
+# Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS
+
+This guide assumes you already have permission to access the Azure subscription.
+
+## Setting up a new Azure Web App (Windows) with IIS
+
+These instructions pertain to the staging environment. For the production environment, follow the same steps, but with a different web app name.
+
+1. Navigate to the [Azure Portal](https://portal.azure.com/)
+1. Select **Create a resource**
+1. Choose **Create a Web App**
+1. In the Basic Tab
+   - Choose your existing subscription and resource group
+   - Under Instance Details, enter:
+      - Name: **stride-website-staging**
+      - Publish: **Code**
+      - Runtime stack: **ASP.NET V4.8**
+      - OS: **Windows**
+      - Region: as the current web
+      - Pricing Plan - An existing App Service Plan should appear if the region and resource group match that of the existing web app. Currently we use **Standard S1**.
+      - Click **Next**
+1. In the Deployment Tab - This step can be completed later if preferred.
+   - Enable Continuous deployment
+   - Select account, organisation `Stride`, repository `stride-website` and branch `staging-next`
+   - Click **Next**
+1. In the Monitoring Tab
+   - Leave all settings as default
+   - Click **Next**
+1. Monitoring Tab
+   - Disable Application Insights - This is not needed at this stage
+   - Click **Next**
+1. In the Tags Tab
+   - Leave this blank unless you wish to add tags
+   - Click **Next**
+1. In the Review Tab
+   - Review your settings
+   - Click **Create**
+   - The GitHub Action will be added to the repository and run automatically. It will fail at this stage, but this will be resolved in the subsequent steps.
+
+## Adjusting the Web App Configuration
+
+1. Proceed to the newly created Web App
+1. Click on **Configuration**
+1. Select **General Settings**
+1. Change the Http Version to **2.0**
+1. Click **Save** to apply the changes
+
+## Modifying the GitHub Action
+
+The previous step will have added a GitHub Action to the repository, which will fail at this point. You need to modify the GitHub Action to correct the issue.
+
+1. Navigate to the repository
+1. Select Actions
+1. You have the option to stop the currently running action
+1. Locate the new GitHub Action *(within this folder Stride Website -> staging-next repo -> .github -> workflows)* which was automatically generated by the Azure Portal. We will need to reference the properties app-name and publish-profile and disable the push trigger.
+   - To disable the push trigger, retain only **workflow_dispatch** (manual trigger) as shown below:
+    ```
+    on:
+    #  push:
+    #    branches:
+    #      - staging-next
+        workflow_dispatch:
+    ```
+1. Open the `stride-website-staging-azure.yml` workflow and update it with the properties from the previous step. Save your changes.
+1. This workflow may also need to be added to the production branch master if it is not already there.
+1. Execute the workflow stride-website-staging-azure.yml. Ensure you select the correct branch staging-next and click **Run workflow**. This action will deploy the website to the Azure Web App.

en/contributors/documentation/deployment.md

@@ -0,0 +1,75 @@
+# Table of Contents
+
+We tested five different deployment methods and chose Azure Web Apps IIS ASP.NET 4.8.
+
+- [GitHub Pages](#github-pages)
+- [Azure Web Apps](#azure-web-apps)
+  - [Deploying with .NET Framework](#deploying-with-net-framework)
+- [Deployment To Wiki](#deployment-to-wiki)
+
+# GitHub Pages
+
+GitHub Pages is a static site hosting service that takes HTML, CSS, and JavaScript files directly from a repository on GitHub, optionally processes the files through a build process, and publishes a website. It is an excellent way to host a website for free and serves as an effective method for testing a website before deploying it to a paid hosting service.
+
+We use GitHub Pages to test our website. Any content pushed to the `staging` branch of the `stride-website` repository is automatically deployed to the `gh-pages` branch, from which GitHub Pages builds and publishes the website.
+
+To manage the build and deployment process, we use the GitHub action `stride-web-staging-github.yml`. This action is triggered when:
+
+1. A push is made to the staging branch
+1. The action is manually triggered
+
+You can manually trigger the action by navigating to the **Actions** tab and clicking the **Run workflow** button.
+
+The `gh-pages` branch is a special branch used by GitHub Pages to host the website and should not be edited directly. Any changes made to the `gh-pages` branch will be overwritten by the subsequent `staging` branch deployment.
+
+The GitHub action `stride-web-staging-github.yml` works as follows:
+
+1. The action is triggered when:
+   - A push is made to the staging branch
+   - The action is manually triggered
+1. `paths-ignore` is used to ignore specific changes to the `staging` branch
+   - Current exclusions: `README.md`, `wiki/**`, `.github/**`
+1. The remaining steps in the action are self-explanatory
+
+# Azure Web Apps
+
+## Deploying with .NET Framework
+
+The .NET Framework uses IIS to host the website, which serves any static files.
+
+The `web.config` file is used to configure IIS, including:
+
+- Mime types for static files
+- Redirects
+- Gzip compression
+- Static file caching
+- Custom Headers
+- Custom 404
+
+The GitHub action `stride-website-staging-azure` builds the website and deploys it to Azure Web Apps.
+
+[Step-by-Step Deployment Guide for Azure Web Apps (Windows) with IIS and Stride Website](Deployment-Azure).
+
+# Deployment To Wiki
+
+While the GitHub wiki offers a convenient way to document a project, it has some drawbacks, such as not being part of the repository by default and restricting edits to collaborators. To address these issues and allow community editing, we have implemented an alternative approach.
+
+We created a `wiki` folder within the repository, which contains all wiki pages. The GitHub action `stride-web-wiki.yml` deploys the `wiki` folder to the GitHub wiki.
+
+The GitHub action `stride-web-wiki.yml` is triggered when:
+
+1. A push is made to the `master` branch of the `stride-website` repository
+1. The action is manually triggered
+
+You can manually trigger the action by navigating to the **Actions** tab and clicking the **Run workflow** button.
+
+This GitHub action only monitors changes to the `wiki` folder. Any modifications made to the `wiki` folder will be deployed to the GitHub wiki. Note that changes to the `wiki` folder will not trigger other GitHub actions.
+
+We use the [Wiki Page Creator GitHub Action](https://github.com/marketplace/actions/wiki-page-creator-action) to deploy the `wiki` folder to the GitHub wiki.
+
+**Note**: ⚠️ A GitHub personal access token (GH_PAT) is required for authentication. This token is stored as a secret in the repository settings.⚠️
+
+**Recommendation**
+
+1. **ASP.NET 4.8 with IIS** for Staging
+1. **ASP.NET 4.8 with IIS** for Release

en/contributors/documentation/docfx.md

@@ -0,0 +1,140 @@
+[docfx](https://www.11ty.dev/) is a static site generator that uses JavaScript as its templating language. It is a very powerful tool that allows us to create a website with a lot of flexibility and customization. It is also very easy to use and learn. This section will cover the basics of Eleventy configuration on the Stride website. Creating and updating the content is described in our [Content](Content) section.
+
+We used to use **Jekyll** as our static site generator, but we decided to switch to Eleventy because of its flexibility and ease of use. We also wanted to use a tool that is more widely used and supported, which is why we decided to switch to Eleventy.
+
+# Table of Contents
+- [Packages and Dependencies](#packages-and-dependencies)
+- [Configuration](#configuration)
+- [Global Data](#global-data)
+- [Folder Structure](#folder-structure)
+- [Layouts](#layouts)
+- [Includes](#includes)
+- [Advanced Topics](#advanced-topics)
+  - [Creating Custom Shortcodes and Includes](#creating-custom-shortcodes-and-includes)
+  
+# Packages and Dependencies
+Eleventy is a **Node.js** application. Please follow our [Installation](Installation) guide to install Node.js and all the required dependencies.
+
+Packages we currently use:
+
+- Dev Dependencies
+  - `@11ty/eleventy` v2.0 - Main package for the static site generator
+  - `@11ty/eleventy-plugin-rss` - RSS feed plugin
+  - `@11ty/eleventy-plugin-syntaxhighlight` - Syntax highlighting plugin (dark and light theme in `/css/syntax-highlighting.scss`)
+- Dependencies
+  - `@11ty/eleventy-fetch` - Fetch plugin
+  - `@fortawesome/fontawesome-free` - Font Awesome with a variety of awesome icons 😃🤩
+  - `bootstrap` - Bootstrap 5.3
+  - `lunr` - Lunr search plugin that consumes local `search.json (/search.liquid)` and remote `index.json` from the docs website; the script is in `/assets/scripts/search.liquid`
+  - `markdown-it-anchor` - Anchor plugin for markdown-it
+  - `markdown-it-table-of-contents` - Table of contents plugin for markdown-it, used mainly in blog posts as `[[TOC]]`
+  - `sass` - Sass compiler for our `/css/*.scss` files
+
+# Configuration
+The Eleventy configuration is located in the `.eleventy.js` file at the root of the project. This file contains all the configuration settings for the Eleventy build process. As it is a JavaScript file, you can utilize all JavaScript features and syntax within it.
+
+**What do you find in this file?**
+
+- plugins configuration - All the plugins we use
+- pass through files - Files that are copied to the output folder without any processing
+- custom collections - Custom collections used in the templates like `tagList` and `yearList`
+- filters - Custom filters used in the templates
+- custom shortcodes - Custom [shortcodes](Content#shortcodes-and-includes) used in the templates, pages or blog posts.
+
+The file is well-commented and should be self-explanatory. If you need to add a new configuration, please follow the existing structure and include a comment to explain the new configuration.
+
+# Global Data
+
+Global data is located in the `/_data` folder. It contains all the global data that is accessible in all the templates. Currently, we have these JSON files:
+
+- `site.json` - Contains all the global data for the website, used in the templates and shortcodes.
+- `features.json` - Contains all the data for the features page and its features sections.
+- `sponsors.json` - Contains sponsor information used in multiple places on the website.
+
+Our `site.json` file contains these main properties, with only some listed below:
+
+- `dark-mode` - Dark mode toggle `true|false`
+- `alert-banner` - Global banner below navigation `true|false`
+- `docs-search` - Includes docs website content in the search `true|false`
+- `links` - Contains all the main links used across the website (social media, docs, GitHub, etc.)
+- `authors` - Contains all the authors used in the blog posts
+- repeated data - like `csharp-version`, `dotnet-version`, `download-version` which are used in multiple places on the website and are updated with every release
+
+# Folder Structure
+
+The folder structure is crucial for Eleventy, as it determines the output of the build process. The folder structure is organized as follows:
+
+**Folders**
+
+- `/_data` - Global data
+- `/_drafts` - Draft blog posts (excluded from the build process)
+- `/_includes` - Reusable code snippets that can be included in multiple pages
+- `/_layouts` -  Main layout pages (`container`, `page`, `post`) using the primary layout page `default`
+- `/_site` - Output build folder (excluded in `.gitignore` and used for deployment) 
+- `/assets` - Additional assets, such as scripts
+- `/blog` - Blog content page
+- `/css` - Website stylesheets
+- `/files` - Stride installer files
+- `/images` - Images and MP4 files used on the website
+- `/legal` - Content page
+- `/posts` - Blog posts
+- `/posts/2014-2021` - Old blog posts which are merged to the same output folder as `/posts`
+  - this folder is only for convenience to easily access new posts
+- `/wiki` - Excluded from build process, used only for wiki deployment
+
+**Files**
+
+- `/posts/posts.json` - Blog post defaults so they don't have to be repeated in the front matter
+- `*.html` - HTML content pages
+- `*.liquid` - Liquid content pages
+- `*.md` - Markdown content pages
+- `*.njk` - Nunjucks content pages
+- `.eleventy.js` - Eleventy configuration file
+- `.eleventyignore` - Lists files and folders not to be processed by Eleventy
+- `package.json` - Eleventy project metadata used by `npm`
+
+**Non Eleventy files:**
+
+- `.nojekyll` - Special file for GitHub Pages
+- `CNAME` - Custom domain for GitHub Pages
+- `appsettings.json` - ASP.NET Core configuration file
+- `appsettings.Development.json` - ASP.NET Core configuration file
+- `Program.cs` - ASP.NET Core startup file
+- `Stride.Web.csproj` - ASP.NET Core project file
+- `Stride.Web.sln` - ASP.NET Core solution file
+- `Stride.Web.csproj.user` - ASP.NET Core project file
+- `web.config` - Configuration file for IIS deployment
+- `web.Release.config` - Configuration file for Windows ASP.NET Core deployment
+
+
+**Note:** This project includes ASP.NET Core solution and files, as they can be used seamlessly with Eleventy. Read more about this in our [Installation](Installation#asp-net-core) section.
+
+
+# Layouts
+
+All the layouts are located in the `/_layouts` folder. The `default` layout is the main layout page and is used by all the other layouts. 
+
+- `default` - Main layout page
+- `container` - Used by some pages
+- `page` - Used by most of the pages
+- `post` - Used by blog posts
+
+# Includes
+
+All the includes are located in the `/_includes` folder. The includes are reusable code snippets that can be included in multiple pages.
+
+Some includes are used solely by the layouts, while others are used by the content pages.
+
+# Advanced Topics
+
+## Creating Custom Shortcodes and Includes
+
+If you need to create a custom shortcode or include, please follow the existing structure and [include a comment](Content#shortcodes-and-includes) to explain the new shortcode or include.
+
+The shortcodes are defined in the `.eleventy.js` file, while the includes are located in the `/_includes` folder.
+
+You can explore the existing shortcodes and includes to get a better understanding of how they work and how to create new ones.
+
+## Performance Optimization
+
+ToDo: Remove this section if not needed

en/contributors/documentation/documentation-generation-pipeline.md

@@ -0,0 +1,142 @@
+# Table of Contents
+
+- [Introduction](#introduction)
+- [A Simplified Overview](#a-simplified-overview)
+- [Docs Build Workflow](#docs-build-workflow)
+- [Workflow Diagram](#workflow-diagram)
+
+# Introduction
+As of now, **DocFX** does not natively support the generation of multi-language and multi-version documentation. To address this limitation, the Stride team has developed a PowerShell script. Initially, separate scripts were created for each language; however, these have since been consolidated into a single script named [`BuildDocs.ps1`](https://github.com/stride3d/stride-docs/blob/staging/BuildDocs.ps1). This unified script is capable of generating documentation in all supported languages.
+
+The script serves two main purposes:
+
+- It features a non-interactive mode, utilized by the Continuous Integration/Continuous Deployment (CI/CD) pipeline to automatically generate documentation for all languages and the most recent version, eliminating the need for user intervention.
+- It also offers an interactive command-line UI, allowing users to select which languages they wish to generate documentation for.
+
+# A Simplified Overview
+
+Here's a straightforward explanation of how the documentation generation process works.
+
+The `/en` folder serves as the repository for the primary documentation files. When documentation for another language (e.g., Japanese) is built, the files from `/en` are copied over to a temporary folder, for example, `/jp-tmp`. This ensures that the non-English versions will contain all the files present in the `/en` folder. Files that have been translated (found in folders like `/jp`) will overwrite their English counterparts in the temp folder.
+
+DocFX is invoked multiple times, once for each language, to create the documentation. The generated documents are stored in the `_site` folder, organized according to the latest version information obtained from `version.json`. For example:
+
+```
+/_site/4.1/en
+/_site/4.1/jp
+```
+
+## DocFX Files Processed
+
+This section outlines the file processing carried out by DocFX during the documentation generation:
+
+- **Table of Contents (TOC) Files:** 4 files processed
+- **Assets:** 1607 items (images, videos, etc.) included
+- **Conceptual Files:** 304 files processed, resulting in 304 HTML files
+- **Warnings (No API Metadata):** 44 instances encountered
+- **Warnings (API Metadata):** 200 instances of missing or incorrect references
+- **API Files:** 2821 files processed, resulting in 2133 HTML files
+
+# Docs Build Workflow
+
+In this part, we elaborate on the individual steps involved in the documentation build workflow for the Stride Docs project.
+
+- **Start**
+  - Initiates the workflow by reading the `$BuildAll` parameter.
+    - If set to 'Yes', it proceeds to generate all languages and the Stride API automatically, which is particularly useful for CI/CD.
+    - If set to 'No', it will prompt the user to select languages through an interactive command-line UI.
+  - Sets the `$Version` parameter based on the `-Version` command-line argument or fetches it from `version.json` if the argument is not provided.
+- **Read-LanguageConfigurations**
+  - Reads `languages.json` to identify which languages should be generated.
+- **BuildAll**
+  - Pre-configures some variables for non-interactive mode, effectively skipping the `Get-UserInput` step.
+- **Get-UserInput**
+  - In interactive mode, this step prompts the user to choose the languages to generate, as well as whether to launch a local web server.
+- **Ask-IncludeAPI**
+  - Further queries if the user wants the Stride API included in the documentation build.
+- **Ask-UseExistingAPI**
+  - Queries if the user wants to re-use already generated Stride API yml files.
+- **Start-LocalWebsite**
+  - If selected, launches a local web server to host the generated website.
+- **Generate-APIDoc**
+  - Executes `docfx.exe` to generate the metadata needed for the Stride API documentation.
+- **Remove-APIDoc**
+  - Removes the generated API metadata.
+- **Build-EnglishDoc**
+  - Uses `docfx.exe` to build the English documentation, incorporating the Stride API documentation if metadata is available.
+- **PostProcessing Steps**
+  - PostProcessing-FixingSitemap
+    - Adjusts the `sitemap.xml` to use '/latest/en' paths, allowing the most current version to maintain a consistent URL.
+  - PostProcessing-Fixing404AbsolutePath
+    - Modifies asset (CSS, JS, ) paths in `404.html` to be absolute, as required by IIS for 404 page.
+  - Copy-ExtraItems
+    - Copies additional items like `versions.json`, `web.config`, `ReleaseNotes.md` and `robots.txt`, while also updating the `%deployment_version%` parameter in the `web.config` file.
+- **Build-AllLanguagesDocs**
+  - Iterates over all selected languages and triggers the `Build-NonEnglishDoc` function for each.
+- **Build-NonEnglishDoc**
+  - Executes `docfx.exe` to compile non-English documentation, incorporating Stride API documentation if metadata is present.
+- **PostProcessing-DocFxDocUrl**
+  - Adjusts HTML tags and GitHub links, removing any `_tmp` suffixes. Also updates GitHub links to English if the translation is unavailable.
+
+# Workflow Diagram
+
+
+``` mermaid
+%% Define styles
+
+%% Main Graph
+graph TB
+
+%% Nodes
+    Start[Start]
+    A[Read-LanguageConfigurations]
+    B{BuildAll}
+    C[Get-UserInput]
+    D[Generate-APIDoc]
+    E{Ask-IncludeAPI}
+    E1{Ask-UseExistingAPI}
+    End[End]
+    F[Start-LocalWebsite]
+    G[Cancel]
+    H[Remove-APIDoc]
+    M{isEnLanguage or isAllLanguages}
+    N[Build-EnglishDoc]
+    O[PostProcessing-FixingSitemap]
+    O1[PostProcessing-Fixing404AbsolutePath]
+    P[Copy-ExtraItems]
+    R{isAllLanguages}
+    S[Build-AllLanguagesDocs]
+    T[Build-NonEnglishDoc]
+    Y[PostProcessing-DocFxDocUrl]
+    Z[End]
+
+%% Edges
+    Start --> A --> B
+    B -->|Yes| D
+    B -->|No| C
+    subgraph User Interaction
+    C --> E
+    E -->|Yes| E1
+    E -->|No| H
+    C --> F --> F1{{docfx serve}}
+    C --> G
+    end
+    F1 --> End
+    G --> End
+    E1 -->|No| D
+    E1 -->|Yes| M
+    subgraph Documentation Generation
+    H --> M
+    D --> D1{{docfx metadata}} --> M
+    M -->|Yes| N
+    M -->|No| R
+    N --> DocFX{{docfx build}} --> O --> O1--> P
+    P --> R
+    R -->|Yes| S
+    R -->|No| T
+    S --> T
+    T --> X{{docfx build}}
+    X --> Y
+    Y --> Z
+    end
+```

en/contributors/documentation/index.md

@@ -1,3 +1,75 @@
-# Contribute to documentation
+This documentation serves as a comprehensive guide to help you navigate and contribute to the **Stride Docs** website.
 
-https://github.com/stride3d/stride-docs/wiki 
+If you're looking to make minor changes, such as adding or updating a manual, tutorial or page, or fixing a typo, feel free to jump straight to the [Content Updates](content#content-updates) section.
+
+For more extensive updates 🤯🤦‍♂️ or for a deeper understanding of the docs website project, we recommend exploring all the sections provided. Happy browsing and contributing!
+
+Here are the technologies we use to build our website:
+
+- [docfx](https://dotnet.github.io/docfx/index.html) (static site generator)
+- Markdown
+- [Mustache](https://mustache.github.io/) template engine (docfx dropped Liquid template engine support)
+- Bootstrap
+- Emojis (because why not? 😎)
+- GitHub Wiki
+- HTML, JavaScript, CSS, JSON
+- PowerShell scripts
+- GitHub Actions (CI/CD) - Don't worry, this is already set up, you don't need to worry about it.
+
+## Table of Contents
+
+- [Understanding the Stride Documentation Generation Pipeline](documentation-generation-pipeline.md)
+    - [Introduction](documentation-generation-pipeline.md#introduction)
+    - [A Simplified Overview](documentation-generation-pipeline.md#a-simplified-overview)
+    - [Docs Build Workflow](documentation-generation-pipeline.md#docs-build-workflow)
+    - [Workflow Diagram](documentation-generation-pipeline.md#workflow-diagram)
+- [Installation](installation.md)
+    - [Prerequisites](installation.md#prerequisites)
+    - [Installation Steps](installation.md#installation-steps)
+    - [Running the Development Server](installation.md#running-the-development-server)
+- [Content](content.md)
+    - [Content Updates](content.md#content-updates)
+        - [Small Updates](content.md#small-updates)
+        - [Major Updates](content.md#major-updates)
+        - [Updating Wiki](content.md#updating-wiki)
+    - [Manual](content.md#manual)
+        - [Creating New Page](content.md#creating-new-manual-page)
+    - [Tutorial](content.md#tutorial)
+        - [Creating New Tutorial](content.md#creating-new-tutorial-page)
+    - [Creating New Post](content.md#creating-new-post)
+        - [Post Naming Convention](content.md#post-naming-convention)
+        - [Post Front Matter](content.md#post-front-matter)
+        - [Post Content](content.md#post-content)
+        - [Excerpt](content.md#excerpt)
+    - [Creating New Page](content.md#creating-new-page)
+        - [Page Front Matter](content.md#page-front-matter)
+    - [Shortcodes and Includes](content.md#shortcodes-and-includes)
+        - [Alert](content.md#alert)
+        - [Alert Banner](content.md#alert-banner)
+        - [Image](content.md#image)
+        - [Video](content.md#video)
+    - [Web Assets](content.md#web-assets)
+    - [Styling](content.md#styling)
+        - [Bootstrap Customization](content.md#bootstrap-customization)
+        - [CSS Guidelines](content.md#css-guidlines)
+    - [Submitting your Changes](content.md#submitting-your-changes)
+- [New Language](new-language.md)
+    - [Adding a New Language](new-language.md#adding-a-new-language)
+- [Roadmap](roadmap.md)
+- [DocFX](docfx.md)
+    - [Packages and Dependencies](eleventy.md#packages-and-dependencies)
+    - [Configuration](eleventy.md#configuration)
+    - [Global Data](eleventy.md#global-data)
+    - [Folder Structure](eleventy.md#folder-structure)
+    - [Layouts](eleventy.md#layouts)
+    - [Includes](eleventy.md#includes)
+    - [Advanced Topics](eleventy.md#advanced-topics)
+        - [Creating Custom Shortcodes and Includes](eleventy.md#creating-custom-shortcodes-and-includes)
+- [Deployment](deployment.md)
+    - [GitHub Pages](deployment.md#github-pages)
+    - [Azure Web Apps](deployment.md#azure-web-apps)
+    - [Deployment To Wiki](deployment.md#deployment-to-wiki)
+- [Troubleshooting and FAQ](troubleshooting-and-faq.md)
+    - [Known Issues](troubleshooting-and-faq.md#known-issues)
+    - [Common Issues and Solutions](troubleshooting-and-faq.md#common-issues-and-solutions)
+    - [Frequently Asked Questions](troubleshooting-and-faq.md#frequently-asked-questions)

en/contributors/documentation/installation.md

@@ -0,0 +1,92 @@
+This guide will walk you through the steps to install the Stride Docs website on your local machine for development purposes. Although we use the Windows operating system for development, the steps should be similar for other operating systems.
+
+[Minor updates](Content#small-updates) can be made directly on GitHub. However, for [more significant updates](Content#major-updates) that affect multiple pages, we recommend using a local development environment so you can see the impact of your changes beforehand. This is because we use the **docfx** static site generator, and in some cases, all pages need to be regenerated. This approach helps you assess your changes before submitting a pull request.
+
+This guide assumes you have a basic understanding of the technologies used in the Stride docs website.
+
+# Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Installation Steps](#installation-steps)
+- [Running the Development Server](#running-the-development-server)
+
+# Prerequisites
+
+Before updating the Stride Docs, ensure you are familiar with the following prerequisites:
+
+1. Familiarity with the command line
+1. **.NET SDK 6.0 or higher:** You can download the installer from the [.NET SDK website](https://dotnet.microsoft.com/en-us/download)
+   - If .NET SDK is already installed, ensure you have version 6.0 or higher. You can check your version by running `dotnet --info` in a terminal.
+1. **Git installed:** You will need Git for version control. If you don't have Git installed, you can download it from the [Git website](https://git-scm.com/downloads)
+1. **Development IDE of choice:** Choose an Integrated Development Environment (IDE) that you're comfortable with for development. Although there are various popular choices, such as Visual Studio, Visual Studio Code, and others, this guide will focus on using **Visual Studio**, as it is the primary IDE for the Stride project, and as of writing, we use **Visual Studio 2022**. You can download the free Community edition from the [Visual Studio website](https://visualstudio.microsoft.com/downloads/)
+
+# Installation Steps
+
+1. ❓You might want to create an issue so we can track your contribution and avoid duplicate work. If you're unsure whether your contribution is needed, feel free to create an issue and ask
+1. 🍴 Fork the repository by navigating to the [Stride Docs repository](https://github.com/stride3d/stride-docs) and clicking the **Fork** button in the top-right corner
+1. 📥 Clone your forked repository using the following command, replacing `your-username` with your GitHub username: `git clone https://github.com/your-username/stride-docs.git`
+   - 💡**Tip:** It's a good idea to create a new branch for each feature or bug fix you work on. This helps keep your forked repository organized and makes it easier to manage multiple pull requests
+1. Make sure you have also Stride repo cloned on **the same level** as stride-docs, read more about it [here](https://github.com/stride3d/stride)
+   - This repo is needed for API documentation generation
+1. 📁 Go to the project folder `cd stride-docs`
+1. 🚀 Let's start with the **docfx**
+
+Enter the following command to install the latest docfx
+
+```
+dotnet tool install -g docfx
+```
+
+Or check the inslalled version is at least `2.67.0`
+
+```
+docfx --version
+```
+
+**Other options**
+
+Update to the latest docfx
+
+```
+dotnet tool update -g docfx
+```
+
+Install a specific version of docfx
+
+```
+dotnet tool update -g docfx --version 2.67.0
+```
+
+Uninstall docfx if you need to downgrade
+
+
+```
+dotnet tool uninstall -g docfx
+```
+
+# Running the Development Server
+
+We've created a PowerShell script [BuildDocs.ps1](https://github.com/stride3d/stride-docs/blob/master/BuildDocs.ps1) with a context menu where you can select the language, include the API build, and run the development server.
+
+1. 🚀 Run `run.bat` in the command line to start the script
+1. 📋 You will see the following self-explanatory menu:
+    ```
+    Please select an option:
+
+      [en] Build English documentation
+      [jp] Build Japanese documentation
+      [all] Build documentation in all available languages
+      [r] Run local website
+      [c] Cancel
+
+    Your choice:
+    ```
+1. 🌐 Choose to build the documentation in the language of your preference
+   - Select `[n]` for no API build
+1. 🖥️ If you select `[r]`, the documentation site will open automatically in your browser `http://localhost:8080/en/index.html`
+     - If you built the documentation in a language other than English, you'll need to manually change the language in the URL
+1. 💻 Open the project in Visual Studio by opening the `Stride.Docs.sln` solution file, or use the IDE of your choice 
+1. 🔄 After saving the updated file, you will need to rebuild the documentation by running the script again
+1. 😃 Happy coding!
+
+Let's [update the content](Content) now!

en/contributors/documentation/new-language.md

@@ -0,0 +1,3 @@
+This guide will walk you through the steps on contributing a different language for the documentation
+
+# Adding a new language

en/contributors/documentation/roadmap.md

@@ -0,0 +1,10 @@
+This is a proposal for our website roadmap and ongoing website development plan.
+
+- Tackle existing issues listed in the [Issues](https://github.com/stride3d/stride-website/issues)
+- Convert images to WebP for better performance
+- Streamline the website by decoupling media from the site
+  - Host videos on YouTube
+  - Host images in Azure Blob Storage or another location
+- Optimize the website for possible deployment on Azure Static Web Apps
+  
+

en/contributors/documentation/troubleshooting-and-faq.md

@@ -0,0 +1,22 @@
+# Table of Contents
+
+- [Known Issues](#known-issues)
+- [Common Issues and Solutions](#common-issues-and-solutions)
+- [Frequently Asked Questions](#frequently-asked-questions)
+
+# Known Issues
+
+1. **Sponsor Page - Widget Incompatibility with dark theme:** Widgets on the Sponsor Page currently do not support the dark theme. As a workaround, we can either fetch data from https://opencollective.com/stride3d/members/all.json and render it before deployment or make it dynamic. Both options would give us more control over the content and design, and allow for better compatibility with the dark theme in the future.
+1. **Search Page - Lack of pagination:** At present, the Search Page does not have pagination, which limits the maximum number of search results displayed to 100. To resolve this issue, we can implement a pager in JavaScript. This would enable users to navigate through multiple pages of search results, providing a more comprehensive view of the available content. 
+
+# Common Issues and Solutions
+
+Any issue should be added to Stride Website [GitHub issues](https://github.com/stride3d/stride-website/issues) so it can be tracked and elaborated by the community.
+
+# Frequently Asked Questions
+
+**Q:** I just want to fix a typo in a post. Do I need to follow your installation steps?
+
+**A:** *No, you can fix the typo directly on the GitHub website. However, you will still need to fork the repo, make your update on the main branch or a new branch, and then create a pull request. You can follow this guide for [minor updates](Content#small-updates).*
+
+

en/contributors/engine/bug-bounties.md

@@ -1,4 +1,4 @@
-#bug bounties
+# Bug bounties
 If you are a developer with solid experience in C#, rendering techniques, or game development, we want to hire you! We have allocated funds from supporters on [OpenCollective](https://opencollective.com/stride3d) and will pay you for your work on certain issues.
 
 You can find [issues with bounties here](https://github.com/stride3d/stride/labels/bounty). If you see a different bug that you would like to tackle and you want to know if it is eligible for a bug bounty, you are also more than welcome to reach out to the core contributors on [Discord](https://discord.gg/f6aerfE) and [Github Discussion](https://github.com/stride3d/stride/discussions).

en/contributors/engine/visual-studio-plugin.md

@@ -1,4 +1,5 @@
-The Stride Visual Studio Plugin adds:
+# Visual Studio Plugin
+The Stride Visual Studio Plugin adds:
 * syntax highlighting for Stride `.sdsl` shaders  (formerly `.xlsl`)
 * generates shader key files (`.sdsl.cs`) which create type definitions and ParameterKey values for the shader parameters
 * generates shader effect files (`.sdfx.cs`)

en/contributors/toc.yml

@@ -36,15 +36,38 @@
       href: engine/architecture/dependency-graph.md
     - name: Asset introspection
       href: engine/architecture/build-pipeline.md
-#- name: ℹ Contribute to the documentation
-#  expanded: false
-#  href: documentation/index.md
-#  items:
-#  - name: Adding a new manual page
-#    href: documentation/adding-manual-page.md
-#- name: 🌐️ Contribute to the website
-#  expanded: false
-#  href: website/index.md
-#  items:
-#    - name: Adding a new blogpost
-#      href: website/adding-blogpost.md
+- name: ℹ Contribute to the documentation
+  expanded: false
+  href: documentation/index.md
+  items:
+  - name: Documentation generation pipeline
+    href: Documentation/documentation-generation-pipeline.md
+  - name: Installation
+    href: Documentation/installation.md
+  - name: Content
+    href: Documentation/content.md
+  - name: New language
+    href: Documentation/new-language.md
+  - name: Roadmap
+    href: Documentation/roadmap.md  
+  - name: DocFX
+    href: Documentation/docfx.md
+  - name: Deployment
+    href: Documentation/deployment-azure.md
+  - name: Troubleshooting and FAQ
+    href: Documentation/troubleshooting-and-faq.md
+- name: 🌐️ Contribute to the website
+  expanded: false
+  href: website/index.md
+    - name: Installation
+      href: website/installation.md
+    - name: Website Content
+      href: website/content.md
+    - name: Roadmap
+      href: website/roadmap.md
+    - name: Eleventy
+      href: website/eleventy.md
+    - name: Deployment
+      href: website/deployment-azure.md
+    - name: Troubleshooting and FAQ
+      href: website/troubleshooting-and-faq.md

en/contributors/website/content.md

@@ -0,0 +1,385 @@
+# Website Content
+
+- [Content Updates](#content-updates)
+  - [Small Updates](#small-updates)
+  - [Major Updates](#major-updates)
+  - [Updating Wiki](#updating-wiki)
+- [Creating New Post](#creating-new-post)
+  - [Post Naming Convention](#post-naming-convention)
+  - [Post Front Matter](#post-front-matter)
+  - [Post Content](#post-content)
+  - [Excerpt](#excerpt)
+- [Creating New Page](#creating-new-page)
+  - [Page Front Matter](#page-front-matter)
+- [Shortcodes and Includes](#shortcodes-and-includes)
+  - [Alert](#alert)
+  - [Alert Banner](#alert-banner)
+  - [Image](#image)
+  - [Video](#video)
+- [Web Assets](#web-assets)
+- [Styling](#styling)
+  - [Bootstrap Customization](#bootstrap-customization)
+  - [CSS Guidelines](#css-guidlines)
+- [Submitting your Changes](#submitting-your-changes)
+
+# Content Updates
+
+If you want to contribute and update the website, please follow the instructions below.
+
+Small updates can be done directly in the GitHub web interface, for bigger updates the local development environment is required, which is described in the [Installation](Installation) section.
+
+You can use any text editor to make changes. If you are using **Visual Studio**, you can open `Stride.Web.sln` solution file in the root of the repository and start making your updates directly from this IDE.
+
+You are always welcome to create an issue to discuss your changes before you start working on them. 
+
+## Small Updates
+
+Creating an issue is not required for small updates, but it is recommended to let others know what you are working on. If you are not sure whether your update is small or not, please create an issue first.
+
+### What is a small update?
+
+We can define small updates as changes to the content of the website:
+
+- Update the content of an existing page
+- Update the content of an existing blog post
+- Add a [new page](#creating-new-page) or [blog post](#creating-new-post)
+- Fix a typo
+- Minor navigation or footer update
+    - This will update all pages containing the navigation or footer
+
+### Steps
+
+**Note:** This guide assumes you are already familiar with updating files in GitHub.
+
+1. Go to the [Stride Website GitHub](https://github.com/stride3d/stride-website) repository
+1. Locate the file you wish to edit
+1. Click the `Edit this file` (pencil) icon in the top right corner
+1. If prompted, fork the repository by clicking `Fork this repository`
+1. Make your changes to the file, then write a brief commit message describing the changes
+1. Click on the `Propose changes` button
+1. On the next screen, click the `Create pull request` button
+1. Provide a title and description for your pull request, and click on `Create pull request` again
+1. Wait for the review and merge
+
+## Major Updates
+
+[Creating an issue](https://github.com/stride3d/stride-website/issues) is **required** for major updates, so that others can comment on your changes and provide feedback.
+
+We can define bigger updates as changes to the design of the website, where you would like to see the impact of your changes beforehand to assess the desired result:
+
+- Add new Eleventy shortcodes and Liquid includes
+- Update Bootstrap library or other libraries
+- Update layouts
+
+You would start with the local development environment, which is described in the [Installation](Installation) section.
+
+Then you would make your changes and test them locally. Once you are happy with the result, you can create a pull request to merge your changes into the `master` branch.
+
+## Updating Wiki
+
+While wiki pages can be updated directly in the GitHub web interface, this feature is restricted only to contributors who can edit the wiki directly. We have decided to move our wiki pages to a regular folder in this repository called [wiki](https://github.com/stride3d/stride-website/tree/master/wiki), allowing us to use the same process as we do for the website content. If any changes are made directly on the wiki pages, they will be overwritten by the next wiki deployment.
+
+Wiki pages are deployed through a separate GitHub action, `stride-web-wiki.yml`, which is triggered by updates in the `wiki` folder or can be triggered manually. The `wiki` folder is ignored by the Eleventy build process, ensuring that the wiki pages are not deployed to the website. Additionally, any pushes to the `wiki` folder will not trigger the website deployment.
+
+You can update the wiki pages as any other content pages, by following the steps in the [Small Updates](#small-updates) section.
+
+⚠️**Important:** If you are updating any headers in the wiki pages, please make sure to update the *Table of Contents* at the top of the page, [Home](https://github.com/stride3d/stride-website/blob/master/wiki/Home.md) page and [_Sidebar.md](https://github.com/stride3d/stride-website/blob/master/wiki/_Sidebar.md). Also, you might need to search for all the links to the updated header and update them as well.
+
+# Creating New Post
+
+To create a new blog post, you can follow one of these methods:
+
+1. Copy an existing post and update the front matter and content. This is the fastest way to get started with a new post
+1. Alternatively, create a new file in the `posts` folder, ensuring that the file name follows the appropriate naming convention
+
+Either method will allow you to create a new blog post, so choose the one that best suits your needs.
+
+## Post Naming Convention
+
+`YYYY-MM-DD-post-title.md`
+
+Replace `YYYY-MM-DD` with the date of the post and `post-title` with the title of the post.
+
+⚠️**Important SEO Note:** Ensure the file title includes essential keywords related to your post's content. This is crucial as the file title dictates the URL of the post, which plays a significant role in search engine optimization (SEO).
+
+## Post Front Matter
+
+The file should start with the following front matter:
+
+```yaml
+---
+title: 'Post title'
+# author's id, defined in the _data/site.json
+author: vaclav
+# optional, if not set, the default tags will be used, tags are merged with the default tags
+# you can find all tags in the live site in the /tags/ page
+tags: ['Announcement']
+# optional, if not set, the default image will be used
+# use webp format for best performance, images should be located in the /images/blog/YYYY-MM-DD-post-title folder
+image: /images/blog/2023-04/new-home-page.webp
+# optional, if true, the post will be featured in the popular section
+pupular: true
+# permlink is automatically generated based on the file name, but you can override it here
+permalink: /blog/2023-04/my-custom-link/ # this is a custom link
+---
+```
+
+The same example, without the comments:
+
+```yaml
+---
+title: 'Post title'
+author: vaclav
+tags: ['Announcement']
+image: /images/blog/2023-04/new-home-page.webp
+pupular: true
+permalink: /blog/2023-04/my-custom-link/
+---
+
+```
+
+Default front matter, which is used for all posts, can be found in the `posts/posts.json` file.
+
+```json
+{
+  "layout": "post",
+  "eleventyComputed": {
+    "year": "{{ page.date | date: '%Y' }}",
+    "modified": "Last Modified"
+  },
+  "permalink": "/blog/{{ page.fileSlug }}/",
+  "tags": [ "blog", "search" ]
+}
+```
+
+### Image
+
+The image specified in the front matter serves dual purposes: It appears in the blog listing at [Stride Blog](https://www.stride3d.net/blog/) and is used as the **og:image** meta tag for social sharing. Here are three ways to specify this image:
+
+- Not including an image in the front matter will use the default image
+- Including an image in the front matter will override the default image. The size of the image should be minimum **1200 x 600px** e.g. `image: /images/blog/2023-04/new-home-page.webp`
+- External image URL e.g. `image: https://i.imgur.com/7GVEiSR.jpg`
+- If you are looking for Stride specific logo's or icons, have a look at the [Figma](figma.md) options.
+
+## Post Content
+
+Check the previous posts for an example of the post content. Ideally you should use the same format as the previous posts to preserve the consistency of the blog.
+
+You can use shortcodes and includes which are described in the [Shortcodes and Includes](#shortcodes-and-includes) section.
+
+You can also use majority of the Bootstrap classes in your content if you combine HTML and Markdown.
+
+💡**Tip:** We have a folder called `_drafts` where you can store your drafts. These files are not published. Once you are ready to publish your post, you can move it to the `posts` folder.
+
+## Excerpt
+
+The excerpt is the first paragraph of the post. Separated from the rest of the content by three dashes `---`. The excerpt is used in the blog post list, meta description and in the RSS feed.
+
+**Example**
+
+```yaml
+---
+title: 'Stride 4.1 is Now Live'
+author: aggror
+tags: ['Tutorials','Release', 'Graphics']
+---
+
+Stride contributors are proud to announce a new release now running on .NET 6 supporting the latest C# 10. That means you can now head to the download page and start developing your games using the latest .NET technologies.
+
+---
+
+Additional content goes here...
+
+```
+
+# Creating New Page
+
+To create a new page, create a new file in the root folder or create a new folder and add an `index.md` file to it. You can use any templating language supported by Eleventy. We use Markup, html, nunjacks.
+
+## Page Front Matter
+
+The page front matter works the same way as the post front matter. The only difference is that the `layout` property is required.
+
+**Example:** file `features.html`
+
+```yaml
+---
+layout: default
+title: Features
+description: 'Stride supports an extensive list of features: Scene Editor, Physically Based Rendering, Particles, UI Editor, Prefabs, DX12 & Vulkan, C# Scripting, etc...'
+# permlink is automatically generated based on the file name, but you can override it here
+permalink: /my-features/ # otherwise it would be /features/
+---
+```
+
+# Shortcodes and Includes
+
+You can see examples here https://www.stride3d.net/blog/examples/.
+
+## Alert
+
+To add an alert, use the following include, where:
+
+- `type` is one of the following: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`. Using these types will automatically include a relevant icon
+- `icon` is a Font Awesome icon, which is optional. You can use any free icon, e.g., fa-check.
+- `title` is the title of the alert
+
+```liquid
+# This will render as a green box without the icon
+{% include _alert.html type:'success' icon:'' title:'No icon: Stride contributors are proud to announce a new release now running on .NET 6 supporting the latest C# 10.' %}
+
+# This will render as a green box with a check icon
+{% include _alert.html type:'success' title:'No icon: Stride contributors are proud to announce a new release now running on .NET 6 supporting the latest C# 10.' %}
+
+# This will render as a green box with a custom icon
+{% include _alert.html type:'success' icon:'fa-face-smile' title:'No icon: Stride contributors are proud to announce a new release now running on .NET 6 supporting the latest C# 10.' %}
+```
+
+## Alert Banner
+
+A global alert banner can be used for promotional purposes. The banner can be activated in `site.json`.
+
+```json
+"alert-banner": true
+```
+
+The HTML can be updated in the `/_includes/alert-banner.html` file.
+
+## Image
+
+Add responsive images using shortcodes. Be sure to include a descriptive title, as it will improve your post's search engine visibility. Also, if possible, use the **webp** format for images, which can also be used for transparent images. This will improve the performance of your site.
+
+To add a responsive image, use the following shortcode:
+
+`{% img 'title' 'url' %}`
+
+Replace `title` with a descriptive title for the image and `url` with the image URL. This shortcode renders as:
+
+```html
+<img alt="title" src="url" class="img-fluid mb-2" loading="lazy" data-src="url">
+```
+
+To add a responsive image with a clickable link that opens the image in full size, use the following shortcode:
+
+`{% img-click 'title' 'url' %}`
+
+Replace `title` with a descriptive title for the image and `url` with the image URL. This shortcode renders as:
+
+```html
+<a href="url" title="title" class="mb-2"><img alt="title" src="url" class="img-fluid" loading="lazy" data-src="url"></a>
+```
+
+To add a responsive image with a clickable link that directs users to a custom destination, use the following shortcode:
+
+`{% img-click 'title' 'url' 'destinationUrl' %}`
+
+Replace `title` with a descriptive title for the image, `url` with the image URL, and `destinationUrl` with the target URL when the image is clicked. This shortcode renders as:
+
+```html
+<a href="destinationUrl" title="title" class="mb-2"><img alt="title" src="url" class="img-fluid" loading="lazy" data-src="url"></a>
+```
+
+## Video
+
+We should consider hosting our videos on YouTube whenever possible. 
+
+To embed a **YouTube video**, use the following shortcode:
+
+`{% youtube 'id' %}`
+
+Replace `id` with the YouTube video ID. This shortcode renders as:
+
+```html
+<div class="ratio ratio-16x9 mb-2"><iframe src="https://www.youtube.com/embed/id" title="YouTube video" allowfullscreen></iframe></div>
+```
+
+To embed a **YouTube playlist**, use the following shortcode:
+
+`{% youtube-playlist 'id' %}`
+
+Replace `id` with the YouTube playlist ID. This shortcode renders as:
+
+```html
+<div class="ratio ratio-16x9 mb-2"><iframe src="https://www.youtube.com/embed/videoseries?list=id" title="YouTube video" allowfullscreen></iframe></div>
+```
+
+To embed a video hosted elsewhere, use the following shortcode:
+
+### Hosting our own videos
+
+`{% video 'url' %}`
+
+Replace `url` with the video URL (e.g., .mp4 file). Make sure you have a matching .jpg file with the same name as the .mp4 file for the poster attribute. This shortcode renders as:
+
+```html
+<!-- jpgUrl = url.replace(".mp4", ".jpg") // make sure you have a pair .mp4 and .jpg -->
+<div class="ratio ratio-16x9 mb-2"><video autoplay loop class="responsive-video" poster="jpgUrl"><source src="url" type="video/mp4"></video></div>
+```
+
+### How to encode videos
+
+Videos can be generated by many software in various formats & size, so they might end up being incompatible with web browsers or mobile, or simply be way too large.
+It is better to stick to a format with low requirements such as H264 baseline profile (works almost everywhere).
+
+To do so, process the file using [fmpeg](https://ffmpeg.org/download.html):
+
+```
+ffmpeg -i myvideo_original.mp4 -profile:v baseline -level 3.0 -an myvideo.mp4
+```
+
+Also, generate a static thumbnail so that people can preview it before downloading the video (very important on mobile):
+
+ToDo: Check if webp can be generated from ffmpeg
+
+```
+ffmpeg -i myvideo.mp4 -vframes 1 -f image2 -y myvideo.jpg
+```
+
+ToDo: Maybe we could provide a simple tool to do that without using command line.
+
+
+# Web Assets
+
+Our main web assets are:
+
+- `css/custom-bootstrap.scss` - Slightly modified Bootstrap theme
+  - Some Bootstrap variables are overridden
+  - Some Bootstrap parts are disabled so they don't bloat the website (e.g. button-group, breadcrumb, ..)
+- `css/styles.scss` - Main stylesheet
+  - Styles also Dark Mode
+- `css/syntax-highlighting.scss` - Imported prismjs styling, Light and Dark Mode
+- `assets/search.liquid` - Script for search
+- `assets/site.liquid` - Not used
+- `assets/theme-selector.liquid` - Script for Ligth and Dark Mode selection
+- `search.liquid` - Renders as `search.json` contains search meta
+
+
+# Styling
+
+## Bootstrap Customization
+
+Our website uses the [Bootstrap](https://getbootstrap.com/) framework, version **5.3**.
+
+⚠️**Important:** Prioritize the use of Bootstrap's inherent styling before integrating any custom styles. You should be familiar with [Bootstrap Utilities](https://getbootstrap.com/docs/5.3/utilities/api/) which help you to achieve most of the styling requirements.
+
+## CSS Guidelines
+
+Our goal is to write as little CSS as possible to ensure the website remains lightweight. We maximize the utilization of the Bootstrap framework to achieve this. 
+
+Further, we are using also [FontAwesome](https://fontawesome.com/) free icons. The icons are loaded in the `src/_includes/css/main.css` file.
+
+# Submitting your Changes
+
+Assuming you have made all necessary changes and tested them on the development server, you can submit a pull request to the `master` branch. The pull request will be reviewed and merged by the website maintainers.
+
+Steps to contribute your updates:
+
+1. Commit your changes to your forked repository:
+   - Commit the changes with a meaningful message
+   - Push the changes to your forked repository
+1. Create a pull request to the main repository:
+   - You can create a pull request from your forked repository by navigating to Pull requests page and click **New pull request** button
+   - Select the **master** branch as the base branch and your branch as the compare branch
+   - Click **Create pull request** button
+
+Once your pull request has been reviewed and approved, your changes will be merged into the main repository and deployed to the website.

en/contributors/website/deployment-azure.md

@@ -0,0 +1,73 @@
+# Deployment Azure
+
+- [Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS](#step-by-step-guide-to-deploying-azure-web-apps-windows-with-iis)
+  - [Setting up a new Azure Web App (Windows) with IIS](#setting-up-a-new-azure-web-app-windows-with-iis)
+  - [Adjusting the Web App Configuration](#adjusting-the-web-app-configuration)
+  - [Modifying the GitHub Action](#modifying-the-github-action)
+
+# Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS
+
+This guide assumes you already have permission to access the Azure subscription.
+
+## Setting up a new Azure Web App (Windows) with IIS
+
+These instructions pertain to the staging environment. For the production environment, follow the same steps, but with a different web app name.
+
+1. Navigate to the [Azure Portal](https://portal.azure.com/)
+1. Select **Create a resource**
+1. Choose **Create a Web App**
+1. In the Basic Tab
+   - Choose your existing subscription and resource group
+   - Under Instance Details, enter:
+      - Name: **stride-website-staging**
+      - Publish: **Code**
+      - Runtime stack: **ASP.NET V4.8**
+      - OS: **Windows**
+      - Region: as the current web
+      - Pricing Plan - An existing App Service Plan should appear if the region and resource group match that of the existing web app. Currently we use **Standard S1**.
+      - Click **Next**
+1. In the Deployment Tab - This step can be completed later if preferred.
+   - Enable Continuous deployment
+   - Select account, organisation `Stride`, repository `stride-website` and branch `staging-next`
+   - Click **Next**
+1. In the Monitoring Tab
+   - Leave all settings as default
+   - Click **Next**
+1. Monitoring Tab
+   - Disable Application Insights - This is not needed at this stage
+   - Click **Next**
+1. In the Tags Tab
+   - Leave this blank unless you wish to add tags
+   - Click **Next**
+1. In the Review Tab
+   - Review your settings
+   - Click **Create**
+   - The GitHub Action will be added to the repository and run automatically. It will fail at this stage, but this will be resolved in the subsequent steps.
+
+## Adjusting the Web App Configuration
+
+1. Proceed to the newly created Web App
+1. Click on **Configuration**
+1. Select **General Settings**
+1. Change the Http Version to **2.0**
+1. Click **Save** to apply the changes
+
+## Modifying the GitHub Action
+
+The previous step will have added a GitHub Action to the repository, which will fail at this point. You need to modify the GitHub Action to correct the issue.
+
+1. Navigate to the repository
+1. Select Actions
+1. You have the option to stop the currently running action
+1. Locate the new GitHub Action *(within this folder Stride Website -> staging-next repo -> .github -> workflows)* which was automatically generated by the Azure Portal. We will need to reference the properties app-name and publish-profile and disable the push trigger.
+   - To disable the push trigger, retain only **workflow_dispatch** (manual trigger) as shown below:
+    ```
+    on:
+    #  push:
+    #    branches:
+    #      - staging-next
+        workflow_dispatch:
+    ```
+1. Open the `stride-website-staging-azure.yml` workflow and update it with the properties from the previous step. Save your changes.
+1. This workflow may also need to be added to the production branch master if it is not already there.
+1. Execute the workflow stride-website-staging-azure.yml. Ensure you select the correct branch staging-next and click **Run workflow**. This action will deploy the website to the Azure Web App.

en/contributors/website/deployment.md

@@ -0,0 +1,79 @@
+# Table of Contents
+
+We tested five different deployment methods (GitHub Pages, Azure Web App Windows/Linux IIS/Kestrel, Azure Static Web Apps) and chose to continue with the existing Azure Web Apps IIS ASP.NET 4.8 infrastructure.
+
+- [Azure Web Apps](#azure-web-apps)
+  - [Deploying with .NET Framework](#deploying-with-net-framework)
+- [Deployment To Wiki](#deployment-to-wiki)
+- [Deployment Tests](#deployment-tests)
+
+# Azure Web Apps
+
+## Deploying with .NET Framework
+
+The .NET Framework uses IIS to host the website, which serves any static files.
+
+The [web.config](https://github.com/stride3d/stride-website/blob/master/web.config) file is used to configure IIS, including:
+
+- Mime types for static files
+- Redirects
+- Gzip compression
+- Static file caching
+- Custom Headers
+- Custom 404
+- Caching
+
+The GitHub action [stride-website-release-azure.yml](https://github.com/stride3d/stride-website/blob/master/.github/workflows/stride-website-release-azure.yml) builds the website and deploys it to Azure Web Apps.
+
+[Step-by-Step Deployment Guide for Azure Web Apps (Windows) with IIS and Stride Website](Deployment-Azure).
+
+# Deployment To Wiki
+
+While the GitHub wiki offers a convenient way to document a project, it has some drawbacks, such as not being part of the repository by default and restricting edits to collaborators. To address these issues and allow community editing, we have implemented an alternative approach.
+
+We created a `wiki` folder within the repository, which contains all wiki pages. The GitHub action `stride-web-wiki.yml` deploys the `wiki` folder to the GitHub wiki.
+
+The GitHub action [stride-website-wiki.yml](https://github.com/stride3d/stride-website/blob/master/.github/workflows/stride-website-wiki.yml) is triggered when:
+
+1. A push/merge is made to the `master` branch of the `stride-website` repository
+1. The action is manually triggered
+
+You can manually trigger the action by navigating to the **Actions** tab and clicking the **Run workflow** button.
+
+This GitHub action only monitors changes to the `wiki` folder. Any modifications made to the `wiki` folder will be deployed to the GitHub wiki. Note that changes to the `wiki` folder will not trigger other GitHub actions.
+
+We use the [Wiki Page Creator GitHub Action](https://github.com/marketplace/actions/wiki-page-creator-action) to deploy the `wiki` folder to the GitHub wiki.
+
+**Note**: ⚠️ A GitHub personal access fine-grained token (GH_PAT) is required for authentication. This token is stored as a secret in the repository settings.⚠️
+
+# Deployment Tests
+
+Tests were discussed here https://github.com/stride3d/stride-website/issues/71
+
+The basic **load tests** we conducted by measuring the `/blog/` page for different deployment scenarios. We only performed 1-2 tests, as this process is time-consuming and likely unnecessary:
+
+- Hardware for Azure App Service: Basic B1, 1 CPU, 1.75 Memory, CPU type unknown, most likely different for Windows and Linux
+- Hardware for GitHub Pages: Unknown
+- Test was running 60 seconds, 2 threads
+
+**Results**
+
+1. GitHup Pages - **737 req/sec**
+   - We have no control over various aspects, including security headers, redirects, and caching.
+1. ASP.NET 4.8 with IIS - **186 req/sec**
+   - We have full control of everything through `web.config`, including security headers, redirects, caching, ..
+1. SWA (Static Web App - Paid) - **160 req/sec**
+   - No familiar with but should be fair enough control through `staticwebapp.config.json`
+1. .NET 7 (Windows) with IIS (in-process) - **127 req/sec**
+   - We have full control of everything through `web.config`, including security headers, redirects, caching, ..
+1. .NET 7 (Windows) with Kestrel (out-of-process) - **88 req/sec**
+   - We have full control of everything through ASP.NET Core middleware, including security headers, redirects, caching, .. 
+ 1. .NET 7 (Linux) with Kestrel - ***38 req/sec**
+    - We have full control of everything through ASP.NET Core middleware, including security headers, redirects, caching, .. 
+
+**\*** I believe that Linux was slow due to the Azure App Service configuration, where Linux performance is purposely lower but also cheaper.
+
+**Recommendation**
+
+1. **ASP.NET 4.8 with IIS** for Staging
+1. **ASP.NET 4.8 with IIS** for Release

en/contributors/website/eleventy.md

@@ -0,0 +1,144 @@
+# Eleventy site generator
+[Eleventy](https://www.11ty.dev/) is a static site generator that uses JavaScript as its templating language. It is a very powerful tool that allows us to create a website with a lot of flexibility and customization. It is also very easy to use and learn. This section will cover the basics of Eleventy configuration on the Stride website. Creating and updating the content is described in our [Content](Content) section.
+
+We used to use **Jekyll** as our static site generator, but we decided to switch to Eleventy because of its flexibility and ease of use. We also wanted to use a tool that is more widely used and supported, which is why we decided to switch to Eleventy.
+
+# Table of Contents
+
+- [Packages and Dependencies](#packages-and-dependencies)
+- [Configuration](#configuration)
+- [Global Data](#global-data)
+- [Folder Structure](#folder-structure)
+- [Layouts](#layouts)
+- [Includes](#includes)
+- [Advanced Topics](#advanced-topics)
+  - [Creating Custom Shortcodes and Includes](#creating-custom-shortcodes-and-includes)
+  
+# Packages and Dependencies
+
+Eleventy is a **Node.js** application. Please follow our [Installation](Installation) guide to install Node.js and all the required dependencies.
+
+Packages we currently use:
+
+- Dev Dependencies
+  - `@11ty/eleventy` v2.0 - Main package for the static site generator
+  - `@11ty/eleventy-plugin-rss` - RSS feed plugin
+  - `@11ty/eleventy-plugin-syntaxhighlight` - Syntax highlighting plugin (dark and light theme in `/css/syntax-highlighting.scss`)
+- Dependencies
+  - `@11ty/eleventy-fetch` - Fetch plugin
+  - `@fortawesome/fontawesome-free` - Font Awesome with a variety of awesome icons 😃🤩
+  - `bootstrap` - Bootstrap 5.3
+  - `lunr` - Lunr search plugin that consumes local `search.json (/search.liquid)` and remote `index.json` from the docs website; the script is in `/assets/scripts/search.liquid`
+  - `markdown-it-anchor` - Anchor plugin for markdown-it
+  - `markdown-it-table-of-contents` - Table of contents plugin for markdown-it, used mainly in blog posts as `[[TOC]]`
+  - `sass` - Sass compiler for our `/css/*.scss` files
+
+# Configuration
+
+The Eleventy configuration is located in the `.eleventy.js` file at the root of the project. This file contains all the configuration settings for the Eleventy build process. As it is a JavaScript file, you can utilize all JavaScript features and syntax within it.
+
+**What do you find in this file?**
+
+- plugins configuration - All the plugins we use
+- pass through files - Files that are copied to the output folder without any processing
+- custom collections - Custom collections used in the templates like `tagList` and `yearList`
+- filters - Custom filters used in the templates
+- custom shortcodes - Custom [shortcodes](Content#shortcodes-and-includes) used in the templates, pages or blog posts.
+
+The file is well-commented and should be self-explanatory. If you need to add a new configuration, please follow the existing structure and include a comment to explain the new configuration.
+
+# Global Data
+
+Global data is located in the `/_data` folder. It contains all the global data that is accessible in all the templates. Currently, we have these JSON files:
+
+- `site.json` - Contains all the global data for the website, used in the templates and shortcodes.
+- `features.json` - Contains all the data for the features page and its features sections.
+- `sponsors.json` - Contains sponsor information used in multiple places on the website.
+
+Our `site.json` file contains these main properties, with only some listed below:
+
+- `dark-mode` - Dark mode toggle `true|false`
+- `alert-banner` - Global banner below navigation `true|false`
+- `docs-search` - Includes docs website content in the search `true|false`
+- `links` - Contains all the main links used across the website (social media, docs, GitHub, etc.)
+- `authors` - Contains all the authors used in the blog posts
+- repeated data - like `csharp-version`, `dotnet-version`, `download-version` which are used in multiple places on the website and are updated with every release
+
+# Folder Structure
+
+The folder structure is crucial for Eleventy, as it determines the output of the build process. The folder structure is organized as follows:
+
+**Folders**
+
+- `/_data` - Global data
+- `/_drafts` - Draft blog posts (excluded from the build process)
+- `/_includes` - Reusable code snippets that can be included in multiple pages
+- `/_layouts` -  Main layout pages (`container`, `page`, `post`) using the primary layout page `default`
+- `/_site` - Output build folder (excluded in `.gitignore` and used for deployment) 
+- `/assets` - Additional assets, such as scripts
+- `/blog` - Blog content page
+- `/css` - Website stylesheets
+- `/files` - Stride installer files
+- `/images` - Images and MP4 files used on the website
+- `/legal` - Content page
+- `/posts` - Blog posts
+- `/posts/2014-2021` - Old blog posts which are merged to the same output folder as `/posts`
+  - this folder is only for convenience to easily access new posts
+- `/wiki` - Excluded from build process, used only for wiki deployment
+
+**Files**
+
+- `/posts/posts.json` - Blog post defaults so they don't have to be repeated in the front matter
+- `*.html` - HTML content pages
+- `*.liquid` - Liquid content pages
+- `*.md` - Markdown content pages
+- `*.njk` - Nunjucks content pages
+- `.eleventy.js` - Eleventy configuration file
+- `.eleventyignore` - Lists files and folders not to be processed by Eleventy
+- `package.json` - Eleventy project metadata used by `npm`
+
+**Non Eleventy files:**
+
+- `.nojekyll` - Special file for GitHub Pages
+- `CNAME` - Custom domain for GitHub Pages
+- `appsettings.json` - ASP.NET Core configuration file
+- `appsettings.Development.json` - ASP.NET Core configuration file
+- `Program.cs` - ASP.NET Core startup file
+- `Stride.Web.csproj` - ASP.NET Core project file
+- `Stride.Web.sln` - ASP.NET Core solution file
+- `Stride.Web.csproj.user` - ASP.NET Core project file
+- `web.config` - Configuration file for IIS deployment
+- `web.Release.config` - Configuration file for Windows ASP.NET Core deployment
+
+
+**Note:** This project includes ASP.NET Core solution and files, as they can be used seamlessly with Eleventy. Read more about this in our [Installation](Installation#asp-net-core) section.
+
+
+# Layouts
+
+All the layouts are located in the `/_layouts` folder. The `default` layout is the main layout page and is used by all the other layouts. 
+
+- `default` - Main layout page
+- `container` - Used by some pages
+- `page` - Used by most of the pages
+- `post` - Used by blog posts
+
+# Includes
+
+All the includes are located in the `/_includes` folder. The includes are reusable code snippets that can be included in multiple pages.
+
+Some includes are used solely by the layouts, while others are used by the content pages.
+
+# Advanced Topics
+
+## Creating Custom Shortcodes and Includes
+
+If you need to create a custom shortcode or include, please follow the existing structure and [include a comment](Content#shortcodes-and-includes) to explain the new shortcode or include.
+
+The shortcodes are defined in the `.eleventy.js` file, while the includes are located in the `/_includes` folder.
+
+You can explore the existing shortcodes and includes to get a better understanding of how they work and how to create new ones.
+
+## Performance Optimization
+
+ToDo: Remove this section if not needed

en/contributors/website/figma.md

@@ -0,0 +1,11 @@
+# Figma
+For Stride we have official logo's for various solutions and occasions.
+
+You can find the official [Figma designs here](https://www.figma.com/file/LwUrbnxR1hVkO53R3yqpQT/STRIDE3D?type=design&node-id=126-192&mode=design)
+
+We have logo's for the following scenarios
+* Stride logo
+* Stride icons
+* Stride website mockups
+* Stride tutorial thumbnails
+* Stride splash screens

en/contributors/website/index.md

@@ -1,3 +1,73 @@
-# Contribute to website
+# Welcome to the Stride Website Wiki.
 
-https://github.com/stride3d/stride-website/wiki 
+This wiki serves as a comprehensive guide to help you navigate and contribute to the **Stride website**.
+
+If you're looking to make minor changes, such as adding or updating a post or page, or fixing a typo, you can jump straight to the [Content Updates](content#content-updates) section.
+
+For more extensive updates 🤯🤦‍♂️ and a deeper understanding of the website project, we recommend exploring all the sections provided. Happy browsing and contributing!
+
+Technologies we use to build our website:
+
+- [Eleventy](https://www.11ty.dev/docs/) (static site generator)
+- Markdown
+- Mainly [Liquid](https://shopify.github.io/liquid/) and a bit Nunjucks (template engines)
+- Bootstrap
+- Font Awesome
+- GitHub Wiki
+- HTML, JavaScript, CSS, SCSS, and JSON
+- GitHub Actions (CI/CD) - Don't worry, this is already set up, you don't need to worry about it.
+
+## Important Links
+
+- https://www.stride3d.net/legal/privacy-policy/
+    - This links is used in the Stride Installer
+- https://www.stride3d.net/feed.xml
+    - This feed is loaded in the Stride Launcher
+
+## Table of Contents
+
+- [Installation](installation.md)
+    - [Prerequisites](installation.md#prerequisites)
+    - [Installation Steps](installation.md#installation-steps)
+    - [Running the Development Server](installation.md#running-the-development-server)
+    - [ASP.NET Core](installation.md#aspnet-core)
+- [Content](content.md)
+    - [Content Updates](content.md#content-updates)
+        - [Small Updates](content.md#small-updates)
+        - [Major Updates](content.md#major-updates)
+        - [Updating Wiki](content.md#updating-wiki)
+    - [Creating New Post](content.md#creating-new-post)
+        - [Post Naming Convention](content.md#post-naming-convention)
+        - [Post Front Matter](content.md#post-front-matter)
+        - [Post Content](content.md#post-content)
+        - [Excerpt](content.md#excerpt)
+    - [Creating New Page](content.md#creating-new-page)
+        - [Page Front Matter](content.md#page-front-matter)
+    - [Shortcodes and Includes](content.md#shortcodes-and-includes)
+        - [Alert](content.md#alert)
+        - [Alert Banner](content.md#alert-banner)
+        - [Image](content.md#image)
+        - [Video](content.md#video)
+    - [Web Assets](content.md#web-assets)
+    - [Styling](content.md#styling)
+        - [Bootstrap Customization](content.md#bootstrap-customization)
+        - [CSS Guidelines](content.md#css-guidlines)
+    - [Submitting your Changes](content.md#submitting-your-changes)
+- [Roadmap](roadmap.md)
+- [Eleventy](eleventy.md)
+    - [Packages and Dependencies](eleventy.md#packages-and-dependencies)
+    - [Configuration](eleventy.md#configuration)
+    - [Global Data](eleventy.md#global-data)
+    - [Folder Structure](eleventy.md#folder-structure)
+    - [Layouts](eleventy.md#layouts)
+    - [Includes](eleventy.md#includes)
+    - [Advanced Topics](eleventy.md#advanced-topics)
+        - [Creating Custom Shortcodes and Includes](eleventy.md#creating-custom-shortcodes-and-includes)
+- [Deployment](deployment.md)
+    - [Azure Web Apps](deployment.md#azure-web-apps)
+        - [Deploying with .NET Framework](deployment.md#deploying-with-net-framework)
+    - [Deployment To Wiki](deployment.md#deployment-to-wiki)
+- [Troubleshooting and FAQ](troubleshooting-and-faq.md)
+    - [Known Issues](troubleshooting-and-faq.md#known-issues)
+    - [Common Issues and Solutions](troubleshooting-and-faq.md#common-issues-and-solutions)
+    - [Frequently Asked Questions](troubleshooting-and-faq.md#frequently-asked-questions)

en/contributors/website/installation.md

@@ -0,0 +1,63 @@
+# Installation
+This guide will walk you through the steps to install the Stride website on your local machine for development purposes. Although we use the Windows operating system for development, the steps should be similar for other operating systems.
+
+[Minor updates](Content#small-updates) can be made directly on GitHub. However, for [more significant updates](Content#major-updates) that affect multiple pages, we recommend using a local development environment so you can see the impact of your changes beforehand. This is because we use the **Eleventy** static site generator, and in some cases, all pages need to be regenerated. This approach helps you assess your changes before submitting a pull request.
+
+This guide assumes you have a basic understanding of the technologies used in the Stride website.
+
+# Table of Contents
+
+- [Prerequisites](#prerequisites)
+- [Installation Steps](#installation-steps)
+- [Running the Development Server](#running-the-development-server)
+- [ASP.NET Core](#aspnet-core)
+
+# Prerequisites
+
+Before updating the Stride website, ensure you are familiar with the following prerequisites:
+
+1. **Node.js 16+ (including npm) installed:** You can download the installer from the [Node.js website](https://nodejs.org/en/download)
+   - If Node.js is already installed, ensure you have version 16 or higher. You can check your version by running `node -v` in a terminal. Note that `npm`, the package manager for Node.js, is included with the installation
+1. **Git installed:** You will need Git for version control. If you don't have Git installed, you can download it from the [Git website](https://git-scm.com/downloads)
+1. **Development IDE of choice:** Choose an Integrated Development Environment (IDE) that you're comfortable with for development. Although there are various popular choices, such as Visual Studio, Visual Studio Code, and others, this guide will focus on using **Visual Studio**, as it is the primary IDE for the Stride project, and as of writing, we use **Visual Studio 2022**. You can download the free Community edition from the [Visual Studio website](https://visualstudio.microsoft.com/downloads/)
+
+# Installation Steps
+
+1. ❓You might want to create an issue so we can track your contribution and avoid duplicate work. If you're unsure whether your contribution is needed, feel free to create an issue and ask
+1. 🍴 Fork the repository by navigating to the [Stride website repository](https://github.com/stride3d/stride-website) and clicking the **Fork** button in the top-right corner
+1. 📥 Clone your forked repository using the following command, replacing `your-username` with your GitHub username: `git clone https://github.com/your-username/stride-website.git`
+   - 💡**Tip:** It's a good idea to create a new branch for each feature or bug fix you work on. This helps keep your forked repository organized and makes it easier to manage multiple pull requests
+1. 📁 Go to the project folder `cd stride-website`
+1. 🚀 Run `npm install` to install all dependencies
+
+# Running the Development Server
+
+1. 🚀 Run `npm start` (`npx @11ty/eleventy --serve`) in the command line to start the development server
+1. 📋 You should see many logs in the command line, indicating the progress and displaying any errors
+   - ⚠️ A Windows Security warning may appear on the first run (Allow Node.js JavaScript Runtime to communicate on these networks). Click **Allow access**
+1. 🌐 Open the site in your browser by navigating to `http://localhost:8080/`
+1. 💻 Open the project in Visual Studio by opening the `Stride.Web.sln` solution file, or use the IDE of your choice 
+1. 🔄 Once you save the updated file, the website will automatically refresh in the browser
+1. 😃 Happy coding!
+
+*ToDo: Attach a screenshot of the command line output*
+
+Let's [update the content](Content) now!
+
+# ASP.NET Core
+
+This static website can also be hosted using ASP.NET Core.
+
+Although we're not currently using the ASP.NET Core website, it remains available for future use. If necessary, we can integrate dynamic ASP.NET Core pages with the static pages generated by Eleventy.
+
+To edit the website through Visual Studio, open the `Stride.Web.sln` solution, which will load the website in the IDE. You can then modify the pages and content and run the website directly from Visual Studio.
+
+During the Visual Studio build process, `npm run build` is executed, generating the static website in the same `_site` folder as previously described. The ASP.NET Core website uses this folder instead of the default `wwwroot`. This customization is specified in the `Program.cs` file.
+
+```csharp
+var builder = WebApplication.CreateBuilder(new WebApplicationOptions
+{
+    Args = args,
+    WebRootPath = "_site" // Set the folder where the static files are located (e.g., Eleventy output folder)
+});
+```

en/contributors/website/roadmap.md

@@ -0,0 +1,11 @@
+# Website roadmap
+This is a proposal for our website roadmap and ongoing website development plan.
+
+- Tackle existing issues listed in the [Issues](https://github.com/stride3d/stride-website/issues)
+- Convert images to WebP for better performance
+- Streamline the website by decoupling media from the site
+  - Host videos on YouTube
+  - Host images in Azure Blob Storage or another location
+- Optimize the website for possible deployment on Azure Static Web Apps
+  
+

en/contributors/website/troubleshooting-and-faq.md

@@ -0,0 +1,21 @@
+# Troubleshooting and FAQ
+- [Known Issues](#known-issues)
+- [Common Issues and Solutions](#common-issues-and-solutions)
+- [Frequently Asked Questions](#frequently-asked-questions)
+
+# Known Issues
+
+1. **Sponsor Page - Widget Incompatibility with dark theme:** Widgets on the Sponsor Page currently do not support the dark theme. As a workaround, we can either fetch data from https://opencollective.com/stride3d/members/all.json and render it before deployment or make it dynamic. Both options would give us more control over the content and design, and allow for better compatibility with the dark theme in the future.
+1. **Search Page - Lack of pagination:** At present, the Search Page does not have pagination, which limits the maximum number of search results displayed to 100. To resolve this issue, we can implement a pager in JavaScript. This would enable users to navigate through multiple pages of search results, providing a more comprehensive view of the available content. 
+
+# Common Issues and Solutions
+
+Any issue should be added to Stride Website [GitHub issues](https://github.com/stride3d/stride-website/issues) so it can be tracked and elaborated by the community.
+
+# Frequently Asked Questions
+
+**Q:** I just want to fix a typo in a post. Do I need to follow your installation steps?
+
+**A:** *No, you can fix the typo directly on the GitHub website. However, you will still need to fork the repo, make your update on the main branch or a new branch, and then create a pull request. You can follow this guide for [minor updates](Content#small-updates).*
+
+

wiki/Home.md

@@ -18,11 +18,6 @@ Here are the technologies we use to build our website:
 - PowerShell scripts
 - GitHub Actions (CI/CD) - Don't worry, this is already set up, you don't need to worry about it.
 
-ToDo:
-
-Include this somewhere https://www.figma.com/file/LwUrbnxR1hVkO53R3yqpQT/STRIDE3D?type=design&node-id=126-192&mode=design
-
-
 ## Table of Contents
 
 - [Understanding the Stride Documentation Generation Pipeline](Understanding-the-Stride-Documentation-Generation-Pipeline)