Moved badges to site only.
h3rald h3rald@h3rald.com
Tue, 21 Apr 2020 17:44:13 +0200
5 files changed,
67 insertions(+),
28 deletions(-)
M
docs/H3_DeveloperGuide.htm
→
docs/H3_DeveloperGuide.htm
@@ -7312,11 +7312,6 @@
-<p><a href="https://www.npmjs.com/package/h3js"><img src="https://img.shields.io/npm/v/h3js" alt="NPM" /></a> -<a href="https://github.com/h3rald/h3/blob/master/LICENSE"><img src="https://img.shields.io/github/license/h3rald/h3" alt="License" /></a> -<a href="https://travis-ci.org/github/h3rald/h3"><img src="https://img.shields.io/travis/h3rald/h3" alt="Build" /></a> -<a href="https://coveralls.io/github/h3rald/h3?branch=master"><img src="https://img.shields.io/coveralls/github/h3rald/h3" alt="Coverage" /></a></p> - <a name="Overview"></a> <h2>Overview<a href="#document-top" title="Go to top"></a></h2>@@ -7596,7 +7591,7 @@ import marked from "./vendor/marked.js";
import Prism from "./vendor/prism.js"; </code></pre> -<p>Easy enough. Then we want to store the mapping between the different page fragments and their titles:</p> +<p>Easy enough. Then we want to store the mapping between the different page fragments and their titles, as well as some cool project badges:</p> <pre><code class="js">const labels = { overview: "Overview",@@ -7605,6 +7600,16 @@ "key-concepts": "Key Concepts",
tutorial: "Tutorial", api: "API", about: "About", +}; + +const badges = { + "https://img.shields.io/npm/v/h3js": "https://www.npmjs.com/package/h3js", + "https://img.shields.io/github/license/h3rald/h3": + "https://github.com/h3rald/h3/blob/master/LICENSE", + "https://img.shields.io/travis/h3rald/h3": + "https://travis-ci.org/github/h3rald/h3", + "https://img.shields.io/coveralls/github/h3rald/h3": + "https://coveralls.io/github/h3rald/h3?branch=master", }; </code></pre>@@ -7652,7 +7657,7 @@ </code></pre>
<p>The main responsibility of this component is to fetch the Markdown content and render the whole page, but note how the rendering different portions of the page are delegated to different components: <code>Header</code>, <code>Navigation</code>, <code>Content</code>, and <code>Footer</code>.</p> -<p>The <code>Header</code> and <code>Footer</code> component are very simple, as their only job is to render static content. Both component simply return a tree of VNodes:</p> +<p>The <code>Header</code> component is very simple: its only job is to render static content:</p> <pre><code class="js">const Header = () => { return h3("header.row.sticky", [@@ -7666,10 +7671,15 @@ ]),
h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]); }; +</code></pre> -const Footer = () => { - return h3( - "footer", +<p>The <code>Footer</code> component is slightly more complex, as it also renders the project badges via a <code>map</code> function:</p> + +<pre><code class="js">const Footer = () => { + const images = Object.keys(badges).map((img) => + h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) + ); + return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ", h3(@@ -7680,8 +7690,9 @@ target: "_blank",
}, "Download the Guide" ), - ]) - ); + ]), + h3("div", images), + ]); }; </code></pre>
M
docs/css/style.css
→
docs/css/style.css
@@ -87,3 +87,7 @@ .version-label {
font-size: 0.8em; font-style: italic; } + +.badge { + margin: 0 2px; +}
M
docs/js/app.js
→
docs/js/app.js
@@ -11,6 +11,16 @@ api: "API",
about: "About", }; +const badges = { + "https://img.shields.io/npm/v/h3js": "https://www.npmjs.com/package/h3js", + "https://img.shields.io/github/license/h3rald/h3": + "https://github.com/h3rald/h3/blob/master/LICENSE", + "https://img.shields.io/travis/h3rald/h3": + "https://travis-ci.org/github/h3rald/h3", + "https://img.shields.io/coveralls/github/h3rald/h3": + "https://coveralls.io/github/h3rald/h3?branch=master", +}; + const pages = {}; const fetchPage = async (pages, id, md) => {@@ -52,8 +62,10 @@ ]);
}; const Footer = () => { - return h3( - "footer", + const images = Object.keys(badges).map((img) => + h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) + ); + return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ", h3(@@ -64,8 +76,9 @@ target: "_blank",
}, "Download the Guide" ), - ]) - ); + ]), + h3("div", images), + ]); }; const Navigation = (id, ids) => {
M
docs/md/overview.md
→
docs/md/overview.md
@@ -1,9 +1,3 @@
-[](https://www.npmjs.com/package/h3js) -[](https://github.com/h3rald/h3/blob/master/LICENSE) -[](https://travis-ci.org/github/h3rald/h3) -[](https://coveralls.io/github/h3rald/h3?branch=master) - - ## Overview **H3** is a microframework to build client-side single-page applications (SPAs) in modern JavaScript.
M
docs/md/tutorial.md
→
docs/md/tutorial.md
@@ -52,7 +52,7 @@ import marked from "./vendor/marked.js";
import Prism from "./vendor/prism.js"; ``` -Easy enough. Then we want to store the mapping between the different page fragments and their titles: +Easy enough. Then we want to store the mapping between the different page fragments and their titles, as well as some cool project badges: ```js const labels = {@@ -62,6 +62,16 @@ "key-concepts": "Key Concepts",
tutorial: "Tutorial", api: "API", about: "About", +}; + +const badges = { + "https://img.shields.io/npm/v/h3js": "https://www.npmjs.com/package/h3js", + "https://img.shields.io/github/license/h3rald/h3": + "https://github.com/h3rald/h3/blob/master/LICENSE", + "https://img.shields.io/travis/h3rald/h3": + "https://travis-ci.org/github/h3rald/h3", + "https://img.shields.io/coveralls/github/h3rald/h3": + "https://coveralls.io/github/h3rald/h3?branch=master", }; ```@@ -109,7 +119,7 @@ ```
The main responsibility of this component is to fetch the Markdown content and render the whole page, but note how the rendering different portions of the page are delegated to different components: `Header`, `Navigation`, `Content`, and `Footer`. -The `Header` and `Footer` component are very simple, as their only job is to render static content. Both component simply return a tree of VNodes: +The `Header` component is very simple: its only job is to render static content: ```js const Header = () => {@@ -124,10 +134,16 @@ ]),
h3("label.drawer-toggle.button.col-sm-last", { for: "drawer-control" }), ]); }; +``` +The `Footer` component is slightly more complex, as it also renders the project badges via a `map` function: + +```js const Footer = () => { - return h3( - "footer", + const images = Object.keys(badges).map((img) => + h3("a.badge", { href: badges[img], target: "_blank" }, h3("img", { src: img })) + ); + return h3("footer", [ h3("div", [ "© 2020 Fabio Cevasco · ", h3(@@ -138,8 +154,9 @@ target: "_blank",
}, "Download the Guide" ), - ]) - ); + ]), + h3("div", images), + ]); }; ```