aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/async
diff options
context:
space:
mode:
authorpacien2022-09-04 18:18:27 +0200
committerpacien2022-09-04 18:18:27 +0200
commit11bbbae2850b9c45da697a8ed9626495a50a38c0 (patch)
treeff2713118f8b45d36905bfea2933f08d8e70066d /viewer/src/components/async
parente93f7b1eb84c083d67567115284c0002a3a7d5fc (diff)
parent8349be992b46b77dee921f484cfbff8b758ff756 (diff)
downloadldgallery-11bbbae2850b9c45da697a8ed9626495a50a38c0.tar.gz
Merge branch 'develop': release v2.1v2.1
GitHub: related to #315
Diffstat (limited to 'viewer/src/components/async')
-rw-r--r--viewer/src/components/async/AsyncLdMarkdown.vue125
-rw-r--r--viewer/src/components/async/index.ts22
2 files changed, 147 insertions, 0 deletions
diff --git a/viewer/src/components/async/AsyncLdMarkdown.vue b/viewer/src/components/async/AsyncLdMarkdown.vue
new file mode 100644
index 0000000..213c11c
--- /dev/null
+++ b/viewer/src/components/async/AsyncLdMarkdown.vue
@@ -0,0 +1,125 @@
1<!--
2-- ldgallery - A static generator which turns a collection of tagged
3-- pictures into a searchable web gallery.
4--
5-- Copyright (C) 2021 Guillaume FOUET
6--
7-- This program is free software: you can redistribute it and/or modify
8-- it under the terms of the GNU Affero General Public License as
9-- published by the Free Software Foundation, either version 3 of the
10-- License, or (at your option) any later version.
11--
12-- This program is distributed in the hope that it will be useful,
13-- but WITHOUT ANY WARRANTY; without even the implied warranty of
14-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
15-- GNU Affero General Public License for more details.
16--
17-- You should have received a copy of the GNU Affero General Public License
18-- along with this program. If not, see <https://www.gnu.org/licenses/>.
19-->
20
21<!-- eslint-disable vue/no-v-html -->
22<template>
23 <div
24 :class="$style.markdown"
25 v-html="html"
26 />
27</template>
28
29<script setup lang="ts">
30import { marked } from 'marked';
31import { computed } from 'vue';
32
33const props = defineProps({
34 markdown: { type: String, required: true },
35});
36
37const html = computed(() => marked(props.markdown));
38</script>
39
40<style lang="scss" module>
41.markdown {
42 color: white;
43 line-height: 1.7;
44 word-wrap: break-word;
45
46 a {
47 color: #9bcdff;
48 text-decoration: none;
49 }
50
51 hr {
52 background-color: #666;
53 }
54
55 p,
56 blockquote,
57 ul,
58 ol,
59 dl,
60 table,
61 pre {
62 margin: 15px 0;
63 }
64
65 ul,
66 ol {
67 padding-left: 30px;
68 }
69
70 h1 {
71 border-bottom: 1px solid #888;
72 font-size: 2.5em;
73 }
74
75 h2 {
76 border-bottom: 1px solid #666;
77 font-size: 2em;
78 }
79
80 h3 {
81 font-size: 1.5em;
82 }
83
84 h4 {
85 font-size: 1.2em;
86 }
87
88 h5 {
89 font-size: 1em;
90 }
91
92 h6 {
93 color: #777;
94 font-size: 1em;
95 }
96
97 h1,
98 h2,
99 h3,
100 h4,
101 h5,
102 h6 {
103 font-weight: bold;
104 margin: 1em 0 15px 0;
105 }
106
107 h1 + p,
108 h2 + p,
109 h3 + p {
110 margin-top: 10px;
111 }
112
113 pre {
114 color: white;
115 background-color: #2e4049;
116 }
117
118 code {
119 @extend pre;
120 font-family: Consolas, "Liberation Mono", Courier, monospace;
121 font-size: 0.8em;
122 white-space: pre;
123 }
124}
125</style>
diff --git a/viewer/src/components/async/index.ts b/viewer/src/components/async/index.ts
new file mode 100644
index 0000000..05a0814
--- /dev/null
+++ b/viewer/src/components/async/index.ts
@@ -0,0 +1,22 @@
1/* ldgallery - A static generator which turns a collection of tagged
2-- pictures into a searchable web gallery.
3--
4-- Copyright (C) 2019-2022 Guillaume FOUET
5--
6-- This program is free software: you can redistribute it and/or modify
7-- it under the terms of the GNU Affero General Public License as
8-- published by the Free Software Foundation, either version 3 of the
9-- License, or (at your option) any later version.
10--
11-- This program is distributed in the hope that it will be useful,
12-- but WITHOUT ANY WARRANTY; without even the implied warranty of
13-- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
14-- GNU Affero General Public License for more details.
15--
16-- You should have received a copy of the GNU Affero General Public License
17-- along with this program. If not, see <https://www.gnu.org/licenses/>.
18*/
19
20import { defineAsyncComponent } from 'vue';
21
22export const LdMarkdown = defineAsyncComponent(() => import(/* webpackChunkName: "markdown" */ './AsyncLdMarkdown.vue'));