FIT-Connect documentation

• LIVE @ https://docs.fitko.de/fit-connect/

Local development

Setup development environment

• Install patch-package:

npx patch-package

• Setup FJD npm repository:

echo @efast_public:registry=https://gitlab.dev.fjd.de/api/v4/packages/npm/ >> .npmrc

(see https://gitlab.dev.fjd.de/efast_public/component-library/-/packages/1679 for detailed setup instructions)

Serves the last build (yarn build) statically made

$ yarn
$ yarn start

Serves the current active dev environment

$ yarn
$ yarn serve

Serves the client with hot reloading

Triggers docusaurus start, see 'package.json'. Comfortably update text.

$ yarn
$ yarn run start

Production build

$ export DOCUSAURUS_BASE_URL="/fit-connect/"
$ yarn build

Creating graphs images using Mermaid

Embedding directly (preferred)

Graphs can be created using Mermaid.js. Using Mermaid is as simple as writing a code block:

```mermaid
  sequenceDiagram

  # Participants
  participant A as Alice
  participant B as Bob

  # Relations
  A ->> B: Hi Bob!
  B ->> A: Nice to meet you, Alice
```

Using .svg files

Sometimes you will want to reuse graphs multiple times on different pages. To reduce duplicate graph desciptions you can store it in it's own files. Such a graph consists of two files checked into version control:

• A .mermaid file (source)
• A .mermaid.svg file (generated)

If there is really no other way, you may also use a .png file.

You can create the .svg file using Mermaid:

• Go to Mermaid Live
• Select the LIGHT theme or set "theme": "default" in the Config tab on the left
• Paste the content of the .mermaid file in the Code tab
• Export under Actions -> SVG (bottom left)

Alternatively, you can also use the Mermaid CLI: Example (in Docker):

$ pwd
/home/jonas/Code/fit-connect/docs

$ docker run --pull=always --rm -u `id -u`:`id -g` \
    -v `pwd`:/data minlag/mermaid-cli \
    -i static/images/status/status_destination.mermaid