src/components/Article.vue

 <template>
-  <div class="article" v-show="article.lemmas.length">
-    <Header :lemmas="article.lemmas" />
-    <div class="" v-if="article.body.pronunciation.length">
-      <h3>Uttale</h3>
-        <ul>
-          <DefElement v-for="(element, index) in article.body.pronunciation" :key="index" :body='element' />
-        </ul>
-    </div>
-    <div class="" v-if="article.body.etymology">
-      <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' />
+          <SubArticle :body="subart" v-for="(subart, index) in sub_articles" :dictionary="dictionary" :key="index" @article-click="article_link_click"  @error="article_error"/>
         </ul>
+      </section>
     </div>
-    <div class="">
-      <h3>Definisjoner</h3>
-      <ol>
-        <Definition v-for="(definition, index) in definitions" :key="index" :body='definition' />
-      </ol>
+    <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 axios from "axios";
 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
   },
-  computed: {
-    definitions: function() {
-      let defs = this.article.body.definitions
-      if (defs.length == 1) {
-        let types = defs[0].elements.reduce((acc, toAdd)=>acc.add(toAdd.type_), new Set())
-        if (types.size == 1 && types.has('definition')) {
-          return defs[0].elements
+  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 = []
       }
-      return defs
+
+      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;
+  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;
+section.md .article, section.lg .article, section.xl .article {
+  padding-top: 10px;
 }
 
-a {
-  //color: #42b983;
+
+.welcome .article_footer {
+  display: block;
 }
 
-ol > li {
-  padding-bottom: 2em;
+#single_article_container .article {
+  border: none;
+  margin-top: 10px;
 }
 
-ul {
-  padding-top: 8px;
+
+section {
+  padding-top: 10px;
+  padding-bottom: 10px
 }
 
-ul li {
-list-style:none;
+
+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 {
+  padding-bottom: 4px;
+}
+
+li.level1.definition {
+  list-style: upper-alpha;
+}
+
+li.level2.definition {
+  list-style: decimal;
+}
+
+li.level3.definition {
+  /* Norsk ordbok skal ha "lower.alpha" her */
+  list-style: disc;
 }
 
-li ul .definition ul {
-  padding-left: 6px;
+li.sub_article > ul {
+  padding-left: 0px;
+}
+
+::marker {
+  font-weight: bold;
+  color: var(--v-primary-base);
+}
+
+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;
+}
+
+li:only-child.level1 > ol {
+  padding-left: 0px;
+}
+
+ul, ol {
+  padding-left: 12px !important;
+}
+
+ul li {
+  list-style:none;
 }
 
 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">
-        <a :href="item.article_id + (item.definition_id ? '#def'+item.definition_id : '')"> {{item.lemmas.join(',')}};</a>
+      <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>
@@ -15,10 +20,16 @@ import DefElement from './DefElement.vue'
 export default {
   name: 'CompoundList',
   props: {
-    body: Object
+    body: Object,
+    dictionary: String
   },
   components: {
     DefElement
+  },
+  methods: {
+    article_link_click: function(item) {
+      this.$emit('article-click', item)
+    }
   }
 }
 </script>
@@ -26,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

 <template>
-  <li :class="body.type_">
-    <span v-for="(item, index) in assemble_text" :class="item.type_" :key="index" v-html="item.html"></span>
-  </li>
+  <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 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 languages from '../utils/languages.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',
   props: {
-    body: Object
+    body: Object,
+    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(){
-      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.definition_id ? '#def'+item.definition_id : ''}">${item.lemmas.join(',')}</a>`}
-          else if (item.type_ == 'pronunciation') return {type: item.type_, html: item.string}
-          else if (item.id) return {type: item.type_, html: entities[item.id] || languages[item.id] || 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){
@@ -37,20 +112,77 @@ 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>
-span.usage, span.pronunciation {
+.usage {
   font-style: italic;
 }
 
-span.language {
-  font-weight: bold;
+.pronunciation_guide {
+  font-size: smaller;
+}
+
+.numerator{
+  vertical-align: super;
+  padding-right: 2px;
+  font-size: smaller;
 }
 
+.denominator {
+  vertical-align: sub;
+  padding-left: 2px;
+  font-size: smaller;
+}
+
+
+mark {
+  background: rgba(255, 255, 255, 0);
+  color: inherit;
+}
+
+i {
+  font-style: normal;
+}
+
+
+.link_text {
+  text-decoration: underline;
+
+}
+
+.homograph, .def_order{
+  text-decoration: none !important;
+  color: black
+
+}
+
+q:before {
+  content: none;
+}
+
+q:after {
+  content: none;
+}
 
 </style>

src/components/Definition.vue

 <template>
-  <li class="definition" :ref="'def' + body.id" :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>
+  <li :class="['definition', 'level'+level]"  :ref="level != 9 ? 'def' + body.id : ''" :id="level != 9? 'def' + body.id : ''">
+    <span v-if="level!=9"/>
+    <ul class="explanations">
+      <DefElement :body="explanation" :dictionary="dictionary" :has_article_ref=has_article_ref(explanation) v-for="(explanation, index) in explanations" :key="index" @article-click="article_link_click" />
     </ul>
+    <div v-if="examples.length">
+      <h5 :lang="lang_tag_locale" v-if="level < 3">{{$t('article.headings.examples', content_locale)}}</h5>
+      <ul class="examples">
+        <Example :body="example" :dictionary="dictionary" v-for="(example, index) in examples" :key="index" @article-click="article_link_click" />
+      </ul>
+    </div>
+    <ul class="compound_lists">
+      <CompoundList :body="compound_list" :dictionary="dictionary" v-for="(compound_list, index) in compund_lists" :key="index" @article-click="article_link_click" />
+    </ul>
+    <div :is="level < 3 ? 'ol' : 'ul'" class="sub_definitions" v-if="subdefs.length">
+      <Definition :def_number='index+1' :level="level+1" :body="subdef" v-for="(subdef, index) in subdefs"  :dictionary="dictionary" :key="index" @article-click="article_link_click" />
+    </div>
   </li>
 </template>
 
 <script>
 import DefElement from './DefElement.vue'
 import Example from './Example.vue'
-import SubArticle from './SubArticle.vue'
 import CompoundList from './CompoundList.vue'
 
 var Definition = {
   name: 'Definition',
   props: {
-    body: Object
+    body: Object,
+    level: Number,
+    dictionary: String,
+    def_number: Number
+    
   },
   components: {
     DefElement,
     Definition,
     Example,
-    SubArticle,
     CompoundList
   },
   computed: {
-    template_name_added: function(){
-      return this.body.elements.map(
-        function(element){
-          return {
-              'template': {
-                'explanation': 'DefElement',
-                'definition': 'Definition',
-                'example': 'Example',
-                'sub_article': 'SubArticle',
-                'compound_list': 'CompoundList'
-              }[element.type_] || 'li',
-              'element': element
-          }
-      })
+    explanations: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'explanation')
+      } catch (error) {
+        this.$emit('error', {location: "explanations", message: error.message})
+        return []
+      }
+    },
+    examples: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'example')
+      } catch (error) {
+        this.$emit('error', {location: "examples", message: error.message})
+        return []
+      }
+        
+    },
+    compund_lists: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'compound_list')
+      } catch (error) {
+        this.$emit('error', {location: "compound_lists", message: error.message})
+        return []
+      }
+        
+    },
+    subdefs: function() {
+      try {
+        return this.body.elements.filter(el => el.type_ == 'definition').filter(def => def.elements.filter(el => el.type_ != 'sub_article').length > 0)
+
+      } catch (error) {
+        this.$emit('error', {location: "subdefs", message: error.message})
+        return []
+      }
+      // filtrerer bort definisjoner som bare inneholder underartikler
+      
+    },
+    content_locale: function() {
+      return this.$parent.content_locale
+    },
+    lang_tag_locale: function() {
+      return this.$parent.lang_tag_locale
     }
-  },
+    
+    },
   mounted: function() {
     let ref = 'def' + this.body.id
     if(location.hash.substring(1) == ref){
-        this.$refs[ref].scrollIntoView()
-        this.$refs[ref].classList.add('highlighted')
+      this.$refs[ref].scrollIntoView({block: 'center'})
+      this.$refs[ref].classList.add('highlighted')
+    }
+  },
+  methods: {
+    article_link_click: function(item) {
+      this.$emit('article-click', item)
+    },
+    has_article_ref: function(item){
+      if(item.items.length && item.items[0].type_ == "article_ref" && item.items[0].definition_id === undefined)
+        {
+          return "true";
+        }
+        else{
+          return "false";
+        }
+     }
+  },
+  watch:{
+    $route(to, from) {
+      let ref = 'def' + this.body.id
+      if (this.$refs[ref]) {
+        if(location.hash.substring(1) == ref){
+          this.$refs[ref].classList.add('highlighted')
+        }else {
+          this.$refs[ref].classList.remove('highlighted')
+        }
+      }
     }
   }
 }
@@ -53,12 +123,22 @@ var Definition = {
 export default Definition
 </script>
 <style>
-li.quote {
+q {
   font-style: italic;
 }
 
-.highlighted {
-  background-color: #ddddff;
-  border-radius: 5px;
+.highlighted, mark {
+  background-color: var(--v-tertiary-darken1);
 }
+
+mark {
+  font-weight: bold;
+}
+
+
+li[has_article_ref="true"] {
+  margin-top: 8px;
+  margin-left: -25px;
+}
+
 </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>
+    <DefElement tag="q" :body="body.quote"  @article-click="article_link_click" :dictionary="dictionary" /><span v-if="body.explanation && body.explanation.content.length"> – </span>
+    <DefElement tag="span" :body="body.explanation" v-if="body.explanation && body.explanation.content.length" @article-click="article_link_click" :dictionary="dictionary" />
   </li>
 </template>
 
@@ -13,10 +11,16 @@ import DefElement from './DefElement.vue'
 export default {
   name: 'Example',
   props: {
-    body: Object
+    body: Object,
+    dictionary: String
   },
   components: {
     DefElement
+  },
+  methods: {
+    article_link_click: function(item) {
+      this.$emit('article-click', item)
+    }
   }
 }
 

src/components/FooterMenu.vue

+<template>
+<span>
+      <v-btn v-if="$route.name!='about'" to="/om" small dark text>
+              <v-icon small left>info</v-icon>{{$t('menu.about')}}
+         </v-btn>
+               <v-btn v-if="$route.name=='about'" to="/" small dark text>
+              <v-icon small left>home</v-icon>{{$t('home')}}
+         </v-btn>
+
+                   <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="help_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>help</v-icon>{{$t('menu.help')}}
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title>{{$t('menu.help')}}</v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="help_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <v-card-text class="text--primary">
+            <br>
+          <Help/>
+          </v-card-text>
+        </v-card>
+      </v-dialog>
+
+      <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="settings_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>settings</v-icon><span>{{$t('settings.title')}}</span>
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title><span  role="heading" aria-level="1">{{$t('settings.title')}}</span></v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="settings_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <Settings/>
+        </v-card>
+      </v-dialog>
+
+          <v-dialog :fullscreen="$vuetify.breakpoint.smAndDown" max-width="800px" v-model="contact_dialog">
+        <template v-slot:activator="{ on, attrs }">
+          <v-btn small dark text v-on="on" v-bind="attrs">
+              <v-icon small left>mail</v-icon><span>{{$t('contact.title')}}</span>
+         </v-btn>
+        </template>
+        <v-card>
+          <v-toolbar elevation="0" dark color="primary">
+            <v-toolbar-title><span  role="heading" aria-level="1">{{$t('contact.title')}}</span></v-toolbar-title><v-spacer></v-spacer>
+            <v-toolbar-items><v-btn @click.native="contact_dialog=false" text>{{$t('close')}}<v-icon right>close</v-icon></v-btn></v-toolbar-items>
+          </v-toolbar>
+          <Contact @close="contact_dialog = false"/>
+        </v-card>
+      </v-dialog>
+      
+</span>
+</div>
+</template>
+<script>
+import Help from './Help.vue'
+import Contact from './Contact.vue'
+import Settings from './Settings.vue'
+
+  export default {
+    name: "FooterMenu",
+    components: {
+      Help,
+      Contact,
+      Settings
+    },
+    data: function() {
+    return {
+      contact_dialog: false,
+      help_dialog: false,
+      settings_dialog: false
+    }
+    }
+  }
+</script>
\ No newline at end of file

src/components/HeaderTitle.vue

+<template>
+<span>
+     <span v-bind:class="{ 'lookup': $route.name=='lookup'}" v-for="(lemma_group, i) in lemma_groups" :key="i">
+    <h3>
+                <!--
+    --><span v-for="(lemma, index) in lemma_group.lemmas"
+          :key="index"><DefElement v-if="lemma.annotated_lemma" :body="lemma.annotated_lemma" tag="span"/><span v-else>{{lemma.lemma}}</span><!--
+          --><span v-if="lemma.hgno"
+                   :aria-label="$t('accessibility.homograph') + parseInt(lemma.hgno)"
+                   :title="$t('accessibility.homograph')+parseInt(lemma.hgno)"
+                   class="hgno">{{" "+roman_hgno(lemma)}}</span><!--
+                    --><span
+                   class="title_comma"
+                   v-if="lemma_group.lemmas[1] && index < lemma_group.lemmas.length-1">{{", "}}
+                  </span>
+    </span>
+</h3>
+<h3 v-if="secondary_header_text">{{secondary_header_text}}</h3>  
+    <span :lang="$parent.$parent.lang_tag_locale" v-if="lemma_group.description" class="subheader">
+    <span class="header_group_list">{{lemma_group.description}}</span>
+          {{lemma_group.pos_group}}
+    <span v-if="$store.state.showInflectionNo" class="inflection_classes">{{lemma_group.inflection_classes}}</span>
+
+    </span>
+
+
+    </span>
+</span>
+</template>
+
+<script>
+import helpers from '../utils/helpers.js'
+import DefElement from './DefElement.vue'
+
+export default {
+  name: 'HeaderTitle',
+  components: {
+      DefElement
+  },
+  props: {
+      lemma_groups: Array,
+      secondary_header_text: String
+  },
+  methods: {
+      roman_hgno: helpers.roman_hgno,
+      
+  }
+}
+
+</script>
+

src/components/Help.vue

+<template id="">
+    <div class='help' :class="$vuetify.breakpoint.name">
+
+    <div  v-if="$store.state.currentLocale == 'nno'">
+  <p>Du søkjer ved å skrive inn ordet og trykkje på returtasten (<kbd>enter</kbd>) eller velje eit søkjeforslag i nedtrekksmenyen. Tast <kbd>Shift</kbd>+<kbd>7</kbd> dersom du vil hoppe tilbake til søkjefeltet etter å ha søkt.
+  Overskrifta i toppen av kvart søkjetreff er ei lenkje til ei ny artikkelside for det aktuelle ordet. Om du ikkje får meir enn eitt treff i kvar ordbok, viser heile artikkelen i resultatlista, og du treng ikkje trykkje på lenkja. Er det fleire treff, kan du òg sjå artikkelinnhaldet i resultatlista ved å trykkje på "Vis artikkel" i botnen av søkjetreffet. Sjå innstillingane nedanfor om du ønskjer at resultatlista alltid skal vise fullstendige artiklar.
+    </p><p>
+    Kva ordbok du får treff i, avheng av kva ordbok du har valt å søkje i, og om ordet blir brukt i begge skriftspråka. Det ligg per i dag ikkje inne koplingar mellom ordbøkene, men vi har utvikla ein meinte-du-funksjon, som vi håpar blir til hjelp for å finne dei riktige orda både i bokmål og nynorsk.</p>
+    <p>Du kan søkje direkte på faste uttrykk, t.d. <em>gi katten i</em>. Alternativt finn du uttrykka samla til slutt i artikkelen eller artiklane dei er knytte til. Når du skriv inn eit enkelt ord i søkjefeltet, viser nedtrekksmenyen òg dei faste uttrykka som ordet er ein del av.</p>
+<h2>Søk med jokerteikn</h2>
+<p>Dersom du er usikker på skrivemåten av eit ord eller ønskjer treff i meir
+        enn éin artikkel, kan du bruke <kbd>%</kbd> og <kbd>*</kbd> for å få treff på null, eitt eller fleire teikn.
+Symbolet <kbd>_</kbd> erstattar berre eitt teikn. Du kan plassere jokerteikna fleire stader i søkjeordet.</p>
+
+Døme:
+<p>Søkjer du på «<a href="https://ordbokene.no/bm,nn/search?q=arbeid%2ar&scope=ei">arbeid*r</a>», er dei første treffa i nedtrekksmenyen «arbeider» i <em>Bokmålsordboka</em> og «arbeidar» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=inter%25es%25ant&scope=ei">inter%es%ant</a>» gjev treff på «interessant» i begge ordbøkene. </p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=f%C3%B8rsk%25l%C3%A6r_r&scope=ei">førsk%lær_r</a>» gjev treff på «førskolelærer» i <em>Bokmålsordboka</em> og «førskolelærar/førskulelærar» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=ku__&scope=e">ku__</a>» gjev treff på ord på fire bokstavar som startar på «ku».</p>
+
+<h2>Kombiner søkjeord</h2>
+<p>Symbolet <kbd>|</kbd> gjer det mogleg å søkje med fleire søkjeord samtidig. Det er òg mogleg å kombinere søkjeord som inneheld jokerteikn.</p>
+
+Døme:
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=kj%C3%A6rlighet%7Ckj%C3%A6rleik&scope=ei">kjærlighet|kjærleik</a>» gjev treff på «kjærlighet» i <em>Bokmålsordboka</em> og «kjærleik» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=undervis_r%7Cl%C3%A6r_r&scope=ei">undervis_r|lær_r</a>» gjev treff på «underviser» og «lærer» i <em>Bokmålsordboka</em> og «undervisar» og «lærar» i <em>Nynorskordboka</em>.</p>
+</div>
+
+    <div  v-if="$store.state.currentLocale == 'nob'">
+  <p>Du søker ved å skrive inn ordet og trykke på returtasten (<kbd>enter</kbd>) eller velge et søkeforslag i nedtrekksmenyen. Tast <kbd>Shift</kbd>+<kbd>7</kbd> hvis du vil hoppe tilbake til søkefeltet etter å ha søkt.
+  Overskriften i toppen av hvert søketreff er en lenke til en ny artikkelside for det aktuelle ordet. Hvis du ikke får mer enn ett treff i hver ordbok, vises hele artikkelen i resultatlisten, og du trenger ikke trykke på lenken. Er det flere treff, kan du også vise artikkelinnholdet i resultatlisten ved å trykke på "Vis artikkel" i bunnen av søketreffet. Se innstillingene nedenfor hvis du ønsker at resultatlisten alltid skal vise fullstendige artikler.
+    </p><p>
+    Hvilken ordbok du får treff i, avhenger av hvilken ordbok du har valgt å søke i, og om ordet blir brukt i begge skriftspråkene. Det ligger per i dag ikke inne koblinger mellom ordbøkene, men vi har utviklet en mente-du-funksjon, som vi håper blir til hjelp for å finne de riktige ordene både i bokmål og nynorsk.
+</p><p>Du kan søke direkte på faste uttrykk, f.eks. <em>gi katten i</em>. Alternativt finner du uttrykkene samlet til slutt i artikkelen eller artiklene de er knyttet til. Når du skriver inn et enkelt ord i søkefeltet, viser nedtrekksmenyen også de faste uttrykkene som ordet inngår i.</p>
+
+<h2>Søk med jokertegn</h2>
+<p>Dersom du er usikker på skrivemåten av et ord eller ønsker treff i mer enn én artikkel, kan du bruke <kbd>%</kbd> og <kbd>*</kbd> for å få treff på null, ett eller flere tegn.
+Symbolet <kbd>_</kbd> erstatter kun ett tegn. Du kan plassere jokertegnene flere steder i søkeordet.</p>
+
+Eksempler:
+<p>Søker du på «<a href="https://ordbokene.no/bm,nn/search?q=arbeid%2ar&scope=ei">arbeid*r</a>», er de første treffene i nedtrekksmenyen «arbeider» i <em>Bokmålsordboka</em> og «arbeidar» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=inter%25es%25ant&scope=ei">inter%es%ant</a>» gir treff på «interessant» i begge ordbøkene. </p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=f%C3%B8rsk%25l%C3%A6r_r&scope=ei">førsk%lær_r</a>» gir treff på «førskolelærer» i <em>Bokmålsordboka</em> og «førskolelærar/førskulelærar» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=ku__&scope=e">ku__</a>» gir treff på ord på fire bokstaver som begynner med «ku».</p>
+
+<h2>Kombiner søkeord</h2>
+<p>Symbolet <kbd>|</kbd> gjør det mulig å søke med flere søkeord samtidig. Det er også mulig å kombinere søkeord som inneholder jokertegn.</p>
+
+Eksempler:
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=kj%C3%A6rlighet%7Ckj%C3%A6rleik&scope=ei">kjærlighet|kjærleik</a>» gir treff på «kjærlighet» i <em>Bokmålsordboka</em> og «kjærleik» i <em>Nynorskordboka</em>.</p>
+<p>Søket «<a href="https://ordbokene.no/bm,nn/search?q=undervis_r%7Cl%C3%A6r_r&scope=ei">undervis_r|lær_r</a>» gir treff på «underviser» og «lærer» i <em>Bokmålsordboka</em> og «undervisar» og «lærar» i <em>Nynorskordboka</em>.</p>
+  </div>
+
+
+ <div  v-if="$store.state.currentLocale == 'eng'">
+  <p>Search the website by entering a word, press <kbd>return</kbd> or pick a search suggestion in the drop-down menu. Press <kbd>/</kbd> whenever you want to jump back to the search box.
+    The heading of each search result is a link to a lookup page for the article in question. If you get no more than one result in each dictionary, the entire article is shown in the list of results, and you won't need to click the link. If there are more resutls, you may expand the article content in the results list by clicking "Show article" at the bottom of the result item. You can make the articles expand by default in the settings below.
+    </p><p>
+    The dictionary from which to get search results depends on the dictionary selected, and if the word is used in both written languages. Currently, the two dictionaries are not linked at word level. Thus a ‘Did you mean’ function has been developed. The hope is that this function will be helpful in finding the right words in both Bokmål and Nynorsk. It is possible to search for fixed expressions, e.g.
+    <em>gi katten i</em> (not give a damn). It is also possible to find such expressions at the end of each article or the articles they are linked to. When typing a single word in the search field, the drop-down menu also shows the common expressions the word is part of.
+</p>
+<h2>Wildcard search</h2>
+<p>If unsure of the spelling of a word or want results from more than one article, it is possible to use <kbd>%</kbd> and <kbd>*</kbd> to replace zero, one or more characters.
+Underscore (<kbd>_</kbd>) replaces only one character. You may use the wilcard symbols multiple times in your search expression.</p>
+
+Examples:
+<p>The search query “<a href="https://ordbokene.no/bm,nn/search?q=arbeid%2ar&scope=ei">arbeid*r</a>”, will result in results in the drop-down menu with “arbeider” (worker) in the Bokmål dictionary and “arbeidar” (worker) in the Nynorsk Dictionary.</p>
+<p>The search query “<a href="https://ordbokene.no/bm,nn/search?q=inter%25es%25ant&scope=ei">inter%es%ant</a>” returns the result “interessant” (interesting) in both dictionaries. </p>
+<p>The search query “<a href="https://ordbokene.no/bm,nn/search?q=f%C3%B8rsk%25l%C3%A6r_r&scope=ei">førsk%lær_r</a>” gives resutls for “førskolelærer” (pre-school teacher) in the Bokmål dictionary and “førskolelærar/førskulelærar” (pre-school teacher) in the Nynorsk dictionary.</p>
+<p>The search query «<a href="https://ordbokene.no/bm,nn/search?q=ku__&scope=e">ku__</a>» returns four letter words starting with «ku».</p>
+
+<h2>Combine search terms</h2>
+<p>The symbol <kbd>|</kbd> allows you to use in several search words at the same time. You can also combine search words that contain wildcard symbols.</p>
+
+Examples:
+<p>The search “<a href="https://ordbokene.no/bm,nn/search?q=kj%C3%A6rlighet%7Ckj%C3%A6rleik&scope=ei">kjærlighet|kjærleik</a>” yields the result “kjærlighet” in the Bokmål dictionary and “kjærleik” (love) in the Nynorsk dictionary.</p>
+<p>The search “<a href="https://ordbokene.no/bm,nn/search?q=undervis_r%7Cl%C3%A6r_r&scope=ei">undervis_r|lær_r</a>” results in “underviser” (teacher) and “lærer” (teacher) in the Bokmål dictionary and “undervisar” and “lærar” in the Nynorsk dictionary.</p>
+ </div>
+
+<div  v-if="$store.state.currentLocale == 'ukr'">
+  <p>Для пошуку введіть слово і натисніть кнопку <kbd>enter</kbd> або виберіть варіант пошуку у спадному меню. Натисніть <kbd>Shift</kbd>+<kbd>7</kbd>, якщо ви хочете повернутися до поля пошуку після виконання пошуку.
+    Заголовок у верхній частині кожного результату пошуку - це посилання на сторінку нової статті про це слово. Якщо ви не знайдете більше одного збігу в кожному словнику, вся стаття з’явиться у списку результатів, і вам не потрібно переходити за посиланням. Якщо результатів декілька, ви також можете переглянути вміст статті у списку результатів, натиснувши "показати статтю" внизу результату пошуку. Дивіться налаштування нижче, якщо ви хочете, щоб у списку результатів завжди випадали повні статті.
+  </p>
+  <p>
+    У якому словнику ви отримаєте збіги, залежить від того, який словник ви вибрали для пошуку, 
+    і чи використовується це слово в обох письмових мовах. Наразі між словниками немає посилань, 
+    але ми розробили для вас функцію, яка, сподіваємось, допоможе знайти потрібні слова як у <em>букмолі</em>, 
+    так і в <em>нюношку</em>.
+  </p>
+  <p>
+    Ви можете здійснювати пошук безпосередньо за фіксованими виразами, 
+    напр., <em>gi katten i</em> (не заморочуватись нічим або ніким). 
+    Крім того, ви знайдете вирази разом у статті чи статтях, з якими вони пов’язані. 
+    Коли ви вводите в поле пошуку одне слово, у спадному меню також показуються фіксовані вирази, до 
+    яких входить це слово.
+  </p>
+<h2>Пошук за допомогою символів підстановки</h2>
+<p>Якщо ви не впевнені в написанні слова або хочете знайти збіги в більш ніж одній статті, ви можете використовувати <kbd>%</kbd> і <kbd>*</kbd> щоб отримати збіги від нуля, одного або декількох символів.
+Символ <kbd>_</kbd> замінює лише один символ. Ви можете розмістити символи підстановки в декількох місцях ключового слова.</p>
+
+Приклади:
+<p>Пошук за запитом “<a href="https://ordbokene.no/bm,nn/search?q=arbeid%2ar&scope=ei">arbeid*r</a>” покаже у спадному меню результатів слова “arbeider” (працівник) у <em>Словнику букмола</em> і “arbeidar” (працівник) у <em>Словнику нюношка</em>.</p>
+<p>Пошук “<a href="https://ordbokene.no/bm,nn/search?q=f%C3%B8rsk%25l%C3%A6r_r&scope=ei">førsk%lær_r</a>” надає результати за словом “førskolelærer” (вчитель дошкільної освіти) у <em>Словнику букмола</em> та “førskolelærar/førskulelærar” (вчитель дошкільної освіти) у <em>Словнику нюношка</em>.</p>
+<p>Пошук “<a href="https://ordbokene.no/bm,nn/search?q=ku__&scope=e">ku__</a>” забезпечує відповідність словами з чотирьох букв, що починаються на “ku”.</p>
+
+<h2>Поєднайте ключові слова</h2>
+<p>Символ <kbd>|</kbd> дозволяє здійснювати пошук за кількома ключовими словами одночасно. Також можливо комбінувати ключові слова, що містять символи підстановки.</p>
+
+Приклади:
+<p>Пошук “<a href="https://ordbokene.no/bm,nn/search?q=kj%C3%A6rlighet%7Ckj%C3%A6rleik&scope=ei">kjærlighet|kjærleik</a>” надає результати за словом “kjærlighet” (любов) у <em>Словнику букмола</em> і “kjærleik” (любов) у <em>Словнику нюношка</em>.</p>
+<p>Пошук “<a href="https://ordbokene.no/bm,nn/search?q=undervis_r%7Cl%C3%A6r_r&scope=ei">undervis_r|lær_r</a>” надає результати за словом “underviser” (навчання) та “lærer” (вчитель) у <em>Словнику букмола</em> і “undervisar” (навчання) та “lærar” (вчитель) у <em>Словнику нюношка</em>.</p>
+  </div>
+</div>
+
+
+
+</template>
+
+
+<style scoped>
+
+
+
+  ul.bullet > li {
+    list-style: disc;
+    margin-left: 20px;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  blockquote {
+    margin-left:50px;
+  }
+
+kbd {
+    border-radius: 5px !important;
+    background-color: var(--v-tertiary-darken1) !important;
+    color: var(--v-text-base) !important;
+}
+
+</style>

src/components/Pagination.vue

+<template>
+<div v-bind:class="{'centered': bottom}">
+              <span color="tertiary" class = "pagination">
+            <v-pagination @input="update" v-model="$parent.$parent.page" :class="$vuetify.breakpoint.name" :total-visible="$vuetify.breakpoint.smAndDown && !bottom ? 5 : 8" circle :length="Math.ceil(Math.max($parent.count_bm, $parent.count_nn)/$parent.$parent.perPage)"></v-pagination>
+                <span class="result-counts" v-if="!bottom && $vuetify.breakpoint.smAndDown">
+                  <span class="total-results">{{$parent.$parent.total_results()}} treff </span>
+                  <span v-if="$parent.$parent.lang=='bm,nn'" class="dict-counts"> | {{$vuetify.breakpoint.mdAndDown? 'bokmål': 'Bokmålsordboka'}}: {{$parent.count_bm}} | {{$vuetify.breakpoint.mdAndDown? 'nynorsk': 'Nynorskordboka'}}: {{$parent.count_nn}}</span>
+                  <span v-if="$parent.$parent.lang!='bm,nn'" class="dict-counts"> | {{$t('dicts_inline.'+$parent.lang)}}</span>
+                </span> 
+          </span>
+          <v-btn v-if="bottom && $parent.$parent.total_results() > 6" text @click.native="to_top"><v-icon left>expand_less</v-icon>{{$t('to_top')}}</v-btn> 
+          </div>
+</template>
+
+
+<script>
+
+export default ({
+    name: "Pagination",
+    props: {
+        bottom: Boolean
+    },
+    methods: {
+        update: function(item) {
+        if (this.bottom) {
+            this.to_top()
+        }
+      
+        this.$emit('update-page', item)
+
+    },
+        to_top: function() {
+        let first = document.getElementById("result0")
+        if (first) first.focus();
+        window.scrollTo(0,0)
+        }
+        
+
+    },
+})
+</script>
+
+<style scoped>
+
+.centered {
+    text-align: center;
+    padding-bottom: 10px;
+}
+
+.centered > span {
+    justify-content: center;
+    padding-bottom: 10px
+}
+
+
+</style>
\ No newline at end of file