Skip to content

Commit 2c1583f

Browse files
committedOct 18, 2023
Test with moving docs and website wiki to contributor docs
1 parent 6ce50fa commit 2c1583f

24 files changed

+1774
-24
lines changed
 

‎.gitignore

+2-1
Original file line numberDiff line numberDiff line change
@@ -363,4 +363,5 @@ MigrationBackup/
363363
FodyWeavers.xsd
364364

365365
_site
366-
jp_tmp/*
366+
jp_tmp/*
367+
.idea
+244
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,244 @@
1+
# Table of Contents
2+
3+
- [Content Updates](#content-updates)
4+
- [Small Updates](#small-updates)
5+
- [Major Updates](#major-updates)
6+
- [Updating Wiki](#updating-wiki)
7+
- [Manual](#manual)
8+
- [Creating New Page](#creating-new-manual-page)
9+
- [Tutorial](#tutorial)
10+
- [Creating New Tutorial](#creating-new-tutorial-page)
11+
- [Creating New Post](#creating-new-post)
12+
- [Post Naming Convention](#post-naming-convention)
13+
- [Post Front Matter](#post-front-matter)
14+
- [Post Content](#post-content)
15+
- [Excerpt](#excerpt)
16+
- [Creating New Page](#creating-new-page)
17+
- [Page Front Matter](#page-front-matter)
18+
- [Shortcodes and Includes](#shortcodes-and-includes)
19+
- [Alert](#alert)
20+
- [Alert Banner](#alert-banner)
21+
- [Image](#image)
22+
- [Video](#video)
23+
- [Web Assets](#web-assets)
24+
- [Styling](#styling)
25+
- [Bootstrap Customization](#bootstrap-customization)
26+
- [CSS Guidelines](#css-guidlines)
27+
- [Submitting your Changes](#submitting-your-changes)
28+
29+
# Content Updates
30+
31+
If you want to contribute and update the website, please follow the instructions below.
32+
33+
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.
34+
35+
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.
36+
37+
You are always welcome to create an issue to discuss your changes before you start working on them.
38+
39+
## Small Updates
40+
41+
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.
42+
43+
### What is a small update?
44+
45+
We can define small updates as changes to the content of the website:
46+
47+
- Update the content of an existing page (manual, tutorial or release note)
48+
- Add a [new manual](#creating-new-manual) or [tutorial](#creating-new-tutorial)
49+
- Fix a typo
50+
51+
### Steps
52+
53+
**Note:** This guide assumes you are already familiar with updating files in GitHub.
54+
55+
1. Go to the [Stride Docs GitHub](https://github.com/stride3d/stride-docs) repository.
56+
1. Locate the file you wish to edit.
57+
1. Click the `Edit this file` (pencil) icon in the top right corner.
58+
1. If prompted, fork the repository by clicking `Fork this repository`.
59+
1. Make your changes to the file, then write a brief commit message describing the changes.
60+
1. Click on the `Propose changes` button.
61+
1. On the next screen, click the `Create pull request` button.
62+
1. Provide a title and description for your pull request, and click on `Create pull request` again.
63+
1. Wait for the review and merge.
64+
65+
## Major Updates
66+
67+
[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.
68+
69+
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:
70+
71+
- Update docfx version
72+
- Update layouts
73+
74+
You would start with the local development environment, which is described in the [Installation](Installation) section.
75+
76+
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.
77+
78+
## Updating Wiki
79+
80+
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.
81+
82+
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.
83+
84+
You can update the wiki pages as any other content pages, by following the steps in the [Small Updates](#small-updates) section.
85+
86+
⚠️**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.
87+
88+
# Manual
89+
90+
These pages contain information about how to use Stride, an open-source C# game engine.
91+
92+
## Creating New Manual Page
93+
94+
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.
95+
- If you created a new folder, make sue that you create also index.md file in this folder.
96+
1. Use any existing page as a template for the new page.
97+
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.
98+
99+
## Naming Convention
100+
101+
Observe existing pages and folders for the naming convention.
102+
103+
## Media
104+
105+
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.
106+
107+
# Tutorial
108+
109+
These pages contain tutorials on how to use Stride, an open-source C# game engine.
110+
111+
## Creating New Tutorial Page
112+
113+
1. Create a new tutorial folder in the `tutorial` folder.
114+
1. Create a new index.md file in this folder. Observe existing tutorials for the content of this file.
115+
1. Create markdown files for each step of the tutorial. Observe existing tutorials structure for the content of these files.
116+
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.
117+
118+
## Naming Convention
119+
120+
Observe existing pages and folders for the naming convention.
121+
122+
## Media
123+
124+
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.
125+
126+
# Shortcodes and Includes
127+
128+
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.
129+
130+
## Alert
131+
132+
```liquid
133+
> [!NOTE]
134+
> Information the user should notice even if skimming.
135+
136+
> [!TIP]
137+
> Optional information to help a user be more successful.
138+
139+
> [!IMPORTANT]
140+
> Essential information required for user success.
141+
142+
> [!CAUTION]
143+
> Negative potential consequences of an action.
144+
145+
> [!WARNING]
146+
> Dangerous certain consequences of an action.
147+
```
148+
149+
## Video
150+
151+
We should consider hosting our videos on YouTube whenever possible.
152+
153+
You can embed a video by using the following Markdown syntax:
154+
155+
`> [!Video embed_link]`
156+
157+
Replace `embed_link` with the YouTube video link. This shortcode renders as:
158+
159+
Example:
160+
```md
161+
> [!Video https://www.youtube.com/embed/-IXw64hZAqg]
162+
```
163+
164+
To embed a video hosted elsewhere, use the following shortcode:
165+
166+
### Hosting our own videos
167+
168+
`{% video 'url' %}`
169+
170+
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:
171+
172+
```html
173+
<!-- jpgUrl = url.replace(".mp4", ".jpg") // make sure you have a pair .mp4 and .jpg -->
174+
<div class="ratio ratio-16x9 mb-2"><video autoplay loop class="responsive-video" poster="jpgUrl"><source src="url" type="video/mp4"></video></div>
175+
```
176+
177+
### How to encode videos
178+
179+
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.
180+
It is better to stick to a format with low requirements such as H264 baseline profile (works almost everywhere).
181+
182+
To do so, process the file using [fmpeg](https://ffmpeg.org/download.html):
183+
184+
```
185+
ffmpeg -i myvideo_original.mp4 -profile:v baseline -level 3.0 -an myvideo.mp4
186+
```
187+
188+
Also, generate a static thumbnail so that people can preview it before downloading the video (very important on mobile):
189+
190+
ToDo: Check if webp can be generated from ffmpeg
191+
192+
```
193+
ffmpeg -i myvideo.mp4 -vframes 1 -f image2 -y myvideo.jpg
194+
```
195+
196+
ToDo: Maybe we could provide a simple tool to do that without using command line.
197+
198+
199+
200+
# Web Assets
201+
202+
Our main web assets are:
203+
204+
- `css/custom-bootstrap.scss` - Slightly modified Bootstrap theme
205+
- Some Bootstrap variables are overridden
206+
- Some Bootstrap parts are disabled so they don't bloat the website (e.g. button-group, breadcrumb, ..)
207+
- `css/styles.scss` - Main stylesheet
208+
- Styles also Dark Mode
209+
- `css/syntax-highlighting.scss` - Imported prismjs styling, Light and Dark Mode
210+
- `assets/search.liquid` - Script for search
211+
- `assets/site.liquid` - Not used
212+
- `assets/theme-selector.liquid` - Script for Ligth and Dark Mode selection
213+
- `search.liquid` - Renders as `search.json` contains search meta
214+
215+
216+
# Styling
217+
218+
## Bootstrap Customization
219+
220+
Our website uses the [Bootstrap](https://getbootstrap.com/) framework, version **5.3**.
221+
222+
Prioritize using Bootstrap styling before introducing any custom styles.
223+
224+
## CSS Guidelines
225+
226+
We aim to write minimum CSS code to keep the website lightweight and use the Bootstrap framework as much as possible.
227+
228+
Further, we are using also [FontAwesome](https://fontawesome.com/) free icons. The icons are loaded in the `src/_includes/css/main.css` file.
229+
230+
# Submitting your Changes
231+
232+
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.
233+
234+
Steps to contribute your updates:
235+
236+
1. Commit your changes to your forked repository:
237+
- Commit the changes with a meaningful message
238+
- Push the changes to your forked repository
239+
1. Create a pull request to the main repository:
240+
- You can create a pull request from your forked repository by navigating to Pull requests page and click **New pull request** button
241+
- Select the **master** branch as the base branch and your branch as the compare branch
242+
- Click **Create pull request** button
243+
244+
Once your pull request has been reviewed and approved, your changes will be merged into the main repository and deployed to the website.
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
# Table of Contents
2+
3+
- [Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS](#step-by-step-guide-to-deploying-azure-web-apps-windows-with-iis)
4+
- [Setting up a new Azure Web App (Windows) with IIS](#setting-up-a-new-azure-web-app-windows-with-iis)
5+
- [Adjusting the Web App Configuration](#adjusting-the-web-app-configuration)
6+
- [Modifying the GitHub Action](#modifying-the-github-action)
7+
8+
# Step-by-Step Guide to Deploying Azure Web Apps (Windows) with IIS
9+
10+
This guide assumes you already have permission to access the Azure subscription.
11+
12+
## Setting up a new Azure Web App (Windows) with IIS
13+
14+
These instructions pertain to the staging environment. For the production environment, follow the same steps, but with a different web app name.
15+
16+
1. Navigate to the [Azure Portal](https://portal.azure.com/)
17+
1. Select **Create a resource**
18+
1. Choose **Create a Web App**
19+
1. In the Basic Tab
20+
- Choose your existing subscription and resource group
21+
- Under Instance Details, enter:
22+
- Name: **stride-website-staging**
23+
- Publish: **Code**
24+
- Runtime stack: **ASP.NET V4.8**
25+
- OS: **Windows**
26+
- Region: as the current web
27+
- 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**.
28+
- Click **Next**
29+
1. In the Deployment Tab - This step can be completed later if preferred.
30+
- Enable Continuous deployment
31+
- Select account, organisation `Stride`, repository `stride-website` and branch `staging-next`
32+
- Click **Next**
33+
1. In the Monitoring Tab
34+
- Leave all settings as default
35+
- Click **Next**
36+
1. Monitoring Tab
37+
- Disable Application Insights - This is not needed at this stage
38+
- Click **Next**
39+
1. In the Tags Tab
40+
- Leave this blank unless you wish to add tags
41+
- Click **Next**
42+
1. In the Review Tab
43+
- Review your settings
44+
- Click **Create**
45+
- 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.
46+
47+
## Adjusting the Web App Configuration
48+
49+
1. Proceed to the newly created Web App
50+
1. Click on **Configuration**
51+
1. Select **General Settings**
52+
1. Change the Http Version to **2.0**
53+
1. Click **Save** to apply the changes
54+
55+
## Modifying the GitHub Action
56+
57+
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.
58+
59+
1. Navigate to the repository
60+
1. Select Actions
61+
1. You have the option to stop the currently running action
62+
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.
63+
- To disable the push trigger, retain only **workflow_dispatch** (manual trigger) as shown below:
64+
```
65+
on:
66+
# push:
67+
# branches:
68+
# - staging-next
69+
workflow_dispatch:
70+
```
71+
1. Open the `stride-website-staging-azure.yml` workflow and update it with the properties from the previous step. Save your changes.
72+
1. This workflow may also need to be added to the production branch master if it is not already there.
73+
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.

0 commit comments

Comments
 (0)
Please sign in to comment.