Skip to content

Commit 64f5a92

Browse files
Koooooo-7Koooooo-7
authored
Merge branch 'develop' into github-callouts
2 parents 3501b04 + 5f80683 commit 64f5a92

File tree

8 files changed

+108
-126
lines changed

8 files changed

+108
-126
lines changed

‎src/core/render/compiler.js

Lines changed: 12 additions & 82 deletions
Original file line numberDiff line numberDiff line change
@@ -5,64 +5,19 @@ import { tree as treeTpl } from './tpl.js';
55
import { genTree } from './gen-tree.js';
66
import { slugify } from './slugify.js';
77
import { emojify } from './emojify.js';
8-
import {
9-
getAndRemoveConfig,
10-
removeAtag,
11-
getAndRemoveDocsifyIgnoreConfig,
12-
} from './utils.js';
8+
import { getAndRemoveConfig } from './utils.js';
139
import { imageCompiler } from './compiler/image.js';
10+
import { headingCompiler } from './compiler/heading.js';
1411
import { highlightCodeCompiler } from './compiler/code.js';
1512
import { paragraphCompiler } from './compiler/paragraph.js';
1613
import { blockquoteCompiler } from './compiler/blockquote.js';
1714
import { taskListCompiler } from './compiler/taskList.js';
1815
import { taskListItemCompiler } from './compiler/taskListItem.js';
1916
import { linkCompiler } from './compiler/link.js';
17+
import { compileMedia } from './compiler/media.js';
2018

2119
const cachedLinks = {};
2220

