generalisering som gjør det mulig å gjengi artikler i Norsk Ordbok

src/App.vue

@@ -163,8 +163,8 @@ export default {
   -moz-osx-font-smoothing: grayscale;
   color: #2c3e50;
   margin-top: 60px;
-  margin-left: 30%;
-  margin-right: 10%;
+  margin-left: 500px;
+  margin-right: 300px;
 }
 
 .show {

src/components/Article.vue

@@ -16,7 +16,7 @@
     <section>
       <h3>Definisjoner</h3>
       <ol>
-        <Definition v-for="definition in definitions" :key="definition.id" :body='definition' @article-click="article_link_click" />
+        <Definition v-for="definition in article.body.definitions" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
       </ol>
     </section>
   </article>
@@ -72,31 +72,49 @@ a {
   //color: #42b983;
 }
 
-ol > li {
+li {
+  padding-bottom: 4px;
+}
+
+li.level1.definition {
+  list-style: upper-alpha;
+}
+
+li.level3.definition {
+  list-style: lower-alpha;
+}
+
+li.sub_article > ul {
+  padding-left: 0px;
+}
+
+li.definition.level1, li.definition.level2 {
   padding-bottom: 2em;
 }
 
-ol > li:only-child {
+::marker {
+  font-weight: bold;
+}
+
+ol > li:only-child.level1, li:only-child.level2, li:only-child.level3 {
   list-style: none;
 }
 
-ol > li:only-child > ul {
+li:only-child.level1 > ol {
   padding-left: 0px;
 }
 
 ul {
   padding-top: 8px;
+  padding-left: 20px;
 }
 
 ul li {
 list-style:none;
 }
 
-li ul .definition ul {
-  padding-left: 6px;
-}
-
 ul li.definition {
   list-style: disc;
 }
+
 </style>

src/components/Definition.vue

 <template>
-  <li class="definition" :ref="'def' + body.id" :id="'def' + body.id">
-    <ul>
+  <li :class="['definition', 'level'+level]" :ref="'def' + body.id" :id="'def' + body.id">
+    <ul class="explanation">
       <li :is="element_wrapper.template" :body="element_wrapper.element" v-for="(element_wrapper, index) in template_name_added" :key="index" @article-click="article_link_click">{{element_wrapper.element}}</li>
     </ul>
+    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
+      <Definition :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs" :key="index" @article-click="article_link_click" />
+    </div>
+    <ul class="sub_articles" v-if="subArticles.length">
+      <SubArticle :body="subart" v-for="(subart, index) in subArticles" :key="index" @article-click="article_link_click" />
+    </ul>
   </li>
 </template>
 
@@ -15,7 +21,8 @@ import CompoundList from './CompoundList.vue'
 var Definition = {
   name: 'Definition',
   props: {
-    body: Object
+    body: Object,
+    level: Number
   },
   components: {
     DefElement,
@@ -26,19 +33,23 @@ var Definition = {
   },
   computed: {
     template_name_added: function(){
-      return this.body.elements.map(
+      return this.body.elements.filter(el => ! ['definition', 'sub_article'].includes(el.type_)).map(
         function(element){
           return {
               'template': {
                 'explanation': 'DefElement',
-                'definition': 'Definition',
                 'example': 'Example',
-                'sub_article': 'SubArticle',
                 'compound_list': 'CompoundList'
               }[element.type_] || 'li',
               'element': element
           }
       })
+    },
+    subdefs: function() {
+      return this.body.elements.filter(el => el.type_ == 'definition')
+    },
+    subArticles: function() {
+      return this.body.elements.filter(el => el.type_ == 'sub_article')
     }
   },
   mounted: function() {