src/components/Article.vue

 <template>
-  <article v-show="article.lemmas.length || article.error">
-    <Header :lemmas="article.lemmas" />
-    <section v-if="! article.error && article.body.pronunciation && article.body.pronunciation.length">
-      <h3>Uttale</h3>
-        <ul>
-          <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' @article-click="article_link_click" />
-        </ul>
-    </section>
-    <section v-if="! article.error && article.body.etymology && article.body.etymology.length">
-      <h3>Etymologi</h3>
+<div v-if="article" :lang="{nob:'nb', nno: 'nn', eng: 'en', 'ukr': 'uk'}[dictionary]" class="article-container">
+  <span :lang="lang_tag_locale" v-if="$vuetify.breakpoint.smAndDown || !$route.name || $route.name == 'lookup'" class="dict-label" role="heading" aria-level="2">{{dict_label}}</span>
+  <div class="article" v-bind:class="{'expanded': !collapsed && collapsable, 'collapsable': collapsable, 'hide-label': hide_label, 'v-sheet v-card rounded-xl': !$parent.article}" v-if="article">
+    <div :class="$vuetify.breakpoint.name" v-if="!invalid">
+    <Header :title_id="title_id" :lemmas="article.lemmas" :dictionary="dictionary" :article_id="article.article_id" @toggle-collapse = "toggle_collapse"/>
+
+    <div class="article_content" :class="$vuetify.breakpoint.name" v-show="!collapsed" ref="article_content">
+      <section v-if="article.body.pronunciation && article.body.pronunciation.length" class="pronunciation">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.pronunciation', content_locale)}}</h4>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.pronunciation" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click" @error="article_error"/>
+          </ul>
+      </section>
+      <section v-if="article.body.etymology && article.body.etymology.length" class="etymology">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.etymology', content_locale)}}</h4>
+          <ul>
+            <DefElement v-for="(element, index) in article.body.etymology" :dictionary="dictionary" :key="index" :body='element' @article-click="article_link_click"  @error="article_error"/>
+          </ul>
+      </section>
+      <section class="definitions" v-if="has_content">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.definitions', content_locale)}}</h4>
+        <ol>
+          <Definition v-for="definition in article.body.definitions" :dictionary="dictionary" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click"  @error="article_error"/>
+        </ol>
+      </section>
+      <section v-if="sub_articles.length" class="expressions">
+        <h4 :lang="lang_tag_locale">{{$t('article.headings.expressions', content_locale)}}</h4>
         <ul>
-          <DefElement v-for="(element, index) in article.body.etymology" :key="index" :body='element' @article-click="article_link_click" />
+          <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click"  @error="article_error"/>
         </ul>
-    </section>
-    <section v-if="! article.error">
-      <h3>Definisjoner</h3>
-      <ol>
-        <Definition v-for="definition in article.body.definitions" :level="1" :key="definition.id" :body='definition' @article-click="article_link_click" />
-      </ol>
-    </section>
-    <section v-if="article.error">
-      <h1>Ooops...</h1>
-      <p>{{article.error}}</p>
-    </section>
-  </article>
+      </section>
+    </div>
+    <ArticleFooter v-if="!collapsed" :article="article"/>
+    </div>
+    <div v-else><v-icon left>warning</v-icon> {{$t('error.article', {no: article.article_id, dict: $t('dicts_inline.'+this.dictionary)})}}</div>
+  </div>
+</div>
 </template>
 
 <script>
 import DefElement from './DefElement.vue'
 import Definition from './Definition.vue'
+import SubArticle from './SubArticle.vue'
 import Header from './Header.vue'
