legger til alt unntatt underartikler

src/components/Article.vue

@@ -4,12 +4,15 @@
     <div class="">
       <h3>Etymologi</h3>
         <ul>
-          <DefElement v-for="(item, index) in article.etymology" :key="index" :element='item' v-if="item.content" />
+          <DefElement v-for="(element, index) in article.etymology" :key="index" :body='element' v-if="element.content" />
         </ul>
 
     </div>
     <div class="">
       <h3>Definisjoner</h3>
+      <ol>
+        <Definition v-for="(definition, index) in article.definitions" :key="index" :body='definition' />
+      </ol>
     </div>
   </div>
 </template>
@@ -17,6 +20,7 @@
 <script>
 import axios from "axios";
 import DefElement from './DefElement.vue'
+import Definition from './Definition.vue'
 
 export default {
   name: 'Article',
@@ -46,17 +50,39 @@ export default {
     }
   },
   components: {
-    DefElement
+    DefElement,
+    Definition
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
+<style>
 h3 {
   margin: 40px 0 0;
 }
+
 a {
-  color: #42b983;
+  //color: #42b983;
+}
+
+ol > li {
+  padding-bottom: 2em;
+}
+
+ul {
+  padding-top: 8px;
+}
+
+ul li {
+list-style:none;
+}
+
+li ul .definition ul {
+  padding-left: 0px;
+}
+
+ul li.definition {
+  list-style: disc;
 }
 </style>

src/components/DefElement.vue

 <template>
   <li>
-    <div :class="element.type">
+    <div :class="body.type">
       <span v-for="item in assemble_text" :class="item.type" v-html="item.html"></span>
     </div>
   </li>
@@ -13,11 +13,11 @@ import languages from '../utils/languages.js'
 export default {
   name: 'DefElement',
   props: {
-    element: Object
+    body: Object
   },
   computed: {
     unparsed: function(){
-      return this.element.items.map(
+      return this.body.items.map(
         function(item){
           if      (item.type == 'usage') return {type: item.type, html: item.text}
           else if (item.type == 'article_ref') return {type: item.type, html: `<a href="${item.article_id}">${item.lemmas.join(',')}</a>`}
@@ -27,7 +27,7 @@ export default {
       )
     },
     assemble_text: function(){
-      var old_parts = this.element.content.split(/(\$)/)
+      var old_parts = this.body.content.split(/(\$)/)
       var text_items = this.unparsed.slice(0).reverse()
       var new_parts = []
       old_parts.forEach(function(item){
@@ -37,7 +37,6 @@ export default {
           new_parts.push({type: 'plain', html: item})
         }
       })
-      console.log(new_parts)
       return new_parts
     }
   }

src/components/Definition.vue

+<template>
+  <li class="definition" :id="'def' + body.id">
+    <ul>
+      <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="element_wrapper in template_name_added">{{element_wrapper.element}}</li>
+    </ul>
+  </li>
+</template>
+
+<script>
+import DefElement from './DefElement.vue'
+import Example from './Example.vue'
+
+var Definition = {
+  name: 'Definition',
+  props: {
+    body: Object
+  },
+  components: {
+    DefElement,
+    Definition,
+    Example
+  },
+  computed: {
+    template_name_added: function(){
+      return this.body.elements.map(
+        function(element){
+          return {
+              'template': {
+                'explanation': 'DefElement',
+                'definition': 'Definition',
+                'example': 'Example'
+              }[element.type] || 'li',
+              'element': element
+          }
+      })
+    }
+  }
+}
+
+export default Definition
+</script>
+<style>
+li.quote {
+  font-style: italic;
+}
+</style>

src/components/Example.vue

+<template>
+  <li class="example">
+      <ul>
+        <DefElement :body="body.quote" :class="'quote'" />
+        <DefElement :body="body.explanation" v-if="body.explanation" />
+      </ul>
+  </li>
+</template>
+
+<script>
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'Example',
+  props: {
+    body: Object
+  },
+  components: {
+    DefElement
+  }
+}
+
+</script>
+<style scoped>
+ul {
+    padding-left: 0px;
+}
+</style>