refactor(docs): refactor man & index page (#1472)

30 files changed, 1024 insertions, 205 deletions

diff --git a/_adoc/index.adoc b/_adoc/index.adoc
index 1bcf3302..55344c6e 100644
--- a/_adoc/index.adoc
+++ b/_adoc/index.adoc
@@ -12,7 +12,7 @@ image:https://img.shields.io/codacy/grade/f241cba192974787b66f7e4368777ebf?logo=
 image:https://img.shields.io/lgtm/grade/cpp/github/nanomsg/nng?logo=lgtm&logoColor=grey&label=[LGTM,link="https://lgtm.com/projects/g/nanomsg/nng/?mode=list"]
 image:https://img.shields.io/discord/639573728212156478?label=&logo=discord[Discord,link="https://discord.gg/Xnac6b9"]
 image:https://img.shields.io/github/license/nanomsg/nng.svg?logoColor=silver&logo=open-source-initiative&label=&color=blue[MIT License,link="https://github.com/nanomsg/nng/blob/master/LICENSE.txt"]
-image:https://img.shields.io/github/v/tag/nanomsg/nng.svg?logo=github&label=[Latest version,link="https://github.com/nanomsg/nng/releases]
+image:https://img.shields.io/github/v/tag/nanomsg/nng.svg?logo=github&label=[Latest version,link="https://github.com/nanomsg/nng/releases"]
 
 
 This is the landing page for NNG.
diff --git a/_config.yml b/_config.yml
index 688f4fef..fb1a9ca0 100644
--- a/_config.yml
+++ b/_config.yml
@@ -1,3 +1,4 @@
 latest: v1.3.2
 important_icon: http://nanomsg.org/icons/important.png
-exclude: [ _tools ]
+exclude: [_tools]
+index_path: /
diff --git a/_includes/footer-manpage.html b/_includes/footer-manpage.html
index 061b7658..37b0e997 100644
--- a/_includes/footer-manpage.html
+++ b/_includes/footer-manpage.html
@@ -4,7 +4,7 @@
                         <div>NNG Reference Manual {{ page.version }}</div>
                         <div style="margin-left: auto" class="nn-tan">
                                 <small>
-                                        &copy; 2020 <a href="mailto:garrett@damore.org">Staysail Systems,
+                                        &copy; 2021 <a href="mailto:garrett@damore.org">Staysail Systems,
                                                 Inc.</a>
                                         &copy; 2018 <a href="mailto:info@capitar.com">Capitar IT Group BV</a>
                                         <br />
diff --git a/_includes/footer-nng.html b/_includes/footer-nng.html
index d4691bb7..aa4e534b 100644
--- a/_includes/footer-nng.html
+++ b/_includes/footer-nng.html
@@ -1,12 +1,18 @@
 <footer class="nn-footer">
-        <div class="nn-footer-inner nn-tan">
-                <small>
-                        &copy; 2020 <a href="mailto:garrett@damore.org">Garrett D'Amore</a> and
-                        contributors.</a>
-                        <br />
-                        nanomsg&trade; and NNG&trade; are <a href="https://nanomsg.org/trademarks.html">trademarks</a>
-                        of Garrett
-                        D'Amore.
-                </small>
+        <div class="level nn-footer-top mt-4 mb-0">
+                <div class="level-left">
+                        <a href="/">
+                                <img width="54" src="/assets/image/NNg-black.png">
+                        </a>
+                </div>
+                <div class="level-right">
+                        <a class="nn-footer-email has-text-weight-medium" href="mailto:garrett@damore.org">
+                                <img class="mr-1" src="/assets/image/footer-email.png" width="24">
+                                Email: Garrett D'Amore</a>
+                </div>
+        </div>
+        <div class="level mt-2">
+                <div class="level-left">nanomsg™ and NNG™ are trademarks of Garrett D'Amore.</div>
+                <div class="level-right nn-footer-copyright">© 2020 Garrett D'Amore and contributors.</div>
         </div>
 </footer>
\ No newline at end of file
diff --git a/_includes/footer.html b/_includes/footer.html
index 2a948333..fc83d176 100644
--- a/_includes/footer.html
+++ b/_includes/footer.html
@@ -3,7 +3,7 @@
 <td style="color: #ba5836;" align="right">
 <em>
 <font size=2px>
-&copy; 2020 <a href="mailto:garrett@damore.org">Garrett D'Amore</a> and contributors.
+&copy; 2021 <a href="mailto:garrett@damore.org">Garrett D'Amore</a> and contributors.
 <br/>
 nanomsg&trade; and nng&trade; are <a href="http://nanomsg.org/trademarks.html">trademarks</a> of Garrett D'Amore.</font></em>
 </td>
diff --git a/_includes/header-manpage.html b/_includes/header-manpage.html
new file mode 100644
index 00000000..3e4f5682
--- /dev/null
+++ b/_includes/header-manpage.html
@@ -0,0 +1,85 @@
+<header class="man-header">
+  <div class="man-header-container">
+    <nav class="navbar" role="navigation" aria-label="navigation">
+      <div class="navbar-brand">
+        <a class="navbar-item" href="/">
+          <img width="54" height="36" src="/assets/image/NNg-black.png">
+        </a>
+        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample">
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+          <span aria-hidden="true"></span>
+        </a>
+      </div>
+      <div id="navbarBasicExample" class="navbar-menu">
+        <div class="navbar-start">
+          <div class="navbar-item is-hidden-touch search-container">
+            <i class="iconfont icon-search"></i>
+            <input type="text" placeholder="Search" id="man-search">
+          </div>
+        </div>
+        <div class="navbar-end">
+          <div class="navbar-item navbar-highlight">
+            <a href="/man/">Documentation</a>
+          </div>
+          <div class="navbar-item">
+            <a href="https://discord.gg/Xnac6b9">Discord</a>
+          </div>
+          <div class="navbar-item is-hidden-desktop">
+            <a href="https://github.com/nanomsg/nng">
+              Github
+            </a>
+          </div>
+          <div class="navbar-item is-hidden-touch">
+            <a href="https://github.com/nanomsg/nng" class="btn-github">
+              <i class="iconfont icon-github"></i> Github
+            </a>
+          </div>
+          <div class="navbar-item is-hidden-touch">
+            <a href="https://github.com/nanomsg/nng/releases" class="btn-download">
+              <i class="iconfont icon-download"></i> Download
+            </a>
+          </div>
+        </div>
+      </div>
+    </nav>
+  </div>
+  <script defer>
+    document.addEventListener('DOMContentLoaded', () => {
+      // Get all "navbar-burger" elements
+      const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(
+        '.navbar-burger'), 0);
+      // Check if there are any navbar burgers
+      if ($navbarBurgers.length > 0) {
+        // Add a click event on each of them
+        $navbarBurgers.forEach(el => {
+          el.addEventListener('click', () => {
+            // Get the target from the "data-target" attribute
+            const target = el
+              .dataset.target;
+            const $target = document
+              .getElementById(
+                target);
+            el.classList.toggle(
+              'is-active'
+            );
+            $target.classList
+              .toggle(
+                'is-active'
+              );
+          });
+        });
+      }
+
+      const $searchInput = document.getElementById('man-search');
+      $searchInput.addEventListener('keydown', event => {
+        if (event.isComposing || event.keyCode !== 13) {
+          return;
+        }
+        if (event.target && event.target.value) {
+          window.open(`https://www.google.com/search?q=site:nng.nanomsg.org ${event.target.value}`)
+        }
+      })
+    });
+  </script>
+</header>
\ No newline at end of file
diff --git a/_includes/header-nng.html b/_includes/header-nng.html
index 2ea7d51d..1f1a112b 100644
--- a/_includes/header-nng.html
+++ b/_includes/header-nng.html
@@ -1,20 +1,75 @@
 <header class="nn-header">
