forked from docsifyjs/docsify
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathtpl.js
More file actions
129 lines (117 loc) · 4.59 KB
/
Copy pathtpl.js
File metadata and controls
129 lines (117 loc) · 4.59 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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
import { isMobile } from '../util/env.js';
/**
* Render github corner
* @param {Object} data URL for the View Source on GitHub link
* @param {String} cornerExternalLinkTarget value of the target attribute of the link
* @return {String} SVG element as string
*/
export function corner(data, cornerExternalLinkTarget) {
if (!data) {
return '';
}
if (!/\/\//.test(data)) {
data = 'https://github.com/' + data;
}
data = data.replace(/^git\+/, '');
// Double check
cornerExternalLinkTarget = cornerExternalLinkTarget || '_blank';
return /* html */ `
<a href="${data}" target="${cornerExternalLinkTarget}" class="github-corner" aria-label="View source on GitHub">
<svg viewBox="0 0 250 250" aria-hidden="true">
<path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path>
<path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path>
<path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path>
</svg>
</a>
`;
}
/**
* Renders main content
* @param {Object} config Configuration object
* @returns {String} HTML of the main content
*/
export function main(config) {
const { hideSidebar, name, sidebarPosition } = config;
const sidebarPositionClass =
sidebarPosition === 'right' ? ' sidebar-right' : '';
// const name = config.name ? config.name : '';
const aside = /* html */ hideSidebar
? ''
: `
<button class="sidebar-toggle${sidebarPositionClass}" tabindex="-1" title="Press \\ to toggle">
<div class="sidebar-toggle-button" tabindex="0" aria-label="Hide primary navigation" aria-keyshortcuts="Use shortcut key \\" aria-controls="__sidebar" role="button">
<span></span><span></span><span></span>
</div>
</button>
<aside id="__sidebar" class="sidebar${sidebarPositionClass}${!isMobile() ? ' show' : ''}" tabindex="-1" role="none">
${
config.name
? /* html */ `
<h1 class="app-name"><a class="app-name-link" data-nosearch>${
config.logo ? `<img alt="${name}" src=${config.logo} />` : name
}</a></h1>
`
: ''
}
<div class="sidebar-nav" role="navigation" aria-label="primary"><!--sidebar--></div>
</aside>
`;
return /* html */ `
<main role="presentation">
${aside}
<section class="content">
<article id="main" class="markdown-section" role="main" tabindex="-1"><!--main--></article>
</section>
</main>
`;
}
/**
* Cover Page
* @returns {String} Cover page
*/
export function cover() {
return /* html */ `
<section class="cover show" role="complementary" aria-label="cover">
<div class="mask"></div>
<div class="cover-main"><!--cover--></div>
</section>
`;
}
/**
* Render tree
* @param {Array} toc Array of TOC section links
* @param {String} tpl TPL list
* @return {String} Rendered tree
*/
export function tree(
toc,
tpl = /* html */ '<ul class="app-sub-sidebar">{inner}</ul>',
) {
if (!toc || !toc.length) {
return '';
}
let innerHTML = '';
toc.forEach(node => {
const title = node.title.replace(/(<([^>]+)>)/g, '');
let current = `<li><a class="section-link" href="${node.slug}" title="${title}">${node.title}</a></li>`;
if (node.children) {
// when current node has children, we need put them all in parent's <li> block without the `class="app-sub-sidebar"` attribute
const children = tree(node.children, '<ul>{inner}</ul>');
current = `<li><a class="section-link" href="${node.slug}" title="${title}">${node.title}</a>${children}</li>`;
}
innerHTML += current;
});
return tpl.replace('{inner}', innerHTML);
}
/**
* @deprecated
*/
export function helper(className, content) {
return /* html */ `<p class="${className}">${content.slice(5).trim()}</p>`;
}
/**
* @deprecated
*/
export function theme(color) {
return /* html */ `<style>:root{--theme-color: ${color};}</style>`;
}