Lots of updates

EwanLyon · Nov 11, 2023 · 4f15305 · 4f15305
1 parent eadf0c6
commit 4f15305
Show file tree

Hide file tree

Showing 22 changed files with 15,817 additions and 11,250 deletions.
diff --git a/README.md b/README.md
@@ -1,25 +1,29 @@
-# Website
+# Speedrun Docs
 
-This website is built using [Docusaurus 2](https://docusaurus.io/), a modern static website generator.
+This template is built using [Docusaurus 3](https://docusaurus.io/). You can find a hosted version of this template at [ewanlyon.github.io/speedrun-docs/](https://ewanlyon.github.io/speedrun-docs/)
 
-### Installation
+## Showcase
 
-```
-$ npm install
-```
+- [Heavenly Bodies](https://ewanlyon.github.io/HeavenlyBodies-SpeedrunDocs/)
 
-### Local Development
+## Installation
 
+```cmd
+npm install
 ```
-$ npm run start
+
+## Local Development
+
+```cmd
+npm run start
 ```
 
 This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
 
-### Build
+## Build
 
-```
-$ npm run build
+```cmd
+npm run build
 ```
 
 This command generates static content into the `build` directory and can be served using any static contents hosting service.
diff --git a/docs/guides/100/_category_.json b/docs/guides/100/_category_.json
@@ -1,4 +1,4 @@
 {
 	"label": "100%",
-	"position": 3
+	"position": 5
 }
diff --git a/docs/guides/100/level-1.md b/docs/guides/100/level-1.md
@@ -1 +1,3 @@
-# Level 1
+# Level 1
+
+Example file.
diff --git a/docs/guides/any/_category_.json b/docs/guides/any/_category_.json
@@ -1,4 +1,4 @@
 {
 	"label": "Any%",
-	"position": 2
+	"position": 4
 }
diff --git a/docs/guides/any/level-1.md b/docs/guides/any/level-1.md
@@ -1 +1,3 @@
-# Level 1
+# Level 1
+
+Example file.
diff --git a/docs/guides/contributing.md b/docs/guides/contributing.md
@@ -0,0 +1,30 @@
+# Contributing
+
+There are 2 ways you can help contribute to docs.
+
+:::note Github Account required
+
+Both of these methods require you to create a GitHub account.
+
+:::
+
+## Edit button
+
+Good for quick small edits.
+
+1. Click the edit button at the bottom of a document.
+2. Fork the project.
+3. Click the edit button (pencil icon) to open the GitHub editor.
+4. Make your edits.
+5. Write what you changed in the commit message.
+6. Press the commit changes button.
+7. Press the "submit" pull request button.
+
+## Download, edit locally and submit a pull request
+
+This is more advanced but much easier to edit many files and upload files.
+
+A video will be posted on a step by step guide.
+
+1. Clone the repository.
+2. Install the packages via `npm install`
diff --git a/docs/guides/embedding-content.md b/docs/guides/embedding-content.md
@@ -0,0 +1,101 @@
+---
+sidebar_position: 3
+---
+
+# Embedding Content
+
+## Images
+
+1. Add the image to the `static` folder at the root directory.
+2. Add `![Title of image](../../static/<path to file>)`.
+
+Example:
+
+`![Speedrun Docs Logo](../../static/img/run-man.svg)`
+![Speedrun Docs Logo](../../static/img/run-man.svg)
+
+:::tip Speedrun Docs Logo
+
+Feel free to modify and customise the logo to your desired game! An example can be seen in the [Heavenly Bodies Docs](https://ewanlyon.github.io/HeavenlyBodies-SpeedrunDocs/).
+
+:::
+
+## Videos
+
+Videos are crucial in teaching speedruns. Here's how to link to different places
+
+### YouTube
+
+<iframe
+ width="560"
+ height="315"
+ src="https://www.youtube.com/embed/DI8vHDrvJGc?si=4JCqDWWTJC98VlQN&start=943"
+ title="YouTube video player"
+ frameborder="0"
+ allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+ allowfullscreen
+/>
+
+1. Click on "share".
+2. Select "embed".
+3. Paste the text in the markdown file.
+
+```html
+<iframe
+  width="560"
+  height="315"
+  src="https://www.youtube.com/embed/DI8vHDrvJGc?si=4JCqDWWTJC98VlQN&start=943"
+  title="YouTube video player"
+  frameborder="0"
+  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+  allowfullscreen
+/>
+```
+
+### Making it the full width of the page
+
+The iframe sets a pixel width and height. This is not ideal for modern day browsing as browsers can be different sizes.
+
+This requires a bit more HTML but just a few modifications.
+
+<div style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: 16 }}>
+  <iframe
+    style={{ position: "absolute" }}
+    width="100%"
+    height="100%"
+    src="https://www.youtube.com/embed/DI8vHDrvJGc?si=4JCqDWWTJC98VlQN&start=943"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  />
+</div>
+
+```jsx
+// highlight-next-line
+<div style={{ position: "relative", paddingBottom: "56.25%", height: 0, marginBottom: 16 }}>
+  <iframe
+// highlight-start
+    style={{ position: "absolute" }}
+    width="100%"
+    height="100%"
+// highlight-end
+    src="https://www.youtube.com/embed/DI8vHDrvJGc?si=4JCqDWWTJC98VlQN&start=943"
+    title="YouTube video player"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+  />
+// highlight-next-line
+</div>
+```
+
+:::warning JSX in Markdown
+
+This method is slightly annoying as we are forced to use JSX in a normal Markdown file because MDX (which renders both standard Markdown (.md) and Markdown Expression (.mdx)) requires the use of JSX style in-line CSS.
+
+This can upset text editors or make code highlighting look strange.
+
+If you want you can convert the file into a Markdown Expression file which has native support for JSX in markdown by changing the file extension from .md to .mdx
+
+:::
diff --git a/docs/guides/index.md b/docs/guides/index.md
@@ -4,26 +4,71 @@ sidebar_position: 1
 
 # Basics
 
-Speeddocs is based off [Docusaurus](https://docusaurus.io/). Anything you want to customise or need help with can be sought after through their documentation.
+Speeddocs is template of [Docusaurus](https://docusaurus.io/). Anything you want to customise or need help with can be found from [**their documentation**](https://docusaurus.io/docs).
+
+## Installation
+
+1. Install [NodeJS LTS](https://nodejs.org/)
+2. Open a terminal and navigate to a folder to install the docs
+3. Run these commands
+   1. `npx create-docusaurus@latest my-game-speedrun-docs https://github.com/EwanLyon/speedrun-docs`
+   2. `cd my-game-speedrun-docs`
+   3. `npx docusaurus start`
+
+## speedrun-docs.json
+
+A basic JSON file to fill in basic information about the speedrun game and the github repository. Saves you some time in the docusaurus.config.ts.
+
+The file can be found in the root directory of the project.
+
+```json title="speedrun-docs.json"
+{
+ "game": "Example Game",
+ "speedrun.com": "https://www.speedrun.com/example_game",
+ "discord": "discord.gg/example_game",
+ "github": {
+  "username": "ExampleUser",
+  "projectName": "example-game-speedrun-docs"
+ }
+}
+```
 
 ## Creating pages
 
-To create pages just make a new file in the `docs/` folder under the heading you want.
+[Docusaurus Guide](https://docusaurus.io/docs/create-doc)
+
+To create pages just make a new markdown file (`.md`) in the `docs/` folder.
+
+To create nested pages create a folder and add the file there.
 
 ## Adding new tabs
 
+Adding a new tab at the top such as the "Tutorial" and "Resources" tab.
+
 1. Create a new folder in `docs/`
-2. Open `sidebars.js`
-   1. Add `<New Tab>Sidebar: [{ type: 'autogenerated', dirName: '<New Tab>' }]`
-      - Change the `<New Tab>` to be the name of the tab of course
-3. Open `docusaurus.config.js`
-   1. Scroll to the bottom to the `themeConfig`
-   2. In `navbar.items` add
-         ```JSON
+2. Open `sidebars.ts`
+   1. Add `tabnameSidebar: [{ type: 'autogenerated', dirName: '<New Doc Directory>' }]`
+      - E.g. A new tab for just 100% could look like: `hundredPercentSidebar: [{ type: 'autogenerated', dirName: '100' }]`
+3. Open `docusaurus.config.ts`
+   1. Scroll to down to the `themeConfig`
+   2. In `navbar` in the `items` square brackets add
+
+         ```JSON title="docusaurus.config.ts"
          {
             type: 'docSidebar',
             sidebarId: '<New Tab>Sidebar',
             position: 'left',
             label: '<New Tab Name>',
          }
          ```
+
+      - E.g.
+
+        ```JSON title="docusaurus.config.ts"
+        {
+            type: 'docSidebar',
+            sidebarId: 'hundredPercentSidebar',
+            position: 'left',
+            label: '100%',
+        }
+        ```
diff --git a/docs/guides/markdown-guide.md b/docs/guides/markdown-guide.md
@@ -0,0 +1,83 @@
+---
+sidebar_position: 2
+---
+
+# Markdown
+
+To learn all the things Docusaurus can do, visit their guide on markdown features: [Markdown Features](https://docusaurus.io/docs/markdown-features).
+
+Here's a quick [Markdown Cheat Sheet](https://www.markdownguide.org/cheat-sheet/).
+
+## Basics
+
+### Headings
+
+\# Heading 1
+
+\## Heading 2
+
+\### Heading 3
+
+\#### Heading 4
+
+### Links
+
+\[A link to a doc page](./another-doc.md)
+
+\[Another link to a doc page](./folder/another-doc.md)
+
+\[A link to a url](https://google.com/)
+
+### Text style
+
+\*italic*
+
+\**bold**
+
+## Admonitions
+
+More details at the [Docusaurus Documentation](https://docusaurus.io/docs/markdown-features/admonitions).
+
+```markdown
+:::note
+
+Content
+
+:::
+```
+
+:::note
+
+This glitch is still under investigation!
+
+:::
+
+:::tip
+
+Remember to not hold couch when doing this trick.
+
+:::
+
+:::info
+
+This item can be bought at any time during the run with no time loss.
+
+:::
+
+:::caution
+
+Backup your save data before installing this mod!
+
+:::
+
+:::danger
+
+This trick is a run killer.
+
+:::
+
+:::note Admonition with a title!
+
+Add text next to the type of admonition to change the title. (e.g. `:::note Title`)
+
+:::