-        <div class="nn-header-inner">
-                <a href="https://nng.nanomsg.org" class="nn-logo">
-                        <span class="nn-black">NN</span><span class="nn-tan">G</span>
-                </a>
-
-                <ul class="nn-nav-menu">
-                        <li class="nn-nav-item">
-                                <a href="https://nng.nanomsg.org/man/" class="nn-nav-link">Documentation</a>
-                        </li>
-                        <li class="nn-nav-item">
-                                <a href="https://discord.gg/Xnac6b9" class="nn-nav-link">Discord</a>
-                        </li>
-
-                        <li class="nn-nav-item">
-                                <a href="https://github.com/nanomsg/nng" class="nn-nav-link">GitHub</a>
-                        </li>
-                </ul>
+        <div class="nn-header-inner container">
+                <nav class="navbar" role="navigation" aria-label="navigation">
+                        <div class="navbar-brand">
+                                <a class="navbar-item" href="/">
+                                        <img width="54" height="36" src="/assets/image/NNg-white.png">
+                                </a>
+                                <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+                                        data-target="navbarBasicExample">
+                                        <span aria-hidden="true"></span>
+                                        <span aria-hidden="true"></span>
+                                        <span aria-hidden="true"></span>
+                                </a>
+                        </div>
+                        <div id="navbarBasicExample" class="navbar-menu">
+                                <div class="navbar-start"></div>
+                                <div class="navbar-end">
+                                        <div class="navbar-item">
+                                                <a href="/man/">
+                                                        <i class="iconfont icon-doc"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item">
+                                                <a href="https://discord.gg/Xnac6b9">
+                                                        <i class="iconfont icon-discord"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-desktop">
+                                                <a href="https://github.com/nanomsg/nng">
+                                                        Github
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-touch">
+                                                <a href="https://github.com/nanomsg/nng">
+                                                        <i class="iconfont icon-github"></i>
+                                                </a>
+                                        </div>
+                                        <div class="navbar-item is-hidden-touch">
+                                                <a href="https://github.com/nanomsg/nng/releases" class="btn-download">
+                                                        <i class="iconfont icon-download"></i> Download
+                                                </a>
+                                        </div>
+                                </div>
+                        </div>
+                </nav>
         </div>
