IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Deploy to GitHub pages

Browse Source
This commit is contained in:
Wolfgang Huß 2025-07-18 13:37:17 +00:00 committed by GitHub
commit c1e8e7a989
97 changed files with 2328 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
404.html Normal file
View File

File diff suppressed because one or more lines are too long

41
CHANGELOG.html Normal file
View File

File diff suppressed because one or more lines are too long

1
CNAME Normal file
View File

@ -0,0 +1 @@
docs.ocelot.social

41
CODE_OF_CONDUCT.html Normal file
View File

File diff suppressed because one or more lines are too long

47
CONTRIBUTING.html Normal file
View File

File diff suppressed because one or more lines are too long

41
LICENSE.html Normal file
View File

File diff suppressed because one or more lines are too long

41
SUMMARY.html Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/404.html-DjkuAEQW.js Normal file
View File

@ -0,0 +1 @@
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,b as n,o as r}from"./app-42vVvAb-.js";const a={};function l(s,t){return r(),o("div",null,t[0]||(t[0]=[n("p",null,"404 Not Found",-1)]))}const m=e(a,[["render",l],["__file","404.html.vue"]]),p=JSON.parse('{"path":"/404.html","title":"","lang":"en-US","frontmatter":{"layout":"NotFound"},"headers":[],"git":{},"readingTime":{"minutes":0.01,"words":3},"filePathRelative":null,"excerpt":"<p>404 Not Found</p>\\n"}');export{m as comp,p as data};

1
assets/CHANGELOG.html-BysofDL5.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/CODE_OF_CONDUCT.html-XkY1NwpG.js Normal file
View File

File diff suppressed because one or more lines are too long

7
assets/CONTRIBUTING.html-C06pWh3B.js Normal file
View File

File diff suppressed because one or more lines are too long

50
assets/GraphQL-Playground.html-C5_18a4M.js Normal file
View File

