chore(docs): reformat tutorial - part zero

[muescha]

Description

i reformat the tutorial to be more clear:

• each command a user has to execute or to type becomes a shell code block
• note sections formatted the same
• hints sections formatted the same
• added a TOC for distros
• combined the 2 similar sections into one at create a gatsby site

This is more beginners friendly to know which part he has to type and which code snippet is only for explanation.

Some code snippets was placed in this way that you can miss some parts because of line breaks like this and you miss the first command and get unkown errors (it is easy to miss the sudo in this example:

vs

Question

i think the commands are repeating in section "create a gatsby site" - maybe combine it and add a hin section after each command which explains the command (instead of repeating it later again after the screenshot)

answer was: Yes

[Ekwuno]

This looks great @muescha! Thanks for taking the time to do this. 💜

[Ekwuno]

I agree! a hint section to explain what the command does would be great! Can you send in a PR for that? @muescha

[muescha]

ok - i will condense this section and combine it

an new PR after this or as an update to this PR?

[Ekwuno]

ok - i will condense this section and combine it

an new PR after this or as an update to this PR?

Maybe just update this PR. Thanks again!

[muescha]

@Ekwuno combined it

[Ekwuno]

@Ekwuno combined it

Thank you ! I will get this merged after I test the changes on Monday .