-</header>
+        <script defer>
+                document.addEventListener('DOMContentLoaded', () => {
+                        // Get all "navbar-burger" elements
+                        const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll(
+                                '.navbar-burger'), 0);
+                        // Check if there are any navbar burgers
+                        if ($navbarBurgers.length > 0) {
+                                // Add a click event on each of them
+                                $navbarBurgers.forEach(el => {
+                                        el.addEventListener('click', () => {
+                                                // Get the target from the "data-target" attribute
+                                                const target = el
+                                                        .dataset.target;
+                                                const $target = document
+                                                        .getElementById(
+                                                                target);
+                                                el.classList.toggle(
+                                                        'is-active'
+                                                );
+                                                $target.classList
+                                                        .toggle(
+                                                                'is-active'
+                                                        );
+                                        });
+                                });
+                        }
+                });
+        </script>
+</header>
\ No newline at end of file
diff --git a/_includes/nn-content.html b/_includes/nn-content.html
new file mode 100644
index 00000000..728466ad
--- /dev/null
+++ b/_includes/nn-content.html
@@ -0,0 +1,162 @@
+<section id="nn-banner">
+  <h1 class="nn-banner-title">NNG: Lightweight Messaging Library</h1>
+  <p class="nn-banner-desc">A lightweight, broker-less library</p>
+  <a class="nn-btn-download" href="https://github.com/nanomsg/nng/releases">Download</a>
+</section>
+<div id="nn-content">
+  <section id="nn-intro">
+    <div class="container">
+      <div class="nn-intro-container">
+        <div class="nn-intro-cov"
+          style="z-index: 10; width: 10px; height: 35%; top: 0; left: 0; transform: translateX(-8px);">
+        </div>
+        <div class="nn-intro-cov"
+          style="z-index: 10; width: 30%; height: 10px; top: 0; left: 0; transform: translate(-8px ,-8px);">
+        </div>
+        <h2 class="nn-intro-title nn-subtitle">Introduction</h2>
+        <p class="nn-intro-desc">NNG, like its predecessors <a class="is-brown"
+            href="https://github.com/nanomsg/nanomsg">nanomsg</a>
+          (and
+          to some extent <a class="is-brown" href="https://zeromq.org">ZeroMQ</a>),
+          is a
+          lightweight, broker-less library, offering a simple API to solve common
+          recurring messaging problems, such as publish/subscribe, RPC-style
+          request/reply, or service discovery. The API frees the programmer from worrying
+          about details like connection management, retries, and other common
+          considerations, so that they can focus on the application instead of the
+          plumbing.</p>
+      </div>
+    </div>
+  </section>
+  <section id="nn-feat">
+    <div class="container">
+      <h2 class="nn-subtitle has-text-centered nn-feat-title">
+        Features
+      </h2>
+      <div class="columns is-multiline">
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-reliability.png" class="mb-4" />
+            <h3 class="card-title mb-2">Reliability</h3>
+            <p class="card-desc">NNG is designed for production use from the beginning. Every error case is considered,
+              and it is designed to avoid crashing except in cases of gross developer error. (Hopefully we don’t have
+              any of these in our own code.)</p>
+          </div>
+        </div>
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-scalability.png" class="mb-4" />
+            <h3 class="card-title mb-2">Scalability</h3>
+            <p class="card-desc">NNG scales out to engage multiple cores using a bespoke asynchronous I/O framework,
+              using thread pools to spread load without exceeding typical system limits.</p>
+          </div>
+        </div>
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-maintainability.png" class="mb-4" />
+            <h3 class="card-title mb-2">Maintainability</h3>
+            <p class="card-desc">NNG’s architecture is designed to be modular and easily grasped by developers
+              unfamiliar with the code base. The code is also well documented.</p>
+          </div>
+        </div>
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-extensibility.png" class="mb-4" />
+            <h3 class="card-title mb-2">Extensibility</h3>
+            <p class="card-desc">Because it avoids ties to file descriptors, and avoids confusing interlocking state
+              machines, it is easier to add new protocols and transports to NNG. This was demonstrated by the addition
+              of the TLS and ZeroTier transports.</p>
+          </div>
+        </div>
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-security.png" class="mb-4" />
+            <h3 class="card-title mb-2">Security</h3>
+            <p class="card-desc">NNG provides TLS 1.2 and ZeroTier transports, offering support for robust and industry
+              standard authentication and encryption. In addition, it is hardened to be resilient against malicious
+              attackers, with special consideration given to use in a hostile Internet.</p>
+          </div>
+        </div>
+        <div class="column is-6">
+          <div class="card feat-card">
+            <img src="/assets/image/feat-usability.png" class="mb-4" />
+            <h3 class="card-title mb-2">Usability</h3>
+            <p class="card-desc">NNG eschews slavish adherence parts of the more complex and less well understood POSIX
+              APIs, while adopting the semantics that are familiar and useful. New APIs are intuitive, and the optional
+              support for separating protocol context and state from sockets makes creating concurrent applications
+              vastly simpler than previously possible.</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="nn-detail">
+    <div class="container compatibility">
+      <div class="columns">
+        <div class="column is-7">
+          <h2 class="nn-subtitle has-text-left nn-detail-title">Compatibility</h2>
+          <p class="nn-detail-desc">This project offers both wire compatibility and API compatibility, so most nanomsg
+            users can begin using
+            NNG right away.</p>
+          <p class="nn-detail-desc">
+            Existing nanomsg and mangos applications can inter-operate with NNG applications automatically.</p>
+        </div>
+        <div class="column is-4 is-offset-1">
+          <img src="/assets/image/compatibility.png">
+        </div>
+      </div>
+    </div>
+    <div class="container platforms">
+      <div class="columns">
+        <div class="column is-7 is-order-2 is-offset-1">
+          <h2 class="nn-subtitle has-text-right nn-detail-title">Supported Platforms</h2>
+          <p class="nn-detail-desc has-text-right">NNG supports Linux, macOS, Windows (Vista or better), illumos,
+            Solaris, FreeBSD,
+            Android, and iOS. Most other POSIX platforms should work out of the box but have not been tested. Very old
+            versions of otherwise supported platforms might not work.</p>
+        </div>
+        <div class="column is-4">
+          <img src="/assets/image/platforms.png">
+        </div>
+      </div>
+    </div>
+  </section>
+  <section id="nn-quick-start">
+    <div class="container">
+      <h2 class="nn-subtitle has-text-centered nn-quick-start-title has-text-white">
+        Quick Start
+      </h2>
+      <div class="columns is-8-desktop is-variable">
+        <div class="column is-6">
+          <p class="nn-quick-start-desc mb-3">
+            To build this project, you will need a C99 compatible compiler and <a class="is-brown"
+              href="http://www.cmake.org/">CMake</a> version 3.13 or
+            newer.
+          </p>
+          <p class="nn-quick-start-desc mb-3">We recommend using the <a class="is-brown"
+              href="https://ninja-build.org/">Ninja</a> build system (pass "-G Ninja"
+            to CMake) when
+            you
+            can. (And not just because
+            Ninja sounds like "NNG" — it’s also blindingly fast and has made our lives as developers measurably better.)
+          </p>
+          <p class="nn-quick-start-desc mb-3">If you want to build with <a class="is-brown"
+              href="https://tls.mbed.org/">TLS</a> support you will also need
+            mbedTLS. See
+            <a class="is-brown"
+              href="https://github.com/nanomsg/nng/blob/master/docs/BUILD_TLS.adoc">docs/BUILD_TLS.adoc</a> for details.
+          </p>
+        </div>
+        <div class="column is-6">
+          <p class="mb-4 has-text-white has-text-weight-medium">With a Linux or UNIX environment:</p>
+          <pre class="nn-quick-start-pre">$ mkdir build
+$ cd build
+$ cmake -G Ninja ..
+$ ninja
+$ ninja test
+$ ninja install</pre>
+        </div>
+      </div>
+    </div>
+  </section>
+</div>
\ No newline at end of file
diff --git a/_includes/nn-footer.html b/_includes/nn-footer.html
index d4691bb7..46993667 100644
--- a/_includes/nn-footer.html
+++ b/_includes/nn-footer.html
@@ -1,7 +1,7 @@
 <footer class="nn-footer">
         <div class="nn-footer-inner nn-tan">
                 <small>
