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

7 files changed, 338 insertions, 30 deletions

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>