From 2f9e51b5cd7dfafadac90ec896edd365da12a1c8 Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Sat, 3 Jul 2021 23:07:09 +0200
Subject: viewer: add markdown item handler

Extracted from b170f49 (GH PR #304)
---
 .../components/item_handlers/LdMarkdownViewer.vue  | 82 ++++++++++++++++++++++
 1 file changed, 82 insertions(+)
 create mode 100644 viewer/src/components/item_handlers/LdMarkdownViewer.vue

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/item_handlers/LdMarkdownViewer.vue b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
new file mode 100644
index 0000000..ecebbcf
--- /dev/null
+++ b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
@@ -0,0 +1,82 @@
+<!--
+-- 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="flex-grow-1" :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;
+  }
+
+  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>
+.splashscreen {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  padding: 32px;
+}
+.buttonOkay {
+  min-width: 310px;
+  align-self: center;
+}
+</style>
-- 
cgit v1.2.3


From 581029f1b15b51f90812a47b20bce454014da32a Mon Sep 17 00:00:00 2001
From: Zero~Informatique
Date: Tue, 12 Apr 2022 21:35:24 +0200
Subject: viewer: add markdown item handler

Minor CSS fixes
Comment for future upgrade to Vue3
---
 viewer/src/components/item_handlers/LdMarkdownViewer.vue | 14 ++++----------
 1 file changed, 4 insertions(+), 10 deletions(-)

(limited to 'viewer/src/components')

diff --git a/viewer/src/components/item_handlers/LdMarkdownViewer.vue b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
index ecebbcf..3b9a8d6 100644
--- a/viewer/src/components/item_handlers/LdMarkdownViewer.vue
+++ b/viewer/src/components/item_handlers/LdMarkdownViewer.vue
@@ -20,7 +20,7 @@
 
 <template>
   <b-loading v-if="isLoading" active />
-  <Markdown v-else-if="markdown" class="flex-grow-1" :markdown="markdown" />
+  <Markdown v-else-if="markdown" :class="$style.container" :markdown="markdown" />
 </template>
 
 <script lang="ts">
@@ -48,6 +48,7 @@ export default class LdMarkdownViewer extends Vue {
     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())
@@ -69,14 +70,7 @@ export default class LdMarkdownViewer extends Vue {
 </script>
 
 <style lang="scss" module>
-.splashscreen {
-  display: flex;
-  flex-flow: column;
-  align-items: center;
-  padding: 32px;
-}
-.buttonOkay {
-  min-width: 310px;
-  align-self: center;
+.container {
+  padding: 8px;
 }
 </style>
-- 
cgit v1.2.3