Intro
Envy and Spite is an open-source project, as well as this documentation. This gives you opportunity to create your own document and contribute into this project. In this page, you will see contribution standards.
Useful Resources:
- Docusaurus Documentation
- Because this documentation was made with Docusaurus, you might need to know some details of it.
- MDX Documentation
- This documentation website uses Docusaurus. Because of that, documents are parsed using MDX and must follow JSX formatting.
Creating a document
First, create a folder with the name of your document. In there create: index.mdx and assets folder. index.mdx is the file of your document, while assets folder is for images, files, etc.
At the start of index.mdx, make sure to specify the name of the document with a position if needed. This is required for the document to properly show up in the sidebar.
When dividing the document into chapters, please use # Chapter name.
You can read the basics of MDX here
Example
Here is the example of an index.mdx file. You can find this file in the root directory of the project.
---
title: "Document Name Here"
position: "Document Position Here"
---
{/* The document position affects on how its displayed in the sidebar. 1 being the top */}
# Document Name
Intro information.
This document can be found in the repositories files in `ExampleDocument.mdx` in the root directory.
# Section 1
{/*JSX is used for more complex stuff. It looks like HTML and contains tags from it but is different.*/}
{/*Image example*/}
<div style={{ textAlign: "center" }}>
<img src={require('./assets/ExampleImage.png').default} alt="Example Image"></img>
</div>
<h1>Heading!</h1>
<abbr title="HyperText Markup Language">HTML</abbr> is a lovely language.
<section>
And here is *markdown* in **JSX**!
</section>
{/*Some tags from HTML*/}
<ul>
<li>1</li>
<ul>
<li>1.1</li>
<li>1.2</li>
</ul>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
{/* MDX also supports javascript expressions */}
{(function () {
const guess = Math.random()
if (guess > 0.66) {
return <span style={{color: 'tomato'}}>Look at us.</span>
}
if (guess > 0.33) {
return <span style={{color: 'violet'}}>Who would have guessed?!</span>
}
return <span style={{color: 'goldenrod'}}>Not me.</span>
})()}
{/* MDX and imports with exports */}
import {External} from './some/place.js'
export const Local = properties => <span style={{color: 'red'}} {...properties} />
An <External>external</External> component and a <Local>local one</Local>.