Skip to content

Commit 0d30880

Browse files
h13i32maruh13i32maru
committed
feat(manual): card index for manual
1 parent 35cc905 commit 0d30880

File tree

10 files changed

+207
-107
lines changed

10 files changed

+207
-107
lines changed

‎esdoc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
],
2424
"manual": {
2525
"asset": "./manual/asset",
26+
"index": "./manual/index.md",
2627
"overview": ["./manual/overview.md", "./manual/feature.md"],
2728
"design": ["./manual/design.md"],
2829
"installation": ["./manual/installation.md"],

‎manual/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# ESDoc Manual
2+
tbd

‎src/ESDoc.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,10 @@ export default class ESDoc {
174174
if (!config.test.includes) config.test.includes = ['(spec|Spec|test|Test)\\.(js|es6)$'];
175175
if (!config.test.excludes) config.test.excludes = ['\\.config\\.(js|es6)$'];
176176
}
177+
178+
if (config.manual) {
179+
if (!('coverage' in config.manual)) config.manual.coverage = true;
180+
}
177181
}
178182

179183
/* eslint-disable no-unused-vars */

‎src/Publisher/Builder/ManualDocBuilder.js‎

Lines changed: 66 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -27,11 +27,13 @@ export default class ManualDocBuilder extends DocBuilder {
2727
const fileName = 'manual/index.html';
2828
const baseUrl = this._getBaseUrl(fileName);
2929
this._buildManualIndex(manualConfig);
30-
ice.load('content', this._buildManualIndex(manualConfig, true), IceCap.MODE_WRITE);
30+
ice.load('content', this._buildManualCardIndex(manualConfig), IceCap.MODE_WRITE);
3131
ice.load('nav', this._buildManualNav(manualConfig), IceCap.MODE_WRITE);
3232
ice.text('title', 'Manual', IceCap.MODE_WRITE);
3333
ice.attr('baseUrl', 'href', baseUrl, IceCap.MODE_WRITE);
34+
ice.attr('rootContainer', 'class', ' manual-index');
3435
callback(ice.html, fileName);
36+
ice.attr('rootContainer', 'class', ' manual-index', IceCap.MODE_REMOVE);
3537
}
3638

