forked from pattern-lab/patternlab-node
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathparse-transform.js
More file actions
79 lines (62 loc) · 3.44 KB
/
parse-transform.js
File metadata and controls
79 lines (62 loc) · 3.44 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
const jsdom = require('@tbranyen/jsdom');
const {JSDOM} = jsdom;
const minify = require('../utils/minify.js');
const slugify = require('slugify');
module.exports = function(value, outputPath) {
if (outputPath.endsWith('.html')) {
const DOM = new JSDOM(value, {
resources: 'usable'
});
const document = DOM.window.document;
const articleImages = [...document.querySelectorAll('main article img')];
const articleHeadings = [
...document.querySelectorAll('main article h2, main article h3')
];
const articleEmbeds = [...document.querySelectorAll('main article iframe')];
if (articleImages.length) {
articleImages.forEach(image => {
image.setAttribute('loading', 'lazy');
// If an image has a title it means that the user added a caption
// so replace the image with a figure containing that image and a caption
if (image.hasAttribute('title')) {
const figure = document.createElement('figure');
const figCaption = document.createElement('figcaption');
figCaption.innerHTML = image.getAttribute('title');
image.removeAttribute('title');
figure.appendChild(image.cloneNode(true));
figure.appendChild(figCaption);
image.replaceWith(figure);
}
});
}
if (articleHeadings.length) {
// Loop each heading and add a little anchor and an ID to each one
articleHeadings.forEach(heading => {
const headingSlug = slugify(heading.textContent.toLowerCase());
const anchor = document.createElement('a');
anchor.setAttribute('href', `#heading-${headingSlug}`);
anchor.classList.add('heading-permalink');
anchor.innerHTML = minify(`
<span class="u-is-vishidden">permalink</span>
<svg class="heading-permalink__icon" fill="currentColor" aria-hidden="true" focusable="false" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M9.199 13.599a5.99 5.99 0 0 0 3.949 2.345 5.987 5.987 0 0 0 5.105-1.702l2.995-2.994a5.992 5.992 0 0 0 1.695-4.285 5.976 5.976 0 0 0-1.831-4.211 5.99 5.99 0 0 0-6.431-1.242 6.003 6.003 0 0 0-1.905 1.24l-1.731 1.721a.999.999 0 1 0 1.41 1.418l1.709-1.699a3.985 3.985 0 0 1 2.761-1.123 3.975 3.975 0 0 1 2.799 1.122 3.997 3.997 0 0 1 .111 5.644l-3.005 3.006a3.982 3.982 0 0 1-3.395 1.126 3.987 3.987 0 0 1-2.632-1.563A1 1 0 0 0 9.201 13.6zm5.602-3.198a5.99 5.99 0 0 0-3.949-2.345 5.987 5.987 0 0 0-5.105 1.702l-2.995 2.994a5.992 5.992 0 0 0-1.695 4.285 5.976 5.976 0 0 0 1.831 4.211 5.99 5.99 0 0 0 6.431 1.242 6.003 6.003 0 0 0 1.905-1.24l1.723-1.723a.999.999 0 1 0-1.414-1.414L9.836 19.81a3.985 3.985 0 0 1-2.761 1.123 3.975 3.975 0 0 1-2.799-1.122 3.997 3.997 0 0 1-.111-5.644l3.005-3.006a3.982 3.982 0 0 1 3.395-1.126 3.987 3.987 0 0 1 2.632 1.563 1 1 0 0 0 1.602-1.198z"/>
</svg>`);
heading.setAttribute('id', `heading-${headingSlug}`);
heading.appendChild(anchor);
});
}
// Look for videos are wrap them in a container element
if (articleEmbeds.length) {
articleEmbeds.forEach(embed => {
if (embed.hasAttribute('allowfullscreen')) {
const player = document.createElement('div');
player.classList.add('video-player');
player.appendChild(embed.cloneNode(true));
embed.replaceWith(player);
}
});
}
return '<!DOCTYPE html>\r\n' + document.documentElement.outerHTML;
}
return value;
};