Skip to content

Contributing Articles

Thank you for deciding to contribute articles to this wiki! The only way this wiki has come this far, and for it to continue to grow is through contributions.

This guide will help you write, format, and implement your article into the wiki.

Forking the GitHub Repository

In order to send a Pull Request (PR) to the wiki to request your article to be added, you have to fork the ModdingWiki repository (repo).

To fork the wiki, it's fairly simple. You'll click the Fork button on the webpage, then click Create fork.

GitHub Fork Repo Button

GitHub Create Fork Dialog

Now we've created the fork! From there you can make changes to a branch on the fork and create the PR when you're finished.

Creating the File

Creating the article file is pretty simple. Add the file to the folder/subsection you are adding to, such as /docs/dev/api/ for APIs, and create a markdown file (.md).

IMPORTANT

Make sure you make your file name with no spaces or symbols, other than - to replace spaces!

For example, this article is named writing-articles.md and is located in /docs/extras/.

Viewing Your Article

This website uses VitePress to turn the markdown files into viewable webpages. To view your article in context as a webpage, it's simple.

To run VitePress and view as a local site, run the following command in the terminal:

shell
npm run dev

TIP

This must run in your repo folder. You can do so using the terminal in the code editor/IDE that you use.

The terminal will then display the following, at which point you can go to the URL given in the terminal:

Displayed Text in Terminal

Frontmatter

VitePress uses YAML Frontmatter for article configs. There are three commonly used settings, description, prev, and next.

Description

In order to have descriptive info for search engines and embeds, you have to add a description to the front matter. To do so, you need the following code at the start of your article:

md
---
description: Example description
---

TIP

The description should be a short and descriptive; it should only be one to two sentences long.

For example, the description for this article is the following:

md
---
description: How to contribute new articles to the wiki.
---

Previous & Next

You may have seen previous or next article buttons at the bottom of wiki pages. They can be enabled or disabled in the frontmatter section, using prev and next.

By default, the previous and next buttons are disabled. To enable these buttons, you need to set the options to true:

md
---
prev: true
next: true
description: Example description
---

IMPORTANT

The frontmatter section must be at the beginning of the file, otherwise it will not work. For example, correct.md will display a correct markdown file, and incorrect.md will display an incorrectly written markdown file.

md
---
prev: false
next: false
description: Example description
---

# Example Article
md
<!-- Extra space causes errors -->
---
prev: false
next: false
description: Example description
---

# Example Article

Formatting

Markdown

This wiki uses a modified version of markdown (.md) files for articles, allowing a fairly easy process to write a new article. Markdown essentially is a simple text file with "shortcuts" that help with formatting. An example of this is in Discord, where you can easily format your messages to be bold, italicized, etc.

TIP

This Markdown Guide goes into greater detail than the basics given in this article.

Common Usages

There are a few simple ways to format text.

  • Using ** on either side of a word/phrase will bold that word/phrase.
  • Using _ on either side of a word/phrase will italicize that word/phrase.
  • Using *** on either side of a word/phrase will bold and italicize that word/phrase.
  • Using ~~ on either side of a word/phrase will strike that word/phrase out.

WARNING

These symbols generally must not have spaces between them and the word(s) you are formatting.

Headings

You may want headings in your article. These are places you can link to which will bring readers to that exact spot on the page. For example, this links to the formatting heading.

There are several different heading "sizes" you can use.

This pattern continues until ######, which creates an h6 heading.

INFO

Unless there is an empty line between lines of text, headings, or other line symbols, the lines of text, heading, code, or whatever else will either not work or be separated as intended.

This text is correctly formatted.

Extra sentence.

---

This text is correctly formatted.
Extra sentence.
This text is incorrectly formatted.
Extra sentence.

---

This text is incorrectly formatted. Extra sentence.

Code

You likely will want to display code as examples for readers to view. To do this, there are both code and code blocks.

The main usage of code formatting is to highlight a method or a field. You can do so using a backtick (`) around the code.

You may, however, want to display codeblocks instead. To do so, you can use three backticks (```) around the code. You can also use the language identifier to use color highlighting specific to that language.

For example, the following text, marked as a C# Script:

```cs
public void TestMethod()
{
 // code
}
```

Will be formatted to look like this:

cs
public void TestMethod()
{
    // code
}

VitePress

This wiki uses VitePress to turn markdown files into a working website. This comes with additional methods to format text into a prettier-looking article.

TIP

This Vitepress Guide goes into greater detail than the basics given in this article

Containers

Containers hold little snippets of text that can be small asides, or important to pay attention to. The general method of creating a container is the following:

::: info
Example container text
:::

This will become formatted by VitePress to look like this:

INFO

Example container text

Common containers are:

  • info
  • tip
  • warning
  • danger
  • details