3739
for (const item of manualConfig) {
@@ -144,18 +146,77 @@ export default class ManualDocBuilder extends DocBuilder {
144146
return $root.html();
145147
}
146148

149+
/**
150+
* built manual card style index.
151+
* @param {ManualConfigItem[]} manualConfig - target manual config.
152+
* @return {IceCap} built index.
153+
* @private
154+
*/
155+
_buildManualCardIndex(manualConfig) {
156+
const cards = [];
157+
for (const manualItem of manualConfig) {
158+
if (manualItem.references) {
159+
const filePath = path.resolve(this._config.destination, 'identifiers.html');
160+
const html = fs.readFileSync(filePath).toString();
161+
const $ = cheerio.load(html);
162+
const card = $('.content').html();
163+
cards.push({label: 'References', link: 'identifiers.html', card: card});
164+
continue;
165+
}
166+
167+
for (const filePath of manualItem.paths) {
168+
const fileName = this._getManualOutputFileName(manualItem, filePath);
169+
const html = this._buildManual(manualItem, filePath);
170+
const $root = cheerio.load(html).root();
171+
172+
$root.find('h1').each((i, el)=>{
173+
const $el = cheerio(el);
174+
const label = $el.text();
175+
const link = `${fileName}#${$el.attr('id')}`;
176+
let card = `<h1>${label}</h1>`;
177+
const nextAll = $el.nextAll();
178+
179+
for (let i = 0 ; i < nextAll.length; i++) {
180+
const next = nextAll.get(i);
181+
const tagName = next.tagName.toLowerCase();
182+
if (tagName === 'h1') return;
183+
const $next = cheerio(next);
184+
card += `<${tagName}>${$next.html()}</${tagName}>`;
185+
}
186+
187+
cards.push({label, link, card});
188+
});
189+
}
190+
}
191+
192+
const ice = new IceCap(this._readTemplate('manualCardIndex.html'));
193+
ice.loop('cards', cards, (i, card, ice)=>{
194+
ice.text('label', card.label) ;
195+
ice.attr('link', 'href', card.link);
196+
ice.load('card', card.card);
197+
});
198+
199+
if (this._config.manual.index) {
200+
const userIndex = this._convertMDToHTML(this._config.manual.index);
201+
ice.load('manualUserIndex', userIndex);
202+
} else {
203+
ice.drop('manualUserIndex', true);
204+
}
205+
206+
ice.drop('manualBadge', !this._config.manual.coverage);
207+
208+
return ice;
209+
}
210+
147211
/**
148212
* built manual index.
149213
* @param {ManualConfigItem[]} manualConfig - target manual config.
150-
* @param {boolean} [badge=false] - show badge.
151214
* @return {IceCap} built index.
152215
* @private
153216
*/
154-
_buildManualIndex(manualConfig, badge = false) {
217+
_buildManualIndex(manualConfig) {
155218
const ice = new IceCap(this._readTemplate('manualIndex.html'));
156219

157-
if (!badge) ice.drop('badge');
158-
159220
ice.loop('manual', manualConfig, (i, item, ice)=>{
160221
const toc = [];
161222
if (item.references) {

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

Lines changed: 76 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ html
1212
overflow: auto;
1313
font-size: 14px;
1414
/*color: #4d4e53;*/
15-
color: rgba(0, 0, 0, .68);
15+
/*color: rgba(0, 0, 0, .68);*/
16+
color: #444;
1617
background-color: #fff;
1718
}
1819

@@ -124,10 +125,12 @@ li > code {
124125
z-index: 1;
125126
background-color: white;
126127
top: 0;
127-
border-bottom: solid 1px #E02130;
128+
border-bottom: solid 1px #ddd;
129+
box-shadow: #ddd 1px 1px 1px;
128130
}
129131
.layout-container > header > a{
130132
margin: 0 5px;
133+
color: #444;
131134
}
132135

133136
.layout-container > header > a.repo-url-github {
@@ -153,7 +156,7 @@ li > code {
153156
margin-top:1em;
154157
overflow-x: scroll;
155158
box-shadow: rgba(255, 255, 255, 1) -1px 0 0 inset;
156-
border-right: 1px solid rgba(0, 0, 0, 0.1);
159+
border-right: 1px solid #ddd;
157160
}
158161

159162
.navigation ul {
@@ -746,16 +749,71 @@ table.test-summary .test-target > span:first-child {
746749

747750
/** manual */
748751

752+
.manual-index .manual-cards {
753+
display: flex;
754+
flex-wrap: wrap;
755+
}
756+
757+
.manual-index .manual-card-wrap {
758+
width: 33%;
759+
padding: 10px 20px 10px 0;
760+
box-sizing: border-box;
761+
}
762+
763+
.manual-index .manual-card-wrap > h1 {
764+
border: none;
765+
margin: 0;
766+
font-size: 1.5em;
767+
}
768+
769+
.manual-index .manual-card {
770+
height: 200px;
771+
overflow: hidden;
772+
border: solid 1px #ddd;
773+
border-radius: 4px;
774+
padding: 8px;
775+
position: relative;
776+
}
777+
778+
.manual-index .manual-card > div {
779+
transform: scale(0.4);
780+
transform-origin: 0 0;
781+
width: 250%;
782+
}
783+
784+
.manual-index .manual-card > a {
785+
position: absolute;
786+
top: 0;
787+
left: 0;
788+
width: 100%;
789+
height: 100%;
790+
background: rgba(210, 210, 210, 0.1);
791+
}
792+
793+
.manual-index .manual-card > a:hover {
794+
background: none;
795+
}
796+
797+
.manual-index .manual-badge {
798+
margin: 0;
799+
}
800+
801+
.manual-index .manual-user-index {
802+
margin-bottom: 1em;
803+
border-bottom: solid 1px #ddd;
804+
}
805+
749806
.manual-root .navigation {
750-
padding-left: 0;
807+
padding-left: 4px;
808+
margin-top: 4px;
751809
}
752810

753811
.navigation .manual-toc {
754812
margin-top: -0.25em;
755813
}
756814

757-
.navigation .manual-toc li {
758-
white-space: normal;
815+
.navigation .manual-toc-root > div {
816+
padding-top: 1px;
759817
}
760818

761819
.github-markdown .manual-toc-title a {
@@ -788,11 +846,13 @@ table.test-summary .test-target > span:first-child {
788846
}
789847

790848
.navigation .manual-toc .indent-h1 {
791-
background: #039BE5;
792-
padding: 0.5em;
849+
/*background: rgb(37, 138, 175);*/
850+
/*padding: 0.5em;*/
851+
margin: 1em 0 0 0.5em;
793852
}
794853
.navigation .manual-toc .indent-h1 a {
795-
color: #fff;
854+
color: #444;
855+
font-weight: bold;
796856
}
797857

798858
.manual-toc .indent-h1 {
@@ -897,6 +957,13 @@ table.test-summary .test-target > span:first-child {
897957
background-color: #f8f8f8;
898958
}
899959

960+
.github-markdown hr {
961+
border-right: 0;
962+
border-bottom: 1px solid #e5e5e5;
963+
border-left: 0;
964+
border-top: 0;
965+
}
966+
900967
/** badge(.svg) does not have border */
901968
.github-markdown img:not([src*=".svg"]) {
902969
max-width: 100%;

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<div class="github-markdown">
2+
<div class="manual-user-index" data-ice="manualUserIndex"></div>
3+
4+
<p class="manual-badge" data-ice="manualBadge"><img src="./manual-badge.svg"/></p>
5+
6+
<div class="manual-cards">
7+
<div class="manual-card-wrap" data-ice="cards">
8+
<h1 data-ice="label"></h1>
9+
<div class="manual-card">
10+
<div data-ice="card"></div>
11+
<a data-ice="link"></a>
12+
</div>
13+
</div>
14+
</div>
15+
</div>

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

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<div class="github-markdown manual-toc-root">
2-
<img src="./manual-badge.svg" data-ice="badge"/>
32
<div data-ice="manual">
43
<ul class="manual-toc">
54
<li data-ice="manualNav"><a href="" data-ice="link"></a></li>

‎test/fixture/package/esdoc.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@
1212
"includes": ["Test.js$"]
1313
},
1414
"manual": {
15+
"index": "./test/fixture/package/manual/index.md",
1516
"overview": ["./test/fixture/package/manual/overview.md"],
1617
"design": ["./test/fixture/package/manual/design.md"],
1718
"installation": ["./test/fixture/package/manual/installation.md"],

‎test/fixture/package/manual/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# ESDoc Manual
2+
tbd

0 commit comments

Comments
 (0)