# Documentation

## Edit this Documentation

Find the [**table of contents** for this documentation on GitHub](https://github.com/Ocelot-Social-Community/Ocelot-Social/blob/master/SUMMARY.md) and navigate to the file you need to update.

Click on the **edit pencil** on the right side directly above the text to edit this file in our repository.

You can see a preview of your changes by clicking the **Preview changes** tab aside the **Edit file** tab.

If you are ready, fill in the **Propose file change** at the end of the webpage.

After that you have to compare your change branch to our `master` branch with a pull request. Here make a comment which issue you have fixed. (If you are working on one of our [open issues](https://github.com/Ocelot-Social-Community/Ocelot-Social/issues) please include the number.)

### Markdown your documentation

To design your documentation see the syntax description at GitBook:

[https://toolchain.gitbook.com/syntax/markdown.html](https://toolchain.gitbook.com/syntax/markdown.html)

#### Some quick Examples

##### Headlines

```markdown
# Main Headline
## Smaller Headlines
### Small Headlines
```

##### Tabs

```markdown
::: tabs
@tab:active First tab's title <!-- this tab is setactive -->

@tab Second tab's title

:::
```


##### Commands

~~~markdown
```<LANGUAGE> (for text highlighting)
XXX
```
~~~

##### Links

```markdown
[XXX](https://XXX)
```
For the documentation to work in both frameworks - Github and Vuepress - please use absolute path for Github internal documentation links (e.g. /README.md over ../../README.mdetc.)

##### Screenshots or other Images

```markdown
![XXX](https://XXX)
```

##### Hints for ToDos

```markdown
{% hint style="info" %} TODO: XXX {% endhint %}
```

### Host the Screenshots

#### Host on Ocelot-Social \(GitHub\) Repository

{% hint style="info" %}
TODO: How to host on Ocelot-Social \(GitHub\) repository ...
{% endhint %}

#### Quick Solution

To quickly host the screenshots go to:

[https://imgur.com](https://imgur.com).

There click the green button **New post**.

Drag the image into the appropriate area.

Right click on it and choose kind of **Open link in new tab**.

Copy the URL and paste it were you need it.

### Screenshot Modification

#### Add an Arrow or some other Marking Stuff

::: tabs
@tab:active macOS

##### In the Preview App

Got to: **Menu** + **Tools** \(GER: Werkzeuge\) + **Annotate** \(GER: Anmerkungen\) + etc.

@tab Windows

{% hint style="info" %}
TODO: How to modify screenshots in Windows ...
{% endhint %}
{% endtab %}

@tab Linux
{% hint style="info" %}
TODO: How to modify screenshots in Linux ...
{% endhint %}
:::

## Deploy this Documentation

TODO

```bash
# set configured Node version
nvm use

# install Vuepress
npm install

# run vuepress
npm run docs:dev
```