These will vary the coloring of the container. details specifically creates a hidden container that can hold more information.

Example Details Container

Hidden info

Code

You may want to highlight a line/section of code to bring attention to it. You can do this by specifying what lines you want highlighted in braces next to the language identifier.

```cs {2,4-6}
//Example Line 1
//Example Line 2
//Example Line 3
//Example Line 4
//Example Line 5
//Example Line 6
//Example Line 7
```

cs
//Example Line 1
//Example Line 2
//Example Line 3
//Example Line 4
//Example Line 5
//Example Line 6
//Example Line 7

You might also want to display the line numbers of code, which can be done by adding :line-numbers after the language identifier.

```cs:line-numbers
//Example Line 1
//Example Line 2
//...
```

cs
//Example Line 1
//Example Line 2
//...

Adding links and images to your article is simple using Markdown, although the link itself is more special.

TIP

Directory references start from /docs/, so don't add /docs/ to references when linking to another article or an image.

Using markdown syntax, a link is as simple as wrapping the text in brackets and adding the link in parenthesis. For example, to link to the Wikipedia article on Lethal Company, one could do the following:

md
Look at [this Wikipedia article](https://en.wikipedia.org/wiki/Lethal_Company) for basic info about the game.

To specifically link to another article in this wiki, you should use a relational link instead of a hard link. A relational link is the file directory, whereas a hard link is the actual website URL.

To link to another article, say the Contributing Translations article, you use the following syntax:

md
[text](/contribute/translating-the-wiki)

WARNING

Do not use file extensions in the relational link for webpages/articles, doing so can lead to un-clean URLs (ex. translating-the-wiki.html)

To link to a specific heading, you can add #heading-anchor to the link, where heading-anchor is the specific heading anchor you want to use. To find what anchor to use, click on the heading, and see what anchor is in the URL.

md
[heading of another article](/installation/syncing-mods#exporting-a-profile)

TIP

If you want to do it to another heading in your article, you can drop the link and only have the anchor, like so:

md
[heading](#example-heading-anchor)

Images

To add images to your article, there are two steps:

1. Save the image in the correct directory

Images should be saved in a folder within /docs/public/images, where the folder is labeled the same as your article file name (minus .md).

For example, all images used in this article are saved within /docs/public/images/writing-articles.

2. Add it with the correct syntax

The syntax to add an image is like adding a link.

md
![Example Image Alt Text](/images/writing-articles/example-image.png)

There are three important parts in this:

  • The Exclamation Mark
    • This marks the link as an image.
  • The Alt Text
    • This text will show if the image is not loaded.
  • The Image Link
    • The directory of the image as well as the file name and extension.

WARNING

When adding the image link, you need to exclude /public from the link as VitePress will automatically look into that directory for images.

Adding Your Article to the Sidebar

In order for people to easily navigate to your article, you must add it to the sidebar. You can do so in docs/.vitepress/config.mts.

First, you must decide which sidebar you want to add your article to. '/' is the Beginner's Guide sidebar and '/modding/' is the Developer's Guide sidebar.

Next, insert the following into your article location:

ts
{
    text: 'Modding APIs',
        items: [
        { text: 'Modding APIs Overview', link: '/apis/modding-apis' },
        { text: 'CustomSounds', link: '/apis/customsounds'},
        { text: 'Overview', link: '/modding/apis/overview' },
        {
            text: 'Asset APIs',
            collapsed: false,
            items: [
                { text: 'CustomSounds', link: '/modding/apis/customsounds'},
            ]
        },
        {
            text: 'Programming APIs',
            collapsed: false,
            items: [
                { text: 'Example Article', link: '<directory>' }, 
            ]
        }
    ]
},

Where Example Article is the article name, and <directory> is the location and name of the article file. For example, /modding/apis/example-article would be a correct directory/link.

TIP

Please ensure your article name is in Title Case when adding it to the sidebar.

Submitting to GitHub

Now that you've written your article, you can submit it easily! First, switch to the Fork tab in GitHub.

Pull Request Tab on GitHub

There, you can create the pull request (PR) via the button in the top right:

Create a Pull Request

Finally, you can select the branch you used on the right for head/compare, and the main branch in LethalCompany/ModdingWiki for base. If you can't see your fork as an option, click on compare across forks.

Pull Request Selection Dialog

After selecting your branch to pull from, click Create pull request. A dialog with a title and description should show up:

Pull Request Title and Description Dialog

Here, name your PR and describe of what you added and/or changed. GitHub uses markdown formatting for the description, so you can use that to better show your changes.

Once you've written up the description, just press Create pull request in the bottom right, and your PR will be submitted!

TIP

Please give a summary of what your PR adds and a list of changes made.