Skip to content

Commit 85b5fd8

Browse files
grgprarupgrgprarup
committed
Added test for markdown with metadata, and templates
1 parent 10375fc commit 85b5fd8

File tree

8 files changed

+265
-9
lines changed

8 files changed

+265
-9
lines changed

‎css/theme/source/metadata.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/* metadata.scss */
2+
/* This css is only for example, you can add your own css.*/
3+
4+
section {
5+
width: 100%;
6+
height: 100%;
7+
}
8+
9+
.content-container {
10+
height: 90%;
11+
font-size: 32px;
12+
text-align: left;
13+
}
14+
15+
footer {
16+
height: 10%;
17+
color: #7f7f7f;
18+
display: flex;
19+
justify-content: space-between;
20+
}
21+
22+
.cover .content-container {
23+
align-content: center;
24+
display: grid;
25+
}
26+
27+
.title-image .image-container {
28+
height: 80%;
29+
display: flex;
30+
flex-direction: column;
31+
align-items: center;
32+
justify-content: center;
33+
}

‎dist/theme/metadata.css

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* metadata.scss */
2+
/* This css is only for example, you can add your own css.*/
3+
section {
4+
width: 100%;
5+
height: 100%;
6+
}
7+
8+
.content-container {
9+
height: 90%;
10+
font-size: 32px;
11+
text-align: left;
12+
}
13+
14+
footer {
15+
height: 10%;
16+
color: #7f7f7f;
17+
display: flex;
18+
justify-content: space-between;
19+
}
20+
21+
.cover .content-container {
22+
align-content: center;
23+
display: grid;
24+
}
25+
26+
.title-image .image-container {
27+
height: 80%;
28+
display: flex;
29+
flex-direction: column;
30+
align-items: center;
31+
justify-content: center;
32+
}

‎plugin/markdown/plugin.js

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -194,18 +194,18 @@ const Plugin = () => {
194194

195195
// vertical
196196
if( sectionStack[i] instanceof Array ) {
197-
markdownSections += '<section '+ newOptions.attributes +'>';
197+
markdownSections += '<section ' + newOptions.attributes + '>';
198198

199199
sectionStack[i].forEach( function( child ) {
200200
[content, newOptions] = parseMarkdown(child, newOptions)
201-
markdownSections += '<section '+ newOptions.attributes +' data-markdown>' + createMarkdownSlide( content, newOptions ) + '</section>';
201+
markdownSections += '<section ' + newOptions.attributes + ' data-markdown>' + createMarkdownSlide( content, newOptions ) + '</section>';
202202
} );
203203

204204
markdownSections += '</section>';
205205
}
206206
else {
207207
[content, newOptions] = parseMarkdown(sectionStack[i], newOptions)
208-
markdownSections += '<section '+ newOptions.attributes +' data-markdown>' + createMarkdownSlide( content, newOptions ) + '</section>';
208+
markdownSections += '<section ' + newOptions.attributes + ' data-markdown>' + createMarkdownSlide( content, newOptions ) + '</section>';
209209
}
210210
}
211211

@@ -428,7 +428,7 @@ const Plugin = () => {
428428

429429
}
430430

