Skip to content

Commit 2b428a0

Browse files
h13i32maruh13i32maru
committed
feat(manual): manual type colors
1 parent 0d6fceb commit 2b428a0

File tree

4 files changed

+141
-64
lines changed

4 files changed

+141
-64
lines changed

‎src/Publisher/Builder/ManualDocBuilder.js

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -95,8 +95,8 @@ export default class ManualDocBuilder extends DocBuilder {
9595
if (m.tutorial) manualConfig.push({label: 'Tutorial', paths: m.tutorial});
9696
if (m.usage) manualConfig.push({label: 'Usage', paths: m.usage});
9797
if (m.configuration) manualConfig.push({label: 'Configuration', paths: m.configuration});
98-
if (m.example) manualConfig.push({label: 'Example', paths: m.example});
9998
if (m.advanced) manualConfig.push({label: 'Advanced', paths: m.advanced});
99+
if (m.example) manualConfig.push({label: 'Example', paths: m.example});
100100
manualConfig.push({label: 'Reference', fileName: 'identifiers.html', references: true});
101101
if (m.faq) manualConfig.push({label: 'FAQ', paths: m.faq});
102102
if (m.changelog) manualConfig.push({label: 'Changelog', paths: m.changelog});
@@ -166,19 +166,29 @@ export default class ManualDocBuilder extends DocBuilder {
166166
const html = fs.readFileSync(filePath).toString();
167167
const $ = cheerio.load(html);
168168
const card = $('.content').html();
169-
cards.push({label: 'References', link: 'identifiers.html', card: card});
169+
const identifiers = this._findAllIdentifiersKindGrouping();
170+
const sectionCount = identifiers.class.length +
171+
identifiers.interface.length +
172+
identifiers.function.length +
173+
identifiers.typedef.length +
174+
identifiers.external.length;
175+
176+
cards.push({label: 'References', link: 'identifiers.html', card: card, type: 'reference', sectionCount: sectionCount});
170177
continue;
171178
}
172179

173180
for (const filePath of manualItem.paths) {
181+
const type = manualItem.label.toLowerCase();
174182
const fileName = this._getManualOutputFileName(manualItem, filePath);
175183
const html = this._buildManual(manualItem, filePath);
176184
const $root = cheerio.load(html).root();
185+
const h1Count = $root.find('h1').length;
186+
const sectionCount = $root.find('h1,h2,h3,h4,h5').length;
177187

178188
$root.find('h1').each((i, el)=>{
179189
const $el = cheerio(el);
180190
const label = $el.text();
181-
const link = `${fileName}#${$el.attr('id')}`;
191+
const link = h1Count === 1 ? fileName : `${fileName}#${$el.attr('id')}`;
182192
let card = `<h1>${label}</h1>`;
183193
const nextAll = $el.nextAll();
184194

@@ -190,14 +200,19 @@ export default class ManualDocBuilder extends DocBuilder {
190200
card += `<${tagName}>${$next.html()}</${tagName}>`;
191201
}
192202

193-
cards.push({label, link, card});
203+
cards.push({label, link, card, type, sectionCount});
194204
});
195205
}
196206
}
197207