-                        &copy; 2020 <a href="mailto:garrett@damore.org">Garrett D'Amore</a> and
+                        &copy; 2021 <a href="mailto:garrett@damore.org">Garrett D'Amore</a> and
                         contributors.</a>
                         <br />
                         nanomsg&trade; and NNG&trade; are <a href="https://nanomsg.org/trademarks.html">trademarks</a>
diff --git a/_layouts/manpage.html b/_layouts/manpage.html
index 60a12540..e2a13b5a 100644
--- a/_layouts/manpage.html
+++ b/_layouts/manpage.html
@@ -4,8 +4,8 @@
 <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="/nn.css">
-        <link rel="stylesheet" href="/nn-pygments.css">
+        <link rel="stylesheet" href="/assets/css/nn.css">
+        <link rel="stylesheet" href="/assets/css/nn-pygments.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
diff --git a/_layouts/manpage_v2.html b/_layouts/manpage_v2.html
index 443b2ba9..59eb38a2 100755
--- a/_layouts/manpage_v2.html
+++ b/_layouts/manpage_v2.html
@@ -4,35 +4,33 @@
 <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="/nn.css">
-        <link rel="stylesheet" href="/nn-pygments.css">
+        <link rel="stylesheet" href="/assets/css/nn.css">
+        <link rel="stylesheet" href="/assets/css/nn-pygments.css">
+        <link rel="stylesheet" href="/assets/css/man.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
                 rel="stylesheet">
+        <link rel="stylesheet" href="//at.alicdn.com/t/font_2668178_gvizekc2vj.css">
         <title>{{page.title}}</title>
 </head>
 
 <body class="manpage toc2 toc-left">
-{% include header-nng.html %}
-
-{% include_relative _toc.html %}
-
-<main>
-{% if page.version and page.version != site.latest %}
-{% if page.version == "tip" %}
-{% include manpage-tip.html %}
-{% else %}
-{% include manpage-old.html %}
-{% endif %}
-{% endif %}
-
-{{ content }}
-</main>
-
-{% include footer-manpage.html %}
-
+        {% include header-manpage.html %}
+        {% include_relative _toc.html %}
+
+        <main>
+                {% if page.version and page.version != site.latest %}
+                {% if page.version == "tip" %}
+                {% include manpage-tip.html %}
+                {% else %}
+                {% include manpage-old.html %}
+                {% endif %}
+                {% endif %}
+                {{ content }}
+                {% include footer-nng.html %}
+        </main>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/_layouts/nng.html b/_layouts/nng.html
index 07e4d6e8..f27a4121 100644
--- a/_layouts/nng.html
+++ b/_layouts/nng.html
@@ -4,23 +4,28 @@
 <head>
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <link rel="stylesheet" href="/nn.css">
-        <link rel="stylesheet" href="/nn-pygments.css">
+        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
+        <link rel="stylesheet" href="/assets/css/bulma.css">
+        <link rel="stylesheet" href="/assets/css/index.css">
         <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
         <link href="https://fonts.googleapis.com/css?family=Inconsolata&display=swap" rel="stylesheet">
         <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
                 rel="stylesheet">
+        <link rel="stylesheet" href="//at.alicdn.com/t/font_2668178_gvizekc2vj.css">
         <title>{{page.title}}</title>
 </head>
 
 <body class="article">
         {% include header-nng.html %}
-
+        {% if page.url and page.url == site.index_path %}
+        {% include nn-content.html %}
+        {% else %}
         {{ content }}
