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

viewer: markdown item handler

1 files changed, 76 insertions, 0 deletions

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>