Skip to content

Commit 9f35eb1

Browse files
PrajwolAmatyaPrajwolAmatya
committed
dynamically load templated related css
Signed-off-by: Prajwol Amatya <prajwolamatya11@gmail.com>
1 parent e1e65e6 commit 9f35eb1

File tree

3 files changed

+113
-55
lines changed

3 files changed

+113
-55
lines changed

‎package.json‎

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
{
2+
"name": "mdpresentation-viewer",
3+
"version": "2.1.0",
4+
"description": "Markdown Presentation Viewer for OpenCloud and ownCloud Web",
5+
"license": "Apache-2.0",
6+
"private": true,
7+
"type": "module",
8+
"scripts": {
9+
"build": "pnpm vite build",
10+
"build:w": "pnpm vite build --watch --mode development",
11+
"lint": "eslint './*.{js,cjs,mjs,ts}' '{src,tests}/**/*.{js,cjs,mjs,ts,vue}' --color",
12+
"lint:fix": "pnpm lint --fix",
13+
"test:unit": "vitest",
14+
"test:e2e": "NODE_TLS_REJECT_UNAUTHORIZED=0 cucumber-js"
15+
},
16+
"dependencies": {
17+
"@types/reveal.js": "^4.4.8",
18+
"reveal.js": "^5.1.0",
19+
"reveal.js-mermaid-plugin": "^11.4.1",
20+
"revealjs-awesomd": "github:opf/revealjs-awesoMD#handle-yaml-error"
21+
},
22+
"devDependencies": {
23+
"@babel/eslint-parser": "^7.24.5",
24+
"@cucumber/cucumber": "^10.6.0",
25+
"@cucumber/pretty-formatter": "^1.0.1",
26+
"@playwright/test": "^1.44.0",
27+
"@types/node": "^20.12.10",
28+
"@typescript-eslint/eslint-plugin": "^7.8.0",
29+
"@vitejs/plugin-vue": "^5.0.5",
30+
"@vitest/coverage-v8": "1.6.1",
31+
"@vue/test-utils": "^2.4.6",
32+
"axios": "^1.8.2",
33+
"eslint": "^8.57.0",
34+
"eslint-config-prettier": "^9.1.0",
35+
"eslint-plugin-prettier-vue": "^5.0.0",
36+
"eslint-plugin-unused-imports": "^3.2.0",
37+
"eslint-plugin-vue": "^9.25.0",
38+
"happy-dom": "^15.10.2",
39+
"typescript": "^5.4.5",
40+
"vite": "^5.2.11",
41+
"vitest": "^1.6.1",
42+
"vue": "^3.5.11",
43+
"@ownclouders/extension-sdk": "^11.3.1",
44+
"@ownclouders/prettier-config": "0.0.1"
45+
},
46+
"pnpm": {
47+
"peerDependencyRules": {
48+
"ignoreMissing": [
49+
"design-system"
50+
]
51+
}
52+
},
53+
"packageManager": "pnpm@8.15.1",
54+
"peerDependencies": {
55+
"@ownclouders/web-client": "^11.3.1",
56+
"@ownclouders/web-pkg": "^11.3.1"
57+
}
58+
}

