aboutsummaryrefslogtreecommitdiff
path: root/viewer/src/components/async
diff options
context:
space:
mode:
authorZero~Informatique2021-07-03 23:07:09 +0200
committerpacien2021-07-04 17:07:52 +0200
commit7714815396b4e86afc5db1af3726fab4edf0ca35 (patch)
treedb9186008b2b9b95fe27d7c878cdd35374e1afec /viewer/src/components/async
parentdfa1c6e2f2977c32f75c1d93d9e7eb44fbed28c0 (diff)
downloadldgallery-7714815396b4e86afc5db1af3726fab4edf0ca35.tar.gz
viewer: add markdown rendering component
Extracted from b170f49 (GH PR #304)
Diffstat (limited to 'viewer/src/components/async')
-rw-r--r--viewer/src/components/async/Markdown.vue123
-rw-r--r--viewer/src/components/async/index.ts4
2 files changed, 127 insertions, 0 deletions
diff --git a/viewer/src/components/async/Markdown.vue b/viewer/src/components/async/Markdown.vue
new file mode 100644
index 0000000..c4e282b
--- /dev/null
+++ b/viewer/src/components/async/Markdown.vue
@@ -0,0 +1,123 @@
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<template>
22 <div :class="$style.markdown" v-html="html" />
23</template>
24
25<script lang="ts">
26import marked from "marked";
27import { Component, Prop, Vue } from "vue-property-decorator";
28
29@Component
30export default class Markdown extends Vue {
31 @Prop({ required: true }) readonly markdown!: string;
32
33 get html(): string {
34 return marked(this.markdown);
35 }
36}
37</script>
38
39<style lang="scss" module>
40.markdown {
41 line-height: 1.7;
42 word-wrap: break-word;
43
44 a {
45 color: #9bcdff;
46 text-decoration: none;
47 }
48
49 hr {
50 background-color: #666;
51 }
52
53 p,
54 blockquote,
55 ul,
56 ol,
57 dl,
58 table,
59 pre {
60 margin: 15px 0;
61 }
62
63 ul,
64 ol {
65 padding-left: 30px;
66 }
67
68 h1 {
69 border-bottom: 1px solid #888;
70 font-size: 2.5em;
71 }
72
73 h2 {
74 border-bottom: 1px solid #666;
75 font-size: 2em;
76 }
77
78 h3 {
79 font-size: 1.5em;
80 }
81
82 h4 {
83 font-size: 1.2em;
84 }
85
86 h5 {
87 font-size: 1em;
88 }
89
90 h6 {
91 color: #777;
92 font-size: 1em;
93 }
94
95 h1,
96 h2,
97 h3,
98 h4,
99 h5,
100 h6 {
101 font-weight: bold;
102 margin: 1em 0 15px 0;
103 }
104
105 h1 + p,
106 h2 + p,
107 h3 + p {
108 margin-top: 10px;
109 }
110
111 pre {
112 color: white;
113 background-color: #2e4049;
114 }
115
116 code {
117 @extend pre;
118 font-family: Consolas, "Liberation Mono", Courier, monospace;
119 font-size: 0.8em;
120 white-space: pre;
121 }
122}
123</style>
diff --git a/viewer/src/components/async/index.ts b/viewer/src/components/async/index.ts
new file mode 100644
index 0000000..5a7d9a6
--- /dev/null
+++ b/viewer/src/components/async/index.ts
@@ -0,0 +1,4 @@
1// Declare async constants for internal components
2// Their name can't start with 'Ld'
3
4export const Markdown = () => import(/* webpackChunkName: "markdown" */ "./Markdown.vue");