@ -0,0 +1,50 @@
import{_ as h}from"./graphql-playground (1)-C_SWrH2M.js";import{_ as p}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,a as e,b as a,d as i,e as t,f as l,r as d,o as k}from"./app-42vVvAb-.js";const o={};function g(u,s){const n=d("RouteLink");return k(),r("div",null,[s[8]||(s[8]=e('<h1 id="graphql-playground" tabindex="-1"><a class="header-anchor" href="#graphql-playground"><span>GraphQL Playground</span></a></h1><figure><img src="'+h+'" alt="GraphQL Playground" tabindex="0" loading="lazy"><figcaption>GraphQL Playground</figcaption></figure><p><em><strong>Attention:</strong> For using the GraphQL Playground set <code>DEBUG=true</code> in your backend <code>.env</code>, see <code>.env.template</code>!</em></p><p>To use GraphQL Playground, we need to know some basics:</p><h2 id="how-to-login" tabindex="-1"><a class="header-anchor" href="#how-to-login"><span>How To Login?</span></a></h2><p>First, we need to have a user from ocelot.social to log in as. The user can be created by seeding the Neo4j database from the backend or by multiple GraphQL mutations.</p><h3 id="seed-the-neo4j-database" tabindex="-1"><a class="header-anchor" href="#seed-the-neo4j-database"><span>Seed The Neo4j Database</span></a></h3>',7)),a("p",null,[s[1]||(s[1]=i("In your browser you can reach the GraphQL Playground under ")),s[2]||(s[2]=a("code",null,"http://localhost:4000/",-1)),s[3]||(s[3]=i(", if the database and the backend are running, see ")),t(n,{to:"/backend/"},{default:l(()=>s[0]||(s[0]=[i("backend")])),_:1}),s[4]||(s[4]=i(". There you will also find instructions on how to seed the database."))]),s[9]||(s[9]=e(`<h3 id="use-graphql-mutations-to-create-a-user" tabindex="-1"><a class="header-anchor" href="#use-graphql-mutations-to-create-a-user"><span>Use GraphQL Mutations To Create A User</span></a></h3><p>TODO: Describe how to create a user using GraphQL mutations!</p><h3 id="login-via-graphql" tabindex="-1"><a class="header-anchor" href="#login-via-graphql"><span>Login Via GraphQL</span></a></h3><p>You can register a user by sending the query:</p><div class="language-gql line-numbers-mode" data-highlighter="shiki" data-ext="gql" data-title="gql" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">mutation</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> login</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;">email</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;user@example.org&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">, </span><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;">password</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;1234&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">)</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Or use <code>&quot;moderator@example.org&quot;</code> or <code>&quot;admin@example.org&quot;</code> for the roll you need.</p><p>If all goes well, you will receive a QGL response like:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;data&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;login&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You can use this response to set an HTTP header when you click <code>HTTP HEADERS</code> in the footer. Just set it with the login token you received in response:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;Authorization&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6InUzIiwibmFtZSI6Ikplbm55IFJvc3RvY2siLCJzbHVnIjoiamVubnktcm9zdG9jayIsImlhdCI6MTY2MjAyMzMwNSwiZXhwIjoxNzI1MTM4NTA1LCJhdWQiOiJodHRwOi8vbG9jYWxob3N0OjMwMDAiLCJpc3MiOiJodHRwOi8vbG9jYWxob3N0OjQwMDAiLCJzdWIiOiJ1MyJ9.atBS-SOeS784HPeFl_5s8sRWehEAU1BkgcOZFD8d4bU&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>This token is used for all other queries and mutations you send to the backend.</p><h2 id="query-and-mutate" tabindex="-1"><a class="header-anchor" href="#query-and-mutate"><span>Query And Mutate</span></a></h2><p>When you are logged in and open a new playground tab by clicking &quot;+&quot;, you can create a new group by sending the following mutation:</p><div class="language-gql line-numbers-mode" data-highlighter="shiki" data-ext="gql" data-title="gql" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A626A4;--shiki-dark:#C678DD;">mutation</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> CreateGroup</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">(</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> # id: &quot;&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> name</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;My Group&quot;</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> # slug: &quot;&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> about</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;We will save the world&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> description</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;&lt;em&gt;English:&lt;/em&gt;&lt;/p&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;This group is hidden.&lt;/p&gt;&lt;h3&gt;What is our group for?&lt;/h3&gt;&lt;p&gt;This group was created to allow investigative journalists to share and collaborate.&lt;/p&gt;&lt;h3&gt;How does it work?&lt;/h3&gt;&lt;p&gt;Here you can internally share posts and comments about them.&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Deutsch:&lt;/em&gt;&lt;/p&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Diese Gruppe ist verborgen.&lt;/p&gt;&lt;h3&gt;Wofür ist unsere Gruppe?&lt;/h3&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.&lt;/p&gt;&lt;h3&gt;Wie funktioniert das?&lt;/h3&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.&lt;/p&gt;&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> groupType</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> hidden</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> actionRadius</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">:</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> interplanetary</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-light-font-style:inherit;--shiki-dark:#E06C75;--shiki-dark-font-style:italic;"> categoryIds</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: [</span><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;">&quot;cat12&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">]</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> ) {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> id</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> name</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> slug</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> createdAt</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> updatedAt</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> disabled</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> deleted</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> about</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> description</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> groupType</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> actionRadius</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> myRole</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>You will receive the answer:</p><div class="language-json line-numbers-mode" data-highlighter="shiki" data-ext="json" data-title="json" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">{</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;data&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;CreateGroup&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: {</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;id&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;2e3bbadb-804b-4ebc-a673-2d7c7f05e827&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;name&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;My Group&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;slug&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;my-group&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;createdAt&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;2022-09-01T09:44:47.969Z&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;updatedAt&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;2022-09-01T09:44:47.969Z&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;disabled&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;deleted&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#0184BC;--shiki-dark:#D19A66;">false</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;about&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;We will save the world&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;description&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;&lt;em&gt;English:&lt;/em&gt;&lt;/p&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;This group is hidden.&lt;/p&gt;&lt;h3&gt;What is our group for?&lt;/h3&gt;&lt;p&gt;This group was created to allow investigative journalists to share and collaborate.&lt;/p&gt;&lt;h3&gt;How does it work?&lt;/h3&gt;&lt;p&gt;Here you can internally share posts and comments about them.&lt;/p&gt;&lt;p&gt;&lt;br&gt;&lt;/p&gt;&lt;p&gt;&lt;em&gt;Deutsch:&lt;/em&gt;&lt;/p&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Diese Gruppe ist verborgen.&lt;/p&gt;&lt;h3&gt;Wofür ist unsere Gruppe?&lt;/h3&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Diese Gruppe wurde geschaffen, um investigativen Journalisten den Austausch und die Zusammenarbeit zu ermöglichen.&lt;/p&gt;&lt;h3&gt;Wie funktioniert das?&lt;/h3&gt;&lt;p class=</span><span style="--shiki-light:#0184BC;--shiki-dark:#56B6C2;">\\&quot;\\&quot;</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&gt;Hier könnt ihr euch intern über Beiträge und Kommentare zu ihnen austauschen.&lt;/p&gt;&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;groupType&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;hidden&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;actionRadius&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;interplanetary&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">,</span></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &quot;myRole&quot;</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">: </span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">&quot;owner&quot;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,16)),a("p",null,[s[6]||(s[6]=i("If you look into the Neo4j database with your browser and search the groups, you will now also find your new group. For more details about our Neo4j database read ")),t(n,{to:"/neo4j/"},{default:l(()=>s[5]||(s[5]=[i("here")])),_:1}),s[7]||(s[7]=i("."))])])}const B=p(o,[["render",g],["__file","GraphQL-Playground.html.vue"]]),b=JSON.parse('{"path":"/backend/src/graphql/GraphQL-Playground.html","title":"GraphQL Playground","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"How To Login?","slug":"how-to-login","link":"#how-to-login","children":[{"level":3,"title":"Seed The Neo4j Database","slug":"seed-the-neo4j-database","link":"#seed-the-neo4j-database","children":[]},{"level":3,"title":"Use GraphQL Mutations To Create A User","slug":"use-graphql-mutations-to-create-a-user","link":"#use-graphql-mutations-to-create-a-user","children":[]},{"level":3,"title":"Login Via GraphQL","slug":"login-via-graphql","link":"#login-via-graphql","children":[]}]},{"level":2,"title":"Query And Mutate","slug":"query-and-mutate","link":"#query-and-mutate","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.94,"words":581},"filePathRelative":"backend/src/graphql/GraphQL-Playground.md","localizedDate":"July 17, 2025","excerpt":"\\n<figure><figcaption>GraphQL Playground</figcaption></figure>\\n<p><em><strong>Attention:</strong> For using the GraphQL Playground set <code>DEBUG=true</code> in your backend <code>.env</code>, see <code>.env.template</code>!</em></p>\\n<p>To use GraphQL Playground, we need to know some basics:</p>\\n<h2>How To Login?</h2>"}');export{B as comp,b as data};

1
assets/LICENSE.html-DEdfeOfu.js Normal file
View File

@ -0,0 +1 @@
import{_ as o}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,b as e,d as n,o as r}from"./app-42vVvAb-.js";const a={};function s(l,t){return r(),i("div",null,t[0]||(t[0]=[e("h1",{id:"license",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#license"},[e("span",null,"LICENSE")])],-1),e("p",null,"MIT License",-1),e("p",null,[n("Copyright (c) 2018-2021 "),e("a",{href:"https://github.com/Ocelot-Social-Community",target:"_blank",rel:"noopener noreferrer"},"Ocelot.Social Community")],-1),e("p",null,'Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:',-1),e("p",null,"The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.",-1),e("p",null,'THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.',-1)]))}const d=o(a,[["render",s],["__file","LICENSE.html.vue"]]),p=JSON.parse('{"path":"/LICENSE.html","title":"LICENSE","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.58,"words":175},"filePathRelative":"LICENSE.md","localizedDate":"July 17, 2025","excerpt":"\\n<p>MIT License</p>\\n<p>Copyright (c) 2018-2021 <a href=\\"https://github.com/Ocelot-Social-Community\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">Ocelot.Social Community</a></p>\\n<p>Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the \\"Software\\"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:</p>"}');export{d as comp,p as data};

1
assets/SUMMARY.html-eMHIsrjp.js Normal file
View File

@ -0,0 +1 @@
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,b as l,e as n,f as a,r as u,o as s,d as o}from"./app-42vVvAb-.js";const d={};function p(m,t){const e=u("RouteLink");return s(),r("div",null,[t[20]||(t[20]=l("h1",{id:"table-of-contents",tabindex:"-1"},[l("a",{class:"header-anchor",href:"#table-of-contents"},[l("span",null,"Table of contents")])],-1)),l("ul",null,[l("li",null,[n(e,{to:"/"},{default:a(()=>t[0]||(t[0]=[o("Introduction")])),_:1})]),l("li",null,[n(e,{to:"/neo4j/"},{default:a(()=>t[1]||(t[1]=[o("Neo4J")])),_:1})]),l("li",null,[n(e,{to:"/backend/"},{default:a(()=>t[2]||(t[2]=[o("Backend")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/backend/graphql.html"},{default:a(()=>t[3]||(t[3]=[o("GraphQL")])),_:1})]),l("li",null,[n(e,{to:"/backend/neo4j-graphql-js.html"},{default:a(()=>t[4]||(t[4]=[o("neo4j-graphql-js")])),_:1})])])]),l("li",null,[n(e,{to:"/webapp/"},{default:a(()=>t[5]||(t[5]=[o("Webapp (Frontend)")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/webapp/components.html"},{default:a(()=>t[6]||(t[6]=[o("Components")])),_:1})]),l("li",null,[n(e,{to:"/webapp/html.html"},{default:a(()=>t[7]||(t[7]=[o("HTML")])),_:1})]),l("li",null,[n(e,{to:"/webapp/scss.html"},{default:a(()=>t[8]||(t[8]=[o("SCSS")])),_:1})]),l("li",null,[n(e,{to:"/webapp/vue.html"},{default:a(()=>t[9]||(t[9]=[o("Vue")])),_:1})])])]),l("li",null,[n(e,{to:"/testing.html"},{default:a(()=>t[10]||(t[10]=[o("Testing Guide")])),_:1}),l("ul",null,[l("li",null,[n(e,{to:"/cypress/"},{default:a(()=>t[11]||(t[11]=[o("End-to-end Tests")])),_:1})]),l("li",null,[n(e,{to:"/webapp/testing.html"},{default:a(()=>t[12]||(t[12]=[o("Webapp (Frontend) Tests")])),_:1})]),l("li",null,[n(e,{to:"/backend/testing.html"},{default:a(()=>t[13]||(t[13]=[o("Backend Tests")])),_:1})])])]),l("li",null,[n(e,{to:"/deployment/"},{default:a(()=>t[14]||(t[14]=[o("Deployment")])),_:1})]),l("li",null,[n(e,{to:"/CONTRIBUTING.html"},{default:a(()=>t[15]||(t[15]=[o("Contributing")])),_:1})]),l("li",null,[n(e,{to:"/cypress/features.html"},{default:a(()=>t[16]||(t[16]=[o("Feature Specification")])),_:1})]),l("li",null,[n(e,{to:"/CODE_OF_CONDUCT.html"},{default:a(()=>t[17]||(t[17]=[o("Code of Conduct")])),_:1})]),l("li",null,[n(e,{to:"/documentation.html"},{default:a(()=>t[18]||(t[18]=[o("Documentation")])),_:1})]),l("li",null,[n(e,{to:"/LICENSE.html"},{default:a(()=>t[19]||(t[19]=[o("License")])),_:1})])])])}const g=i(d,[["render",p],["__file","SUMMARY.html.vue"]]),k=JSON.parse('{"path":"/SUMMARY.html","title":"Table of contents","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.19,"words":58},"filePathRelative":"SUMMARY.md","localizedDate":"July 17, 2025","excerpt":"\\n<ul>\\n<li><a href=\\"/\\" target=\\"_blank\\">Introduction</a></li>\\n<li><a href=\\"/neo4j/\\" target=\\"_blank\\">Neo4J</a></li>\\n<li><a href=\\"/backend/\\" target=\\"_blank\\">Backend</a>\\n<ul>\\n<li><a href=\\"/backend/graphql.html\\" target=\\"_blank\\">GraphQL</a></li>\\n<li><a href=\\"/backend/neo4j-graphql-js.html\\" target=\\"_blank\\">neo4j-graphql-js</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/webapp/\\" target=\\"_blank\\">Webapp (Frontend)</a>\\n<ul>\\n<li><a href=\\"/webapp/components.html\\" target=\\"_blank\\">Components</a></li>\\n<li><a href=\\"/webapp/html.html\\" target=\\"_blank\\">HTML</a></li>\\n<li><a href=\\"/webapp/scss.html\\" target=\\"_blank\\">SCSS</a></li>\\n<li><a href=\\"/webapp/vue.html\\" target=\\"_blank\\">Vue</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/testing.html\\" target=\\"_blank\\">Testing Guide</a>\\n<ul>\\n<li><a href=\\"/cypress/\\" target=\\"_blank\\">End-to-end Tests</a></li>\\n<li><a href=\\"/webapp/testing.html\\" target=\\"_blank\\">Webapp (Frontend) Tests</a></li>\\n<li><a href=\\"/backend/testing.html\\" target=\\"_blank\\">Backend Tests</a></li>\\n</ul>\\n</li>\\n<li><a href=\\"/deployment/\\" target=\\"_blank\\">Deployment</a></li>\\n<li><a href=\\"/CONTRIBUTING.html\\" target=\\"_blank\\">Contributing</a></li>\\n<li><a href=\\"/cypress/features.html\\" target=\\"_blank\\">Feature Specification</a></li>\\n<li><a href=\\"/CODE_OF_CONDUCT.html\\" target=\\"_blank\\">Code of Conduct</a></li>\\n<li><a href=\\"/documentation.html\\" target=\\"_blank\\">Documentation</a></li>\\n<li><a href=\\"/LICENSE.html\\" target=\\"_blank\\">License</a></li>\\n</ul>"}');export{g as comp,k as data};

1
assets/SearchResult-DOliiBY1.js Normal file
View File

File diff suppressed because one or more lines are too long

12
assets/TODO-next-update.html-B47grlPD.js Normal file
View File

File diff suppressed because one or more lines are too long

45
assets/app-42vVvAb-.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/components.html-nG54ZAfH.js Normal file
View File

File diff suppressed because one or more lines are too long

5
assets/demo.html-BVi66rFc.js Normal file
View File

@ -0,0 +1,5 @@
import{_ as e}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a,o as n}from"./app-42vVvAb-.js";const t={};function l(d,s){return n(),i("div",null,s[0]||(s[0]=[a(`<h1 id="basic-usage" tabindex="-1"><a class="header-anchor" href="#basic-usage"><span>Basic usage</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-section&gt;</span></span>
<span class="line"><span> &lt;ds-logo&gt;&lt;/ds-logo&gt;</span></span>
<span class="line"><span>&lt;/ds-section&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h1 id="inverse-logo" tabindex="-1"><a class="header-anchor" href="#inverse-logo"><span>Inverse Logo</span></a></h1><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;ds-section secondary&gt;</span></span>
<span class="line"><span> &lt;ds-logo inverse&gt;&lt;/ds-logo&gt;</span></span>
<span class="line"><span>&lt;/ds-section&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div>`,4)]))}const c=e(t,[["render",l],["__file","demo.html.vue"]]),p=JSON.parse('{"path":"/webapp/components/Logo/demo.html","title":"Basic usage","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.07,"words":22},"filePathRelative":"webapp/components/Logo/demo.md","localizedDate":"July 17, 2025","excerpt":"\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;ds-section&gt;</span></span>\\n<span class=\\"line\\"><span> &lt;ds-logo&gt;&lt;/ds-logo&gt;</span></span>\\n<span class=\\"line\\"><span>&lt;/ds-section&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};

3
assets/deployment-values.html-DnbV66LJ.js Normal file
View File

File diff suppressed because one or more lines are too long

17
assets/documentation.html-OXRtZK5T.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/features.html-9sdgMtvT.js Normal file
View File

File diff suppressed because one or more lines are too long

BIN
assets/grafik (1)-BTXGtrIV.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/grafik-1 (1)-D9Bz6W0K.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 720 KiB

BIN
assets/grafik-4-Cy8h69YF.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 51 KiB

1
assets/graphql-playground (1)-C_SWrH2M.js Normal file
View File

@ -0,0 +1 @@
const p="/assets/graphql-playground-Ci-zpEKq.png";export{p as _};

BIN
assets/graphql-playground-Ci-zpEKq.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 74 KiB

1
assets/graphql.html-CD9OLTd0.js Normal file
View File

@ -0,0 +1 @@
import{_ as o}from"./graphql-playground (1)-C_SWrH2M.js";import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,b as r,d as a,e as i,f as l,a as d,r as p,o as h}from"./app-42vVvAb-.js";const c="/assets/grafik-4-Cy8h69YF.png",u={};function m(g,e){const t=p("RouteLink");return h(),n("div",null,[e[3]||(e[3]=r("h1",{id:"graphql-with-apollo",tabindex:"-1"},[r("a",{class:"header-anchor",href:"#graphql-with-apollo"},[r("span",null,"GraphQL with Apollo")])],-1)),e[4]||(e[4]=r("p",null,"GraphQL is a data query language which provides an alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server.",-1)),r("p",null,[e[1]||(e[1]=a("We have a closer description for the ")),i(t,{to:"/backend/src/graphql/GraphQL-Playground.html"},{default:l(()=>e[0]||(e[0]=[a("GraphQL Playground")])),_:1}),e[2]||(e[2]=a("."))]),e[5]||(e[5]=d('<figure><img src="'+o+'" alt="GraphQL Playground" tabindex="0" loading="lazy"><figcaption>GraphQL Playground</figcaption></figure><h2 id="middleware-keeps-resolvers-clean" tabindex="-1"><a class="header-anchor" href="#middleware-keeps-resolvers-clean"><span>Middleware keeps resolvers clean</span></a></h2><figure><img src="'+c+'" alt="Middleware schema" tabindex="0" loading="lazy"><figcaption>Middleware schema</figcaption></figure><p>A well-organized codebase is key for the ability to maintain and easily introduce changes into an app. Figuring out the right structure for your code remains a continuous challenge - especially as an application grows and more developers are joining a project.</p><p>A common problem in GraphQL servers is that resolvers often get cluttered with business logic, making the entire resolver system harder to understand and maintain.</p><p>GraphQL Middleware uses the <a href="https://dzone.com/articles/understanding-middleware-pattern-in-expressjs" target="_blank" rel="noopener noreferrer"><em>middleware pattern</em></a> (well-known from Express.js) to pull out repetitive code from resolvers and execute it before or after one of your resolvers is invoked. This improves code modularity and keeps your resolvers clean and simple.</p>',6))])}const b=s(u,[["render",m],["__file","graphql.html.vue"]]),y=JSON.parse('{"path":"/backend/graphql.html","title":"GraphQL with Apollo","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Middleware keeps resolvers clean","slug":"middleware-keeps-resolvers-clean","link":"#middleware-keeps-resolvers-clean","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.62,"words":185},"filePathRelative":"backend/graphql.md","localizedDate":"July 17, 2025","excerpt":"\\n<p>GraphQL is a data query language which provides an alternative to REST and ad-hoc web service architectures. It allows clients to define the structure of the data required, and exactly the same structure of the data is returned from the server.</p>\\n<p>We have a closer description for the <a href=\\"/backend/src/graphql/GraphQL-Playground.html\\" target=\\"_blank\\">GraphQL Playground</a>.</p>"}');export{b as comp,y as data};

1
assets/html.html-BWIJnzB9.js Normal file
View File

@ -0,0 +1 @@
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as s,o as n}from"./app-42vVvAb-.js";const r={};function o(i,e){return n(),t("div",null,e[0]||(e[0]=[s('<h1 id="html-–-code-guidelines" tabindex="-1"><a class="header-anchor" href="#html-–-code-guidelines"><span>HTML – Code Guidelines</span></a></h1><h2 id="we-write-semantic-markup" tabindex="-1"><a class="header-anchor" href="#we-write-semantic-markup"><span>We write semantic markup</span></a></h2><p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank" rel="noopener noreferrer">this list by MDN</a> can be of help.</p><p>Why?</p><ul><li>semantic markup is crucial for accessibility</li><li>it makes the code more readable for other developers</li><li>it benefits our SEO</li></ul><p>For more background <a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">see this article</a>.</p><p>This doesn’t mean you can’t ever use a <code>div</code> – just think twice before you do!</p><h2 id="we-write-as-little-html-as-possible-–-and-as-much-as-necessary" tabindex="-1"><a class="header-anchor" href="#we-write-as-little-html-as-possible-–-and-as-much-as-necessary"><span>We write as little HTML as possible – and as much as necessary</span></a></h2><p>HTML is used to <em>structure content on the page</em> and should therefore reflect its complexity. Not more and not less. Most content does not require deep nesting of HTML elements – if you find yourself wrapping <code>container</code> around <code>container</code> or adding an element just to correctly position another element on the page this calls for the use of CSS instead!</p><p>Why?</p><ul><li>deep nesting makes it hard to understand, style and maintain components</li><li>it can lead to performance issues</li></ul><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>For a deeper dive into the WHY and HOW have a look at the following resources:</p><ul><li><a href="https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML" target="_blank" rel="noopener noreferrer">HTML: a good basis for accessibility</a></li><li><a href="https://css-tricks.com/why-how-and-when-to-use-semantic-html-and-aria/" target="_blank" rel="noopener noreferrer">Why, how, and when to use semantic HTML and ARIA</a></li></ul>',14)]))}const c=a(r,[["render",o],["__file","html.html.vue"]]),m=JSON.parse('{"path":"/webapp/html.html","title":"HTML – Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We write semantic markup","slug":"we-write-semantic-markup","link":"#we-write-semantic-markup","children":[]},{"level":2,"title":"We write as little HTML as possible – and as much as necessary","slug":"we-write-as-little-html-as-possible-–-and-as-much-as-necessary","link":"#we-write-as-little-html-as-possible-–-and-as-much-as-necessary","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.78,"words":233},"filePathRelative":"webapp/html.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>We write semantic markup</h2>\\n<p>We avoid using <code>divs</code> and <code>spans</code> and try to choose more meaningful HTML elements instead. If unsure which element to use <a href=\\"https://developer.mozilla.org/en-US/docs/Web/HTML/Element\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">this list by MDN</a> can be of help.</p>"}');export{c as comp,m as data};

1
assets/index.html-2aSnFNii.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-42vVvAb-.js";const c={};function s(l,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(c,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/","title":"Static","lang":"en-US","frontmatter":{"title":"Static","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

1
assets/index.html-AbInmNTj.js Normal file
View File

@ -0,0 +1 @@
import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as t,o as s}from"./app-42vVvAb-.js";const n={};function l(d,e){return s(),a("div",null,e[0]||(e[0]=[t('<h3 id="example" tabindex="-1"><a class="header-anchor" href="#example"><span>Example</span></a></h3><p>Relative time from 08.03.2017</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;date-time dateTime=&quot;03.08.2017&quot; /&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)]))}const m=i(n,[["render",l],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/webapp/components/DateTime/","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"Example","slug":"example","link":"#example","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.03,"words":10},"filePathRelative":"webapp/components/DateTime/Readme.md","localizedDate":"July 17, 2025","excerpt":"<h3>Example</h3>\\n<p>Relative time from 08.03.2017</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;date-time dateTime=\\"03.08.2017\\" /&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{m as comp,p as data};

1
assets/index.html-BGmQtDin.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as n,o as a,r as s}from"./app-42vVvAb-.js";const r={};function l(c,i){const e=s("Catalog");return a(),o("div",null,[n(e)])}const _=t(r,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/components/","title":"Components","lang":"en-US","frontmatter":{"title":"Components","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

1
assets/index.html-BJ9euNS6.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as r,o as n,r as o}from"./app-42vVvAb-.js";const l={};function s(c,i){const e=o("Catalog");return n(),a("div",null,[r(e)])}const _=t(l,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/backend/src/graphql/","title":"Graphql","lang":"en-US","frontmatter":{"title":"Graphql","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

1
assets/index.html-BMDvNWkW.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r as l}from"./app-42vVvAb-.js";const r={};function s(c,i){const e=l("Catalog");return n(),a("div",null,[o(e)])}const _=t(r,[["render",s],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/deployment/","title":"Deployment","lang":"en-US","frontmatter":{"title":"Deployment","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

1
assets/index.html-BNvPlqKz.js Normal file
View File

@ -0,0 +1 @@
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,a as o,o as t}from"./app-42vVvAb-.js";const s={};function p(l,e){return t(),r("div",null,e[0]||(e[0]=[o('<h1 id="mabbox-markers" tabindex="-1"><a class="header-anchor" href="#mabbox-markers"><span>Mabbox markers</span></a></h1><p>I found the Mapbox markers to be downloaded at the bottom of the page:<br><a href="https://docs.mapbox.com/help/glossary/sprite/" target="_blank" rel="noopener noreferrer">https://docs.mapbox.com/help/glossary/sprite/</a></p><p>At URL:<br><a href="https://docs.mapbox.com/help/data/marker-icons.zip" target="_blank" rel="noopener noreferrer">https://docs.mapbox.com/help/data/marker-icons.zip</a></p><h2 id="folder-for-images-reachable-by-url" tabindex="-1"><a class="header-anchor" href="#folder-for-images-reachable-by-url"><span>Folder For Images Reachable By URL</span></a></h2><p>It looks like that not all folders, as example the <code>assets/*</code> folder, is reachable by URL. Our images have to be in the <code>static/img/*</code> folder.</p>',5)]))}const c=a(s,[["render",p],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/webapp/static/img/mapbox/marker-icons/","title":"Mabbox markers","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Folder For Images Reachable By URL","slug":"folder-for-images-reachable-by-url","link":"#folder-for-images-reachable-by-url","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.18,"words":54},"filePathRelative":"webapp/static/img/mapbox/marker-icons/README.md","localizedDate":"July 17, 2025","excerpt":"\\n<p>I found the Mapbox markers to be downloaded at the bottom of the page:<br>\\n<a href=\\"https://docs.mapbox.com/help/glossary/sprite/\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://docs.mapbox.com/help/glossary/sprite/</a></p>\\n<p>At URL:<br>\\n<a href=\\"https://docs.mapbox.com/help/data/marker-icons.zip\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">https://docs.mapbox.com/help/data/marker-icons.zip</a></p>"}');export{c as comp,d as data};

2
assets/index.html-BctnqxTU.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/index.html-BvkTjNKI.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as o,e as a,o as n,r}from"./app-42vVvAb-.js";const s={};function l(c,i){const e=r("Catalog");return n(),o("div",null,[a(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/components/Logo/","title":"Logo","lang":"en-US","frontmatter":{"title":"Logo","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

3
assets/index.html-CRWlgeUj.js Normal file
View File

@ -0,0 +1,3 @@
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as i,o as t}from"./app-42vVvAb-.js";const s="/assets/maintenance-page-D66YmD3C.png",r={};function o(l,e){return t(),a("div",null,e[0]||(e[0]=[i('<h1 id="maintenance-mode" tabindex="-1"><a class="header-anchor" href="#maintenance-mode"><span>Maintenance Mode</span></a></h1><p>The maintenance mode shows a translatable page that tells the user that we are right back, because we are working on the server.</p><figure><img src="'+s+`" alt="Maintenance Mode Screen Shot" tabindex="0" loading="lazy"><figcaption>Maintenance Mode Screen Shot</figcaption></figure><h2 id="running-the-maintenance-page-or-service" tabindex="-1"><a class="header-anchor" href="#running-the-maintenance-page-or-service"><span>Running The Maintenance Page Or Service</span></a></h2><p>At the moment the maintenance mode can only be locally tested with Docker-Compose.</p><p>::: tabs @tab:active Locally Without Docker</p><p>{% hint style=&quot;info&quot; %} TODO: Implement a locally running maintenance mode! Without Docker … {% endhint %}</p><p>The command …</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># running the maintenance mode in webapp/ folder</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> generate:maintenance</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>… is unfortunatelly <strong>not(!)</strong> working at the moment. This is because the code is rewritten to be easy usable for Docker-Compose. Therefore we lost this possibility.</p><p>@tab Locally With Docker</p><p>To get the maintenance mode running use the command:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># start Docker in the main folder</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker-compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>And the maintenance mode page or service will be started as well in an own container. In the browser you can reach it under <code>http://localhost:3001/</code>.</p><p>:::</p>`,15)]))}const d=n(r,[["render",o],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/webapp/maintenance/","title":"Maintenance Mode","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Running The Maintenance Page Or Service","slug":"running-the-maintenance-page-or-service","link":"#running-the-maintenance-page-or-service","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.53,"words":160},"filePathRelative":"webapp/maintenance/README.md","localizedDate":"July 17, 2025","excerpt":"\\n<p>The maintenance mode shows a translatable page that tells the user that we are right back, because we are working on the server.</p>\\n<figure><figcaption>Maintenance Mode Screen Shot</figcaption></figure>\\n<h2>Running The Maintenance Page Or Service</h2>\\n<p>At the moment the maintenance mode can only be locally tested with Docker-Compose.</p>"}');export{d as comp,p as data};

1
assets/index.html-CUaB9O4R.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as r,o as n,r as o}from"./app-42vVvAb-.js";const c={};function s(l,i){const e=o("Catalog");return n(),a("div",null,[r(e)])}const f=t(c,[["render",s],["__file","index.html.vue"]]),d=JSON.parse('{"path":"/backend/src/","title":"Src","lang":"en-US","frontmatter":{"title":"Src","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{f as comp,d as data};

26
assets/index.html-CtTXU5Um.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/index.html-CwWgTIoq.js Normal file
View File

@ -0,0 +1 @@
import{_ as a}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a as i,o as n}from"./app-42vVvAb-.js";const s={};function r(o,e){return n(),t("div",null,e[0]||(e[0]=[i('<h3 id="example" tabindex="-1"><a class="header-anchor" href="#example"><span>Example</span></a></h3><p>Category &quot;IT, Internet &amp; Data Privacy&quot; with icon &quot;mouse-cursor&quot;</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>&lt;hc-category icon=&quot;mouse-pointer&quot; name=&quot;IT, Internet &amp; Data Privacy&quot; /&gt;</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',3)]))}const c=a(s,[["render",r],["__file","index.html.vue"]]),p=JSON.parse('{"path":"/webapp/components/Category/","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":3,"title":"Example","slug":"example","link":"#example","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.07,"words":21},"filePathRelative":"webapp/components/Category/Readme.md","localizedDate":"July 17, 2025","excerpt":"<h3>Example</h3>\\n<p>Category \\"IT, Internet &amp; Data Privacy\\" with icon \\"mouse-cursor\\"</p>\\n<div class=\\"language- line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"\\" data-title=\\"\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span>&lt;hc-category icon=\\"mouse-pointer\\" name=\\"IT, Internet &amp; Data Privacy\\" /&gt;</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div></div></div>"}');export{c as comp,p as data};

66
assets/index.html-DBDIpVfz.js Normal file
View File

@ -0,0 +1,66 @@
import{_ as l}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as t,a,b as e,d as s,e as h,f as d,r as k,o as r}from"./app-42vVvAb-.js";const p="/assets/graphql-playground-Ci-zpEKq.png",o={};function c(g,i){const n=k("RouteLink");return r(),t("div",null,[i[5]||(i[5]=a(`<h1 id="backend" tabindex="-1"><a class="header-anchor" href="#backend"><span>Backend</span></a></h1><h2 id="installation-with-docker" tabindex="-1"><a class="header-anchor" href="#installation-with-docker"><span>Installation with Docker</span></a></h2><p>Run the following command to install everything through docker.</p><p>The installation takes a bit longer on the first pass or on rebuild ...</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># rebuild the containers for a cleanup</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> --build</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Wait a little until your backend is up and running at <a href="http://localhost:4000/" target="_blank" rel="noopener noreferrer">http://localhost:4000/</a>.</p><h2 id="installation-without-docker" tabindex="-1"><a class="header-anchor" href="#installation-without-docker"><span>Installation without Docker</span></a></h2><p>For the local installation you need a recent version of <a href="https://nodejs.org/en/" target="_blank" rel="noopener noreferrer">Node</a> (&gt;= <code>v16.19.0</code>). We are using <code>v24.2.0</code> and therefore we recommend to use the same version (<a href="https://github.com/Ocelot-Social-Community/Ocelot-Social/issues/4082" target="_blank" rel="noopener noreferrer">see</a> some known problems with more recent node versions). You can use the <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">node version manager</a> <code>nvm</code> to switch between different local Node versions:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># install Node</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> backend</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> v24.2.0</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> use</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> v24.2.0</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Install node dependencies with <a href="https://yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">yarn</a>:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> backend</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or just</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or just later on to use version of &quot;.nvmrc&quot; file</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> use</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> &amp;&amp; </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Copy Environment Variables:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend/</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> cp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> .env.template</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> .env</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Configure the new file according to your needs and your local setup. Make sure a <a href="http://localhost:7474" target="_blank" rel="noopener noreferrer">local Neo4J</a> instance is up and running.</p><p>Start the backend for development with:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend/</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>or start the backend in production environment with:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend/</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> start</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>For e-mail delivery, please configure at least <code>SMTP_HOST</code> and <code>SMTP_PORT</code> in your <code>.env</code> configuration file.</p>`,19)),e("p",null,[i[1]||(i[1]=s("Your backend is up and running at ")),i[2]||(i[2]=e("a",{href:"http://localhost:4000/",target:"_blank",rel:"noopener noreferrer"},"http://localhost:4000/",-1)),i[3]||(i[3]=s(" This will start the GraphQL service (by default on localhost:4000) where you can issue GraphQL requests or access GraphQL Playground in the browser. More details about our GraphQL playground and how to use it with ocelot.social can be found ")),h(n,{to:"/backend/src/graphql/GraphQL-Playground.html"},{default:d(()=>i[0]||(i[0]=[s("here")])),_:1}),i[4]||(i[4]=s("."))]),i[6]||(i[6]=a('<figure><img src="'+p+`" alt="GraphQL Playground" tabindex="0" loading="lazy"><figcaption>GraphQL Playground</figcaption></figure><h2 id="database" tabindex="-1"><a class="header-anchor" href="#database"><span>Database</span></a></h2><p>A fresh database needs to be initialized and migrated.</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in folder backend while database is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> init</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker environments:</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> init</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker production:</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> prod:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> init</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker development:</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker production</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> prod:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="optional-data" tabindex="-1"><a class="header-anchor" href="#optional-data"><span>Optional Data</span></a></h3><p>You can seed some optional data into the database.</p><p>To create the default admin <a href="mailto:admin@example.org" target="_blank" rel="noopener noreferrer">admin@example.org</a> with password <code>1234</code> use:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:data:admin</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>When using <code>CATEGORIES_ACTIVE=true</code> you also want to seed the categories with:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:data:categories</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="branding-data" tabindex="-1"><a class="header-anchor" href="#branding-data"><span>Branding Data</span></a></h3><p>You might need to seed some branding specific data into the database.</p><p>To do so, run:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:data:branding</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:data:branding</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="seed-data" tabindex="-1"><a class="header-anchor" href="#seed-data"><span>Seed Data</span></a></h3><p>For a predefined set of test data you can seed the database with:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:seed</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:seed</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="reset-data" tabindex="-1"><a class="header-anchor" href="#reset-data"><span>Reset Data</span></a></h3><p>In order to reset the database you can run:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend with database running (In docker or local)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:reset</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or deleting the migrations as well</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:reset:withmigrations</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:reset</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or deleting the migrations as well</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:reset:withmigrations</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># you could also wipe out your neo4j database and delete all volumes with:</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> down</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -v</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>Note: This just deletes the data and not the constraints, hence you do not need to rerun <code>yarn db:migrate init</code> or <code>yarn db:migrate up</code>.</p></blockquote><h3 id="data-migrations" tabindex="-1"><a class="header-anchor" href="#data-migrations"><span>Data migrations</span></a></h3><p>Although Neo4J is schema-less,you might find yourself in a situation in which you have to migrate your data e.g. because your data modeling has changed.</p><p>Generate a data migration file:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate:create</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> your_data_migration</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># Edit the file in ./src/db/migrations/</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder while docker compose is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate:create</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> your_data_migration</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># Edit the file in ./src/db/migrations/</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>To run the migration:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend/ while database is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder while docker compose is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> backend</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> db:migrate</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> up</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="testing" tabindex="-1"><a class="header-anchor" href="#testing"><span>Testing</span></a></h2><p><strong>Beware</strong>: We have no multiple database setup at the moment. We clean the database after each test, running the tests will wipe out all your data!</p><p>Run the unit tests:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in backend/ while database is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># for docker</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder while docker compose is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>If the snapshots of the emails must be updated, you have to run the tests in docker! Otherwise the CI will fail.</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># in main folder while docker compose is running</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> ocelot-social-backend-1</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;"> -u</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> src/emails/</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div>`,34))])}const b=l(o,[["render",c],["__file","index.html.vue"]]),u=JSON.parse('{"path":"/backend/","title":"Backend","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Installation with Docker","slug":"installation-with-docker","link":"#installation-with-docker","children":[]},{"level":2,"title":"Installation without Docker","slug":"installation-without-docker","link":"#installation-without-docker","children":[]},{"level":2,"title":"Database","slug":"database","link":"#database","children":[{"level":3,"title":"Optional Data","slug":"optional-data","link":"#optional-data","children":[]},{"level":3,"title":"Branding Data","slug":"branding-data","link":"#branding-data","children":[]},{"level":3,"title":"Seed Data","slug":"seed-data","link":"#seed-data","children":[]},{"level":3,"title":"Reset Data","slug":"reset-data","link":"#reset-data","children":[]},{"level":3,"title":"Data migrations","slug":"data-migrations","link":"#data-migrations","children":[]}]},{"level":2,"title":"Testing","slug":"testing","link":"#testing","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.85,"words":856},"filePathRelative":"backend/README.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>Installation with Docker</h2>\\n<p>Run the following command to install everything through docker.</p>\\n<p>The installation takes a bit longer on the first pass or on rebuild ...</p>\\n<div class=\\"language-sh line-numbers-mode\\" data-highlighter=\\"shiki\\" data-ext=\\"sh\\" data-title=\\"sh\\" style=\\"--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34\\"><pre class=\\"shiki shiki-themes one-light one-dark-pro vp-code\\"><code><span class=\\"line\\"><span style=\\"--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\\"># in main folder</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#4078F2;--shiki-dark:#61AFEF\\">$</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> docker</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> compose</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> up</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\\"># or</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic\\"># rebuild the containers for a cleanup</span></span>\\n<span class=\\"line\\"><span style=\\"--shiki-light:#4078F2;--shiki-dark:#61AFEF\\">$</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> docker</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> compose</span><span style=\\"--shiki-light:#50A14F;--shiki-dark:#98C379\\"> up</span><span style=\\"--shiki-light:#986801;--shiki-dark:#D19A66\\"> --build</span></span></code></pre>\\n<div class=\\"line-numbers\\" aria-hidden=\\"true\\" style=\\"counter-reset:line-number 0\\"><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div><div class=\\"line-number\\"></div></div></div>"}');export{b as comp,u as data};

21
assets/index.html-Dyiaj34I.js Normal file
View File

@ -0,0 +1,21 @@
import{_ as r}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as h,a as e,b as n,d as s,e as t,f as l,r as d,o}from"./app-42vVvAb-.js";const p="/assets/screenshot-B31RARyu.png",k={};function c(g,i){const a=d("RouteLink");return o(),h("div",null,[i[6]||(i[6]=e('<h1 id="webapp" tabindex="-1"><a class="header-anchor" href="#webapp"><span>Webapp</span></a></h1><figure><img src="'+p+`" alt="UI Screenshot" tabindex="0" loading="lazy"><figcaption>UI Screenshot</figcaption></figure><h2 id="installation" tabindex="-1"><a class="header-anchor" href="#installation"><span>Installation</span></a></h2><p>For preparation we need Node and recommend to use <a href="https://github.com/nvm-sh/nvm" target="_blank" rel="noopener noreferrer">node version manager</a> <code>nvm</code> to switch between different local Node versions:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># install Node</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webapp</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> v20.12.1</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> use</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> v20.12.1</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Install node dependencies with <a href="https://yarnpkg.com/en/" target="_blank" rel="noopener noreferrer">yarn</a>:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># install all dependencies</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> cd</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webapp</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> install</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or just</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># or just later on to use version of &quot;.nvmrc&quot; file</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> nvm</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> use</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> &amp;&amp; </span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">yarn</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>Copy:</p><div class="language-text line-numbers-mode" data-highlighter="shiki" data-ext="text" data-title="text" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span># in webapp</span></span>
<span class="line"><span>cp .env.template .env</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>Configure the files according to your needs and your local setup.</p><h3 id="build-for-development" tabindex="-1"><a class="header-anchor" href="#build-for-development"><span>Build for Development</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># serve with hot reload at localhost:3000</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="build-for-production" tabindex="-1"><a class="header-anchor" href="#build-for-production"><span>Build for Production</span></a></h3><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># build for production and launch server</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> build</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> start</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="run-tests" tabindex="-1"><a class="header-anchor" href="#run-tests"><span>Run tests</span></a></h3><p>We ensure the quality of our frontend code by using</p><ul><li><a href="https://eslint.org/" target="_blank" rel="noopener noreferrer">ESLint</a> for checking our JavaScript code</li><li><a href="https://jestjs.io/" target="_blank" rel="noopener noreferrer">Jest</a> and <a href="https://vue-test-utils.vuejs.org/" target="_blank" rel="noopener noreferrer">Vue Test Utils</a> to unit test our components</li><li><a href="https://storybook.js.org/" target="_blank" rel="noopener noreferrer">Storybook</a> to document and manually test our components in an isolated playground</li></ul>`,17)),n("p",null,[i[1]||(i[1]=s("For more information see our ")),t(a,{to:"/webapp/testing.html"},{default:l(()=>i[0]||(i[0]=[s("frontend testing guide")])),_:1}),i[2]||(i[2]=s(". Use these commands to run the tests:"))]),i[7]||(i[7]=e(`<p>::: tabs @tab:active With Docker</p><p>After starting the application following the above guidelines, open new terminal windows for each of these commands:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># run eslint</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker-compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webapp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> lint</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># run unit tests</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker-compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webapp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># start storybook</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> docker-compose</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> exec</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> webapp</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> storybook</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can then visit the Storybook playground on <code>http://localhost:3002</code></p><p>@tab title Without Docker</p><p>After starting the application following the above guidelines, open new terminal windows and navigate to the <code>/webapp</code> directory for each of these commands:</p><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># run eslint in /webapp (use option --fix to normalize the files)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> lint</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># run unit tests in /webapp</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> test</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># run locales in /webapp (use option --fix to sort the locales)</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> locales</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><div class="language-bash line-numbers-mode" data-highlighter="shiki" data-ext="bash" data-title="bash" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"># start storybook in /webapp</span></span>
<span class="line"><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;">$</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> storybook</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div></div></div><p>You can then visit the Storybook playground on <code>http://localhost:3002</code></p><p>:::</p><h2 id="maintenance-mode" tabindex="-1"><a class="header-anchor" href="#maintenance-mode"><span>Maintenance Mode</span></a></h2>`,15)),n("p",null,[i[4]||(i[4]=s("For installing and running the maintenance mode see ")),t(a,{to:"/webapp/maintenance/"},{default:l(()=>i[3]||(i[3]=[s("Maintenance Mode")])),_:1}),i[5]||(i[5]=s("."))]),i[8]||(i[8]=e('<h2 id="styleguide-migration" tabindex="-1"><a class="header-anchor" href="#styleguide-migration"><span>Styleguide Migration</span></a></h2><p>We are currently in the process of migrating our styleguide components and design tokens from the <a href="https://github.com/Ocelot-Social-Community/HC-Styleguide-20201003" target="_blank" rel="noopener noreferrer">Nitro Styleguide</a> into the main <a href="https://github.com/Ocelot-Social-Community/Ocelot-Social" target="_blank" rel="noopener noreferrer">ocelot.social repository</a> and refactoring our components in the process. During this migration, our new components will live in a <code>_new/</code> folder to separate them from the old, yet untouched components.</p><h3 id="folder-structure" tabindex="-1"><a class="header-anchor" href="#folder-structure"><span>Folder Structure</span></a></h3><p>The folder structure we are following is <a href="https://nuxtjs.org/guide/directory-structure" target="_blank" rel="noopener noreferrer">prescribed by Nuxt.js</a>:</p><ul><li><strong>assets</strong> contains icons, images and logos in <code>svg</code> format and all shared SCSS files such as <code>tokens</code></li><li><strong>components</strong> separated into two sub-folders: <ul><li><strong>generic</strong> are the generic building blocks of the app – small, reusable and usually not coupled to state</li><li><strong>features</strong> are composed of components but tied to a particular function of the app (e.g. <code>comment</code> or <code>post</code>)</li></ul></li><li><strong>layouts</strong> can use components to create layout templates for pages</li><li><strong>pages</strong> are the entry points for all <code>routes</code> in the app and are composed of layouts, features and components</li></ul>',5))])}const m=r(k,[["render",c],["__file","index.html.vue"]]),y=JSON.parse('{"path":"/webapp/","title":"Webapp","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Installation","slug":"installation","link":"#installation","children":[{"level":3,"title":"Build for Development","slug":"build-for-development","link":"#build-for-development","children":[]},{"level":3,"title":"Build for Production","slug":"build-for-production","link":"#build-for-production","children":[]},{"level":3,"title":"Run tests","slug":"run-tests","link":"#run-tests","children":[]}]},{"level":2,"title":"Maintenance Mode","slug":"maintenance-mode","link":"#maintenance-mode","children":[]},{"level":2,"title":"Styleguide Migration","slug":"styleguide-migration","link":"#styleguide-migration","children":[{"level":3,"title":"Folder Structure","slug":"folder-structure","link":"#folder-structure","children":[]}]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":1.68,"words":504},"filePathRelative":"webapp/README.md","localizedDate":"July 17, 2025","excerpt":"\\n<figure><figcaption>UI Screenshot</figcaption></figure>\\n<h2>Installation</h2>\\n<p>For preparation we need Node and recommend to use <a href=\\"https://github.com/nvm-sh/nvm\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">node version manager</a> <code>nvm</code> to switch\\nbetween different local Node versions:</p>"}');export{m as comp,y as data};

1
assets/index.html-Su4wUczQ.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-42vVvAb-.js";const s={};function l(c,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/img/","title":"Img","lang":"en-US","frontmatter":{"title":"Img","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

56
assets/index.html-s7wtk0sZ.js Normal file
View File

File diff suppressed because one or more lines are too long

7
assets/index.html-uDvjmpCh.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/index.html-wHI91PGm.js Normal file
View File

@ -0,0 +1 @@
import{_ as t}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,e as o,o as n,r}from"./app-42vVvAb-.js";const s={};function l(c,i){const e=r("Catalog");return n(),a("div",null,[o(e)])}const _=t(s,[["render",l],["__file","index.html.vue"]]),f=JSON.parse('{"path":"/webapp/static/img/mapbox/","title":"Mapbox","lang":"en-US","frontmatter":{"title":"Mapbox","article":false,"feed":false,"sitemap":false},"headers":[],"git":{},"readingTime":{"minutes":0,"words":1},"filePathRelative":null,"excerpt":""}');export{_ as comp,f as data};

BIN
assets/it4c-logo2-clean-bg_alpha-128x128-B_JxeTXp.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
assets/maintenance-page-D66YmD3C.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 202 KiB

1
assets/neo4j-graphql-js.html-C1jNzrZg.js Normal file
View File

@ -0,0 +1 @@
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as a,a as n,o as i}from"./app-42vVvAb-.js";const r={};function t(l,e){return i(),a("div",null,e[0]||(e[0]=[n('<h1 id="neo4j-graphql-js" tabindex="-1"><a class="header-anchor" href="#neo4j-graphql-js"><span>neo4j-graphql.js</span></a></h1><p>We use an npm package called <code>neo4j-graphql-js</code> as a cypher query builder. This library also generates resolvers for graphql queries, unless we implement them ourselves.</p><h2 id="debugging" tabindex="-1"><a class="header-anchor" href="#debugging"><span>Debugging</span></a></h2><p>As you can see in their <a href="https://github.com/neo4j-graphql/neo4j-graphql-js" target="_blank" rel="noopener noreferrer">documentation</a> it is possible to log out the generated cypher statements. To do so, run the backend like this:</p><div class="language-sh line-numbers-mode" data-highlighter="shiki" data-ext="sh" data-title="sh" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">DEBUG</span><span style="--shiki-light:#383A42;--shiki-dark:#56B6C2;">=</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;">neo4j-graphql-js</span><span style="--shiki-light:#4078F2;--shiki-dark:#61AFEF;"> yarn</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> run</span><span style="--shiki-light:#50A14F;--shiki-dark:#98C379;"> dev</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div></div></div>',5)]))}const p=s(r,[["render",t],["__file","neo4j-graphql-js.html.vue"]]),d=JSON.parse('{"path":"/backend/neo4j-graphql-js.html","title":"neo4j-graphql.js","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Debugging","slug":"debugging","link":"#debugging","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.23,"words":68},"filePathRelative":"backend/neo4j-graphql-js.md","localizedDate":"July 17, 2025","excerpt":"\\n<p>We use an npm package called <code>neo4j-graphql-js</code> as a cypher query builder. This\\nlibrary also generates resolvers for graphql queries, unless we implement them\\nourselves.</p>\\n<h2>Debugging</h2>\\n<p>As you can see in their <a href=\\"https://github.com/neo4j-graphql/neo4j-graphql-js\\" target=\\"_blank\\" rel=\\"noopener noreferrer\\">documentation</a>\\nit is possible to log out the generated cypher statements. To do so, run the\\nbackend like this:</p>"}');export{p as comp,d as data};

4
assets/photoswipe.esm-GXRgw7eJ.js Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/plugin-vue_export-helper-DlAUqK2U.js Normal file
View File

@ -0,0 +1 @@
const s=(t,r)=>{const o=t.__vccOpts||t;for(const[c,e]of r)o[c]=e;return o};export{s as _};

BIN
assets/screenshot-B31RARyu.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 379 KiB

14
assets/scss.html-Cg6fmwql.js Normal file
View File

@ -0,0 +1,14 @@
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,a as n,o as a}from"./app-42vVvAb-.js";const t={};function o(l,e){return a(),i("div",null,e[0]||(e[0]=[n(`<h1 id="scss-code-guidelines" tabindex="-1"><a class="header-anchor" href="#scss-code-guidelines"><span>SCSS - Code Guidelines</span></a></h1><h2 id="we-use-classes-over-tags-and-ids" tabindex="-1"><a class="header-anchor" href="#we-use-classes-over-tags-and-ids"><span>We use classes over tags and ids</span></a></h2><p>Never apply styles to <code>tags</code> or <code>ids</code> – use <code>classes</code> instead!</p><p>Why?</p><ul><li>HTML tags are responsible for the document <em>structure</em>, not the looks</li><li>targeting HTML tags comes with performance issues</li><li>ids are responsible for identifying a unique element, not for styling it</li><li>ids have higher specificity than classes and therefore don&#39;t play well together</li><li>classes can be combined and reused while ids are unique</li></ul><p>For more background see the following articles on <a href="https://frontstuff.io/you-need-to-stop-targeting-tags-in-css" target="_blank" rel="noopener noreferrer">why not to style tags</a> and <a href="https://dev.to/clairecodes/reasons-not-to-use-ids-in-css-4ni4" target="_blank" rel="noopener noreferrer">why not to style ids</a>.</p><h2 id="we-use-design-tokens-instead-of-magic-numbers" tabindex="-1"><a class="header-anchor" href="#we-use-design-tokens-instead-of-magic-numbers"><span>We use design tokens instead of magic numbers</span></a></h2><p>In order to achieve a consistent look and feel we use a set of pre-defined <code>design tokens</code> to style our components, for example <code>colors</code>, <code>sizes</code> and <code>box-shadows</code>. These tokens are stored as <code>SCSS variables</code> and reused throughout the app.</p><p>So, instead of typing <em>pixel values</em> or <em>hex codes</em> make sure you use design tokens such as <code>height-header</code> or <code>color-input-border</code>.</p><h2 id="we-name-our-classes-after-components" tabindex="-1"><a class="header-anchor" href="#we-name-our-classes-after-components"><span>We name our classes after components</span></a></h2><p>Our SCSS styles live within the corresponding component (see the <a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Vue.js docs for single-file components</a> for reference) and should therefore carry the same <em>unique</em> name.</p><p>Why?</p><ul><li>it clearly ties the styles to the one component</li><li>having unique class names means styles will not be accidentally overwritten in other files</li><li>we can avoid using <code>scoped CSS</code> which <a href="https://vue-loader.vuejs.org/guide/scoped-css.html#also-keep-in-mind" target="_blank" rel="noopener noreferrer">comes with performance caveats</a></li></ul><h2 id="we-use-variants-instead-of-overriding-styles" tabindex="-1"><a class="header-anchor" href="#we-use-variants-instead-of-overriding-styles"><span>We use variants instead of overriding styles</span></a></h2><p>Components will sometimes need to look different depending on the context in which they are used – a button might for example be <code>green</code> when it represents a call to action and <code>red</code> when it triggers a destructive action. Rather than making the <code>rounded-button</code> component <code>green</code> by default and then overriding the <code>color</code> for, say, the <code>delete-account</code> action – use variants! Pass the <code>rounded-button</code> a prop, such as <code>color: danger</code>, and then apply the respective <code>variant class</code>.</p><p>Name variant classes with a dash prefix, such as <code>-danger</code>, then target them like this:</p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.rounded-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> /* other css styles */</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;"> &amp;</span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> color: </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$color-danger</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="we-style-within-the-component-we-position-when-we-use-it" tabindex="-1"><a class="header-anchor" href="#we-style-within-the-component-we-position-when-we-use-it"><span>We <em>style</em> within the component, we <em>position</em> when we use it</span></a></h2><p>In order to make components truly reusable it is important to limit their styles to, well, their actual <em>styling</em>. What color are they, how big is the text, what happens on <code>hover</code>, do they have a rounded border – all that is part of it.</p><p>Margins, alignment and positioning on the other hand need to be defined in the <em>parent</em> because the same component might sometimes be aligned to the left, sometimes to the right and sometimes float above other content. For more details see the <a href="https://rscss.io/layouts.html" target="_blank" rel="noopener noreferrer">rscss guidelines</a>.</p><p>To do that, use the <code>child selector</code>, like this:</p><div class="language-scss line-numbers-mode" data-highlighter="shiki" data-ext="scss" data-title="scss" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.login-form</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#A0A1A7;--shiki-light-font-style:italic;--shiki-dark:#7F848E;--shiki-dark-font-style:italic;"> /* other css styles */</span></span>
<span class="line"></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> &gt; </span><span style="--shiki-light:#986801;--shiki-dark:#D19A66;">.rounded-button</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> {</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> margin: </span><span style="--shiki-light:#E45649;--shiki-dark:#E06C75;">$margin-small</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> justify-self: </span><span style="--shiki-light:#383A42;--shiki-dark:#D19A66;">flex-end</span><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">;</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;"> }</span></span>
<span class="line"><span style="--shiki-light:#383A42;--shiki-dark:#ABB2BF;">}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>A special case are dimensions like <code>width</code> and <code>height</code>. If it is important that a component always has the same dimensions (the height of a button should be consistent, for example) define it <em>within the component</em> itself, if a component should have flexible dimensions (a card, for example, could stretch over the whole screen in one place and be limited to a certain width in another) define the dimensions <em>in the parent</em>.</p><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>For a deeper dive into the WHY and HOW have a look at the following resources which the above guidelines are based on:</p><ul><li><a href="https://rscss.io/index.html" target="_blank" rel="noopener noreferrer">rscss – reasonable system for css stylesheet structure</a></li><li><a href="https://csswizardry.net/talks/2014/11/itcss-dafed.pdf" target="_blank" rel="noopener noreferrer">itcss – inverted triangle architecture for css</a></li></ul>`,26)]))}const h=s(t,[["render",o],["__file","scss.html.vue"]]),c=JSON.parse(`{"path":"/webapp/scss.html","title":"SCSS - Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We use classes over tags and ids","slug":"we-use-classes-over-tags-and-ids","link":"#we-use-classes-over-tags-and-ids","children":[]},{"level":2,"title":"We use design tokens instead of magic numbers","slug":"we-use-design-tokens-instead-of-magic-numbers","link":"#we-use-design-tokens-instead-of-magic-numbers","children":[]},{"level":2,"title":"We name our classes after components","slug":"we-name-our-classes-after-components","link":"#we-name-our-classes-after-components","children":[]},{"level":2,"title":"We use variants instead of overriding styles","slug":"we-use-variants-instead-of-overriding-styles","link":"#we-use-variants-instead-of-overriding-styles","children":[]},{"level":2,"title":"We style within the component, we position when we use it","slug":"we-style-within-the-component-we-position-when-we-use-it","link":"#we-style-within-the-component-we-position-when-we-use-it","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":2.07,"words":622},"filePathRelative":"webapp/scss.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>We use classes over tags and ids</h2>\\n<p>Never apply styles to <code>tags</code> or <code>ids</code> – use <code>classes</code> instead!</p>\\n<p>Why?</p>\\n<ul>\\n<li>HTML tags are responsible for the document <em>structure</em>, not the looks</li>\\n<li>targeting HTML tags comes with performance issues</li>\\n<li>ids are responsible for identifying a unique element, not for styling it</li>\\n<li>ids have higher specificity than classes and therefore don't play well together</li>\\n<li>classes can be combined and reused while ids are unique</li>\\n</ul>"}`);export{h as comp,c as data};

