Permalink
Browse files

feat(manual): card index for manual

  • Loading branch information...
h13i32maru committed Dec 18, 2016
1 parent 35cc905 commit 0d30880e58264f3bc0069246df4a6a3e6058a69b
View
@@ -23,6 +23,7 @@
],
"manual": {
"asset": "./manual/asset",
+ "index": "./manual/index.md",
"overview": ["./manual/overview.md", "./manual/feature.md"],
"design": ["./manual/design.md"],
"installation": ["./manual/installation.md"],
View
@@ -0,0 +1,2 @@
+# ESDoc Manual
+tbd
View
@@ -174,6 +174,10 @@ export default class ESDoc {
if (!config.test.includes) config.test.includes = ['(spec|Spec|test|Test)\\.(js|es6)$'];
if (!config.test.excludes) config.test.excludes = ['\\.config\\.(js|es6)$'];
}
+
+ if (config.manual) {
+ if (!('coverage' in config.manual)) config.manual.coverage = true;
+ }
}
/* eslint-disable no-unused-vars */
@@ -27,11 +27,13 @@ export default class ManualDocBuilder extends DocBuilder {
const fileName = 'manual/index.html';
const baseUrl = this._getBaseUrl(fileName);
this._buildManualIndex(manualConfig);
- ice.load('content', this._buildManualIndex(manualConfig, true), IceCap.MODE_WRITE);
+ ice.load('content', this._buildManualCardIndex(manualConfig), IceCap.MODE_WRITE);
ice.load('nav', this._buildManualNav(manualConfig), IceCap.MODE_WRITE);
ice.text('title', 'Manual', IceCap.MODE_WRITE);
ice.attr('baseUrl', 'href', baseUrl, IceCap.MODE_WRITE);
+ ice.attr('rootContainer', 'class', ' manual-index');
callback(ice.html, fileName);
+ ice.attr('rootContainer', 'class', ' manual-index', IceCap.MODE_REMOVE);
}
for (const item of manualConfig) {
@@ -144,18 +146,77 @@ export default class ManualDocBuilder extends DocBuilder {
return $root.html();
}
+ /**
+ * built manual card style index.
+ * @param {ManualConfigItem[]} manualConfig - target manual config.
+ * @return {IceCap} built index.
+ * @private
+ */
+ _buildManualCardIndex(manualConfig) {
+ const cards = [];
+ for (const manualItem of manualConfig) {
+ if (manualItem.references) {
+ const filePath = path.resolve(this._config.destination, 'identifiers.html');
+ const html = fs.readFileSync(filePath).toString();
+ const $ = cheerio.load(html);
+ const card = $('.content').html();
+ cards.push({label: 'References', link: 'identifiers.html', card: card});
+ continue;
+ }
+
+ for (const filePath of manualItem.paths) {
+ const fileName = this._getManualOutputFileName(manualItem, filePath);
+ const html = this._buildManual(manualItem, filePath);
+ const $root = cheerio.load(html).root();
+
+ $root.find('h1').each((i, el)=>{
+ const $el = cheerio(el);
+ const label = $el.text();
+ const link = `${fileName}#${$el.attr('id')}`;
+ let card = `<h1>${label}</h1>`;
+ const nextAll = $el.nextAll();
+
+ for (let i = 0 ; i < nextAll.length; i++) {
+ const next = nextAll.get(i);
+ const tagName = next.tagName.toLowerCase();
+ if (tagName === 'h1') return;
+ const $next = cheerio(next);
+ card += `<${tagName}>${$next.html()}</${tagName}>`;
+ }
+
+ cards.push({label, link, card});
+ });
+ }
+ }
+
+ const ice = new IceCap(this._readTemplate('manualCardIndex.html'));
+ ice.loop('cards', cards, (i, card, ice)=>{
+ ice.text('label', card.label) ;
+ ice.attr('link', 'href', card.link);
+ ice.load('card', card.card);
+ });
+
+ if (this._config.manual.index) {
+ const userIndex = this._convertMDToHTML(this._config.manual.index);
+ ice.load('manualUserIndex', userIndex);
+ } else {
+ ice.drop('manualUserIndex', true);
+ }
+
+ ice.drop('manualBadge', !this._config.manual.coverage);
+
+ return ice;
+ }
+
/**
* built manual index.
* @param {ManualConfigItem[]} manualConfig - target manual config.
- * @param {boolean} [badge=false] - show badge.
* @return {IceCap} built index.
* @private
*/
- _buildManualIndex(manualConfig, badge = false) {
+ _buildManualIndex(manualConfig) {
const ice = new IceCap(this._readTemplate('manualIndex.html'));
- if (!badge) ice.drop('badge');
-
ice.loop('manual', manualConfig, (i, item, ice)=>{
const toc = [];
if (item.references) {
@@ -12,7 +12,8 @@ html
overflow: auto;
font-size: 14px;
/*color: #4d4e53;*/
- color: rgba(0, 0, 0, .68);
+ /*color: rgba(0, 0, 0, .68);*/
+ color: #444;
background-color: #fff;
}
@@ -124,10 +125,12 @@ li > code {
z-index: 1;
background-color: white;
top: 0;
- border-bottom: solid 1px #E02130;
+ border-bottom: solid 1px #ddd;
+ box-shadow: #ddd 1px 1px 1px;
}
.layout-container > header > a{
margin: 0 5px;
+ color: #444;
}
.layout-container > header > a.repo-url-github {
@@ -153,7 +156,7 @@ li > code {
margin-top:1em;
overflow-x: scroll;
box-shadow: rgba(255, 255, 255, 1) -1px 0 0 inset;
- border-right: 1px solid rgba(0, 0, 0, 0.1);
+ border-right: 1px solid #ddd;
}
.navigation ul {
@@ -746,16 +749,71 @@ table.test-summary .test-target > span:first-child {
/** manual */
+.manual-index .manual-cards {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.manual-index .manual-card-wrap {
+ width: 33%;
+ padding: 10px 20px 10px 0;
+ box-sizing: border-box;
+}
+
+.manual-index .manual-card-wrap > h1 {
+ border: none;
+ margin: 0;
+ font-size: 1.5em;
+}
+
+.manual-index .manual-card {
+ height: 200px;
+ overflow: hidden;
+ border: solid 1px #ddd;
+ border-radius: 4px;
+ padding: 8px;
+ position: relative;
+}
+
+.manual-index .manual-card > div {
+ transform: scale(0.4);
+ transform-origin: 0 0;
+ width: 250%;
+}
+
+.manual-index .manual-card > a {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background: rgba(210, 210, 210, 0.1);
+}
+
+.manual-index .manual-card > a:hover {
+ background: none;
+}
+
+.manual-index .manual-badge {
+ margin: 0;
+}
+
+.manual-index .manual-user-index {
+ margin-bottom: 1em;
+ border-bottom: solid 1px #ddd;
+}
+
.manual-root .navigation {
- padding-left: 0;
+ padding-left: 4px;
+ margin-top: 4px;
}
.navigation .manual-toc {
margin-top: -0.25em;
}
-.navigation .manual-toc li {
- white-space: normal;
+.navigation .manual-toc-root > div {
+ padding-top: 1px;
}
.github-markdown .manual-toc-title a {
@@ -788,11 +846,13 @@ table.test-summary .test-target > span:first-child {
}
.navigation .manual-toc .indent-h1 {
- background: #039BE5;
- padding: 0.5em;
+ /*background: rgb(37, 138, 175);*/
+ /*padding: 0.5em;*/
+ margin: 1em 0 0 0.5em;
}
.navigation .manual-toc .indent-h1 a {
- color: #fff;
+ color: #444;
+ font-weight: bold;
}
.manual-toc .indent-h1 {
@@ -897,6 +957,13 @@ table.test-summary .test-target > span:first-child {
background-color: #f8f8f8;
}
+.github-markdown hr {
+ border-right: 0;
+ border-bottom: 1px solid #e5e5e5;
+ border-left: 0;
+ border-top: 0;
+}
+
/** badge(.svg) does not have border */
.github-markdown img:not([src*=".svg"]) {
max-width: 100%;
@@ -0,0 +1,15 @@
+<div class="github-markdown">
+ <div class="manual-user-index" data-ice="manualUserIndex"></div>
+
+ <p class="manual-badge" data-ice="manualBadge"><img src="./manual-badge.svg"/></p>
+
+ <div class="manual-cards">
+ <div class="manual-card-wrap" data-ice="cards">
+ <h1 data-ice="label"></h1>
+ <div class="manual-card">
+ <div data-ice="card"></div>
+ <a data-ice="link"></a>
+ </div>
+ </div>
+ </div>
+</div>
@@ -1,5 +1,4 @@
<div class="github-markdown manual-toc-root">
- <img src="./manual-badge.svg" data-ice="badge"/>
<div data-ice="manual">
<ul class="manual-toc">
<li data-ice="manualNav"><a href="" data-ice="link"></a></li>
@@ -12,6 +12,7 @@
"includes": ["Test.js$"]
},
"manual": {
+ "index": "./test/fixture/package/manual/index.md",
"overview": ["./test/fixture/package/manual/overview.md"],
"design": ["./test/fixture/package/manual/design.md"],
"installation": ["./test/fixture/package/manual/installation.md"],
@@ -0,0 +1,2 @@
+# ESDoc Manual
+tbd
Oops, something went wrong.

0 comments on commit 0d30880

Please sign in to comment.