-
Notifications
You must be signed in to change notification settings - Fork 68
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #211 from stride3d/master
Initiating deployment of latest docs updates to staging
- Loading branch information
Showing
16 changed files
with
146 additions
and
247 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,223 +1,136 @@ | ||
| # Documentation content | ||
| - [Content Updates](#content-updates) | ||
| - [Small Updates](#small-updates) | ||
| - [Major Updates](#major-updates) | ||
| - [Manual](#manual) | ||
| - [Creating New Page](#creating-new-manual-page) | ||
| - [Tutorial](#tutorial) | ||
| - [Creating New Tutorial](#creating-new-tutorial-page) | ||
| - [Shortcodes and Includes](#shortcodes-and-includes) | ||
| - [Alert](#alert) | ||
| - [Video](#video) | ||
| - [Web Assets](#web-assets) | ||
| - [Styling](#styling) | ||
| - [Bootstrap Customization](#bootstrap-customization) | ||
| - [CSS Guidelines](#css-guidelines) | ||
| - [Submitting your Changes](#submitting-your-changes) | ||
|
|
||
| # Content Updates | ||
|
|
||
| ## 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.md) 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. | ||
| You are always welcome to [create an issue](https://github.com/stride3d/stride-docs/issues) to discuss your changes before you start working on them. | ||
|
|
||
| ## Small Updates | ||
| ### 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? | ||
| #### 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-page) or [tutorial](#creating-new-tutorial-page) | ||
| - Update the content of an existing page (manual, tutorial or release note, ..) | ||
| - Add a [new manual](#creating-new-manual-page) or [tutorial](#creating-new-tutorial-page) or any new content | ||
| - Fix a typo | ||
|
|
||
| ### Steps | ||
| #### Steps | ||
|
|
||
| > [!NOTE] | ||
| > This guide assumes that you are already familiar with updating files on GitHub. | ||
| **Note:** This guide assumes you are already familiar with updating files in GitHub. | ||
| For the following instructions, use the [Stride Docs GitHub repository](https://github.com/stride3d/stride-docs): | ||
|
|
||
| 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. | ||
| [!INCLUDE [small-updates](../../includes/small-update-instructions.md)] | ||
|
|
||
| ## Major Updates | ||
| ### 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: | ||
| Major updates can be defined as significant changes to the website's design, where it's beneficial to preview the impact of your changes to ensure they achieve the desired result. This may include: | ||
|
|
||
| - Update docfx version | ||
| - Update layouts | ||
| - Update Docfx version | ||
| - Modifying layouts | ||
| - Revamping design elements | ||
|
|
||
| You would start with the local development environment, which is described in the [Installation](installation.md) section. | ||
| Start by setting up your local development environment, as described in the [Installation](installation.md) section. After making and testing your changes locally, you should create a pull request to merge your changes into the `master` branch. | ||
|
|
||
| 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. | ||
| When submitting a pull request, especially for substantial changes, it's recommended to include **screenshots** or a link to your local deployment. This approach helps maintainers visualize and assess your proposed changes more effectively. If you prefer to use GitHub infrastructure for your demonstrations, refer to our [Deployment to GitHub Pages guide](deployment-azure.md#deployment-to-github-pages) for instructions on deploying via GitHub Actions. | ||
|
|
||
| # Manual | ||
| ## Manual | ||
|
|
||
| These pages contain information about how to use Stride, an open-source C# game engine. | ||
|
|
||
| ## Creating New Manual Page | ||
| > [!IMPORTANT] | ||
| > **SEO Note:** Ensure that the file name includes essential keywords related to the content of the article. This is crucial because the file name dictates the URL of the content page, which plays a significant role in search engine optimization (SEO). | ||
| ### 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. | ||
| - 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. | ||
| 1. Update `toc.yml` (or `toc.md`) file in the `manual` folder to include the new page or folder. The `toc.yml` file contains the table of contents for the manual pages, which is displayed on the left side of the manual pages. These pages are also included in the optionally generated PDF file. | ||
|
|
||
| ## Naming Convention | ||
| ### Naming Convention | ||
|
|
||
| Observe existing pages and folders for the naming convention. | ||
|
|
||
| ## Media | ||
| ### 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 | ||
| ## Tutorial | ||
|
|
||
| These pages contain tutorials on how to use Stride, an open-source C# game engine. | ||
|
|
||
| ## Creating New Tutorial Page | ||
| ### 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 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. | ||
| 1. Update `toc.yml` file in the `tutorial` folder to include the new tutorial folder. The `toc.yml` file contains the table of contents for the tutorial pages, which is displayed on the left side of the tutorial pages. | ||
|
|
||
| ## Naming Convention | ||
| ### Naming Convention | ||
|
|
||
| Observe existing pages and folders for the naming convention. | ||
|
|
||
| ## Media | ||
| ### 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]` | ||
| ## Other Sections | ||
|
|
||
| Replace `embed_link` with the YouTube video link. This shortcode renders as: | ||
| In addition to the Manual and Tutorial sections mentioned above, the same principles apply to both existing and new sections. Follow the established formats and conventions to ensure consistency and clarity throughout the documentation. | ||
|
|
||
| Example: | ||
| ```md | ||
| > [!Video https://www.youtube.com/embed/-IXw64hZAqg] | ||
| ``` | ||
| ## Shortcodes and Includes | ||
|
|
||
| To embed a video hosted elsewhere, use the following shortcode: | ||
| Docfx supports additional markdown syntax to enrich content. These syntaxes are specific to Docfx and **may not render** correctly on other platforms, like GitHub. | ||
|
|
||
| ### Hosting our own videos | ||
| For more information, read the Docfx documentation on [shortcodes and includes](https://dotnet.github.io/docfx/docs/markdown.html?tabs=linux%2Cdotnet). Some commonly used features include: | ||
|
|
||
| `{% video 'url' %}` | ||
| - **Alert**: These are block quotes that render with distinct colors and icons, highlighting the importance or nature of the content | ||
| - **Video**: Embed video content directly into your documentation | ||
| - **Image**: Insert images to enhance the visual aspect of the documentation | ||
| - **Math Expressions**: Integrate mathematical notations and expressions | ||
| - **Mermaid Diagrams**: Embed [mermaid diagrams](https://mermaid.js.org/) for flowcharts and other graphical representations | ||
| - **Include Markdown Files**: Include content from other markdown files seamlessly | ||
| - **Code Snippet**: Insert code snippets for better clarity and demonstration | ||
| - **Tabs**: Organize content into tabbed sections for improved readability | ||
|
|
||
| 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: | ||
| ## Web Assets | ||
|
|
||
| ```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> | ||
| ``` | ||
| Our main web assets include: | ||
|
|
||
| ### How to encode videos | ||
| - `template/partials/affix.tmpl.partial` - Currently not functioning | ||
| - `template/partials/footer.tmpl.partial` - Currently not functioning | ||
| - `template/public/main.css` - Contains minor Bootstrap CSS overrides | ||
| - `template/public/main.js`: | ||
| - Sets the top navigation icons, such as GitHub, Discord, Twitter | ||
| - Injects the Stride Docs version selection above the filter in the side navigation | ||
| - Injects the Stride Docs language selection into the top navigation | ||
| - `docfx.json` - The HTML footer is included in the `_appFooter` section | ||
|
|
||
| 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). | ||
| ## Styling | ||
|
|
||
| To do so, process the file using [fmpeg](https://ffmpeg.org/download.html): | ||
| ### Bootstrap Customization | ||
|
|
||
| ``` | ||
| ffmpeg -i myvideo_original.mp4 -profile:v baseline -level 3.0 -an myvideo.mp4 | ||
| ``` | ||
| We utilize the `modern` template provided by Docfx, which employs the [Bootstrap](https://getbootstrap.com/) framework, version **5.3**. This includes the dark theme, enabled by Docfx. | ||
|
|
||
| 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 | ||
| > [!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. | ||
| 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. | ||
| ### CSS Guidelines | ||
|
|
||
| Steps to contribute your updates: | ||
| Our goal is to write minimal CSS code to keep the website lightweight, leveraging the Bootstrap framework to the fullest extent possible. | ||
|
|
||
| 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 | ||
| ## Submitting your Changes | ||
|
|
||
| Once your pull request has been reviewed and approved, your changes will be merged into the main repository and deployed to the website. | ||
| [!INCLUDE [submitting-changes](../../includes/submitting-changes.md)] |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.