# Documentation | Ocelot.Social Documentation
Ocelot.Social Documentation

Skip to main content

- Introduction
- Neo4J

- Backend

  - GraphQL
  - neo4j-graphql-js

- Webapp (Frontend)

  - Components
  - HTML
  - SCSS
  - Vue

- Testing Guide

  - End-to-end Tests
  - Webapp (Frontend) Tests
  - Backend Tests
- Deployment
- Contributing
- Feature Specification
- Code of Conduct
- Documentation
- License

# Documentation

April 5, 2026
About 1 min

On This Page

- Edit this Documentation
- - Markdown your documentation
  - Host the Screenshots
  - Screenshot Modification
- Deploy this Documentation

# Documentation

## Edit this Documentation

Find the table of contents for this documentation on GitHub 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 please include the number.)

### Markdown your documentation

To design your documentation see the syntax description at GitBook:

https://toolchain.gitbook.com/syntax/markdown.html

#### Some quick Examples

##### Headlines

    # Main Headline
    ## Smaller Headlines
    ### Small Headlines

##### Tabs

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

    @tab Second tab's title

    :::

##### Commands

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

##### Links

    [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

    ![XXX](https://XXX)

##### Hints for ToDos

    {% 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.

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

    # set configured Node version
    nvm use

    # install Vuepress
    npm install

    # run vuepress
    npm run docs:dev