-
-        {% include footer-nng.html %}
-
+        {% endif %}
+        <div class="container">
+                {% include footer-nng.html %}
+        </div>
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/arrows.png b/arrows.png
deleted file mode 100644
index 1e310319..00000000
--- a/arrows.png
+++ /dev/null
diff --git a/assets/css/bulma.css b/assets/css/bulma.css
new file mode 100644
index 00000000..2db56246
--- /dev/null
+++ b/assets/css/bulma.css
@@ -0,0 +1,22 @@
+/* bulma setting */
+body {
+  font-family: 'Roboto', 'Trebuchet MS', sans-serif;
+  line-height: 1.846;
+  color: #666666;
+  background-color: #ffffff;
+  margin: 0;
+}
+
+img {
+  height: auto;
+  max-width: 100%;
+}
+
+.container {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+
+.is-order-2 {
+  order: 2;
+}
\ No newline at end of file
diff --git a/assets/css/index.css b/assets/css/index.css
new file mode 100644
index 00000000..55912884
--- /dev/null
+++ b/assets/css/index.css
@@ -0,0 +1,266 @@
+#content {
+  padding: 64px 0 48px;
+  padding-left: 12px;
+  padding-right: 12px;
+  margin: 0 auto;
+  max-width: 1344px;
+}
+
+a {
+  text-decoration: none;
+  color: #2156a5;
+}
+
+a:hover {
+  color: #112D4E;
+}
+
+a.is-brown {
+  color: #3F72AF;
+}
+
+.button {
+  border: none;
+}
+
+.button.is-hovered,
+.button:hover {
+  border: none;
+}
+
+/* This styling is used for our nanomsg specific headers. */
+.navbar {
+  background: transparent;
+}
+
+.nn-header {
+  position: fixed;
+  z-index: 40;
+  width: 100%;
+  background: linear-gradient(135deg, #112D4E 0%, #171D41 100%);
+}
+
+i.iconfont {
+  font-size: 18px;
+  margin-right: 4px;
+}
+
+.navbar-burger {
+  color: #3F72AF
+}
+
+/* navbar link  */
+.nn-header-inner a {
+  color: #fff;
+}
+
+.nn-header-inner .is-active a {
+  color: #424242;
+}
+
+.nn-header-inner a:hover {
+  color: #3F72AF
+}
+
+.nn-header a.btn-download {
+  padding: 5px 12px;
+  display: inline-block;
+  background: #3F72AF;
+  border-radius: 4px;
+  color: #fff;
+}
+
+.nn-nav-link {
+  color: #fff;
+  text-decoration: none;
+}
+
+/* nn-footer */
+.nn-footer .nn-footer-top {
+  border-bottom: 1px solid #E3E3E3;
+}
+
+.nn-footer .nn-footer-email {
+  font-size: 14px;
+  color: #4F5880;
+  line-height: 20px;
+}
+
+.nn-footer .nn-footer-copyright {
+  font-size: 14px;
+  font-weight: bold;
+  color: #B9B9B9;
+  line-height: 16px;
+}
+
+/* nn-page style sheet */
+
+#nn-banner {
+  width: 100%;
+  padding: 175px 0 110px;
+  text-align: center;
+  background: linear-gradient(135deg, #112D4E 0%, #171D41 100%);
+}
+
+#nn-banner .nn-banner-title {
+  font-size: 48px;
+  font-weight: bold;
+  color: #FFF;
+  margin-bottom: 40px;
+}
+
+#nn-banner .nn-banner-desc {
+  font-size: 24px;
+  color: #FFF;
+  margin-bottom: 48px;
+}
+
+#nn-banner .nn-btn-download {
+  padding: 15px 44px;
+  background: #3F72AF;
+  border-radius: 4px;
+  color: #fff;
+}
+
+/* content */
+#nn-content {
+  padding-top: 0px;
+}
+
+h2.nn-subtitle {
+  font-size: 44px;
+  font-weight: bold;
+  color: #2E2E2E;
+  line-height: 44px;
+}
+
+
+/* nn-intro */
+#nn-intro {
+  padding: 100px 0;
+}
+
+#nn-intro .nn-intro-container {
+  padding: 60px 110px;
+  position: relative;
+  border: #112D4E solid 4px;
+  border-radius: 4px;
+}
+
+#nn-intro .nn-intro-title {
+  z-index: 10;
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin: 0;
+  transform: translateY(-50%);
+}
+
+#nn-intro .nn-intro-desc {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+}
+
+#nn-intro .nn-intro-cov {
+  position: absolute;
+  background-color: #fff;
+}
+
+@media screen and (max-width: 1200px) {
+  #nn-intro .nn-intro-container {
+    padding: 60px 24px;
+  }
+
+  #nn-intro .nn-intro-container {
+    border: none;
+  }
+}
+
+/* nn-feat */
+#nn-feat {
+  padding: 100px 0;
+  background: rgba(78, 87, 126, 0.05);
+}
+
+#nn-feat .nn-feat-title {
+  margin: 0 0 64px;
+}
+
+#nn-feat .card {
+  box-shadow: none;
+  background: #FFFFFF;
+  border: 1px solid #DEDEDE;
+  border-radius: 0;
+  height: 100%;
+}
+
+#nn-feat .feat-card {
+  padding: 34px 32px;
+}
+
+#nn-feat .feat-card img {
+  width: 36px;
+  height: 36px;
+}
+
+#nn-feat .feat-card .card-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #112D4E;
+  line-height: 24px;
+}
+
+#nn-feat .feat-card .card-desc {
+  font-size: 14px;
+  color: #424242;
+  line-height: 22px;
+}
+
+
+/* nn-detail */
+
+#nn-detail {
+  padding: 100px 0;
+}
+
+#nn-detail .platforms {
+  margin-top: 140px;
+}
+
+#nn-detail .nn-detail-title {
+  margin-bottom: 50px;
+}
+
+#nn-detail .nn-detail-desc {
+  font-weight: 400;
+  line-height: 16px;
+}
+
+/* nn-quick-start */
+#nn-quick-start {
+  padding: 100px 0;
+  background: linear-gradient(135deg, #112D4E 0%, #171D41 100%);
+}
+
+#nn-quick-start .container {
+  background: url('/assets/image/quick-start-bg.png') no-repeat bottom right/ auto 250px;
+}
+
+#nn-quick-start .nn-quick-start-title {
+  margin-bottom: 48px;
+}
+
+#nn-quick-start .nn-quick-start-desc {
+  font-weight: 400;
+  color: #fff;
+  line-height: 24px;
+}
+
+#nn-quick-start .nn-quick-start-pre {
+  background: rgba(122, 129, 159, 0.29);
+  border-radius: 8px;
+  border: 2px solid rgba(255, 255, 255, 0.58);
+  color: #fff;
+  padding: 16px;
+}
\ No newline at end of file
diff --git a/assets/css/man.css b/assets/css/man.css
new file mode 100644
index 00000000..7321e4ba
--- /dev/null
+++ b/assets/css/man.css
@@ -0,0 +1,272 @@
+/* bulma */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  margin: 24px 0 16px;
+}
+
+p {
+  font-size: 14px;
+  font-weight: 400;
+  color: #424242;
+  line-height: 22px;
+  margin: 16px 0 24px;
+}
+
+.search-container {
+  position: relative;
+}
+
+/* man-search */
+#man-search {
+  outline: none;
+  border: 0;
+  border-left: 1px solid #dedede;
+  border-radius: 0;
+  padding-left: 35px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 14px;
+}
+
+.icon-search.icon-search {
+  font-size: 8px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-40%);
+  left: 30px;
+}
+
+
+/* header */
+.man-header {
+  background: #FFFFFF;
+  position: fixed;
+  z-index: 40;
+  width: 100%;
+  box-shadow: 0px 2px 9px 0px rgba(227, 227, 227, 0.5);
+}
+
+.man-header a {
+  color: #424242;
+  font-size: 16px;
+}
+
+.man-header a.btn-github {
+  padding: 5px 28px;
+  display: inline-block;
+  border-radius: 4px;
+  border: 1px solid #DEDEDE;
+  color: #424242;
+}
+
+.man-header a.btn-download {
+  padding: 5px 12px;
+  display: inline-block;
+  background: #BA5836;
+  border-radius: 4px;
+  color: #fff;
+}
+
+i.iconfont {
+  font-size: 18px;
+  margin-right: 4px;
+}
+
+.man-header .navbar-highlight {
+  border-top: 3px solid #BA5836;
+  align-items: center;
+  border-bottom: 3px solid transparent;
+}
+
+/* nn-footer */
+.nn-footer .nn-footer-top {
+  border-bottom: 1px solid #E3E3E3;
+}
+
+.nn-footer .nn-footer-email {
+  font-size: 14px;
+  color: #4F5880;
+  line-height: 20px;
+}
+
+.nn-footer .nn-footer-copyright {
+  font-size: 14px;
+  font-weight: bold;
+  color: #B9B9B9;
+  line-height: 16px;
+}
+
+/* bulma */
+.navbar-brand {
+  align-items: stretch;
+  display: flex;
+  flex-shrink: 0;
+  min-height: 3.25rem;
+}
+
+.navbar {
+  align-items: stretch;
+  background-color: #fff;
+  min-height: 3.25rem;
+  position: relative;
+  z-index: 30;
+  margin: 0 48px;
+}
+
+@media screen and (max-width: 1023px) {
+  .navbar {
+    margin: 0;
+  }
+
+}
+
+.navbar-menu {
+  display: none;
+}
+
+.navbar-item {
+  cursor: pointer;
+  flex-grow: 0;
+  flex-shrink: 0;
+  color: #4a4a4a;
+  display: block;
+  line-height: 1.5;
+  padding: .5rem .75rem;
+  position: relative;
+}
+
+.navbar-burger {
+  color: #4a4a4a;
+  cursor: pointer;
+  display: block;
+  height: 3.25rem;
+  width: 3.25rem;
+  position: relative;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  appearance: none;
+  background: 0 0;
+  border: none;
+  font-family: inherit;
+  font-size: 1em;
+  margin: 0;
+  padding: 0;
+  margin-left: auto;
+}
+
+.navbar-burger:hover {
+  background-color: rgba(0, 0, 0, .05);
+}
+
+.navbar-burger span {
+  background-color: currentColor;
+  display: block;
+  height: 1px;
+  left: calc(50% - 8px);
+  position: absolute;
+  transform-origin: center;
+  transition-duration: 86ms;
+  transition-property: background-color, opacity, transform;
+  transition-timing-function: ease-out;
+  width: 16px;
+}
+
+.navbar-burger.is-active span:nth-child(1) {
+  transform: translateY(5px) rotate(45deg);
+}
+
+.navbar-burger span:nth-child(1) {
+  top: calc(50% - 6px);
+}
+
+.navbar-burger.is-active span:nth-child(2) {
+  opacity: 0;
+}
+
+.navbar-burger span:nth-child(2) {
+  top: calc(50% - 1px);
+}
+
+.navbar-burger.is-active span:nth-child(3) {
+  transform: translateY(-5px) rotate(-45deg);
+}
+
+.navbar-burger span:nth-child(3) {
+  top: calc(50% + 4px);
+}
+
+
+@media screen and (max-width: 1023px) {
+  .man-header .navbar-highlight {
+    border-top: none;
+  }
+
+  .navbar-menu.is-active {
+    display: block;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .navbar {
+    min-height: 3.25rem;
+  }
+
+  .navbar,
+  .navbar-end,
+  .navbar-menu,
+  .navbar-start {
+    align-items: stretch;
+    display: flex;
+  }
+
+  .navbar-menu {
+    flex-grow: 1;
+    flex-shrink: 0;
+  }
+
+  .navbar-item,
+  .navbar-link {
+    align-items: center;
+    display: flex;
+  }
+
+  .navbar-burger {
+    display: none;
+  }
+
+  .navbar-start {
+    justify-content: flex-start;
+    margin-right: auto;
+  }
+
+  .navbar-end {
+    justify-content: flex-end;
+    margin-left: auto;
+  }
+}
+
+@media screen and (max-width: 1023px) {
+  .is-hidden-touch {
+    display: none !important;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .is-hidden-desktop {
+    display: none !important;
+  }
+}
+
+.level {
+  display: flex;
+  justify-content: space-between;
+}
+
+.level-left,
+.level-right {
+  align-items: center;
+}
\ No newline at end of file
diff --git a/nn-pygments.css b/assets/css/nn-pygments.css
index b8347520..b8347520 100644
--- a/nn-pygments.css
+++ b/assets/css/nn-pygments.css
diff --git a/nn.css b/assets/css/nn.css
index 4b863740..d6b0a415 100644
--- a/nn.css
+++ b/assets/css/nn.css
@@ -32,83 +32,15 @@
 @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap");
 @import url("https://fonts.googleapis.com/css?family=Inconsolata&display=swap");
 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css");
-/* This styling is used for our nanomsg specific headers. */
 
-.nn-nav-link:hover {
-        text-decoration: underline;
-}
-
-a.nn-nav-link {
-        text-decoration: none;
-}
-
-a.nn-logo {
-        text-decoration: none;
-}
-
-a.nn-logo:hover {
-        text-decoration: none;
-}
-
-.nn-nav-item {
+/* bulma setting */
+a {
         text-decoration: none;
-        font-family: 'Roboto', 'Trebuchet MS', sans-serif;
-        display: inline-flex;
-        margin-left: 1.5em;
-        text-align: right;
-}
-
-.nn-header {
-        width: 100%;
-        position: fixed;
-        top: 0;
-        left: 0;
-        background: #e0e0e0;
-}
-
-.nn-footer-inner {
-        text-align: right;
-        font-family: 'Roboto', 'Trebuchet MS', sans-serif;
-        font-style: italic;
-        margin: auto;
-        line-height: 1.6;
-}
-
-.nn-header-inner {
-        padding: 0em 4em 0em 2em;
-}
-
-.nn-header-inner {
-        display: flex;
-        align-items: center;
-}
-
-.nn-nav-menu {
-        margin-top: 0;
-        margin-bottom: 0;
-        display: inline-flex;
-        flex-direction: row;
-        flex-wrap: wrap;
-        justify-content: flex-end;
-        margin-left: auto;
-        font-size: 1.2em;
-        vertical-align: middle;
-        align-content: center;
-}
-
-.nn-logo {
-        font-size: 2.5em;
-        font-family: 'Roboto', 'Trebuchet MS', sans-serif;
-        font-weight: normal;
-        flex: 0 0;
-}
-
-.nn-tan {
-        color: #ba5836;
+        color: #2156a5;
 }
 
-.nn-black {
-        color: rgba(0, 0, 0, 0.8);
+a:hover {
+        color: #BA5836;
 }
 
 /* document body (contains all content) */
@@ -118,63 +50,42 @@ body {
         line-height: 1.846;
         color: #666666;
         background-color: #ffffff;
-}
-
-/* document header (contains title etc) */
-
-#header, #content {
-        width: 100%;
-        max-width: 62.5em;
-        margin: auto;
+        margin: 0;
 }
 
 /* headings */
-
-h2, h3, h4, h5, h6 {
-        font-family: inherit;
-        font-weight: 400;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
         line-height: 1.1;
-        color: #ba5836;
+        color: #424242;
+        font-weight: 500;
+        font-family: 'Roboto-Medium', 'Roboto', inherit;
 }
 
 h1 {
-        font-size: 2.75em;
-        font-weight: 400;
-        font-family: 'Open Sans';
-        color: rgba(0, 0, 0, 0.7);
+        font-size: 32px;
 }
 
 h2 {
-        font-size: 2.3em;
+        font-size: 20px;
 }
 
 h3 {
-        font-size: 1.6875em;
-}
-
-h4 {
-        font-size: 1.4375em;
-}
-
-h5 {
-        font-size: 1.2em;
+        font-size: 16px;
 }
 
+h4,
+h5,
 h6 {
-        font-size: 1.1em;
+        font-size: 14px;
 }
 
 h2#_name {
-	display: none;
-}
-
-a:hover {
-        text-decoration: underline;
-}
-
-a {
-        text-decoration: none;
-        color: #2156a5;
+        display: none;
 }
 
 /* plain paragraph text */
@@ -192,11 +103,14 @@ blockquote {
         border-left: 5px solid #eeeeee;
 }
 
-blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
+blockquote p:last-child,
+blockquote ul:last-child,
+blockquote ol:last-child {
         margin-bottom: 0;
 }
 
-.blockquote-reverse, blockquote.pull-right {
+.blockquote-reverse,
+blockquote.pull-right {
         padding-right: 15px;
         padding-left: 0;
         border-right: 5px solid #eeeeee;
@@ -204,35 +118,56 @@ blockquote p:last-child, blockquote ul:last-child, blockquote ol:last-child {
         text-align: right;
 }
 
-.blockquote-reverse footer:before, blockquote.pull-right footer:before, .blockquote-reverse small:before, blockquote.pull-right small:before, .blockquote-reverse .small:before, blockquote.pull-right .small:before {
+.blockquote-reverse footer:before,
+blockquote.pull-right footer:before,
+.blockquote-reverse small:before,
+blockquote.pull-right small:before,
+.blockquote-reverse .small:before,
+blockquote.pull-right .small:before {
         content: '';
 }
 
-.blockquote-reverse footer:after, blockquote.pull-right footer:after, .blockquote-reverse small:after, blockquote.pull-right small:after, .blockquote-reverse .small:after, blockquote.pull-right .small:after {
+.blockquote-reverse footer:after,
+blockquote.pull-right footer:after,
+.blockquote-reverse small:after,
+blockquote.pull-right small:after,
+.blockquote-reverse .small:after,
+blockquote.pull-right .small:after {
         content: '\00A0 \2014';
 }
 
 /* blockquote attribution text */
 
-.attribution, .cite, blockquote footer, blockquote small, blockquote .small {
+.attribution,
+.cite,
+blockquote footer,
+blockquote small,
+blockquote .small {
         display: block;
         /*   font-size: 80%; */
         line-height: 1.846;
         color: #bbbbbb;
 }
 
-.attribution:before, blockquote footer:before, blockquote small:before, blockquote .small:before {
+.attribution:before,
+blockquote footer:before,
+blockquote small:before,
+blockquote .small:before {
         content: '\2014 \00A0';
 }
 
 /* unordered list */
 
-ul, ol {
+ul,
+ol {
         margin-top: 0;
         margin-bottom: 11.5px;
 }
 
-ul ul, ol ul, ul ol, ol ol {
+ul ul,
+ol ul,
+ul ol,
+ol ol {
         margin-bottom: 0;
 }
 
@@ -260,7 +195,8 @@ table col[class*="col-"] {
         display: table-column;
 }
 
-table td[class*="col-"], table th[class*="col-"] {
+table td[class*="col-"],
+table th[class*="col-"] {
         position: static;
         float: none;
         display: table-cell;
@@ -324,7 +260,10 @@ tbody>tr:hover {
 
 /* inline code */
 
-code, kbd, pre, samp {
+code,
+kbd,
+pre,
+samp {
         font-family: 'Inconsolata', 'Consolas', monospace;
 }
 
@@ -449,42 +388,45 @@ a span.icon>.fa {
 }
 
 div.sidebarblock {
-	border-radius: .5em;
-	background-color: #e0e0e0;
+        border-radius: .5em;
+        background-color: #e0e0e0;
 }
 
 div.sidebarblock div.content {
-	padding: 1em 2em;
+        padding: 1em 2em;
 }
 
 .sidebarblock .content p {
-	font-size: .95em;
+        font-size: .95em;
 }
 
 /* doc header */
 div.details {
-	border-top: 1px solid #e0e0e0;
-	padding-top: 2em;
-	text-align: right;
-	margin-bottom: 1em;
+        border-top: 1px solid #e0e0e0;
+        padding-top: 2em;
+        text-align: right;
+        margin-bottom: 1em;
 }
 
-span.author{
-	font-style: italic;
+span.author {
+        font-style: italic;
 }
-span.author::before{
-	content: "\2014  ";
+
+span.author::before {
+        content: "\2014  ";
 }
-#revnumber,#revdate{
-	font-size: .9em;
+
+#revnumber,
+#revdate {
+        font-size: .9em;
 }
 
 
 /* image */
 
 img {
+        height: auto;
         max-width: 100%;
-        vertical-align: middle;
 }
 
 /* responsiveness fixes */
@@ -502,19 +444,21 @@ nav.toc2 {
         vertical-align: top;
         z-index: 10;
         position: fixed;
-        top: 5em;
+        top: 3.4em;
         bottom: 0;
         padding: 1.25em 1em;
 }
 
-@media screen and (maxwidth: 768px) {
+@media screen and (max-width: 768px) {
         nav.toc2 {
                 visibility: hidden;
                 overflow: hidden;
         }
+
         nav.toc2::-webkit-scrollbar {
                 display: none;
         }
+
         nav.toc2 {
                 -ms-overflow-style: none;
         }
@@ -540,22 +484,25 @@ nav.toc2 {
 
 main {
         padding-left: 20em;
-        padding-top: 5em;
         display: block;
-        max-width: 62.5em;
-        overflow-y: auto
+        padding-top: 53px;
+        overflow-y: auto;
+        margin: 0 auto;
+        max-width: 1200px;
 }
 
-@media all and (max-width: 90em) {
+@media all and (max-width: 1440px) {
         #toctitle {
                 display: none;
                 overflow: visible;
         }
+
         #toc.toc2 ul {
                 display: none;
                 overflow: visible;
         }
+
         main {
                 padding-left: 2em;
         }
-}
+}
\ No newline at end of file
diff --git a/assets/image/NNg-black.png b/assets/image/NNg-black.png
new file mode 100644
index 00000000..d71628de
--- /dev/null
+++ b/assets/image/NNg-black.png
diff --git a/assets/image/NNg-white.png b/assets/image/NNg-white.png
new file mode 100644
index 00000000..675d1092
--- /dev/null
+++ b/assets/image/NNg-white.png
diff --git a/assets/image/compatibility.png b/assets/image/compatibility.png
new file mode 100644
index 00000000..a55bd030
--- /dev/null
+++ b/assets/image/compatibility.png
diff --git a/assets/image/feat-extensibility.png b/assets/image/feat-extensibility.png
new file mode 100644
index 00000000..b1344adb
--- /dev/null
+++ b/assets/image/feat-extensibility.png
diff --git a/assets/image/feat-maintainability.png b/assets/image/feat-maintainability.png
new file mode 100644
index 00000000..b7e437e1
--- /dev/null
+++ b/assets/image/feat-maintainability.png
diff --git a/assets/image/feat-reliability.png b/assets/image/feat-reliability.png
new file mode 100644
index 00000000..2b1b612f
--- /dev/null
+++ b/assets/image/feat-reliability.png
diff --git a/assets/image/feat-scalability.png b/assets/image/feat-scalability.png
new file mode 100644
index 00000000..c88194bd
--- /dev/null
+++ b/assets/image/feat-scalability.png
diff --git a/assets/image/feat-security.png b/assets/image/feat-security.png
new file mode 100644
index 00000000..82b1967c
--- /dev/null
+++ b/assets/image/feat-security.png
diff --git a/assets/image/feat-usability.png b/assets/image/feat-usability.png
new file mode 100644
index 00000000..c53501d9
--- /dev/null
+++ b/assets/image/feat-usability.png
diff --git a/assets/image/footer-email.png b/assets/image/footer-email.png
new file mode 100644
index 00000000..89bc7c7e
--- /dev/null
+++ b/assets/image/footer-email.png
diff --git a/assets/image/platforms.png b/assets/image/platforms.png
new file mode 100644
index 00000000..aa0a2b85
--- /dev/null
+++ b/assets/image/platforms.png
diff --git a/assets/image/quick-start-bg.png b/assets/image/quick-start-bg.png
new file mode 100644
index 00000000..90d23db6
--- /dev/null
+++ b/assets/image/quick-start-bg.png