1
assets/setupDevtools-7MC2TMWH-CCl1VMYd.js Normal file
View File

@ -0,0 +1 @@
import{s as T,w as E}from"./app-42vVvAb-.js";var l="org.vuejs.vuepress",v="VuePress",I=v,r=l,N=v,i="client-data",a="Client Data",g=(p,n)=>{T({app:p,id:l,label:v,packageName:"@vuepress/client",homepage:"https://vuepress.vuejs.org",logo:"https://vuepress.vuejs.org/images/hero.png",componentStateTypes:[I]},t=>{const c=Object.entries(n),u=Object.keys(n),d=Object.values(n);t.on.inspectComponent(e=>{e.instanceData.state.push(...c.map(([s,o])=>({type:I,editable:!1,key:s,value:o.value})))}),t.addInspector({id:r,label:N,icon:"article"}),t.on.getInspectorTree(e=>{e.inspectorId===r&&(e.rootNodes=[{id:i,label:a,children:u.map(s=>({id:s,label:s}))}])}),t.on.getInspectorState(e=>{e.inspectorId===r&&(e.nodeId===i&&(e.state={[a]:c.map(([s,o])=>({key:s,value:o.value}))}),u.includes(e.nodeId)&&(e.state={[a]:[{key:e.nodeId,value:n[e.nodeId].value}]}))}),E(d,()=>{t.notifyComponentUpdate(),t.sendInspectorState(r)})})};export{g as setupDevtools};

