# Getting started

> Note: The visual and markdown editors are only available on desktop. On mobile, the site will show without editing options.

To edit the markdown, you can use the button above to switch to markdown mode. You can also 
open the generated .md file in your favorite code editor.\
\
The .md file is located inside the "markdown" folder in the root of the project. It will have a name similar to the one you 
entered (spaces are replaced with "-", and non-alphanumeric characters are removed).

> Note: When using the markdown editor, your changes will automatically be saved a few seconds after you stop typing.

## Important notes

### Changes to index.js

Changes to the `/pages/index.js` file will work during development, but will *not* show up in the final build. If you must alter the final index.js file, you may do so in the files `/internal/buildfiles/index.js` and `/internal/buildfiles/[index].js`.

>! This is discouraged. You can change the content of the default page inside of the components/indexcontent.js file.

### Deleting a page

To delete a page, simply delete the .md file.

### Changing URL route (renaming a .md file)

Renaming a .md file will change the route that is shown in the URL for the particular .md file.

### Renaming a page

To rename a page (the name shown in the sidebar), edit the metadata attribute `sidebarText` at the top of the .md file.

### Rearranging pages

To rearrange pages under a sidebar header, change the `order` attribute in the .md file. Pages under the same sidebar header will be arranged least-to-greatest based on the `order` attribute.

### Renaming a sidebar header

To rename a sidebar header, simply change the name of the folder that holds the relevant .md files.

### Rearranging sidebar headers

To rearrange sidebar headers, create a file named `_order`, with the contents being solely a number, inside of the relevant folders in the `markdown` folder. Sidebar headers will be arranged least-to-greatest based on the contents of the `_order` files.

### Adding NPM packages

NPM packages can be added and used, and they will carry over into the final build without any additional actions.

# Styling/theming

For styling and theming, you have a few options.

## Changing CSS

You can alter the styling by changing any of the CSS files inside of the `styles` folder. Basic changes,
such as accent color and base font size, can be altered by changing the CSS variables at the top of the `variables.css` file.

## Changing code theme

You can change the code highlighting theme by changing the imported theme inside the `components/codeblock.js` file.\
\
Change the `xcode` portion of this line to one of the other available themes:
```
import codeTheme from 'react-syntax-highlighter/dist/cjs/styles/hljs/xcode';
```
You can view a preview of possible themes [here](https://highlightjs.org/static/demo/).

## Styling and changing logo

You can swap the `public/logo.svg` file with another SVG file. Alternatively, you can use a different format image, and change the `logo` path in the `components/sidebar.js` file.\
\
In the `components/sidebar.js` file, there are also a few other options near the top of the file (such as disabling or centering the logo).

# Example page!

You can use this page as a reference when changing styling.

---

# h1 header
## h2 header
### h3 header
#### h4 header
##### h5 header

---

*Italic*, **bold**, and `monospace`.\
\
Item lists look like:
  * One
  * Two
  * Three

Numbered lists look like:

 1. Item one
 2. Item two
 3. Item three

> This is an example of a blockquote.
>
> They can span multiple lines.

>? This is a warning blockquote.

>! This is an alert blockquote.

Code blocks look like:
```
// Example comment
function foo() {
    console.log('Example!');
}
```

Nested lists:

 1. Ingredients

      * Flour
      * Cocoa powder
      * Milk
      * Eggs

 2. Mix together.

 3. Bake at 350 for 20 minutes.

This is a link to [Google](https://google.com).\
\
This is a horizontal rule:
***