+import ArticleFooter from './ArticleFooter.vue'
+import entities from '../utils/entities.js'
+import Mark from 'mark.js';
+
+function find_sub_articles(definition) {
+  let sub_art_list = []
+  try {
+    let sub_definitions = definition.elements.filter(el => el.type_ == 'definition')
+    let sub_articles = definition.elements.filter(el => el.type_ == 'sub_article' && el.lemmas)
+
+      sub_definitions.forEach((subdef, i) => {
+        sub_art_list = sub_art_list.concat(find_sub_articles(subdef))
+      })
+      sub_art_list = sub_art_list.concat(sub_articles)
+  return sub_art_list
+
+  }
+  catch(error) {
+    console.log("find_sub_articles", this.article.article_id, this.dictionary,  '"'+error.message+'"')
+
+    return []
+  }
+}
+
 
 export default {
   name: 'Article',
   props: {
-    article: Object
+    article: Object,
+    articleLookup: Boolean,
+    title_id: String,
+    queryPattern: String,
+    scope: String,
+  },
+  data: function() {
+    return {
+      is_collapsed: true,
+      invalid: false
+    }
+  },
+  metaInfo() {
+    if (this.articleLookup) {
+      return {title: this.article.lemmas[0].lemma + ' | ' + {"bm,nn": "Bokmålsordboka og Nynorskordboka", "bm": "Bokmålsordboka", "nn": "Nynorskordboka"}[this.dictionary],
+              meta: [{name: 'description', vmid: 'description', content: this.meta_description}],
+              link: [{rel: "canonical", href: `https://ordbokene.no/${this.article.dictionary}/${this.article.article_id}`} ]
+      }
+    }
+  },
+  computed: {
+    hide_label: function() {
+      //collapsable || (collapsed && $store.state.collapseArticles != 'never')
+      if (this.$parent.count_bm || this.$parent.count_nn) {
+        let two_results = (this.$parent.count_bm + this.$parent.count_nn) < 3
+        if (two_results) {
+          return false
+        }
+        else if (this.$vuetify.breakpoint.mdAndUp && (this.collapsed || this.$store.state.collapseArticles == 'never')) {
+          return true
+        }
+        else {
+          return false
+        }
+      }
+    },
+    dictionary: function() {
+      return this.article.dictionary
+    },
+    content_locale: function() {
+      if (this.$i18n.locale == 'eng') {
+        return 'eng'
+      } else if (this.$i18n.locale == 'ukr') {
+        return 'ukr'
+      } else {
+        return {bm: 'nob', nn: 'nno'}[this.dictionary]
+      }
+    },
+    fulltext_highlight: function() {
+      return this.$store.state.fulltextHighlight
+    },
+    collapsable: function() {
+      if (this.$parent.$options.name != 'SearchResults') {
+        this.is_collapsed = false
+        return false
+      }
+      let collapsable = this.$store.state.collapseArticles
+      if (collapsable == 'never') {
+        this.is_collapsed = false
+        return false
+      }
+      if (collapsable == 'always') {
+        this.is_collapsed = true
+        return true
+      }
+      if (collapsable == 'auto') {
+        this.is_collapsed = this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+        return this.$parent.$options.name == 'SearchResults' && (this.$parent.results_bm.length + this.$parent.results_nn.length > 2)
+      }
+    },
+    collapsed: {
+      get() {
+        if (this.$parent.$options.name != 'SearchResults') {
+          return false
+        }
+        if (!this.collapsable) {
+          this.is_collapsed = false
+        }
+        return this.is_collapsed
+      },
+      set(value) {
+        this.is_collapsed = value
+      }
+    },
+    snippet: function() {
+    if (this.collapsable && this.article.body.definitions) {
+      return this.meta_description
+    }
+    return null
+    },
+    meta_description: function() {
+      return this.parse_definitions(this.article.body.definitions)
+    },
+    link_to_self: function() {
+      try {
+      return  {
+        ref: '/' + this.dictionary + '/' + this.article.article_id,
+        article: this.article
+      }
+      } catch(error) {
+        console.log("link_to_self",this.article.article_id, this.dictionary,  '"'+error.message+'"')
+        this.invalid = true
+        //console.error(error)
+        return {ref: "", article: this.article}
+      }
+    },
+    lang_tag_locale: function() {
+        return {nob: "nb", nno: "nn", eng: "en", ukr: "uk"}[this.content_locale]
+    },
+    dict_label: function() {
+      let label = ''
+      const dictionary = this?.article?.dictionary
+      if (dictionary) {
+        if (this.$route.name) {
+          label = this.$t(`dicts.${dictionary}`, this.content_locale)
+        } else {
+          label = this.$t('from', this.content_locale) + " " + this.$t(`dicts_from.${dictionary}`, this.content_locale)
+        }
+      }
+      return label
+    },
+    sub_articles: function() {
+      return this.article.body.definitions.reduce((acc, val) => acc.concat(find_sub_articles(val)), []).sort((s1, s2) => s1.lemmas[0].localeCompare(s2.lemmas[0]))
+    },
+    has_content: function() {
+      for (const definition of this.article.body.definitions) {
+        for (const element of definition.elements) {
+          if (['explanation', 'example', 'compound_list', 'definition'].includes(element.type_)) {
+            return true
+          }
+        }
+      }
+      return false
+    }
   },
   components: {
     DefElement,
     Definition,
-    Header
+    SubArticle,
+    Header,
+    ArticleFooter
+  },
+  mounted: function() {
+    if (this.scope && this.scope.includes("f")) {
+      let instance = new Mark(this.$refs.article_content)
+      if (/[_%|]/.test(this.queryPattern)) {
+        instance.markRegExp(new RegExp(this.queryPattern), {acrossElements: true, separateWordSearch:false});
+      }
+      else {
+        instance.mark(this.queryPattern, {acrossElements: true, separateWordSearch:false, accuracy: 'exact', wildcards: 'enabled'});
+      }
+
+    }
+
+
+    if (this.$route.hash == "#"+ this.title_id) {
+      let focused = document.getElementById(this.title_id)
+      if (focused) focused.focus()
+    }
+    else if (this.$route.hash) {
+      let focused =document.getElementById(this.$route.hash.replace("#",""))
+      if (focused) focused.scrollIntoView({block: "center"})
+    }
   },
   methods: {
+    article_error: function(payload) {
+      console.log("DefElement",payload.location, this.article.article_id, this.dictionary,  '"'+payload.message+'"')
+    },
+    parse_subitems: function(explanation, text) {
+          let new_string = ""
+          let old_parts = text.split(/(\$)/)
+          let linkIndex = 0
+          let self = this
+
+          old_parts.forEach((item) => {
+            if (item == '$') {
+              let subitem = explanation.items[linkIndex]
+              if (/^\d$/.test(subitem.text)) {
+                if (subitem.type_ == "superscript") {
+                new_string += "⁰¹²³⁴⁵⁶⁷⁸⁹"[parseInt(subitem.text)]
+                }
+                else if (subitem.type_ == "subscript") {
+                  new_string += "₀₁₂₃₄₅₆₇₈₉"[parseInt(subitem.text)]
+                }
+              }
+
+              else if (subitem.id) {
+                new_string += entities[self.dictionary][explanation.items[linkIndex].id].expansion
+
+              }
+              else if (subitem.text) {
+                 if (subitem.text.includes('$')) {
+                   new_string += self.parse_subitems(subitem, subitem.text)
+                 }
+                 else new_string += subitem.text
+              }
+              else  {
+                if (explanation.items[linkIndex].lemmas) {
+                new_string +=  explanation.items[linkIndex].word_form || explanation.items[linkIndex].lemmas[0].lemma
+                }
+              }
+              linkIndex += 1
+            }
+            else {
+              new_string += item
+            }
+          })
+          return new_string
+
+    },
+    parse_definitions: function(node) {
+      let definitionTexts = []
+      let self = this
+      try {
+      node.forEach((definition) => {
+        if (definition.elements) {
+        if (definition.elements[0].content) {
+          let new_string = self.parse_subitems(definition.elements[0], definition.elements[0].content)
+          if (new_string.substring(new_string.length, new_string.length - 1) == ":") {
+            new_string = new_string.slice(0, -1)
+          }
+          definitionTexts.push(new_string)
+
+        }
+        else if (definition.elements[0].elements) {
+          definitionTexts.push(self.parse_definitions(definition.elements))
+        }
+      }
+      })
+      } catch(error) {
+        console.log("parse_definitions",this.article.article_id, this.dictionary,  '"'+error.message+'"')
+        this.invalid = true
+        definitionTexts = []
+      }
+
+      let snippet = definitionTexts.join("\u00A0•\u00A0")
+      return snippet
+
+    },
+    toggle_collapse: function() {
+      if (this.collapsed) {
+        this.$plausible.trackEvent('expand article', {props: {article: `${this.dictionary} ${this.article.article_id}`}})
+      }
+      this.collapsed = !this.collapsed
+    },
+
     article_link_click: function(item) {
       this.$emit('article-click', item)
+    },
+    details_click: function(item) {
+      item.title_id = this.title_id
+      this.$emit('details-click', item)
     }
   }
 }
 </script>
 
