Display image post's information

src/views/ImageView.vue

@@ -10,14 +10,46 @@
             </li>
           </ul>
         </div>
+        <strong>Information</strong>
+        <ul class="pl-2">
+          <li>ID: {{ imageInfo.snowflake }}</li>
+          <li>Uploader: {{ imageInfo.user }}</li>
+          <li v-if="imageInfo.source">
+            Source: <a :href="imageInfo.source">{{ imageInfo.source }}</a>
+          </li>
+        </ul>
+      </div>
+    </section>
+    <section class="flex-auto ml-12">
+      <img :src="`/api/image/${flake}/file`" alt="" class="max-w-4xl" />
+      <div
+        v-if="imageInfo.commentary || imageInfo.commentary_translation"
+        class="bg-gray-200 bg-opacity-60 p-4 m-2"
+      >
+        <div><strong>Artist's commentary</strong></div>
+        <div>
+          <button @click="originalComment = true" v-if="imageInfo.commentary">
+            <strong>Original</strong>
+          </button>
+          <span v-if="imageInfo.commentary && imageInfo.commentary_translation">
+            |
           </span>
+          <button
+            @click="originalComment = false"
+            v-if="imageInfo.commentary_translation"
+          >
+            <strong>Translation</strong>
+          </button>
+        </div>
+        <div class="break-words max-h-80 overflow-y-auto">
+          {{
+            originalComment
+              ? imageInfo.commentary
+              : imageInfo.commentary_translation
+          }}
+        </div>
       </div>
     </section>
-    <img
-      :src="`/api/image/${this.$route.params.flake}/file`"
-      alt=""
-      class="max-w-4xl ml-16"
-    />
   </div>
 </template>
 
@@ -26,6 +58,9 @@ export default {
   data: function () {
     return {
       imageTags: Array,
+      originalComment: true,
+      imageInfo: Object,
+      flake: this.$route.params.flake,
     };
   },
   methods: {
@@ -34,9 +69,21 @@ export default {
       const imageTags = await response.json();
       return imageTags;
     },
+    async getImageInfo() {
+      const response = await fetch(`/api/image/${this.flake}`);
+      const imageInfo = await response.json();
+      return {
+        commentary: imageInfo.commentary,
+        commentary_translation: imageInfo.commentary_translation,
+        snowflake: imageInfo.snowflake,
+        source: imageInfo.source,
+        user: imageInfo.user,
+      };
+    },
   },
   async created() {
     this.imageTags = await this.getImageTags();
+    this.imageInfo = await this.getImageInfo();
   },
 };
 </script>
\ No newline at end of file