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/Autocomplete.vue

-<template>
-  <div class="autocomplete-container">
-    <v-autocomplete
-        v-model="select"
-        :loading="loading"
-        :items="items"
-        :search-input.sync="search"
-        item-text="label"
-        :menu-props="{maxHeight: 500, transition: 'fade-transition'}"
-        prepend-inner-icon="search"
-        append-icon="undefined"
-        return-object
-        hide-no-data
-        no-filter
-        hide-details
-        label="Søk..."
-        solo
-        auto-select-first
-        placeholder="Søk..."
-        ref="autocomplete"
-        color="rgb(188, 71, 123)"
-        dense
-      >
-      <template v-slot:item="data">
-      <span class="search-hit">{{data.item.label}} </span> ({{data.item.lang_set ? Array.from(data.item.lang_set).sort().join(', ') : 'fritekstsøk'}})
-      </template>
-    </v-autocomplete>
-  </div>
-</template>
-
-<script>
-  import axios from "axios"
-  import debounce from "debounce"
-
-  export default {
-    props: {
-      endpoint: String
-    },
-    data: function() {
-      return {
-        loading: false,
-        items: [],
-        search: null,
-        select: null,
-        debounced: debounce(function(q, self) {
-          self.loading = true
-          return axios.get(self.endpoint + 'suggest?q=' + encodeURIComponent(q))
-                      .then(
-                            function(response) {
-                                let hits = []
-                                if (q == self.search) {
-                                  response.data.forEach((item, i) => {
-                                    let match = encodeURIComponent(item.match)
-
-                                    if (! hits[0] || hits[0].word != match) {
-                                      hits.splice(0, 0, {q: encodeURIComponent(q), lang_set: new Set(), word: match, articles: []})
-                                    }
-                                    hits[0].lang_set.add(item.dictionary == 'bob' ? 'bm' : 'nn')
-                                    hits[0].articles.push(item)
-                                  });
-                                  hits.forEach(function (hit) {
-                                    if (hit.lang_set) {
-                                      hit.label = decodeURIComponent(hit.word)
-                                    }
-                                  });
-                                  hits.reverse()
-                                  hits = hits.slice(0, 9)
-                                  if (q) {
-                                    hits.push({q: encodeURIComponent(q), label: q + ' '})
-                                  }
-                                }
-                                self.items = hits
-                                self.loading = false
-                              })
-        }, 100)
-      }
-    },
-    watch: {
-      search (val) {
-        if (! val) {
-          this.items = []
-        } else {
-          this.run_query(val)
-        }
-      },
-      select(item) {
-        this.$emit('submit', item)
-        let self = this
-        setTimeout(() => self.$refs.autocomplete.$refs.input.select(), 1)
-      }
-    },
-    methods: {
-      run_query(q) {
-        this.debounced(q, this)
-      }
-    },
-  }
-</script>
-
-
-<style scoped>
-  .search-hit {
-    font-weight: bold;
-    margin-right: 5px;
-  }
-
-  .autocomplete-container {
-    max-width: 500px;
-  }
-</style>

src/components/CompoundList.vue

@@ -2,11 +2,13 @@
   <li class="compound_list">
     <ul>
       <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)">
-          <span class="homograph" :key="index">{{item.lemmas[0].hgno ? String.fromCharCode(0x215f + item.lemmas[0].hgno) : ''}}</span>
-          {{item.lemmas[0].lemma}};
-        </router-link>
+      <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>
@@ -35,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>
+
+
+