‎src/App.vue‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div
33
id="presentation-viewer-main"
4+
ref="presentationViewerRef"
45
class="presentation-viewer"
56
:class="{ 'dark-mode': isDarkMode }"
67
>
@@ -58,6 +59,7 @@ const revealContainer = ref<HTMLElement>()
5859
const mdTextarea = ref<HTMLElement>()
5960
const mediaUrls = ref<string[]>([])
6061
const isReadyToShow = ref<boolean>(false)
62+
const presentationViewerRef = ref<HTMLElement>()
6163
6264
const dataSeparator = '\r?\n---\r?\n'
6365
const dataSeparatorVertical = '\r?\n--\r?\n'
@@ -68,6 +70,7 @@ let reveal: Reveal.Api
6870
const awesoMd = RevealAwesoMD()
6971
const baseUrl = `${window.location.origin}/assets/apps/${appId}`
7072
awesoMd.setBaseUrl(baseUrl)
73+
let loadTemplate = false
7174
7275
const { url } = defineProps({
7376
url: {
@@ -143,6 +146,8 @@ onMounted(async () => {
143146
isReadyToShow.value = true
144147
})
145148
onBeforeUnmount(() => {
149+
presentationViewerRef.value.classList.remove('md-template')
150+
loadTemplate = false
146151
unref(mediaUrls).forEach((url) => {
147152
revokeUrl(url)
148153
})
@@ -396,16 +401,11 @@ function setFontColor() {
396401
}
397402
function applyTemplateIfNeeded() {
398403
const [markdown, frontMatter] = separateFrontmatterAndMarkdown()
399-
let slideType = frontMatter.metadata?.slide
404+
loadTemplate = !!(frontMatter.metadata?.slide || markdown.match(headingSlideRegex))
400405
401-
if (!slideType) {
402-
const match = markdown.match(headingSlideRegex)
403-
if (match) {
404-
slideType = match[1]
405-
}
406-
}
407-
if (slideType) {
406+
if (loadTemplate) {
408407
// dynamically import CSS file only when needed
408+
presentationViewerRef.value.classList.add('md-template')
409409
import('./css/templates.css')
410410
setFontColor()
411411
}

‎src/css/templates.css‎

Lines changed: 47 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,32 @@
1-
.slides {
1+
.md-template .slides {
22
font-size: 28px;
33
}
44

5-
#slideContainer > section {
5+
.md-template #slideContainer > section {
66
justify-content: flex-start !important;
77
align-items: flex-start;
88
}
99

10-
#slideContainer h1,
11-
#slideContainer h2,
12-
#slideContainer h3,
13-
#slideContainer h4,
14-
#slideContainer h5,
15-
#slideContainer h6,
16-
#slideContainer p,
17-
#slideContainer img,
18-
#slideContainer ul,
19-
#slideContainer li,
20-
#slideContainer ol,
21-
#slideContainer div,
22-
#slideContainer footer {
10+
.md-template #slideContainer h1,
11+
.md-template #slideContainer h2,
12+
.md-template #slideContainer h3,
13+
.md-template #slideContainer h4,
14+
.md-template #slideContainer h5,
15+
.md-template #slideContainer h6,
16+
.md-template #slideContainer p,
17+
.md-template #slideContainer img,
18+
.md-template #slideContainer ul,
19+
.md-template #slideContainer li,
20+
.md-template #slideContainer ol,
21+
.md-template #slideContainer div,
22+
.md-template #slideContainer footer {
2323
margin-left: 0;
2424
padding: 0;
2525
text-transform: none;
2626
}
2727

2828

29-
.title {
29+
.md-template .title {
3030
top: 0;
3131
text-align: left;
3232
width: 100%;
@@ -36,26 +36,26 @@
3636
align-items: center;
3737
}
3838

39-
.title h1 {
39+
.md-template .title h1 {
4040
margin: 0;
4141
}
4242

43-
.title p {
43+
.md-template .title p {
4444
font-size: 42px;
4545
}
4646

47-
.logo {
47+
.md-template .logo {
4848
height: 80px;
4949
float: right;
5050
display: flex;
5151
align-items: center;
5252
}
5353

54-
.logo img {
54+
.md-template .logo img {
5555
margin: 0;
5656
}
5757

58-
footer {
58+
.md-template footer {
5959
width: 100%;
6060
height: 10%;
6161
font-size: 22px;
@@ -67,20 +67,20 @@ footer {
6767
align-items: center;
6868
}
6969

70-
.content-container {
70+
.md-template .content-container {
7171
width: 100%;
7272
height: 90%;
7373
display: flex;
7474
flex-direction: column;
7575
align-items: flex-start;
7676
}
7777

78-
.content-container ul,
79-
.content-container ol {
78+
.md-template .content-container ul,
79+
.md-template .content-container ol {
8080
padding-left: 20px !important;
8181
}
8282

83-
.slides section:not(.cover) .content-container .content-wrapper {
83+
.md-template .slides section:not(.cover) .content-container .content-wrapper {
8484
min-height: 0;
8585
padding: 10px;
8686
width: 100%;
@@ -91,7 +91,7 @@ footer {
9191
align-items: flex-start;
9292
}
9393

94-
.slides section:not(.cover) .content-container .content-wrapper .content {
94+
.md-template .slides section:not(.cover) .content-container .content-wrapper .content {
9595
max-width: 100%;
9696
max-height: 100%;
9797
width: 100%;
@@ -100,13 +100,13 @@ footer {
100100
justify-content: center;
101101
}
102102

103-
.title-content-image .content-container .content-wrapper .content {
103+
.md-template .title-content-image .content-container .content-wrapper .content {
104104
position: relative;
105105
max-width: 100%;
106106
max-height: 100%;
107107
}
108108

109-
.title-content-image .content-container .content-wrapper .content > p:has(img){
109+
.md-template .title-content-image .content-container .content-wrapper .content > p:has(img){
110110
height: 100%;
111111
width: 50%;
112112
float: right;
@@ -115,51 +115,51 @@ footer {
115115
right: 0;
116116
}
117117

118-
.cover .content-container {
118+
.md-template .cover .content-container {
119119
justify-content: flex-start;
120120
align-items: center;
121121
}
122122

123-
.cover .content-container .logo {
123+
.md-template .cover .content-container .logo {
124124
height: 40%;
125125
padding: 10px;
126126
}
127127

128-
.image-container {
128+
.md-template .image-container {
129129
display: flex;
130130
flex-direction: column;
131131
justify-content: center;
132132
align-items: center;
133133
}
134134

135-
.image-container .image-wrapper {
135+
.md-template .image-container .image-wrapper {
136136
max-width: 100%;
137137
max-height: 100px;
138138
padding: 5px;
139139
}
140140

141-
.image-container .image-wrapper > img {
141+
.md-template .image-container .image-wrapper > img {
142142
height: auto;
143143
width: auto;
144144
display: block;
145145
margin: 0;
146146
}
147147

148-
.title-content-image .content-container .content-wrapper .content {
148+
.md-template .title-content-image .content-container .content-wrapper .content {
149149
position: relative;
150150
width: 100%;
151151
}
152152

153153

154154

155-
.title-content-image .content-container .content-wrapper .content > ul,
156-
.title-content-image .content-container .content-wrapper .content > ol,
157-
.title-content-image .content-container .content-wrapper .content > p,
158-
.title-content-image .content-container .content-wrapper .content > table {
155+
.md-template .title-content-image .content-container .content-wrapper .content > ul,
156+
.md-template .title-content-image .content-container .content-wrapper .content > ol,
157+
.md-template .title-content-image .content-container .content-wrapper .content > p,
158+
.md-template .title-content-image .content-container .content-wrapper .content > table {
159159
width: 50%;
160160
}
161161

162-
.title-content-image .content-container .content-wrapper .content .image-container {
162+
.md-template .title-content-image .content-container .content-wrapper .content .image-container {
163163
height: 100%;
164164
width: 50%;
165165
float: right;
@@ -168,21 +168,21 @@ footer {
168168
right: 0;
169169
}
170170

171-
.title-content-image .content-container .content-wrapper .content .image-container img {
171+
.md-template .title-content-image .content-container .content-wrapper .content .image-container img {
172172
max-width: 100%;
173173
height: auto;
174174
width: auto;
175175
max-height: 80vh;
176176
}
177177

178-
.about-us-text {
178+
.md-template .about-us-text {
179179
width: 100%;
180180
color: #fff;
181181
text-align: center;
182182
padding: 20px;
183183
}
184184

185-
.info-section {
185+
.md-template .info-section {
186186
display: flex;
187187
justify-content: space-around;
188188
align-items: flex-start;
@@ -191,25 +191,25 @@ footer {
191191
margin-top: 30px;
192192
}
193193

194-
.info-box {
194+
.md-template .info-box {
195195
padding: 10px 20px;
196196
}
197197

198-
.info-box h3 {
198+
.md-template .info-box h3 {
199199
margin: 10px 0;
200200
}
201201

202-
.divider {
202+
.md-template .divider {
203203
width: 2px;
204204
background-color: #000000;
205205
opacity: 0.5;
206206
align-self: stretch;
207207
}
208208

209-
.about-us .content-container .content-wrapper {
209+
.md-template .about-us .content-container .content-wrapper {
210210
justify-content: center;
211211
}
212212

213-
.info-section .divider:last-child {
213+
.md-template .info-section .divider:last-child {
214214
display: none;
215215
}

0 commit comments

Comments
 (0)