23-
const compileMedia = {
24-
markdown(url) {
25-
return {
26-
url,
27-
};
28-
},
29-
mermaid(url) {
30-
return {
31-
url,
32-
};
33-
},
34-
iframe(url, title) {
35-
return {
36-
html: `<iframe src="${url}" ${
37-
title || 'width=100% height=400'
38-
}></iframe>`,
39-
};
40-
},
41-
video(url, title) {
42-
return {
43-
html: `<video src="${url}" ${title || 'controls'}>Not Support</video>`,
44-
};
45-
},
46-
audio(url, title) {
47-
return {
48-
html: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`,
49-
};
50-
},
51-
code(url, title) {
52-
let lang = url.match(/\.(\w+)$/);
53-
54-
lang = title || (lang && lang[1]);
55-
if (lang === 'md') {
56-
lang = 'markdown';
57-
}
58-
59-
return {
60-
url,
61-
lang,
62-
};
63-
},
64-
};
65-
6621
export class Compiler {
6722
constructor(config, router) {
6823
this.config = config;
@@ -174,7 +129,7 @@ export class Compiler {
174129
type = 'audio';
175130
}
176131

177-
embed = compileMedia[type].call(this, href, title);
132+
embed = compileMedia[type](href, title);
178133
embed.type = type;
179134
}
180135

@@ -199,48 +154,23 @@ export class Compiler {
199154
_initRenderer() {
200155
const renderer = new marked.Renderer();
201156
const { linkTarget, linkRel, router, contentBase } = this;
202-
const _self = this;
157+
// Supports mermaid
203158
const origin = {};
204159

205-
/**
206-
* Render anchor tag
207-
* @link https://github.com/markedjs/marked#overriding-renderer-methods
208-
* @param {String} tokens the content tokens
209-
* @param {Number} depth Type of heading (h<level> tag)
210-
* @returns {String} Heading element
211-
*/
212-
origin.heading = renderer.heading = function ({ tokens, depth }) {
213-
const text = this.parser.parseInline(tokens);
214-
let { str, config } = getAndRemoveConfig(text);
215-
const nextToc = { depth, title: str };
216-
217-
const { content, ignoreAllSubs, ignoreSubHeading } =
218-
getAndRemoveDocsifyIgnoreConfig(str);
219-
str = content.trim();
220-
221-
nextToc.title = removeAtag(str);
222-
nextToc.ignoreAllSubs = ignoreAllSubs;
223-
nextToc.ignoreSubHeading = ignoreSubHeading;
224-
const slug = slugify(config.id || str);
225-
const url = router.toURL(router.getCurrentPath(), { id: slug });
226-
nextToc.slug = url;
227-
_self.toc.push(nextToc);
228-
229-
// Note: tabindex="-1" allows programmatically focusing on heading
230-
// elements after navigation. This is preferred over focusing on the link
231-
// within the heading because it matches the focus behavior of screen
232-
// readers when navigating page content.
233-
return `<h${depth} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${depth}>`;
234-
};
235-
160+
// Renderer customizers
161+
origin.heading = headingCompiler({
162+
renderer,
163+
router,
164+
compiler: this,
165+
});
236166
origin.blockquoteCompiler = blockquoteCompiler({ renderer });
237167
origin.code = highlightCodeCompiler({ renderer });
238168
origin.link = linkCompiler({
239169
renderer,
240170
router,
241171
linkTarget,
242172
linkRel,
243-
compilerClass: _self,
173+
compiler: this,
244174
});
245175
origin.paragraph = paragraphCompiler({ renderer });
246176
origin.image = imageCompiler({ renderer, contentBase, router });

‎src/core/render/compiler/heading.js

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import {
2+
getAndRemoveConfig,
3+
removeAtag,
4+
getAndRemoveDocsifyIgnoreConfig,
5+
} from '../utils.js';
6+
import { slugify } from '../slugify.js';
7+
8+
export const headingCompiler = ({ renderer, router, compiler }) =>
9+
(renderer.heading = function ({ tokens, depth }) {
10+
const text = this.parser.parseInline(tokens);
11+
let { str, config } = getAndRemoveConfig(text);
12+
const nextToc = { depth, title: str };
13+
14+
const { content, ignoreAllSubs, ignoreSubHeading } =
15+
getAndRemoveDocsifyIgnoreConfig(str);
16+
str = content.trim();
17+
18+
nextToc.title = removeAtag(str);
19+
nextToc.ignoreAllSubs = ignoreAllSubs;
20+
nextToc.ignoreSubHeading = ignoreSubHeading;
21+
const slug = slugify(config.id || str);
22+
const url = router.toURL(router.getCurrentPath(), { id: slug });
23+
nextToc.slug = url;
24+
compiler.toc.push(nextToc);
25+
26+
// Note: tabindex="-1" allows programmatically focusing on heading
27+
// elements after navigation. This is preferred over focusing on the link
28+
// within the heading because it matches the focus behavior of screen
29+
// readers when navigating page content.
30+
return `<h${depth} id="${slug}" tabindex="-1"><a href="${url}" data-id="${slug}" class="anchor"><span>${str}</span></a></h${depth}>`;
31+
});

‎src/core/render/compiler/headline.js

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎src/core/render/compiler/link.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const linkCompiler = ({
66
router,
77
linkTarget,
88
linkRel,
9-
compilerClass,
9+
compiler,
1010
}) =>
1111
(renderer.link = function ({ href, title = '', tokens }) {
1212
const attrs = [];
@@ -15,16 +15,16 @@ export const linkCompiler = ({
1515
linkTarget = config.target || linkTarget;
1616
linkRel =
1717
linkTarget === '_blank'
18-
? compilerClass.config.externalLinkRel || 'noopener'
18+
? compiler.config.externalLinkRel || 'noopener'
1919
: '';
2020
title = str;
2121

2222
if (
2323
!isAbsolutePath(href) &&
24-
!compilerClass._matchNotCompileLink(href) &&
24+
!compiler._matchNotCompileLink(href) &&
2525
!config.ignore
2626
) {
27-
if (href === compilerClass.config.homepage) {
27+
if (href === compiler.config.homepage) {
2828
href = 'README';
2929
}
3030

‎src/core/render/compiler/media.js

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
export const compileMedia = {
2+
markdown(url) {
3+
return {
4+
url,
5+
};
6+
},
7+
mermaid(url) {
8+
return {
9+
url,
10+
};
11+
},
12+
iframe(url, title) {
13+
return {
14+
html: `<iframe src="${url}" ${
15+
title || 'width=100% height=400'
16+
}></iframe>`,
17+
};
18+
},
19+
video(url, title) {
20+
return {
21+
html: `<video src="${url}" ${title || 'controls'}>Not Support</video>`,
22+
};
23+
},
24+
audio(url, title) {
25+
return {
26+
html: `<audio src="${url}" ${title || 'controls'}>Not Support</audio>`,
27+
};
28+
},
29+
code(url, title) {
30+
let lang = url.match(/\.(\w+)$/);
31+
32+
lang = title || (lang && lang[1]);
33+
if (lang === 'md') {
34+
lang = 'markdown';
35+
}
36+
37+
return {
38+
url,
39+
lang,
40+
};
41+
},
42+
};

‎src/core/render/index.js

Lines changed: 5 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function Render(Base) {
8282
}
8383
}
8484

85-
this._renderTo(markdownElm, html);
85+
dom.setHTML(markdownElm, html);
8686

8787
// Execute markdown <script>
8888
if (
@@ -274,13 +274,6 @@ export function Render(Base) {
274274
}
275275
}
276276

277-
_renderTo(el, content, replace) {
278-
const node = dom.getNode(el);
279-
if (node) {
280-
node[replace ? 'outerHTML' : 'innerHTML'] = content;
281-
}
282-
}
283-
284277
_renderSidebar(text) {
285278
const { maxLevel, subMaxLevel, loadSidebar, hideSidebar } = this.config;
286279
const sidebarEl = dom.getNode('aside.sidebar');
@@ -294,7 +287,7 @@ export function Render(Base) {
294287
return null;
295288
}
296289

297-
this._renderTo('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
290+
dom.setHTML('.sidebar-nav', this.compiler.sidebar(text, maxLevel));
298291

299292
sidebarToggleEl.setAttribute('aria-expanded', !isMobile());
300293

@@ -366,7 +359,7 @@ export function Render(Base) {
366359
const html = this.compiler.compile(text);
367360

368361
['.app-nav', '.app-nav-merged'].forEach(selector => {
369-
this._renderTo(selector, html);
362+
dom.setHTML(selector, html);
370363
this.#addTextAsTitleAttribute(`${selector} a`);
371364
});
372365
}
@@ -507,7 +500,7 @@ export function Render(Base) {
507500
rootElm.style.setProperty('--cover-bg', mdCoverBg);
508501
}
509502

510-
this._renderTo('.cover-main', html);
503+
dom.setHTML('.cover-main', html);
511504

512505
// Button styles
513506
dom
@@ -563,7 +556,7 @@ export function Render(Base) {
563556
html += tpl.main(config);
564557

565558
// Render main app
566-
this._renderTo(el, html, true);
559+
dom.setHTML(el, html, true);
567560
} else {
568561
this.rendered = true;
569562
}

‎src/core/router/history/hash.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export class HashHistory extends History {
7171

7272
/**
7373
* Parse the url
74-
* @param {string} [path=location.herf] URL to be parsed
74+
* @param {string} [path=location.href] URL to be parsed
7575
* @return {object} { path, query }
7676
*/
7777
parse(path = location.href) {

‎src/core/util/dom.js

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,19 @@ export function getNode(el, noCache = false) {
2020
return el;
2121
}
2222

23+
/**
24+
*
25+
* @param {*} el the targt element or the selector
26+
* @param {*} content the content to be rendered as HTML
27+
* @param {*} replace To replace the content (true) or insert instead (false) , default is false
28+
*/
29+
export function setHTML(el, content, replace) {
30+
const node = getNode(el);
31+
if (node) {
32+
node[replace ? 'outerHTML' : 'innerHTML'] = content;
33+
}
34+
}
35+
2336
export const $ = document;
2437

2538
export const body = $.body;

0 commit comments

Comments
 (0)