Developing

Thank you for considering to contribute code to the wiki!

We use the following tech stack for the wiki,

• NextJS
• React
• TailwindCSS
• Typescript

Please refer to the documentation of each framework/library for more information

Getting started

We use git submodules, so first time setup for a development environment is slightly different from normal,

git clone https://github.com/hasangergames/suroi-wiki.git
git submodule init
git submodule update --remote
cd suroi-wiki

pnpm i
pnpm dev

Note that we use pnpm, instead of npm (because it is just better)

Recommended setup

• Visual Studio Code/VSCodium
• VSCode Extensions (VSCode should automatically recommend you workspace extensions)
  • Typescript
  • ESLint
  • Prettier
  • Code Spell Checker
  • Tailwind CSS IntelliSense
• PNPM
• Git with SSH (optional)

(We obviously don't care about what you use)

Setting up a git hook

If you have been mad at GitHub's email spam telling you about failed CI runs, try out Git hooks!

At the project root,

echo "pnpm ci:lint\npnpm spellcheck" > .git/hooks/pre-commit
chmod +x .git/hooks/pre-commit

Now Git will lint and spellcheck for you before you commit your changes!

Do and Don't

Don't use <a></a> and <img />

We use the NextJS component equivalents, <Link></Link> and <Image />

Don't push large amounts of changes to the wiki code

Make a branch/fork and create a pull request please. Also have at least one maintainer review your code. Small changes are fine and don't need review (though it is best to get approval)

Don't ignore the JSX key error

It's super annoying, but add a key prop anyways

Don't push hacky solutions

The only exception is if it will get refactored soon after anyway or if another person is willing to refactor it.

Don't use external images

Only exception (currently) is GitHub for game assets and Invidious for YouTube thumbnails, please put your images in /public

Don't use emojis in commit messages

Or you will get publically shamed.

Do use tree shaking

If you are adding new libraries, please use tree shaking when possible, to keep bundle sizes minimal

Do use a formatter and linter

Run this command to run eslint and prettier

pnpm lint

Do use a spellchecker

Just run this command to spellcheck

pnpm spellcheck

TLDR it is best to ask the wiki maintainers (Compositr and Kenos) if you should contribute something to the wiki