aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/async/AsyncLdMarkdown.vue
diff options
context:
space:
mode:
authorpacien2022-09-03 01:34:26 +0200
committerpacien2022-09-03 01:34:26 +0200
commita8452594c6571e8003baa2aca14747eeeee08152 (patch)
treea894d99c22a601197869c7a6928d40bb4ae2c392 /viewer/src/components/async/AsyncLdMarkdown.vue
parentdd9c9804e9e3da9880c711f53edb9c4a19d782f8 (diff)
parent00510820a2794efcadbc83f7f8b54318fe198ecb (diff)
downloadldgallery-a8452594c6571e8003baa2aca14747eeeee08152.tar.gz
Merge branch 'vue3-refactoring-staging' into develop
Reviewed-by: pacien <pacien.trangirard@pacien.net>
Diffstat (limited to 'viewer/src/components/async/AsyncLdMarkdown.vue')
-rw-r--r--viewer/src/components/async/AsyncLdMarkdown.vue125
1 files changed, 125 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>