Basics

Speedrun Docs Guide

You should remove this page when making your docs.

Speedrun-Docs is template of Docusaurus. Anything you want to customise or need help with can be found from their documentation.

Installation

1. Install NodeJS LTS
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.

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

Docusaurus Guide

To create pages make a new text file with the file extension .md in the docs/ folder.

To create nested pages create a folder and add the file there.

Front matter

Docusaurus has support for more information at the top of a markdown file called "front matter".

---
sidebar_position: 1
description: This is a handmade description for a page
sidebar_custom_props:
  image: <url>
---

Speedrun-Docs Custom Props

Speedrun Docs will have support for more built in theming.

Property	Type
image	String

image

Adding a sidebar_custom_props to the front matter and then adding an image property under that (like in the example above), will add an image to the generated sidebar document view.

An example of this can be seen in the Any% generated page and in the front matter for Level 1.

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.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

      docusaurus.config.ts

      {
         type: 'docSidebar',
         sidebarId: '<New Tab>Sidebar',
         position: 'left',
         label: '<New Tab Name>',
      }

      • E.g.

        docusaurus.config.ts

        {
            type: 'docSidebar',
            sidebarId: 'hundredPercentSidebar',
            position: 'left',
            label: '100%',
        }