198208
const ice = new IceCap(this._readTemplate('manualCardIndex.html'));
199209
ice.loop('cards', cards, (i, card, ice)=>{
200-
ice.text('label', card.label);
210+
ice.text('label-inner', card.label);
211+
ice.attr('label', 'class', `manual-color manual-color-${card.type}`);
212+
213+
const sectionCount = Math.min((card.sectionCount / 5) + 1, 5);
214+
ice.attr('label', 'data-section-count', '■'.repeat(sectionCount));
215+
201216
ice.attr('link', 'href', card.link);
202217
ice.load('card', card.card);
203218
});
@@ -222,8 +237,9 @@ export default class ManualDocBuilder extends DocBuilder {
222237
*/
223238
_buildManualIndex(manualConfig) {
224239
const ice = new IceCap(this._readTemplate('manualIndex.html'));
240+
const _manualConfig = manualConfig.filter((item) => (item.paths && item.paths.length) || item.references);
225241

226-
ice.loop('manual', manualConfig, (i, item, ice)=>{
242+
ice.loop('manual', _manualConfig, (i, item, ice)=>{
227243
const toc = [];
228244
if (item.references) {
229245
const identifiers = this._findAllIdentifiersKindGrouping();
@@ -234,27 +250,46 @@ export default class ManualDocBuilder extends DocBuilder {
234250
if (identifiers.variable.length) toc.push({label: 'Variable', link: 'identifiers.html#variable', indent: 'indent-h2'});
235251
if (identifiers.typedef.length) toc.push({label: 'Typedef', link: 'identifiers.html#typedef', indent: 'indent-h2'});
236252
if (identifiers.external.length) toc.push({label: 'External', link: 'identifiers.html#external', indent: 'indent-h2'});
253+
254+
toc[0].sectionCount = identifiers.class.length +
255+
identifiers.interface.length +
256+
identifiers.function.length +
257+
identifiers.typedef.length +
258+
identifiers.external.length;
237259
} else {
238260
for (const filePath of item.paths) {
239261
const fileName = this._getManualOutputFileName(item, filePath);
240262
const html = this._convertMDToHTML(filePath);
241263
const $root = cheerio.load(html).root();
264+
const h1Count = $root.find('h1').length;
265+
const sectionCount = $root.find('h1,h2,h3,h4,h5').length;
242266

243267
$root.find('h1,h2,h3,h4,h5').each((i, el)=>{
244268
const $el = cheerio(el);
245269
const label = $el.text();
246-
const link = `${fileName}#${$el.attr('id')}`;
247270
const indent = `indent-${el.tagName.toLowerCase()}`;
248-
toc.push({label, link, indent});
271+
272+
let link = `${fileName}#${$el.attr('id')}`;
273+
if (el.tagName.toLowerCase() === 'h1' && h1Count === 1) link = fileName;
274+
275+
toc.push({label, link, indent, sectionCount});
249276
});
250277
}
251278
}
252279

253280
ice.attr('manual', 'data-toc-name', item.label.toLowerCase());
254-
ice.loop('manualNav', toc, (i, item, ice)=>{
255-
ice.attr('manualNav', 'class', item.indent);
256-
ice.text('link', item.label);
257-
ice.attr('link', 'href', item.link);
281+
ice.loop('manualNav', toc, (i, tocItem, ice)=>{
282+
if (tocItem.indent === 'indent-h1') {
283+
ice.attr('manualNav', 'class', `${tocItem.indent} manual-color manual-color-${item.label.toLowerCase()}`);
284+
const sectionCount = Math.min((tocItem.sectionCount / 5) + 1, 5);
285+
ice.attr('manualNav', 'data-section-count', '■'.repeat(sectionCount));
286+
} else {
287+
ice.attr('manualNav', 'class', tocItem.indent);
288+
}
289+
290+
ice.attr('manualNav', 'data-link', tocItem.link.split('#')[0]);
291+
ice.text('link', tocItem.label);
292+
ice.attr('link', 'href', tocItem.link);
258293
});
259294
});
260295

‎src/Publisher/Builder/template/css/style.css

Lines changed: 90 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);
2+
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400italic,600,700);
23

34
* {
45
margin: 0;
@@ -8,12 +9,12 @@
89

910
html
1011
{
11-
font-family: 'Roboto', sans-serif;
12+
font-family: 'Source Sans Pro', 'Roboto', sans-serif;
1213
overflow: auto;
13-
font-size: 14px;
14+
/*font-size: 14px;*/
1415
/*color: #4d4e53;*/
1516
/*color: rgba(0, 0, 0, .68);*/
16-
color: #444;
17+
color: #555;
1718
background-color: #fff;
1819
}
1920

@@ -73,11 +74,6 @@ p {
7374
line-height: 1.5;
7475
}
7576

76-
p > code {
77-
background-color: #f5f5f5;
78-
border-radius: 3px;
79-
}
80-
8177
pre > code {
8278
display: block;
8379
}
@@ -95,7 +91,10 @@ pre.prettyprint > code {
9591

9692
p > code,
9793
li > code {
98-
padding: 0 4px;
94+
padding: 0.2em 0.5em;
95+
margin: 0;
96+
font-size: 85%;
97+
background-color: rgba(0,0,0,0.04);
9998
border-radius: 3px;
10099
}
101100

@@ -123,10 +122,9 @@ li > code {
123122
position: fixed;
124123
width: 100%;
125124
z-index: 1;
126-
background-color: white;
125+
background-color: #fafafa;
127126
top: 0;
128127
border-bottom: solid 1px #ddd;
129-
box-shadow: #ddd 1px 1px 1px;
130128
}
131129
.layout-container > header > a{
132130
margin: 0 5px;
@@ -169,6 +167,10 @@ li > code {
169167
white-space: nowrap;
170168
}
171169

170+
.navigation li a {
171+
color: #666;
172+
}
173+
172174
.navigation .nav-dir-path {
173175
margin-top: 0.7em;
174176
margin-bottom: 0.25em;
@@ -645,6 +647,8 @@ table.test-summary tr.test-describe .toggle {
645647
float: left;
646648
margin-right: 4px;
647649
cursor: pointer;
650+
font-size: 0.8em;
651+
padding-top: 0.25em;
648652
}
649653

650654
table.test-summary tr.test-describe .toggle.opened:before {
@@ -763,24 +767,32 @@ table.test-summary .test-target > span:first-child {
763767
}
764768

765769
.manual-index .manual-card-wrap {
766-
width: 25%;
770+
width: 280px;
767771
padding: 10px 20px 10px 0;
768772
box-sizing: border-box;
769773
}
770774

771775
.manual-index .manual-card-wrap > h1 {
772-
border: none;
773776
margin: 0;
774-
font-size: 1.2em;
777+
font-size: 1em;
778+
font-weight: 600;
779+
padding: 0.2em 0 0.2em 0.5em;
780+
border-radius: 0.1em 0.1em 0 0;
781+
border: none;
782+
}
783+
784+
.manual-index .manual-card-wrap > h1 span {
785+
color: #555;
775786
}
776787

777788
.manual-index .manual-card {
778789
height: 200px;
779790
overflow: hidden;
780-
border: solid 1px #ddd;
781-
border-radius: 4px;
791+
border: solid 1px rgba(230, 230, 230, 0.84);
792+
border-radius: 0 0 0.1em 0.1em;
782793
padding: 8px;
783794
position: relative;
795+
border-top: none;
784796
}
785797

786798
.manual-index .manual-card > div {
@@ -822,6 +834,8 @@ table.test-summary .test-target > span:first-child {
822834

823835
.navigation .manual-toc-root > div {
824836
padding-top: 1px;
837+
padding-left: 0.25em;
838+
padding-right: 0.75em;
825839
}
826840

827841
.github-markdown .manual-toc-title a {
@@ -842,57 +856,87 @@ table.test-summary .test-target > span:first-child {
842856
list-style-type: none;
843857
}
844858

845-
.content .manual-toc .indent-h1 {
846-
font-size: 1.5em;
847-
border-bottom: solid 1px #ddd;
848-
padding-bottom: 0.5em;
849-
}
850-
851-
.content .manual-toc .indent-h1 a {
852-
color: inherit;
853-
font-weight: bold;
859+
.navigation .manual-toc [class^="indent-h"] a {
860+
color: #666;
854861
}
855862

856-
.navigation .manual-toc .indent-h1 {
857-
/*background: rgb(37, 138, 175);*/
858-
/*padding: 0.5em;*/
859-
margin: 1em 0 0 0.5em;
860-
}
861863
.navigation .manual-toc .indent-h1 a {
862-
color: #444;
863-
font-weight: bold;
864+
color: #555;
865+
font-weight: 600;
866+
display: block;
864867
}
865868

866869
.manual-toc .indent-h1 {
867-
margin-left: 0;
870+
display: block;
871+
margin: 1em 0 0 0.25em;
872+
padding: 0.2em 0 0.2em 0.5em;
873+
border-radius: 0.1em;
868874
}
869875
.manual-toc .indent-h2 {
870-
margin-left: 1em;
876+
display: none;
877+
margin-left: 1.5em;
871878
}
872879
.manual-toc .indent-h3 {
873-
margin-left: 2em;
880+
display: none;
881+
margin-left: 2.5em;
874882
}
875883
.manual-toc .indent-h4 {
876-
margin-left: 3em;
884+
display: none;
885+
margin-left: 3.5em;
877886
}
878887
.manual-toc .indent-h5 {
879-
margin-left: 4em;
888+
display: none;
889+
margin-left: 4.5em;
880890
}
881891

882-
.manual-nav li {
883-
margin: 0.75em 0;
892+
.manual-color {
893+
position: relative;
884894
}
885895

886-
.manual-dot {
887-
margin-left: 0.75em;
888-
width: 0.6em;
889-
height: 0.6em;
890-
display: inline-block;
891-
border-radius: 0.3em;
892-
margin-right: 0.3em;
896+
.manual-color:after {
897+
content: attr(data-section-count);
898+
font-size: 0.5em;
899+
opacity: 0.5;
900+
position: absolute;
901+
right: 0.5em;
902+
top: 0.5em;
903+
}
904+
905+
.manual-color-overview,
906+
.manual-color-design {
907+
color: #db001e;
908+
background-color: #edbec3;
909+
}
910+
911+
.manual-color-installation,
912+
.manual-color-tutorial,
913+
.manual-color-usage,
914+
.manual-color-configuration,
915+
.manual-color-advanced {
916+
color: #009800;
893917
background-color: #bfe5bf;
894918
}
895919

920+
.manual-color-example {
921+
color: #eb6420;
922+
background-color: #fad8c7;
923+
}
924+
925+
.manual-color-reference {
926+
color: #6b0090;
927+
background-color: #d6bdde;
928+
}
929+
930+
.manual-color-faq,
931+
.manual-color-changelog {
932+
color: #0738c3;
933+
background-color: #bbcbea;
934+
}
935+
936+
.manual-nav li {
937+
margin: 0.75em 0;
938+
}
939+
896940
/* github markdown */
897941
.github-markdown {
898942
font-size: 16px;

‎src/Publisher/Builder/template/manualCardIndex.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55

66
<div class="manual-cards">
77
<div class="manual-card-wrap" data-ice="cards">
8-
<h1 data-ice="label"></h1>
8+
<h1 data-ice="label"><span data-ice="label-inner"></span></h1>
99
<div class="manual-card">
1010
<div data-ice="card"></div>
1111
<a data-ice="link"></a>

‎src/Publisher/Builder/template/script/manual.js

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
(function(){
2-
var matched = location.pathname.match(/\/manual\/(.*?)\/.*\.html$/);
2+
var matched = location.pathname.match(/\/(manual\/.*?\/.*\.html)$/);
33
if (!matched) return;
44

55
var currentName = matched[1];
6-
var cssClass = '.navigation [data-toc-name="' + currentName + '"]';
7-
var styleText = cssClass + ' .manual-toc { display: block; }\n';
8-
styleText += cssClass + ' .manual-toc-title { background-color: #039BE5; }\n';
9-
styleText += cssClass + ' .manual-toc-title a { color: white; }\n';
6+
var cssClass = '.navigation .manual-toc li[data-link="' + currentName + '"]';
7+
var styleText = cssClass + '{ display: block; }\n';
108
var style = document.createElement('style');
119
style.textContent = styleText;
1210
document.querySelector('head').appendChild(style);

0 commit comments

Comments
 (0)