Merge pull request #307 from ldgallery/pacien-20210704-markdown-item-handler

viewer: markdown item handler

6 files changed, 88 insertions, 0 deletions

diff --git a/viewer/src/@types/ItemType.ts b/viewer/src/@types/ItemType.ts
index 9974d4e..5ef38d8 100644
--- a/viewer/src/@types/ItemType.ts
+++ b/viewer/src/@types/ItemType.ts
@@ -21,6 +21,7 @@ export enum ItemType {
   OTHER = "other",
   PICTURE = "picture",
   PLAINTEXT = "plaintext",
+  MARKDOWN = "markdown",
   PDF = "pdf",
   VIDEO = "video",
   AUDIO = "audio",
diff --git a/viewer/src/@types/gallery.d.ts b/viewer/src/@types/gallery.d.ts
index 9011f19..0b4cfc4 100644
--- a/viewer/src/@types/gallery.d.ts
+++ b/viewer/src/@types/gallery.d.ts
@@ -48,6 +48,9 @@ export interface PictureItem extends Item {
 export interface PlainTextItem extends Item {
   properties: PlainTextProperties;
 }
+export interface MarkdownItem extends Item {
+  properties: MarkdownProperties;
+}
 export interface PDFItem extends Item {
   properties: PDFProperties;
 }
@@ -71,6 +74,7 @@ export interface Item {
     | OtherProperties
     | PictureProperties
     | PlainTextProperties
+    | MarkdownProperties
     | PDFProperties
     | VideoProperties
     | AudioProperties
@@ -93,6 +97,10 @@ export interface PlainTextProperties {
   type: ItemType.PLAINTEXT;
   resource: string;
 }
+export interface MarkdownProperties {
+  type: ItemType.MARKDOWN;
+  resource: string;
+}
 export interface PDFProperties {
   type: ItemType.PDF;
   resource: string;
diff --git a/viewer/src/components/item_handlers/LdMarkdownViewer.vue b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
new file mode 100644
index 0000000..3b9a8d6
--- /dev/null
+++ b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
@@ -0,0 +1,76 @@
+<!--
+-- ldgallery - A static generator which turns a collection of tagged
+--             pictures into a searchable web gallery.
+--
+-- Copyright (C) 2021  Guillaume FOUET
+--
+-- This program is free software: you can redistribute it and/or modify
+-- it under the terms of the GNU Affero General Public License as
+-- published by the Free Software Foundation, either version 3 of the
+-- License, or (at your option) any later version.
+--
+-- This program is distributed in the hope that it will be useful,
+-- but WITHOUT ANY WARRANTY; without even the implied warranty of
+-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+-- GNU Affero General Public License for more details.
+--
+-- You should have received a copy of the GNU Affero General Public License
+-- along with this program.  If not, see <https://www.gnu.org/licenses/>.
+-->
+
+<template>
+  <b-loading v-if="isLoading" active />
+  <Markdown v-else-if="markdown" :class="$style.container" :markdown="markdown" />
+</template>
+
+<script lang="ts">
+import { MarkdownItem } from "@/@types/gallery";
+import { Markdown } from "@/components/async";
+import FetchWithCheck from "@/services/fetchWithCheck";
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component({
+  components: {
+    Markdown,
+  },
+})
+export default class LdMarkdownViewer extends Vue {
+  @Prop({ required: true }) readonly item!: MarkdownItem;
+
+  isLoading: boolean = true;
+  markdown: string | null = null;
+
+  created() {
+    this.fetchMarkdown();
+  }
+
+  get itemResourceUrl(): string {
+    return this.$galleryStore.resourceRoot + this.item.properties.resource;
+  }
+
+  // TODO: Identical to SplashScreen.vue, use composition with Vue3.
+  fetchMarkdown() {
+    FetchWithCheck.get(this.itemResourceUrl)
+      .then(response => response.text())
+      .then(text => (this.markdown = text))
+      .finally(() => (this.isLoading = false))
+      .catch(this.displayError);
+  }
+
+  displayError(reason: any) {
+    this.$buefy.snackbar.open({
+      message: `${reason}`,
+      actionText: this.$t("snack.retry"),
+      position: "is-top",
+      type: "is-warning",
+      onAction: this.fetchMarkdown,
+    });
+  }
+}
+</script>
+
+<style lang="scss" module>
+.container {
+  padding: 8px;
+}
+</style>
diff --git a/viewer/src/services/navigation.ts b/viewer/src/services/navigation.ts
index 9bbd90c..5dcea88 100644
--- a/viewer/src/services/navigation.ts
+++ b/viewer/src/services/navigation.ts
@@ -25,6 +25,7 @@ export default class Navigation {
     directory: "folder",
     picture: "image",
     plaintext: "file-alt",
+    markdown: "file-alt",
     pdf: "file-pdf",
     video: "file-video",
     audio: "file-audio",
diff --git a/viewer/src/views/GalleryNavigation.vue b/viewer/src/views/GalleryNavigation.vue
index fdd3922..200637e 100644
--- a/viewer/src/views/GalleryNavigation.vue
+++ b/viewer/src/views/GalleryNavigation.vue
@@ -44,6 +44,7 @@ export default class GalleryNavigation extends Vue {
     directory: "ld-directory-viewer",
     picture: "ld-picture-viewer",
     plaintext: "ld-plain-text-viewer",
+    markdown: "ld-markdown-viewer",
     pdf: "ld-pdf-viewer",
     video: "ld-video-viewer",
     audio: "ld-audio-viewer",
diff --git a/viewer/src/views/SplashScreen.vue b/viewer/src/views/SplashScreen.vue
index dcb845d..93d84a1 100644
--- a/viewer/src/views/SplashScreen.vue
+++ b/viewer/src/views/SplashScreen.vue
@@ -30,6 +30,7 @@ export default class SplashScreen extends Vue {
     this.fetchMarkdown();
   }
 
+  // TODO: Identical to LdMarkdownViewer.vue, use composition with Vue3.
   fetchMarkdown() {
     FetchWithCheck.get(`${process.env.VUE_APP_DATA_URL}${this.config.resource}?${this.config.acknowledgmentKey ?? ""}`)
       .then(response => response.text())