Completion of documentation;

Fetch documentation via API and display in modal;
Add Google Analytics & imprint.

app.js

@@ -6,6 +6,7 @@ let kara = new Vue({
             themes: false,
             setNameAtStart: true
         },
+        documentation: '',
         messages: [],
         talk: false,
         lastMessage: null,
@@ -37,6 +38,7 @@ let kara = new Vue({
     mounted() {
         this.getSavedData();
         this.getReactions();
+        this.getDocumentation();
 
         if (this.features.themes) {
             this.getBootswatchThemes();
@@ -902,7 +904,7 @@ let kara = new Vue({
             return includesAllkeywords;
         },
 
-        // Ajax calls for saving/receiving reactions & themes
+        // Ajax calls for saving/receiving reactions, documentation & themes
         getBootswatchThemes() {
             let Kara = this;
 
@@ -925,6 +927,15 @@ let kara = new Vue({
                 console.log(error);
             });
         },
+        getDocumentation() {
+            let Kara = this;
+
+            axios.get('/api/kara/documentation').then((response) => {
+                Kara.documentation = response.data;
+            }).catch((error) => {
+                console.log(error);
+            });
+        },
 
         // Levenshtein distance
         isSimilar(message1, message2) {

documentation.md

@@ -8,8 +8,7 @@ Clears the chat.
 Repeats your message.
 
 ##### ```/todo```
-Adds a new todo to the list.\
+Adds a new todo to the list. Todos can be viewed, checked and cleared by clicking on the clipboard-icon (only visible once you have a least one todo) in the upper right.
-Todos can be viewed by clicking on the clipboard-icon in the upper right.
 
 ##### ```/weather```
 Tells you the weather in your location.\
@@ -40,19 +39,10 @@ Some predefined meme-categories can be triggerd by:
 ##### ```/me```
 Sends a classical "_User farted_" message.
 
-##### Animal images & facts
-There are a number of commands to receive random animal images & facts.\
-
-Animals:\
-_birb, dog, cat, fox, panda, red_panda & koala_
-
-To get a fact or an image, use:
-```/youranimalImg``` or ```/youranimalFact```
-
-
 ##### ```/lyrics```
 Fetch lyrics for songs.\
-Usage: ```/lyrics songname``` (you can also search for things like ```songname artist```)
+Usage: ```/lyrics songname```\
+(you can also search for things like ```songname artist```)
 
 ##### ```/quiz```
 Get a quiz-question and guess the answer.\
@@ -65,6 +55,17 @@ Guess the right question to the given answer.
 ##### ```/dice```
 Roll the dice!
 
+##### Animal images & facts
+There are a number of commands to receive random animal images & facts.
+
+Animals:\
+_birb, dog, cat, fox, panda, red_panda & koala_
+
+To get a fact or an image, use:
+```/youranimalImg``` or ```/youranimalFact```
+
+
+
 --- 
 
 #### Experimental
@@ -72,3 +73,23 @@ Roll the dice!
 ##### ```/talk```
 Activate talking. Kara will now talk to you.\
 The voice-language heavily depends on the device used.
+
+--- 
+
+#### Planned features
+
+- Timetracking for work with unlimited trackers
+- Wikipedia lookup
+- News integration
+- Multilanguage (English, German)
+- More natural conversations
+- Chrome Extension (_WIP_)
+- YouTube integration
+- more fun stuff & games
+- maybe some quick image-converting & editing in the future.
+
+--- 
+
+#### Found a bug?
+
+Eat it! Or open an [issue](https://git.luna-development.net/neroignis/kara) 🐞

index.html

@@ -149,7 +149,7 @@
                     </div>
                     <div class="form-group">
                         <div class="float-right">
-                            <i class="fa fa-code" aria-hidden="true"></i> App by <a href="/">Luna Development</a>
+                            <i class="fa fa-code" aria-hidden="true"></i> App by <a href="/" target="_blank">Luna Development</a>
                         </div>
                     </div>
                 </div>
@@ -167,22 +167,16 @@
                 <div class="modal-header">
                     <h5 class="modal-title">Documentation</h5>
                 </div>
-                <div class="modal-body">
+                <div class="modal-body" v-html="documentation">
-                    <h6>Commands</h6>
+                </div>
-                    <ul>
+                <div class="modal-footer justify-content-between">
-                        <li>/clear</li>
+                    <div>
-                        <li>/meme </li>
+                        <i class="fa fa-code"></i> App by <a href="/" target="_blank">Luna Development</a> |
-                        <li>/say </li>
+                        <i aria-hidden="true" class="fas fa-balance-scale"></i> <a href="/impressum" target="_blank">Imprint</a>
-                        <li>/joke</li>
+                    </div>
-                        <li>/weather</li>
+                    <div class="float-right">
-                        <li></li>
+                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
-                        <li></li>
+                    </div>
-                        <li></li>
-                        <li></li>
-                        <li></li>
-                    </ul>
-                    <hr/>
-                    <h6></h6>
                 </div>
             </div>
         </div>
@@ -203,7 +197,15 @@
 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 <script src="js/lightbox.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/alertifyjs@1.13.1/build/alertify.min.js"></script>
-<script src="app.js">
+<script src="app.js"></script>
+<!-- Global site tag (gtag.js) - Google Analytics -->
+<script async src="https://www.googletagmanager.com/gtag/js?id=UA-80940725-2"></script>
+<script>
+    window.dataLayer = window.dataLayer || [];
+    function gtag(){dataLayer.push(arguments);}
+    gtag('js', new Date());
+
+    gtag('config', 'UA-80940725-2');
 </script>
 </body>
 </html>