431-
function parseFrontMatter (content, options) {
431+
function parseFrontMatter(content, options) {
432432
options = getSlidifyOptions( options)
433433

434434
const parsedFrontMatter = fm(content)
@@ -445,7 +445,7 @@ const Plugin = () => {
445445
return [content, options];
446446
}
447447

448-
function parseMarkdown (markdown, options) {
448+
function parseMarkdown(markdown, options) {
449449
const yamlRegex = /```(yaml|yml)\n([\s\S]*?)```(\n[\s\S]*)?/g;
450450
if (yamlRegex.test(markdown)){
451451
yamlRegex.lastIndex = 0;
@@ -486,7 +486,7 @@ const Plugin = () => {
486486
tempDiv.innerHTML = Mustache.render(xhr.responseText, { content: content, metadata: options.metadata });
487487
} else {
488488
tempDiv.innerHTML = `Template for slideType "${options.metadata.slideType}" not found.`
489-
console.error('Failed to fetch template. Status: ' + xhr.status);
489+
console.error(`Failed to fetch template. Status: ${xhr.status}`);
490490
}
491491
return tempDiv.textContent;
492492
} catch (error) {

‎templates/cover-template.html

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="content-wrapper">
4+
<p>{{ metadata.presenterName }}</p>
5+
{{ content }}
6+
</div>
7+
</div>
8+
<footer>
9+
<div class="footer-content">
10+
<p>{{ metadata.styles }}</p>
11+
</div>
12+
<div class="footer-logo">
13+
<img data-src="{{ metadata.logo }}" alt="Logo">
14+
</div>
15+
</footer>
16+
</script>

‎templates/title-content-template.html

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="content-wrapper">
4+
5+
{{ content }}
6+
7+
</div>
8+
</div>
9+
10+
<footer>
11+
<div class="footer-content">
12+
<p>{{ metadata.styles }}</p>
13+
</div>
14+
15+
<div class="footer-logo">
16+
<img data-src="{{ metadata.logo }}" alt="Logo"></div>
17+
</footer>
18+
</script>

‎templates/title-image-template.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<script type="x-tmpl-mustache">
2+
<div class="content-container">
3+
<div class="content-wrapper">
4+
5+
{{ content }}
6+
7+
</div>
8+
9+
<div class="image-container">
10+
{{ #metadata.images }}
11+
<div class="image-wrapper">
12+
<img data-src="{{ url }}" alt="{{ url }}">
13+
{{ #imageDescription }}
14+
<div class="image-description">
15+
<p>{{ . }}</p>
16+
</div>
17+
{{ /imageDescription }}
18+
19+
{{ #imageCredit }}
20+
<div class="image-credit">
21+
<p>Source: {{ . }}</p>
22+
</div>
23+
{{ /imageCredit }}
24+
</div>
25+
{{ /metadata.images }}
26+
</div>
27+
</div>
28+
29+
<footer>
30+
<div class="footer-content">
31+
<p>{{ metadata.styles }}</p>
32+
</div>
33+
34+
<div class="footer-logo">
35+
<img data-src="{{ metadata.logo }}" alt="Logo"></div>
36+
</footer>
37+
</script>

‎test/metadata-markdown.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
description: This is a template for a presentation
3+
styles: Training Material
4+
logo: https://placehold.co/350x80?text=Logo
5+
presenterName: Presenter's Name
6+
slideType: title-content
7+
---
8+
9+
```yaml
10+
slideType: cover
11+
```
12+
# Title in Cover Slide
13+
14+
---
15+
16+
# Title Content Slide
17+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc sit amet nisl.
18+
- List item 1
19+
- Sub list item 1
20+
- Sub list item 2
21+
- List item 2
22+
23+
--
24+
25+
# List item 1
26+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc sit amet nisl.
27+
28+
--
29+
30+
# List item 2
31+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod, nisl quis tincidunt aliquam, nunc nisl aliquet nunc, quis aliquam nisl nunc sit amet nisl.
32+
33+
---
34+
35+
```yaml
36+
slideType: title-image
37+
images:
38+
- url: https://placehold.co/500x400?text=Image
39+
imageCredit: Image Credits
40+
imageDescription: Image Descriptions
41+
```
42+
43+
# Title Image Slide

‎test/test-markdown.html

Lines changed: 80 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88

99
<link rel="stylesheet" href="../dist/reveal.css">
1010
<link rel="stylesheet" href="../node_modules/qunit/qunit/qunit.css">
11+
<link rel="stylesheet" href="../dist/theme/metadata.css">
1112
<script src="../node_modules/qunit/qunit/qunit.js"></script>
1213
</head>
1314

@@ -174,7 +175,7 @@
174175
## Slide 2
175176

176177

177-
Paragraph 1.2
178+
Paragraph 1.2
178179
multi-line <!-- {_class="fragment highlight-red"} -->
179180

180181
Paragraph 2.2 <!-- {_class="fragment highlight-red"} -->
@@ -226,7 +227,7 @@
226227
<script type="text/template">
227228
## Hello world
228229

229-
Multiple
230+
Multiple
230231
Line
231232
<!-- .element: class="fragment highlight-blue" -->
232233
</script>
@@ -314,6 +315,13 @@
314315
</div>
315316
</div>
316317

318+
<div class="reveal deck7" style="display: none;">
319+
<div class="slides">
320+
<section data-markdown="metadata-markdown.md" data-separator="\r?\n---\r?\n"
321+
data-separator-vertical="\r?\n--\r?\n"></section>
322+
</div>
323+
</div>
324+
317325
<script type="module">
318326
import Reveal from '../dist/reveal.esm.js'
319327
import Markdown from '../plugin/markdown/markdown.esm.js'
@@ -497,19 +505,88 @@
497505
QUnit.test( '```javascript [756:] add line offset and sets no line highlights and sets language', function( assert ) {
498506
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-offset-and-lanugage .hljs.javascript[data-ln-start-from="756"]' ).length, 1 );
499507
});
500-
508+
501509
QUnit.test( '```block should allow custom fragment', function( assert ) {
502510
assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-code-in-fragment pre.fragment' ).length, 1 );
503511
});
504512

505513
} );
506514

515+
let deck7 = new Reveal( document.querySelector( '.deck7' ), { plugins: [ Markdown ] })
516+
deck7.addEventListener( 'ready', function() {
517+
518+
QUnit.module('Metadata Markdown');
519+
520+
QUnit.test('Total number of slides', function (assert) {
521+
assert.strictEqual(deck7.getTotalSlides(), 5, 'Found five slides in total');
522+
});
523+
524+
QUnit.test('Number of Vertical slides', function (assert) {
525+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section>section').length, 3, 'Found three vertical slides');
526+
});
527+
528+
QUnit.test('Number of Horizontal slides', function (assert) {
529+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section').length, 3, 'Found three horizontal slides');
530+
});
531+
532+
QUnit.test('SlideType as slide class', function (assert) {
533+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section.cover').length, 1, 'Found one slides with class cover');
534+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section>section.title-content').length, 3, 'Found three slides with class title-content');
535+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section.title-image').length, 1, 'Found one slide with class title-image');
536+
});
537+
538+
QUnit.test('content-container class', function (assert) {
539+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section .content-container').length, 5, 'Found five slides with class content-container');
540+
});
541+
542+
QUnit.test('content-wrapper class', function (assert) {
543+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section .content-container .content-wrapper').length, 5, 'Found five slides with class content-wrapper');
544+
});
545+
546+
QUnit.test('footer-content class', function (assert) {
547+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section footer .footer-content').length, 5, 'Found five slides with class footer-content');
548+
});
549+
550+
QUnit.test('footer-logo class', function (assert) {
551+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section footer .footer-logo').length, 5, 'Found five slides with class footer-logo');
552+
});
553+
554+
QUnit.test('image-container class', function (assert) {
555+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section .image-container').length, 1, 'Found one slide with class image-container');
556+
});
557+
558+
QUnit.test('image-wrapper class', function (assert) {
559+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section .image-container .image-wrapper').length, 1, 'Found one slide with class image-wrapper');
560+
});
561+
562+
QUnit.test('Total images', function (assert) {
563+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal section img').length, 6, 'Found 6 images in total');
564+
});
565+
566+
QUnit.test('Image with data-src', function (assert) {
567+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal section img[src]').length, 6, 'Image data source has been set');
568+
});
569+
570+
QUnit.test('Image with description', function (assert) {
571+
assert.strictEqual(deck7.getRevealElement().querySelector('.reveal .slides>section.title-image .image-description>p ').textContent, 'Image Descriptions', 'Image description has been set');
572+
});
573+
574+
QUnit.test('Image with credit', function (assert) {
575+
assert.strictEqual(deck7.getRevealElement().querySelector('.reveal .slides>section.title-image .image-credit>p ').textContent, 'Source: Image Credits', 'Image credit has been set');
576+
});
577+
578+
QUnit.test('Logo', function (assert) {
579+
assert.strictEqual(deck7.getRevealElement().querySelectorAll('.reveal .slides>section footer .footer-logo img[src] ').length, 5, 'Logo has been set');
580+
});
581+
} );
582+
507583
deck1.initialize();
508584
deck2.initialize();
509585
deck3.initialize();
510586
deck4.initialize();
511587
deck5.initialize();
512588
deck6.initialize();
589+
deck7.initialize();
513590
</script>
514591

515592
</body>

0 commit comments

Comments
 (0)