Change maintenance svg

- Add 'Readme.md' for maintenance mode.
- Refine other Readme's.

backend/README.md

@@ -96,11 +96,13 @@ need to seed your database:
 {% tab title="Docker" %}
 
 In another terminal run:
+
 ```bash
 $ docker-compose exec backend yarn run db:seed
 ```
 
 To reset the database run:
+
 ```bash
 $ docker-compose exec backend yarn run db:reset
 # you could also wipe out your neo4j database and delete all volumes with:
@@ -108,18 +110,22 @@ $ docker-compose down -v
 # if container is not running, run this command to set up your database indeces and contstraints
 $ docker-compose exec backend yarn run db:migrate init
 ```
-{% endtab %}
 
+{% endtab %}
 {% tab title="Without Docker" %}
+
 Run:
+
 ```bash
 $ yarn run db:seed
 ```
 
 To reset the database run:
+
 ```bash
 $ yarn run db:reset
 ```
+
 {% endtab %}
 {% endtabs %}
 
@@ -130,32 +136,40 @@ you have to migrate your data e.g. because your data modeling has changed.
 
 {% tabs %}
 {% tab title="Docker" %}
+
 Generate a data migration file:
+
 ```bash
 $ docker-compose exec backend yarn run db:migrate:create your_data_migration
 # Edit the file in ./src/db/migrations/
 ```
 
 To run the migration:
+
 ```bash
 $ docker-compose exec backend yarn run db:migrate up
 ```
+
 {% endtab %}
 {% tab title="Without Docker" %}
+
 Generate a data migration file:
+
 ```bash
 $ yarn run db:migrate:create your_data_migration
 # Edit the file in ./src/db/migrations/
 ```
 
 To run the migration:
+
 ```bash
 $ yarn run db:migrate up
 ```
+
 {% endtab %}
 {% endtabs %}
 
-# Testing
+## Testing
 
 **Beware**: 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!

cypress/README.md

@@ -6,8 +6,9 @@ Are you running everything through docker? You're so lucky you don't have to
 setup anything!
 
 Just:
-```
+
-docker-compose up
+```bash
+$ docker-compose up
 ```
 
 ## Setup without docker
@@ -19,7 +20,7 @@ file according to your needs.
 To start the services that are required for cypress testing, run:
 
 ```bash
-# in the top level folder Human-Connection/
+# in the top level folder Ocelot-Social/
 $ yarn cypress:setup
 ```
 
@@ -29,9 +30,9 @@ Even if the required services for testing run via docker, depending on your
 setup, the cypress tests themselves run on your host machine. So with our
 without docker, you would have to install cypress and its dependencies first:
 
-```
+```bash
 # in the root folder /
-yarn install
+$ yarn install
 ```
 
 ## Run cypress
@@ -44,7 +45,6 @@ $ yarn cypress:run
 
 ![Console output after running cypress test](../.gitbook/assets/grafik%20%281%29.png)
 
-
 ### Open Interactive Test Console
 
 If you are like me, you might want to see some visual output. The interactive cypress environment also helps at debugging your tests, you can even time travel between individual steps and see the exact state of the app.
@@ -61,4 +61,3 @@ $ yarn cypress:open
 
 Check out the Cypress documentation for further information on how to write tests:
 [https://docs.cypress.io/guides/getting-started/writing-your-first-test.html\#Write-a-simple-test](https://docs.cypress.io/guides/getting-started/writing-your-first-test.html#Write-a-simple-test)
-

webapp/README.md

@@ -8,6 +8,8 @@
 # install all dependencies
 $ cd webapp/
 $ yarn install
+# or just
+$ yarn
 ```
 
 Copy:
@@ -96,6 +98,10 @@ You can then visit the Storybook playground on `http://localhost:3002`
 {% endtab %}
 {% endtabs %}
 
+## Maintenance Mode
+
+For installing and running the maintenance mode see [Maintenance Mode](./maintenance/README.md).
+
 ## Styleguide Migration
 
 We are currently in the process of migrating our styleguide components and design tokens from the [Nitro Styleguide](https://github.com/Ocelot-Social-Community/HC-Styleguide-20201003) into the main [ocelot.social repository](https://github.com/Ocelot-Social-Community/Ocelot-Social) and refactoring our components in the process. During this migration, our new components will live in a `_new/` folder to separate them from the old, yet untouched components.

webapp/maintenance/README.md

@@ -0,0 +1,45 @@
+# Maintenance Mode
+
+The maintenance mode shows a translatable page that tells the user that we are right back, because we are working on the server.
+
+## Running The Maintenance Page Or Service
+
+At the moment the maintenance mode can only be locally tested with Docker-Compose.
+
+{% tabs %}
+{% tab title="Locally Without Docker" %}
+
+{% hint style="info" %}
+TODO: Implement a locally running maintenance mode! Without Docker …
+{% endhint %}
+
+The command …
+
+```bash
+# running the maintenance mode in webapp/ folder
+$ yarn generate:maintenance
+```
+
+… is unfortunatelly **not(!)** working at the moment.
+This is because the code is rewritten to be easy usable for Docker-Compose. Therefore we lost this possibility.
+
+{% endtab %}
+{% tab title="Locally With Docker" %}
+
+To get the maintenance mode running use the command:
+
+```bash
+# start Docker in the main folder
+$ docker-compose up
+````
+
+And the maintenance mode page or service will be started as well in an own container.
+In the browser you can reach it under `http://localhost:3503/`.
+
+{% endtab %}
+{% tab title="On The Server" %}
+
+How to bring a Kubernetes server into maintenance mode is discriped [here](../../deployment/ocelot-social/maintenance/README.md).
+
+{% endtab %}
+{% endtabs %}

webapp/maintenance/source/pages/index.vue

@@ -8,7 +8,9 @@
         <ds-flex>
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
             <ds-space>
-              <img alt="Under maintenance" src="/img/custom/under-maintenance.svg" />
+              <a :href="links.ORGANIZATION" :title="$t('login.moreInfo', metadata)" target="_blank">
+                <img class="image" alt="Under maintenance" src="/img/custom/under-maintenance.svg" />
+              </a>
             </ds-space>
           </ds-flex-item>
           <ds-flex-item :width="{ base: '100%', sm: 1, md: 1 }">
@@ -33,6 +35,7 @@
 
 <script>
 import emails from '~/constants/emails.js'
+import links from '~/constants/links.js'
 import metadata from '~/constants/metadata.js'
 import LocaleSwitch from '~/components/LocaleSwitch/LocaleSwitch'
 
@@ -42,7 +45,14 @@ export default {
     LocaleSwitch,
   },
   data() {
-    return { metadata, supportEmail: emails.SUPPORT }
+    return { links, metadata, supportEmail: emails.SUPPORT }
   },
 }
 </script>
+
+<style lang="scss">
+.image {
+  width: 75%;
+  height: auto;
+}
+</style>