-<!-- Add "scoped" attribute to limit CSS to this component only -->
 <style>
-article {
-  margin-top: 30px;
+.article {
+  position: relative;
+  padding: 24px;
+  padding-bottom: 12px;
+  margin-bottom: 20px;
+  margin-right: 10px;
+  margin-left: 10px;
+  background-color: #ffffff;
+}
+
+section.xs .article, section.sm .article {
+  margin-bottom: 10px !important;
 }
 
-h3 {
-  margin: 40px 0 0;
-  color: #560027;
+section.md .article, section.lg .article, section.xl .article {
+  padding-top: 10px;
 }
 
-a {
-  color: #560027;
+
+.welcome .article_footer {
+  display: block;
+}
+
+#single_article_container .article {
+  border: none;
+  margin-top: 10px;
+}
+
+
+section {
+  padding-top: 10px;
+  padding-bottom: 10px
+}
+
+
+section.etymology > h4, section.pronunciation > h4 {
+  display: inline;
+}
+
+section.etymology ul, section.pronunciation ul, section.etymology li, section.pronunciation li {
+  display: inline;
+}
+
+section.etymology li:not(:first-child):not(:last-child):before, section.pronunciation li:not(:first-child):not(:last-child):before {
+  content: ", ";
+}
+
+section.etymology li:not(:first-child):last-child:before, section.pronunciation li:not(:first-child):last-child:before {
+  content: "; ";
+  font-size: smaller;
 }
 
 li {
@@ -72,24 +389,26 @@ li.level1.definition {
   list-style: upper-alpha;
 }
 
+li.level2.definition {
+  list-style: decimal;
+}
+
 li.level3.definition {
-  list-style: lower-alpha;
+  /* Norsk ordbok skal ha "lower.alpha" her */
+  list-style: disc;
 }
 
 li.sub_article > ul {
   padding-left: 0px;
 }
 
-li.definition.level1, li.definition.level2 {
-  padding-bottom: 2em;
-}
-
 ::marker {
   font-weight: bold;
-  color: #560027;
+  color: var(--v-primary-base);
 }
 
-ol > li:only-child.level1, li:only-child.level2, li:only-child.level3 {
+ol > li:only-child.level1, li:only-child.level2 {
+  /* level3 a.k.a. underdefinisjoner skal vises med bullet selv om de står alene */
   list-style: none;
 }
 
@@ -98,7 +417,7 @@ li:only-child.level1 > ol {
 }
 
 ul, ol {
-  padding-left: 20px;
+  padding-left: 12px !important;
 }
 
 ul li {
@@ -109,4 +428,36 @@ ul li.definition {
   list-style: disc;
 }
 
+
+
+.choose {
+  color: var(--v-primary-base) !important;
+  text-decoration: none;
+}
+
+.info-card {
+  padding: 12px;
+}
+
+.expanded {
+  padding-bottom: 34px;
+}
+
+
+.header {
+  border-radius: 0px !important;
+}
+
+.dict-label {
+  color: var(--v-primary-base)  ;
+  font-weight: bold;
+  position: absolute;
+  padding-left: 34px;
+  margin-top: -2px;
+  z-index: 2;
+  font-variant-caps: all-small-caps;
+  font-size: 1.17em;
+}
+
+
 </style>

src/components/ArticleFooter.vue

+<template>
+  <div :lang="lang_tag_locale" class="article_footer">
+     <v-snackbar centered
+                max-width="300px"
+                min-width="300px"
+                max-height="36px"
+                min-height="36px"
+                rounded="pill"
+                v-model='copy_popup'
+                timeout="1000">
+
+        <span class="text-center">{{$t(what_copied, content_locale)}}</span>
+      </v-snackbar>
+
+      <v-btn v-if="showLinkCopy"
+             small text class="toolbar-button" rounded @click="copy_link">
+        <v-icon small left>link</v-icon><span class = "button-text">{{$t("article.copy_link", content_locale)}}</span>
+      </v-btn>
+
+      <v-btn v-if="webShareApiSupported" text small class="toolbar-button" rounded @click="shareViaWebShare">
+        <v-icon small left>share</v-icon><span class = "button-text">{{$t("article.share", content_locale)}}</span>
+      </v-btn>
+
+      <v-dialog max-width="600px" v-model="citation_dialog">
+        <template v-slot:activator="{ on, attrs }">
+            <v-btn @click="track_citation" text small class="toolbar-button" rounded v-on="on" v-bind="attrs">
+        <v-icon left small>format_quote</v-icon> <span class = "button-text">{{$t("article.cite", content_locale)}}</span>
+      </v-btn>
+      
+
+        </template>
+
+        <v-card>
+          <v-toolbar elevation="0">
+            <v-toolbar-title><span role="heading" aria-level="1">{{$t('article.cite_title')}}</span></v-toolbar-title>
+            <v-spacer></v-spacer><v-toolbar-items><v-btn @click="close_citation_dialog" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items></v-toolbar>
+          <v-card-text class="text--primary">
+          {{$t("article.cite_description[0]", content_locale)}}<em>{{$t('dicts.'+$parent.dictionary)}}</em>{{$t("article.cite_description[1]", content_locale)}}
+          <br/>
+          <div id = "citation" v-html="this.create_citation()"/>
+          </v-card-text>
+          <v-card-actions>
+          <v-btn depressed small rounded @click="copy_citation"><br>
+            <v-icon left small icon>content_copy</v-icon>  <span class = "button-text">{{$t("article.copy", content_locale)}}</span>
+          </v-btn>
+                    <v-btn depressed small rounded @click="download_ris"><br>
+            <v-icon left small icon>get_app</v-icon> <span class = "button-text">{{$t("article.download")}}</span>
+          </v-btn>
+                    
+          </v-card-actions>
+
+        </v-card>
+
+      </v-dialog>
+
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ArticleFooter',
+  props: {
+    article: Object
+  },
+    computed: {
+    webShareApiSupported() {
+      return navigator.share
+    },
+    showLinkCopy() {
+      return (!navigator.share || this.$vuetify.breakpoint.mdAndUp) && navigator.clipboard
+    },
+    hasPointer() {
+      return window.matchMedia('(hover: hover) and (pointer: fine)').matches
+    },
+    content_locale: function() {
+      return this.$parent.content_locale
+    },
+    lang_tag_locale: function() {
+      return this.$parent.lang_tag_locale
+    }
+  },
+  data: function() {
+    return {
+      copy_popup: false,
+      citation_dialog: false,
+      what_copied: null
+    }
+
+  },
+  methods: {
+    track_citation() {
+      this.$plausible.trackEvent('citation click', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+    },
+    shareViaWebShare() {
+      this.$plausible.trackEvent('webshare', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+      navigator.share({
+        title: "Ordbøkene.no: " + this.article.lemmas[0].lemma,
+        text: "",
+        url: "/" + this.article.dictionary + '/' + this.article.article_id
+      })
+    },
+    create_link() {
+      return 'https://ordbokene.no/' + this.article.dictionary + '/' + this.article.article_id
+    },
+    get_citation_info() {
+      let date = new Date();
+      let dd = (date.getDate() < 10? '0' : '') + date.getDate()
+      let mm = (date.getMonth() < 9? '0' : '') + (date.getMonth()+1)
+      let yyyy = date.getFullYear()
+      let link = this.create_link()
+      let lemma = this.article.lemmas[0].lemma
+      let dict = this.$t(`dicts.${this.article.dictionary}`, this.content_locale)
+      return [lemma, dd, mm, yyyy, link, dict]
+    },
+    create_citation() {
+      const [lemma, dd, mm, yyyy, link, dict] = this.get_citation_info()
+      let citation = this.$t("article.citation", {lemma, link, dd, mm, yyyy, dict})
+
+      return citation
+    },
+    copy_link() {
+      let link = this.create_link()
+      console.log(`${this.$parent.dictionary} ${this.$parent.article.article_id}`)
+      this.$plausible.trackEvent('copy link', {props: {article: `${this.$parent.dictionary} ${this.$parent.article.article_id}`}})
+      let self = this
+         navigator.clipboard.writeText(link).then(() => {
+           self.what_copied = this.$t("article.link_copied")
+           self.copy_popup = true
+         }).catch(err => {
+           console.log("ERROR COPYING:",err)
+         })
+    },
+
+    copy_citation() {
+
+      let citation = document.getElementById("citation").textContent;
+      navigator.clipboard.writeText(citation)
+      this.citation_dialog = false
+      this.what_copied = this.$t("article.citation_copied")
+      this.copy_popup = true
+    },
+
+    close_citation_dialog() {
+      this.citation_dialog = false
+    },
+    download_ris() {
+      const [lemma, dd, mm, yyyy, link] = this.get_citation_info()
+      const a = document.createElement("a")
+      a.style = "display: none"
+      a.setAttribute("download", `${lemma}_${this.article.dictionary}.ris`)
+      const dict = {"bm":"Bokmålsordboka", "nn": "Nynorskordboka"}[this.article.dictionary]
+      const text = `TY  - DICT\nTI  - ${lemma}\nT2  - ${dict}\nPB  - Språkrådet og Universitetet i Bergen\nUR  - ${link}\nY2  - ${yyyy}/${mm}/${dd}/\nER  - `
+      a.setAttribute('href', 'data:application/x-research-info-systems;charset=utf-8,' + encodeURIComponent(text));
+      document.body.appendChild(a)
+      a.click()
+      document.body.removeChild(a)
+    },
+  }
+}
+
+</script>
+<style scoped>
+
+.v-icon {
+  color: var(--v-primary-base) !important;
+}
+
+.toolbar-button {
+  margin-right: 8px;
+  margin-top: 8px;
+  font-size: 12px;
+}
+
+
+.article_footer {
+  color: var(--v-primary-base);
+  padding-top: 24px;
+}
+
+#citation {
+  margin-top: 12px;
+  padding: 12px;
+  background-color: var(--v-button-base) !important;
+  margin-bottom: 6px;
+}
+
+</style>

src/components/CompoundList.vue

 <template>
   <li class="compound_list">
     <ul>
-      <DefElement :body="body.intro" v-if="body.intro" />
-      <li :key="index" v-for="(item, index) in body.elements">
-        <router-link :to="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"  @click.native="article_link_click(item)">
-          <span class="homograph" :key="index">{{item.lemmas[0].hgno ? String.fromCharCode(0x215f + item.lemmas[0].hgno) : ''}}</span>
-          {{item.lemmas[0].lemma}};
-        </router-link>
+      <DefElement :body="body.intro" v-if="body.intro" :dictionary="dictionary" />
+      <li
+        :key="index"
+        v-for="(item, index) in body.elements"
+        >{{' '}}<router-link
+          :to="'/' + dictionary + '/' + item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"
+          @click.native="article_link_click(item)"
+          >{{item.lemmas[0].lemma}}</router-link>
       </li>
     </ul>
   </li>
@@ -18,7 +20,8 @@ import DefElement from './DefElement.vue'
 export default {
   name: 'CompoundList',
   props: {
-    body: Object
+    body: Object,
+    dictionary: String
   },
   components: {
     DefElement
@@ -34,4 +37,12 @@ export default {
   li.compound_list ul li {
     display: inline;
   }
+
+  li.compound_list li:not(:last-child):not(:first-child):after {
+    content: ",";
+  }
+
+  ul {
+    padding-left: 0px !important;
+  }
 </style>

src/components/Contact.vue

+<template>
+
+<v-list>
+            <v-list-item>
+              <div>
+              <h2>{{$t('contact.content[0]')}}</h2><p>
+              {{$t('contact.content[2]')}} <a href="mailto:ordbok@uib.no">ordbok@uib.no</a></p>
+              <h2>{{$t('contact.content[1]')}}</h2><p>
+              {{$t('contact.content[3]')}} <span style="white-space: nowrap;"><a href="mailto:ordbok-teknisk@uib.no">ordbok-teknisk@uib.no</a></span></p>
+              
+              </div>
+            </v-list-item>
+            <v-list-item>
+              <v-list-item-title>
+               <h2>{{$t('contact.faq.title')}}</h2>
+              </v-list-item-title>
+            </v-list-item>
+
+             <v-list-group dense prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[0].title')}}</v-list-item-content>
+            
+          </template>
+    <v-list-item><p><em>{{$t('dicts.bm')}}</em>{{$t('and')}}<em>{{$t('dicts.nn')}}</em>{{$t('contact.faq.items[0].text[0]')}}<router-link to="/om" @click.native="$emit('close')">{{$t('contact.faq.items[0].text[1]')}}</router-link></p></v-list-item>
+               </v-list-group>
+
+            <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[1].title')}}</v-list-item-content>
+          </template>
+    <v-list-item>{{$t('contact.faq.items[1].text')}}</v-list-item>
+               </v-list-group>
+               <v-list-group prepend-icon="help">
+                 <template v-slot:activator>
+            <v-list-item-content>{{$t('contact.faq.items[2].title')}}</v-list-item-content>
+          </template>
+    <v-list-item>{{$t('contact.faq.items[2].text')}}</v-list-item>
+               </v-list-group>
+          </v-list>
+
+</template>
+
+<script>
+
+
+  export default {
+    name: "Contact",
+  }
+</script>
+
+
+

src/components/DefElement.vue

@@ -2,17 +2,37 @@
   <li :is="tag" :class="body.type_"><!--
  --><span :is="item.tag || 'span'" v-for="(item, index) in assemble_text"
           :class="item.type"
+          @error="article_error"
           :key="index"
            v-bind="item.props"><!--
           -->{{item.html}}<!--
-       --><router-link v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)"><!--
-         -->{{item.lemmas[0].lemma}} {{item.definition_order ? ` (${item.definition_order})` : ''}}<!--
-       --></router-link><!--
+          
+       --><router-link class="article_ref" v-if="item.type == 'article_ref'" :to="item.ref" @click.native="article_link_click(item)" :key="index"><!--
+       --><DefElement tag='span' v-if="item.link_text.type_" :dictionary="dictionary" :key="item.id+'_sub'" :body='item.link_text'/><span v-else>{{item.link_text}}</span><!--
+       --><span class="homograph" v-if="item.lemmas[0].hgno" :aria-label="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :title="`${dictionary=='bm'? 'Betydning': 'Tyding'} ${item.lemmas[0].hgno}`" :key="index"><!--
+        --> ({{roman_hgno(item.lemmas[0])}}{{item.definition_order ? '': ')'}}</span>
+        <span class="def_order" v-if="item.definition_order" :aria-label="'definisjon '+item.definition_order">{{item.lemmas[0].hgno ? ', ': ' ('}}{{item.definition_order}})</span>
+       </router-link>
+
+       <!--
+       --><span class="numerator" v-if="item.type == 'fraction'">{{item.num}}</span><!--
+       -->{{item.type == 'fraction' ? '⁄' : ''}}<!--
+       --><span class="denominator" v-if="item.type == 'fraction'">{{item.denom}}</span><!--
  --></span></li>
 </template>
 
 <script>
 import entities from '../utils/entities.js'
+import helpers from '../utils/helpers.js'
+
+function replace_grammar_id(item, lang) {
+  let content = item.content
+  if (content.includes('$') && (item.items[0].id)){
+    let replacement_item = entities[lang][item.items[0].id]['expansion']
+    content = content.replace('$', replacement_item)}
+
+  return content
+}
 
 export default {
   name: 'DefElement',
@@ -21,34 +41,67 @@ export default {
     tag: {
       type: String,
       default: 'li'
+    },
+    dictionary: String
+  },
+  data: function() {
+    return {
+      path: this.$route.fullPath
     }
   },
   computed: {
+    fulltext_highlight: function() {
+      return this.$store.state.fulltextHighlight
+    },
     unparsed: function(){
-      let lang = this.$route.params.lang
-      return this.body.items.map(
-        function(item){
-          if      (item.type_ == 'usage') return {type: item.type_, html: item.text, tag: 'mark'}
-          else if (item.type_ == 'article_ref') return {
-                                                          type: item.type_,
-                                                          html: '',
-                                                          lemmas: item.lemmas,
-                                                          ref: item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
-                                                          article_id: item.article_id,
-                                                          definition_id: item.definition_id,
-                                                          definition_order: item.definition_order
-                                                        }
-          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
-          else if (item.type_ == 'superscript') return {type: item.type_, html: item.text, tag: 'sup'}
-          else if (item.type_ == 'subscript') return {type: item.type_, html: item.text, 'tag': 'sub'}
-          else if (item.type_ == 'quote_inset') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i'}}
-          else if (item.id) return {type: item.type_, html: (entities[lang][item.id] || {})['expansion'] || item.id}
-          else return {type: item.type_ || 'plain', html: item}
+      try {
+        let lang = this.dictionary
+        let path = this.path
+        return this.body.items.map(
+          function(item){
+            if (item.type_ == 'usage') {
+              if (item.items) {
+                item.content = item.text
+                return {type: item.type_, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+              }
+              else {
+                return {type: item.type_, html: item.text, tag: 'i'}
+              }
+            }
+            else if (item.type_ == 'article_ref') {
+                return {
+                    type: item.type_,
+                    html: '',
+                    lemmas: item.lemmas,
+                    link_text: item.word_form || item.lemmas[0].annotated_lemma ||  item.lemmas[0].lemma,
+                    ref: '/' + lang + '/' + item.article_id + (item.definition_id ? '#def' + item.definition_id : ''),
+                    article_id: item.article_id,
+                    definition_id: item.definition_id,
+                    definition_order: item.definition_order,
+                    source: path
+                    }
+                } 
+            else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
+            else if (item.type_ == 'pronunciation_guide') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+            else if (item.type_ == 'superscript') return {type: item.type_, html: item.text, tag: 'sup'}
+            else if (item.type_ == 'subscript') return {type: item.type_, html: item.text, tag: 'sub'}
+            else if (item.type_ == 'quote_inset') return {type: item.type_, body: item, html: '', tag: 'DefElement', props: {body: item, tag: 'i', dictionary: lang}}
+            else if (item.type_ == 'fraction') return helpers.fraction(item.numerator, item.denominator)
+            else if (item.id) return {type: item.type_, html:  (entities[lang][item.id] || {})['expansion'] || item.id}
+            else return {type: item.type_ || 'plain', html: item}
         }
       )
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "unparsed", message: error.message} )
+        return {type: 'plain', html: item}
+      }
+
     },
     assemble_text: function(){
-      var old_parts = this.body.content.split(/(\$)/)
+      try {
+              var old_parts = this.body.content.split(/(\$)/)
       var text_items = this.unparsed.slice(0).reverse()
       var new_parts = []
       old_parts.forEach(function(item){
@@ -59,37 +112,69 @@ export default {
         }
       })
       return new_parts
+
+      }
+      catch(error) {
+        this.$emit('error', {location: "assemble_text", message: error.message} )
+        return []
+      }
+
     }
   },
   methods: {
     article_link_click: function(item) {
       this.$emit('article-click', item)
-    }
+    },
+    article_error: function(payload) {
+      this.$emit('error', payload)
+    },
+    roman_hgno: helpers.roman_hgno
   }
 }
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
-.usage, .pronunciation {
+.usage {
   font-style: italic;
 }
 
-mark {
-  background: rgba(255, 255, 255, 0);
+.pronunciation_guide {
+  font-size: smaller;
+}
+
+.numerator{
+  vertical-align: super;
+  padding-right: 2px;
+  font-size: smaller;
 }
 
-span.language {
-  font-weight: bold;
+.denominator {
+  vertical-align: sub;
+  padding-left: 2px;
+  font-size: smaller;
+}
+
+
+mark {
+  background: rgba(255, 255, 255, 0);
+  color: inherit;
 }
 
 i {
   font-style: normal;
-  font-family: monospace;
 }
 
-.homograph {
-  vertical-align: sub;
+
+.link_text {
+  text-decoration: underline;
+
+}
+
+.homograph, .def_order{
+  text-decoration: none !important;
+  color: black
+
 }
 
 q:before {