BIN
assets/storybook-output-BEe6-GWA.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 49 KiB

1
assets/style-D4x0XHGi.css Normal file
View File

File diff suppressed because one or more lines are too long

1
assets/testing.html-9R_o7GUA.js Normal file
View File

@ -0,0 +1 @@
import{_ as n}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as i,b as e,d as a,o}from"./app-42vVvAb-.js";const s={};function r(l,t){return o(),i("div",null,t[0]||(t[0]=[e("h1",{id:"unit-testing",tabindex:"-1"},[e("a",{class:"header-anchor",href:"#unit-testing"},[e("span",null,"Unit Testing")])],-1),e("p",null,[e("em",null,[e("strong",null,"TODO:"),a(" To be filled in")])],-1)]))}const c=n(s,[["render",r],["__file","testing.html.vue"]]),p=JSON.parse('{"path":"/backend/testing.html","title":"Unit Testing","lang":"en-US","frontmatter":{},"headers":[],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.02,"words":7},"filePathRelative":"backend/testing.md","localizedDate":"July 17, 2025","excerpt":"\\n<p><em><strong>TODO:</strong> To be filled in</em></p>\\n"}');export{c as comp,p as data};

1
assets/testing.html-BLGom9kX.js Normal file
View File

@ -0,0 +1 @@
import{_ as l}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as r,b as t,e as s,f as i,r as a,o as d,d as o}from"./app-42vVvAb-.js";const p={};function u(g,e){const n=a("RouteLink");return d(),r("div",null,[e[3]||(e[3]=t("h1",{id:"testing-guide",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#testing-guide"},[t("span",null,"Testing Guide")])],-1)),e[4]||(e[4]=t("h2",{id:"end-to-end-testing",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#end-to-end-testing"},[t("span",null,"End-to-End Testing")])],-1)),e[5]||(e[5]=t("p",null,"To test all the pieces together, from the user perspective, we use integration tests. They also show if the the backend and the frontend are working as expected in conjunction and also if the browser likes our app.",-1)),t("p",null,[s(n,{to:"/cypress/"},{default:i(()=>e[0]||(e[0]=[o("more...")])),_:1})]),e[6]||(e[6]=t("h2",{id:"component-testing",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#component-testing"},[t("span",null,"Component Testing")])],-1)),e[7]||(e[7]=t("p",null,"Individual Vue Components should also be documented and tested properly. This guarantees that they are reusable and the api gets more solid in the process.",-1)),t("p",null,[s(n,{to:"/webapp/testing.html"},{default:i(()=>e[1]||(e[1]=[o("more...")])),_:1})]),e[8]||(e[8]=t("h2",{id:"unit-testing",tabindex:"-1"},[t("a",{class:"header-anchor",href:"#unit-testing"},[t("span",null,"Unit Testing")])],-1)),e[9]||(e[9]=t("p",null,"Expecially the Backend relies on Unit Tests, as there are no Vue Components.",-1)),t("p",null,[s(n,{to:"/backend/testing.html"},{default:i(()=>e[2]||(e[2]=[o("more...")])),_:1})])])}const f=l(p,[["render",u],["__file","testing.html.vue"]]),b=JSON.parse('{"path":"/testing.html","title":"Testing Guide","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"End-to-End Testing","slug":"end-to-end-testing","link":"#end-to-end-testing","children":[]},{"level":2,"title":"Component Testing","slug":"component-testing","link":"#component-testing","children":[]},{"level":2,"title":"Unit Testing","slug":"unit-testing","link":"#unit-testing","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.31,"words":92},"filePathRelative":"testing.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>End-to-End Testing</h2>\\n<p>To test all the pieces together, from the user perspective, we use integration tests. They also show if the the backend and the frontend are working as expected in conjunction and also if the browser likes our app.</p>\\n<p><a href=\\"/cypress/\\" target=\\"_blank\\">more...</a></p>"}');export{f as comp,b as data};

1
assets/testing.html-CymAGKPg.js Normal file
View File

File diff suppressed because one or more lines are too long

10
assets/vue.html-BZ4GqO8V.js Normal file
View File

@ -0,0 +1,10 @@
import{_ as s}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as n,a as o,o as i}from"./app-42vVvAb-.js";const a={};function l(t,e){return i(),n("div",null,e[0]||(e[0]=[o(`<h1 id="vue-–-code-guidelines" tabindex="-1"><a class="header-anchor" href="#vue-–-code-guidelines"><span>Vue – Code Guidelines</span></a></h1><h2 id="we-use-single-file-components" tabindex="-1"><a class="header-anchor" href="#we-use-single-file-components"><span>We use single-file components</span></a></h2><p>Each component lives in a single file, containing:</p><ul><li>its <code>template</code> (the DOM structure)</li><li>its <code>script</code> (including <code>props</code>, <code>data</code> and <code>methods</code> among other things)</li><li>its <code>style</code> (defining the look of the component)</li></ul><p>See the <a href="https://vuejs.org/v2/guide/single-file-components.html" target="_blank" rel="noopener noreferrer">Vue.js docs</a> for more details.</p><p>Placed in the same folder are also:</p><ul><li>the test file (e.g. <code>MyComponent.spec.js</code>)</li><li>the storybook file (e.g. <code>MyComponent.story.js</code>)</li></ul><h2 id="we-use-typed-props" tabindex="-1"><a class="header-anchor" href="#we-use-typed-props"><span>We use typed props</span></a></h2><p>Vue.js allows us to define component props either as strings or as objects (with <code>type</code> and <code>default</code> or <code>required</code> values). Always go for the second option!</p><p>Also: only (and always!) define a <code>default</code> for props that are <em>not required</em>.</p><p>Why?</p><ul><li>it makes our code more robust – a warning will be shown when passing a wrong prop type</li><li>it clearly defines the component API and tells other developers how to use it</li></ul><p>It is as easy as writing:</p><div class="language- line-numbers-mode" data-highlighter="shiki" data-ext="" data-title="" style="--shiki-light:#383A42;--shiki-dark:#abb2bf;--shiki-light-bg:#FAFAFA;--shiki-dark-bg:#282c34;"><pre class="shiki shiki-themes one-light one-dark-pro vp-code"><code><span class="line"><span>props: {</span></span>
<span class="line"><span> title: {</span></span>
<span class="line"><span> type: String,</span></span>
<span class="line"><span> required: true,</span></span>
<span class="line"><span> },</span></span>
<span class="line"><span> image: {</span></span>
<span class="line"><span> type: String,</span></span>
<span class="line"><span> default: &#39;human-connection-logo.png&#39;,</span></span>
<span class="line"><span> },</span></span>
<span class="line"><span>}</span></span></code></pre><div class="line-numbers" aria-hidden="true" style="counter-reset:line-number 0;"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><p>For more complex use cases see the <a href="https://vuejs.org/v2/guide/components-props.html#Prop-Validation" target="_blank" rel="noopener noreferrer">official Vue.js documentation</a>.</p><h2 id="we-use-shorthands" tabindex="-1"><a class="header-anchor" href="#we-use-shorthands"><span>We use shorthands</span></a></h2><p>For better readability we prefer</p><ul><li><code>:something</code> over <code>v-bind:something</code></li><li><code>@click</code> over <code>v-on:click</code></li><li><code>#slotSame</code> over <code>v-slot:slotName</code></li><li><code>#default</code> over <code>v-slot</code></li></ul><p>Read more in the <a href="https://vuejs.org/v2/guide/syntax.html#Shorthands" target="_blank" rel="noopener noreferrer">official Vue.js docs</a> (for <a href="https://vuejs.org/v2/guide/components-slots.html#Named-Slots-Shorthand" target="_blank" rel="noopener noreferrer">slots</a>)</p><h2 id="recommended-reads" tabindex="-1"><a class="header-anchor" href="#recommended-reads"><span>Recommended reads</span></a></h2><p>The <a href="https://pablohpsilva.github.io/vuejs-component-style-guide/#/?id=harness-your-component-props" target="_blank" rel="noopener noreferrer">Vue.js component style guide</a> offers a whole list of best-practices for writing Vue components.</p>`,21)]))}const p=s(a,[["render",l],["__file","vue.html.vue"]]),c=JSON.parse('{"path":"/webapp/vue.html","title":"Vue – Code Guidelines","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"We use single-file components","slug":"we-use-single-file-components","link":"#we-use-single-file-components","children":[]},{"level":2,"title":"We use typed props","slug":"we-use-typed-props","link":"#we-use-typed-props","children":[]},{"level":2,"title":"We use shorthands","slug":"we-use-shorthands","link":"#we-use-shorthands","children":[]},{"level":2,"title":"Recommended reads","slug":"recommended-reads","link":"#recommended-reads","children":[]}],"git":{"createdTime":1752750935000,"updatedTime":1752750935000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.84,"words":252},"filePathRelative":"webapp/vue.md","localizedDate":"July 17, 2025","excerpt":"\\n<h2>We use single-file components</h2>\\n<p>Each component lives in a single file, containing:</p>\\n<ul>\\n<li>its <code>template</code> (the DOM structure)</li>\\n<li>its <code>script</code> (including <code>props</code>, <code>data</code> and <code>methods</code> among other things)</li>\\n<li>its <code>style</code> (defining the look of the component)</li>\\n</ul>"}');export{p as comp,c as data};

41
backend/graphql.html Normal file
View File

File diff suppressed because one or more lines are too long

106
backend/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
backend/neo4j-graphql-js.html Normal file
View File

File diff suppressed because one or more lines are too long

90
backend/src/graphql/GraphQL-Playground.html Normal file
View File

File diff suppressed because one or more lines are too long

41
backend/src/graphql/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
backend/src/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
backend/testing.html Normal file
View File

File diff suppressed because one or more lines are too long

41
cypress/features.html Normal file
View File

File diff suppressed because one or more lines are too long

42
cypress/index.html Normal file
View File

File diff suppressed because one or more lines are too long

52
deployment/TODO-next-update.html Normal file
View File

File diff suppressed because one or more lines are too long

43
deployment/deployment-values.html Normal file
View File

File diff suppressed because one or more lines are too long

41
deployment/index.html Normal file
View File

File diff suppressed because one or more lines are too long

57
documentation.html Normal file
View File

File diff suppressed because one or more lines are too long

BIN
favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.4 KiB

47
frontend/index.html Normal file
View File

File diff suppressed because one or more lines are too long

66
index.html Normal file
View File

File diff suppressed because one or more lines are too long

65
logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

96
neo4j/index.html Normal file
View File

File diff suppressed because one or more lines are too long

2
search-pro.worker.js Normal file
View File

File diff suppressed because one or more lines are too long

41
testing.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/components.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/components/Category/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/components/DateTime/index.html Normal file
View File

File diff suppressed because one or more lines are too long

45
webapp/components/Logo/demo.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/components/Logo/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/components/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/html.html Normal file
View File

File diff suppressed because one or more lines are too long

61
webapp/index.html Normal file
View File

File diff suppressed because one or more lines are too long

43
webapp/maintenance/index.html Normal file
View File

File diff suppressed because one or more lines are too long

54
webapp/scss.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/static/img/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/static/img/mapbox/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/static/img/mapbox/marker-icons/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/static/index.html Normal file
View File

File diff suppressed because one or more lines are too long

41
webapp/testing.html Normal file
View File

File diff suppressed because one or more lines are too long

50
webapp/vue.html Normal file
View File

File diff suppressed because one or more lines are too long