feat: adjust content type/s according to the recently introduced content key from the API

src/App.vue

@@ -16,7 +16,6 @@
         <router-view
           :collection="collection"
           :config="config"
-          :contenturl="contenturl"
           :fontsize="fontsize"
           :imageurl="imageurl"
           :item="item"
@@ -25,6 +24,8 @@
           :manifests="manifests"
           :panels="panels"
           :request="request"
+          :transcription="transcription"
+          :transliteration="transliteration"
           :tree="tree"
         />
       </q-page-container>
@@ -54,7 +55,6 @@ export default {
     return {
       collection: {},
       collectiontitle: '',
-      contenturl: '',
       config: {},
       fontsize: 14,
       imageurl: '',
@@ -64,6 +64,8 @@ export default {
       itemurls: [],
       language: '',
       manifests: [],
+      transcription: '',
+      transliteration: '',
       tree: [],
     };
   },
@@ -166,6 +168,18 @@ export default {
     getConfig() {
       this.config = JSON.parse(document.getElementById('tido-config').text);
     },
+    /**
+      * caller: *getItemData()*
+      *
+      * @param string array
+      *
+      * @return array
+      */
+    getContent(content) {
+      return [
+        content[0].url, content[1].url,
+      ];
+    },
     /**
       * fetch all data provided on 'item level'
       * caller: *mounted-hook*, *getManifest()*
@@ -177,7 +191,8 @@ export default {
         .then((data) => {
           this.item = data;
 
-          this.contenturl = data.content || '';
+          [this.transcription, this.transliteration] = this.getContent(data.content);
+
           this.imageurl = data.image.id || '';
         });
     },

src/components/content.vue

@@ -34,17 +34,11 @@
         </q-btn>
       </div>
     </div>
-    <!-- FIXME: => 'v-html' directive can lead to XSS attack  vue/no-v-html
 
-      Vue v1 supported triple braces to show html ({{{ ... }}}).
-      These have been considered deprecated and aren't available anymore as is Vue's directive "v-text".
-      The latter represents text *as is* anyways, e.g. it would show html tags in the text.
-      Atm there doesn't seem to be an alternative to "v-html" in regards to presenting xml/html.
-    -->
     <div class="row">
       <!-- eslint-disable -- https://eslint.vuejs.org/rules/no-v-html.html -->
       <div
-        :class="['scroll-panel', config.rtl ? 'rtl-support' : '']"
+        :class="['scroll-panel', config.rtl ? 'rtl' : '']"
         :id="nodeid"
         ref="contentsize"
         v-html="content"
@@ -63,10 +57,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    contenturl: {
-      type: String,
-      default: () => '',
-    },
     fontsize: {
       type: Number,
       default: () => 14,
@@ -79,6 +69,10 @@ export default {
       type: Function,
       default: null,
     },
+    transcription: {
+      type: String,
+      default: () => '',
+    },
   },
   data() {
     return {
@@ -96,7 +90,7 @@ export default {
     this.fasSearchPlus = fasSearchPlus;
     this.fasSearchMinus = fasSearchMinus;
 
-    this.content = await this.request(this.contenturl, 'text').then((data) => data);
+    this.content = await this.request(this.transcription, 'text').then((data) => data);
   },
   mounted() {
     this.$refs.contentsize.style.fontSize = `${this.fontsize}px`;
@@ -140,7 +134,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .rtl-support {
+  .rtl {
     direction: rtl;
   }
 </style>

src/index.template.html

@@ -31,7 +31,7 @@
     -->
     <script id="tido-config" type="application/json">
     {
-      "entrypoint": "",
+      "entrypoint": "https://ahikar-test.sub.uni-goettingen.de/api/textapi/ahikar/arabic-karshuni/collection.json",
       "colors": {
         "primary": "",
         "secondary": "",

src/views/mainview.vue

@@ -94,10 +94,6 @@ export default {
       type: Object,
       default: () => {},
     },
-    contenturl: {
-      type: String,
-      default: () => '',
-    },
     fontsize: {
       type: Number,
       default: () => 14,
@@ -130,6 +126,14 @@ export default {
       type: Function,
       default: () => null,
     },
+    transcription: {
+      type: String,
+      default: () => '',
+    },
+    transliteration: {
+      type: String,
+      default: () => '',
+    },
     tree: {
       type: Array,
       default: () => [],
@@ -140,7 +144,7 @@ export default {
       return this.manifests.length && this.tree.length;
     },
     keys() {
-      return { 3: this.imageurl, 4: this.contenturl };
+      return { 3: this.imageurl, 4: this.transcription };
     },
   },
 };