implement first demo app template

2026-07-29 20:14:33 +00:00 · 2017-10-19 06:01:54 +02:00
parent 3cdf667457
commit 98fdb519a5
62 changed files with 1446 additions and 128 deletions
--- a/ElectronNET.WebApp/Controllers/AboutController.cs
+++ b/ElectronNET.WebApp/Controllers/AboutController.cs
@@ -0,0 +1,16 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+
+namespace ElectronNET.WebApp.Controllers
+{
+    public class AboutController : Controller
+    {
+        public IActionResult Index()
+        {
+            return View();
+        }
+    }
+}
--- a/ElectronNET.WebApp/Controllers/HomeController.cs
+++ b/ElectronNET.WebApp/Controllers/HomeController.cs
@@ -1,48 +1,11 @@
 using Microsoft.AspNetCore.Mvc;
-using ElectronNET.API;
-using ElectronNET.API.Entities;
-using System.Linq;

 namespace ElectronNET.WebApp.Controllers
 {
    public class HomeController : Controller
    {
        public IActionResult Index()
-        {
-            Electron.IpcMain.On("SayHello", async (args) =>
-            {
-                Electron.Notification.Show(new NotificationOptions("Hallo Robert", "Nachricht von ASP.NET Core App"));
-                Electron.IpcMain.Send(Electron.WindowManager.BrowserWindows.First(), "Goodbye", "Elephant!");
-
-                var currentBrowserWindow = Electron.WindowManager.BrowserWindows.First();
-                var openDialogOptions = new OpenDialogOptions
-                {
-                    Title = "Wuhuuu",
-                    ButtonLabel = "Mhh Okay",
-                    DefaultPath = await Electron.App.GetPathAsync(PathName.pictures),
-                    Message = "Hello World",
-                    Properties = new OpenDialogProperty[] { OpenDialogProperty.openDirectory }
-                };
-                var filePaths = await Electron.Dialog.ShowOpenDialogAsync(currentBrowserWindow, openDialogOptions);
-            });
-
-            Electron.IpcMain.On("GetPath", async (args) =>
-            {
-                Electron.Notification.Show(new NotificationOptions("test", "test2"));
-
-                var currentBrowserWindow = Electron.WindowManager.BrowserWindows.First();
-
-                string pathName = await Electron.App.GetPathAsync(PathName.pictures);
-                Electron.IpcMain.Send(currentBrowserWindow, "GetPathComplete", pathName);
-
-                currentBrowserWindow.Minimize();
-                await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions {
-                    Title = "My second Window",
-                    AutoHideMenuBar = true
-                },"http://www.google.de");
-            });
-            
-
+        {        
            return View();
        }
    }
--- a/ElectronNET.WebApp/Controllers/WindowsController.cs
+++ b/ElectronNET.WebApp/Controllers/WindowsController.cs
@@ -0,0 +1,23 @@
+using System;
+using System.Collections.Generic;
+using System.Linq;
+using System.Threading.Tasks;
+using Microsoft.AspNetCore.Mvc;
+using ElectronNET.API;
+
+namespace ElectronNET.WebApp.Controllers
+{
+    public class WindowsController : Controller
+    {
+        public IActionResult Index()
+        {
+            Electron.IpcMain.On("new-window", async (args) => {
+
+                await Electron.WindowManager.CreateWindowAsync();
+
+            });
+
+            return View();
+        }
+    }
+}
--- a/ElectronNET.WebApp/ElectronNET.WebApp.csproj
+++ b/ElectronNET.WebApp/ElectronNET.WebApp.csproj
@@ -6,7 +6,7 @@
  </PropertyGroup>
  <ItemGroup>
    <Folder Include="Assets\" />
-    <Folder Include="wwwroot\" />
+    <Folder Include="wwwroot\assets\" />
  </ItemGroup>
  <ItemGroup>
    <PackageReference Include="ElectronNET.API" Version="1.0.0" />
--- a/ElectronNET.WebApp/Startup.cs
+++ b/ElectronNET.WebApp/Startup.cs
@@ -2,12 +2,8 @@
 using ElectronNET.API.Entities;
 using Microsoft.AspNetCore.Builder;
 using Microsoft.AspNetCore.Hosting;
-using Microsoft.AspNetCore.Http;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
-using System;
-using System.Linq;
-using System.Threading;

 namespace ElectronNET.WebApp
 {
@@ -39,68 +35,17 @@ namespace ElectronNET.WebApp
                    template: "{controller=Home}/{action=Index}/{id?}");
            });

-            Bootstrap();
+            ElectronBootstrap();
        }

-        public async void Bootstrap()
+        public async void ElectronBootstrap()
        {
-            var menuItems = new MenuItem[] {
-                new MenuItem {
-                    Label = "File",
-                    Submenu = new MenuItem[] {
-                        new MenuItem {
-                            Label = "Exit",
-                            Click = () =>
-                            {
-                                Electron.App.Exit();
-                            }
-                        }
-                    }
-                },
-                new MenuItem
-                {
-                    Label = "About",
-                    Click = async () => {
-                        await Electron.Dialog.ShowMessageBoxAsync(new MessageBoxOptions("(c) 2017 Gregor Biswanger & Robert Muehsig") {
-                            Title = "About us...",
-                            Type = MessageBoxType.info
-                        });
-                    }
-                }
-            };
-
-            Electron.Menu.SetApplicationMenu(menuItems);
-            Electron.Tray.Show("/Assets/electron_32x32.png", menuItems);
-
            var browserWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
            {
                Show = false
            });

-            browserWindow.OnReadyToShow += async () =>
-            {
-                browserWindow.Show();
-
-                await browserWindow.SetThumbarButtonsAsync(new ThumbarButton[] {
-                    new ThumbarButton("/Assets/electron.ico")
-                    {
-                        Tooltip = "Hello World",
-                        Click = async () => {
-                            await Electron.Dialog.ShowMessageBoxAsync(new MessageBoxOptions("Hallo von Thumbar Button!"));
-                        }
-                    },
-                    new ThumbarButton("/Assets/electron.ico")
-                    {
-                        Tooltip = "Hello World 2",
-                        Click = async () => {
-                            await Electron.Dialog.ShowMessageBoxAsync(new MessageBoxOptions("Hallo von Thumbar Button 2!"));
-                        }
-                    }
-                });
-
-                browserWindow.SetThumbnailToolTip("Electron.NET rocks!");
-            };
-
+            browserWindow.OnReadyToShow += () => browserWindow.Show();
        }
    }
 }
--- a/ElectronNET.WebApp/Views/About/Index.cshtml
+++ b/ElectronNET.WebApp/Views/About/Index.cshtml
@@ -0,0 +1,32 @@
+<template class="task-template">
+    <div id="about-modal" class="about modal">
+        <div class="about-wrapper">
+            <header class="about-header">
+                <img class="about-logo" src="assets/img/about.png" srcset="assets/img/about.png 1x, assets/img/about@2x.png 2x" alt="Electron API Demos">
+            </header>
+            <main class="about-sections">
+                <section class="about-section play-along">
+                    <h2>Play Along</h2>
+                    <p>Use the demo snippets in an Electron app of your own. The <a href="https://github.com/electron/electron-quick-start">Electron Quick Start<span class="u-visible-to-screen-reader">(opens in new window)</span></a> app is a bare-bones setup that pairs with these demos. Follow the instructions here to get it going. You'll need <a href="https://desktop.github.com/">Git<span class="u-visible-to-screen-reader">(opens in new window)</span></a> and <a href="https://nodejs.org/">Node.js<span class="u-visible-to-screen-reader">(opens in new window)</span></a> on your computer to do this.</p>
+<pre><code class="language-bash">$ git clone https://github.com/electron/electron-quick-start
+$ cd electron-quick-start
+$ npm install &amp;&amp; npm start
+</code></pre>
+                </section>
+                <section class="about-section about-code">
+                    <h2>About the Code</h2>
+                    <p>The <a href="https://github.com/electron/electron-api-demos">source code of this app<span class="u-visible-to-screen-reader">(opens in new window)</span></a> has been organized with ease of navigation in mind.</p>
+
+                    <p>Nearly all (over 90%) of <a href="http://babeljs.io/docs/learn-es2015/">ES2015<span class="u-visible-to-screen-reader">(opens in new window)</span></a> is available to use in Electron <em>without the use of pre-processors</em> because it's a part of <a href="https://developers.google.com/v8/">V8<span class="u-visible-to-screen-reader">(opens in new window)</span></a> which is built into Electron.</p>
+
+                    <p>To illustrate this we've made use of <code>const</code>, for unchanging declarations; <code>let</code> for scoped declarations; and template strings like: <code>`Result is ${output}`</code> in the demo snippets.</p>
+                </section>
+                <footer class="about-section footer">
+                    <div class="rainbow-button-wrapper">
+                        <button id="get-started" class="about-button modal-hide">Get Started</button>
+                    </div>
+                </footer>
+            </main>
+        </div>
+    </div>
+</template>
--- a/ElectronNET.WebApp/Views/Home/Index.cshtml
+++ b/ElectronNET.WebApp/Views/Home/Index.cshtml
@@ -1,45 +1,98 @@
 <!DOCTYPE html>
-
-<html>
+<html lang="en">
 <head>
-    <meta name="viewport" content="width=device-width" />
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="assets/css/variables.css">
+    <link rel="stylesheet" href="assets/css/nativize.css">
+    <link rel="stylesheet" href="assets/css/global.css">
+    <link rel="stylesheet" href="assets/css/about.css">
+    <link rel="stylesheet" href="assets/css/nav.css">
+    <link rel="stylesheet" href="assets/css/section.css">
+    <link rel="stylesheet" href="assets/css/demo.css">
+    <link rel="stylesheet" href="assets/css/github.css">
+    <link rel="stylesheet" href="assets/css/highlight.min.css">
+
+    <link rel="import" href="about">
+    <link rel="import" href="windows">
 </head>
 <body>
-    <h3>Hello from ASP.NET Core MVC!</h3>

-    We are using node
-    <script>document.write(process.versions.node)</script>,
-    Chrome
-    <script>document.write(process.versions.chrome)</script>,
-    and Electron
-    <script>document.write(process.versions.electron)</script>.
-    <br /><br />
-    <input id="callButton" type="button" value="Call Notification" />
+    <nav class="nav js-nav">
+        <header class="nav-header">
+            <h1 class="nav-title">Electron.NET <strong>API Demos</strong></h1>
+        </header>

-    <div>
-        <p id="picturesPathLabel"></p>
-        <input id="picturesButton" type="button" value="Get Pictures-Path" />
-    </div>
+        <div class="nav-item u-category-windows">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
+                Windows
+            </h5>
+            <button type="button" id="button-windows" data-section="windows" class="nav-button">Create and manage <em>windows</em></button>
+            <button type="button" id="button-crash-hang" data-section="crash-hang" class="nav-button">Handling window <em>crashes and hangs</em></button>
+        </div>

-    <script>
-        const { ipcRenderer } = require("electron");
+        <div class="nav-item u-category-menu">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-menu"></use></svg>
+                Menus
+            </h5>
+            <button type="button" id="button-menus" data-section="menus" class="nav-button">Customize <em>menus</em> </button>
+            <button type="button" id="button-shortcuts" data-section="shortcuts" class="nav-button">Register keyboard <em>shortcuts</em></button>
+        </div>

-        document.getElementById("callButton").addEventListener("click", () => {
-            ipcRenderer.send("SayHello");
-        });
+        <div class="nav-item u-category-native-ui">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-native-ui"></use></svg>
+                Native User Interface
+            </h5>
+            <button type="button" id="button-ex-links-file-manager" data-section="ex-links-file-manager" class="nav-button">Open <em>external links</em> or system <em>file manager</em></button>
+            <button type="button" id="button-notifications" data-section="notifications" class="nav-button"> Notifications with and without custom <em>image</em></button>
+            <button type="button" id="button-dialogs" data-section="dialogs" class="nav-button">Use system <em>dialogs</em></button>
+            <button type="button" id="button-tray" data-section="tray" class="nav-button">Put your app in the <em>tray</em></button>
+        </div>

-        ipcRenderer.on("Goodbye", (sender, data) => {
-            alert('Goodbye ' + data);
-        });
+        <div class="nav-item u-category-communication">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-communication"></use></svg>
+                Communication
+            </h5>
+            <button type="button" id="button-ipc" data-section="ipc" class="nav-button">Communicate between the <em>two processes</em></button>
+        </div>

-        document.getElementById("picturesButton").addEventListener("click", () => {
-            ipcRenderer.send("GetPath");
-        });
+        <div class="nav-item u-category-system">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-system"></use></svg>
+                System
+            </h5>
+            <button type="button" id="button-app-sys-information" data-section="app-sys-information" class="nav-button">Get app or user <em>system information</em></button>
+            <button type="button" id="button-clipboard" data-section="clipboard" class="nav-button">Copy and paste from the <em>clipboard</em></button>
+            <button type="button" id="button-protocol" data-section="protocol" class="nav-button">Launch app from <em>protocol handler</em></button>
+        </div>

-        ipcRenderer.on("GetPathComplete", (sender, data) => {
-            document.getElementById("picturesPathLabel").innerText = data;
-        });
+        <div class="nav-item u-category-media">
+            <h5 class="nav-category">
+                <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-media"></use></svg>
+                Media
+            </h5>
+            <button type="button" id="button-pdf" data-section="pdf" class="nav-button"><em>Print</em> to PDF</button>
+            <button type="button" id="button-desktop-capturer" data-section="desktop-capturer" class="nav-button">Take a <em>screenshot</em></button>
+        </div>

-    </script>
+        <footer class="nav-footer">
+            <button type="button" id="button-about" data-modal="about" class="nav-footer-button">About</button>
+            <a class="nav-footer-logo" href="https://github.com" aria-label="Homepage">
+                <svg class="nav-footer-icon"><use xlink:href="assets/img/icons.svg#icon-love"></use></svg>
+            </a>
+        </footer>
+    </nav>
+
+    <main class="content js-content is-shown"></main>
+
+    <script src="~/assets/imports.js"></script>
+    <script src="~/assets/ex-links.js"></script>
+    <script src="~/assets/nav.js"></script>
+    <script src="~/assets/demo-btns.js"></script>
+    <script src="~/assets/highlight.min.js"></script>
+    <script src="~/assets/code-blocks.js"></script>
 </body>
 </html>
--- a/ElectronNET.WebApp/Views/Windows/Index.cshtml
+++ b/ElectronNET.WebApp/Views/Windows/Index.cshtml
@@ -0,0 +1,135 @@
+<template class="task-template">
+    <section id="windows-section" class="section js-section u-category-windows">
+        <header class="section-header">
+            <div class="section-wrapper">
+                <h1>
+                    <svg class="section-icon"><use xlink:href="assets/img/icons.svg#icon-windows"></use></svg>
+                    Create and Manage Windows
+                </h1>
+                <h3>The <code>BrowserWindow</code> module in Electron allows you to create a new browser window or manage an existing one.</h3>
+
+                <p>Each browser window is a separate process, known as the renderer process. This process, like the main process that controls the life cycle of the app, has full access to the Node.js APIs.
+
+                <p>Open the <a href="http://electron.atom.io/docs/api/browser-window">full API documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> in your browser.</p>
+            </div>
+        </header>
+
+        <div class="demo">
+            <div class="demo-wrapper">
+                <button id="new-window-demo-toggle" class="js-container-target demo-toggle-button">
+                    Create a new window
+                    <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
+                </button>
+                <div class="demo-box">
+                    <div class="demo-controls">
+                        <button class="demo-button" id="new-window">View Demo</button>
+                    </div>
+                    <p>The <code>BrowserWindow</code> module gives you the ability to create new windows in your app. This main process module can be used from the renderer process with the <code>remote</code> module, as is shown in this demo.</p>
+
+                    <p>There are a lot of options when creating a new window. A few are in this demo, but visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
+                    <h5>Renderer Process</h5>
+                    <pre><code class="csharp">await Electron.WindowManager.CreateWindowAsync();</code></pre>
+
+                    <div class="demo-protip">
+                        <h2>ProTip</h2>
+                        <strong>Use an invisible browser window to run background tasks.</strong>
+                        <p>You can set a new browser window to not be shown (be invisible) in order to use that additional renderer process as a kind of new thread in which to run JavaScript in the background of your app. You do this by setting the <code>show</code> property to <code>false</code> when defining the new window.</p>
+                        <pre>
+<code class="csharp">
+public async void ElectronBootstrap()
+{
+    var browserWindow = await Electron.WindowManager.CreateWindowAsync(new BrowserWindowOptions
+    {
+        Show = false
+    });
+
+    browserWindow.OnReadyToShow += () => browserWindow.Show();
+}
+</code></pre>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo">
+            <div class="demo-wrapper">
+                <button id="manage-window-demo-toggle" class="js-container-target demo-toggle-button">
+                    Manage window state
+                    <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
+                </button>
+                <div class="demo-box">
+                    <div class="demo-controls">
+                        <button class="demo-button" id="manage-window">View Demo</button>
+                        <span class="demo-response" id="manage-window-reply"></span>
+                    </div>
+                    <p>In this demo we create a new window and listen for <code>move</code> and <code>resize</code> events on it. Click the demo button, change the new window and see the dimensions and position update here, above.</p>
+                    <p>There are a lot of methods for controlling the state of the window such as the size, location, and focus status as well as events to listen to for window changes. Visit the <a href="http://electron.atom.io/docs/api/browser-window">documentation<span class="u-visible-to-screen-reader">(opens in new window)</span></a> for the full list.</p>
+                    <h5>Renderer Process</h5>
+                    <pre><code data-path="renderer-process/windows/manage-window.js"></code></pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo">
+            <div class="demo-wrapper">
+                <button id="using-window-events-demo-toggle" class="js-container-target demo-toggle-button">
+                    Window events: blur and focus
+                    <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
+                </button>
+                <div class="demo-box">
+                    <div class="demo-controls">
+                        <button class="demo-button" id="listen-to-window">View Demo</button>
+                        <button class="demo-button disappear" id="focus-on-modal-window">Focus on Demo</button>
+                    </div>
+                    <p>In this demo, we create a new window and listen for <code>blur</code> event on it. Click the demo button to create a new modal window, and switch focus back to the parent window by clicking on it. You can click the <i>Focus on Demo</i> button to switch focus to the modal window again.</p>
+                    <h5>Renderer Process</h5>
+                    <pre><code data-path="renderer-process/windows/using-window-events.js"></code></pre>
+                </div>
+            </div>
+        </div>
+
+        <div class="demo">
+            <div class="demo-wrapper">
+                <button class="js-container-target demo-toggle-button">
+                    Create a frameless window
+                    <div class="demo-meta u-avoid-clicks">Supports: Win, macOS, Linux <span class="demo-meta-divider">|</span> Process: Main</div>
+                </button>
+                <div class="demo-box">
+                    <div class="demo-controls">
+                        <button class="demo-button" id="frameless-window">View Demo</button>
+                    </div>
+                    <p>
+                        A frameless window is a window that has no <a href="https://developer.mozilla.org/en-US/docs/Glossary/Chrome">"chrome"</a>,
+                        such as toolbars, title bars, status bars, borders, etc. You can make a browser window frameless by setting
+                        <code>frame</code> to <code>false</code> when creating the window.
+                    </p>
+
+                    <h5>Renderer Process</h5>
+                    <pre><code data-path="renderer-process/windows/frameless-window.js"></code></pre>
+
+                    <p>Windows can have a transparent background, too. By setting the <code>transparent</code> option to <code>true</code>, you can also make your frameless window transparent:</p>
+                    <pre>
+<code class="language-js">var win = new BrowserWindow({
+  transparent: true,
+  frame: false
+})</code></pre>
+
+                    <p>
+                        For more details, see the <a href="http://electron.atom.io/docs/api/frameless-window/">Frameless Window</a> documentation.
+                    </p>
+
+                </div>
+            </div>
+        </div>
+
+        <script>
+        const { ipcRenderer } = require("electron");
+
+            document.getElementById("new-window").addEventListener("click", () => {
+                ipcRenderer.send("new-window");
+            });
+
+        </script>
+
+    </section>
+</template>
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/mac/app.icns
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/mac/app.icns
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/1024.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/1024.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/128.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/128.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/16.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/16.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/24.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/24.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/256.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/256.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/32.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/32.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/48.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/48.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/512.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/512.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/png/64.png
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/png/64.png
--- a/ElectronNET.WebApp/wwwroot/assets/app-icon/win/app.ico
+++ b/ElectronNET.WebApp/wwwroot/assets/app-icon/win/app.ico
--- a/ElectronNET.WebApp/wwwroot/assets/code-blocks.js
+++ b/ElectronNET.WebApp/wwwroot/assets/code-blocks.js
@@ -0,0 +1,6 @@
+document.addEventListener('DOMContentLoaded', function () {
+    const codeBlocks = document.querySelectorAll('pre code');
+  Array.prototype.forEach.call(codeBlocks, function (code) {
+      hljs.highlightBlock(code)
+  });
+})
--- a/ElectronNET.WebApp/wwwroot/assets/css/about.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/about.css
@@ -0,0 +1,155 @@
+/* Welcome ------------------------ */
+
+.about {
+  --about-space: 4rem;
+
+  position: absolute;
+  display: flex;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 1;
+  overflow-x: hidden;
+  overflow-y: auto;
+  padding: 0;
+  background-color: hsl(0,0%,98%);
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transform: scale(1.1);
+  transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
+}
+.about.is-shown {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+  transform: scale(1);
+  transition: visibility 0s 0s linear , opacity .24s ease-out, transform .24s ease-out;
+}
+
+.about-wrapper {
+  margin: auto;
+}
+
+.about-header {
+  padding: var(--about-space) 0;
+  border-bottom: 1px solid hsl(0,0%,88%);
+}
+
+.about-logo {
+  display: block;
+  margin: 0 auto;
+  width: 320px; /* TODO: Adjust asset to this size */
+  max-width: 100%;
+}
+
+.about-sections {
+  max-width: 680px;
+  padding: 0 var(--about-space);
+}
+
+.about-section {
+  margin: var(--about-space) 0;
+}
+
+.about h2 {
+  text-align: center;
+  margin: 0 0 1em 0;
+  font-size: 1.5em;
+  color: hsl(0, 0%, 55%);
+}
+
+.about .about-code h2 {
+  color: hsl(330, 65%, 55%);
+}
+
+.about .play-along h2 {
+  color: hsl(222, 53%, 50%);
+}
+
+.about-button {
+  display: block;
+  margin: 0 auto;
+  padding: .4em 1.2em;
+  font: inherit;
+  font-size: 1.6em;
+  color: inherit;
+  border: 2px solid;
+  border-radius: 4px;
+  background-color: transparent;
+}
+.about-button:focus {
+  outline: none;
+  border-color: hsl(0,0%,88%);
+}
+
+footer.about-section {
+  text-align: center;
+}
+
+.rainbow-button-wrapper {
+  --rainbow-button-width: 170px;
+  --rainbow-button-height: 50px;
+  --rainbow-button-width-inner: 164px;
+  --rainbow-button-height-inner: 44px;
+  --rainbow-color-1: hsl(116, 30%, 36%);
+  --rainbow-color-2: hsl(194, 60%, 36%);
+  --rainbow-color-3: hsl(222, 53%, 50%);
+  --rainbow-color-4: hsl(285, 47%, 46%);
+  --rainbow-color-5: hsl(330, 65%, 48%);
+  --rainbow-color-6: hsl(32, 79%, 49%);
+  --rainbow-color-7: hsl(53, 84%, 50%);
+
+  display: inline-block;
+  width: var(--rainbow-button-width);
+  height: var(--rainbow-button-height);
+  position: relative;
+  overflow: hidden;
+  border-radius: 5px;
+}
+
+.rainbow-button-wrapper:before {
+  display: block;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  left: 0;
+  width: 600px;
+  height: var(--rainbow-button-height);
+  background: #CCC;
+  background: linear-gradient(to right, var(--rainbow-color-1) 0%, var(--rainbow-color-2) 14%, var(--rainbow-color-3) 28%, var(--rainbow-color-4) 42%, var(--rainbow-color-5) 56%, var(--rainbow-color-6) 70%, var(--rainbow-color-7) 84%, var(--rainbow-color-1) 100%);
+  background-position: -200px 0;
+  transition: all 0.5s;
+  content: "";
+}
+
+.rainbow-button-wrapper button {
+  display: block;
+  width: var(--rainbow-button-width-inner);
+  height: var(--rainbow-button-height-inner);
+  position: absolute;
+  z-index: 3;
+  top: 3px;
+  left: 3px;
+  border: none;
+  background: white;
+  color: black;
+  font-size: 1.3rem;
+}
+
+.rainbow-button-wrapper:hover:before {
+  background-position: 200px 0;
+}
+
+@media (min-width: 940px) {
+  .about-header {
+    align-self: center;
+    padding: var(--about-space);
+    border-right: 1px solid hsl(0,0%,88%);
+    border-bottom: none;
+  }
+  .about-wrapper {
+    display: flex;
+  }
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/demo.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/demo.css
@@ -0,0 +1,205 @@
+/* Demo */
+
+.demo:first-of-type {
+  margin-top: 2rem;
+}
+.demo:last-of-type {
+  margin-bottom: 2rem;
+}
+@media (min-width: 940px) {
+  .demo:last-of-type {
+    margin-bottom: 4rem;
+  }
+}
+
+.demo-wrapper {
+  position: relative;
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 0 2rem;
+}
+
+
+/* Toggle Button ----------------------------- */
+
+.demo-toggle-button {
+  position: relative;
+  display: block;
+  margin: 0;
+  padding: .5em 1.5em;
+  line-height: 1.5;
+  font: inherit;
+  font-weight: 600;
+  font-size: 1.2em;
+  text-align: left;
+  border: none;
+  color: inherit;
+  background-color: transparent;
+  transition: border-color .12s;
+  outline: none;
+}
+
+.demo-toggle-button:before,
+.demo-toggle-button:after {
+  content: "";
+  position: absolute;
+  left: 0;
+  width: 2px;
+  height: 50%;
+  background-color: hsl(0,0%,88%);
+  transition: transform .2s cubic-bezier(.4,.1,0,1);
+}
+.demo-toggle-button:before {
+  top: 0;
+  transform-origin: bottom center;
+  transform: translateX(.7em) rotate(-30deg) scale(.75);
+}
+.demo-toggle-button:after {
+  bottom: 0;
+  transform-origin: top center;
+  transform: translateX(.7em) rotate(30deg) scale(.75);
+}
+.is-open .demo-toggle-button:before,
+.is-open .demo-toggle-button:after {
+  transform: rotate(0deg);
+}
+.demo-toggle-button:focus:before,
+.demo-toggle-button:focus:after {
+  background-color: currentColor;
+}
+
+/* Meta info */
+
+.demo-meta {
+  margin-top: .2em;
+  font-size: 11px;
+  font-weight: 300;
+  text-transform: uppercase;
+  color: var(--color-subtle);
+}
+.demo-meta-divider {
+  margin: 0 .5em;
+}
+
+
+/* Demo Box ----------------------------- */
+
+.demo-box {
+  display: none;
+  position: relative;
+  padding: 2em;
+  margin-top: 1em;
+  margin-bottom: 2em;
+  border-radius: 6px;
+  border: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+}
+.demo-box:before {
+  content: "";
+  position: absolute;
+  top: -11px;
+  width: 20px;
+  height: 20px;
+  background-color: inherit;
+  border-top: inherit;
+  border-right: inherit;
+  border-top-right-radius: 3px;
+  transform: rotate(-45deg);
+}
+
+.is-open .demo-box {
+  display: block;
+  animation: demo-box-fade-in .2s cubic-bezier(0, .20, .20, .96);
+}
+@keyframes demo-box-fade-in {
+    0% { opacity: 0; transform: translateY(-20px); }
+  100% { opacity: 1; transform: translateY(0); }
+}
+
+.demo-box > p:first-child {
+  margin-top: 0;
+}
+
+.demo-box h5 {
+  font-size: 1em;
+  margin-bottom: .6em;
+}
+
+
+/* Demo Controls ----------------------------- */
+
+.demo-controls {
+  display: flex;
+  align-items: center;
+}
+
+.demo-button {
+  align-self: flex-start;
+  margin-right: 1em;
+  border: 2px solid;
+  border-radius: 4px;
+  font: inherit;
+  font-size: 1.2em;
+  padding: .4em 1.2em;
+  color: inherit;
+  background-color: transparent;
+}
+.demo-button:focus {
+  outline: none;
+  background-color: white;
+}
+.demo-button:active {
+  border-color: var(--color-border);
+}
+
+.demo-input {
+  flex: 1;
+  border: 2px solid var(--color-border);
+  border-radius: 4px;
+  font: inherit;
+  font-size: 1.2em;
+  padding: .4em .8em;
+  color: inherit;
+  background-color: transparent;
+}
+.demo-input:focus {
+  outline: none;
+  border-color: hsl(0,0%,80%);
+  background-color: white;
+}
+
+.demo-response {
+  flex: 1;
+  word-break: break-word;
+}
+
+.smooth-appear {
+  opacity: 1;
+  transition: opacity .5s ease-in-out;
+}
+
+.disappear {
+  opacity: 0;
+}
+.demo-button.smooth-disappear:focus {
+  outline: inherit;
+  border-color: inherit;
+  background-color: inherit;
+}
+
+/* ProTip ----------------------------- */
+
+.demo-protip {
+  margin-top: 2rem;
+  padding: 1.5rem 2rem 2rem 2rem;
+  border: 1px solid hsla(0,0%,0%,.06);
+  border-radius: 6px;
+  background: var(--color-accent) linear-gradient(hsla(0,0%,100%,.85), hsla(0,0%,100%,.85));
+}
+.demo-protip h2 {
+  margin: 0 0 .5rem 0;
+}
+.demo-protip strong {
+  font-weight: 600;
+}
+
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceCodePro-Regular.ttf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceCodePro-Regular.ttf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Black.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Black.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-BlackIt.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-BlackIt.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Bold.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Bold.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-BoldIt.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-BoldIt.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-ExtraLight.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-ExtraLight.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-ExtraLightIt.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-ExtraLightIt.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-It.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-It.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Light.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Light.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-LightIt.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-LightIt.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Regular.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Regular.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Semibold.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-Semibold.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-SemiboldIt.otf
+++ b/ElectronNET.WebApp/wwwroot/assets/css/fonts/SourceSansPro-SemiboldIt.otf
--- a/ElectronNET.WebApp/wwwroot/assets/css/github.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/github.css
@@ -0,0 +1,99 @@
+/*
+
+github.com style (c) Vasily Polovnyov <vast@whiteants.net>
+
+*/
+
+.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 0.5em;
+  color: #333;
+  background: #f8f8f8;
+}
+
+.hljs-comment,
+.hljs-quote {
+  color: #998;
+  font-style: italic;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-subst {
+  color: #333;
+  font-weight: bold;
+}
+
+.hljs-number,
+.hljs-literal,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-tag .hljs-attr {
+  color: #008080;
+}
+
+.hljs-string,
+.hljs-doctag {
+  color: #d14;
+}
+
+.hljs-title,
+.hljs-section,
+.hljs-selector-id {
+  color: #900;
+  font-weight: bold;
+}
+
+.hljs-subst {
+  font-weight: normal;
+}
+
+.hljs-type,
+.hljs-class .hljs-title {
+  color: #458;
+  font-weight: bold;
+}
+
+.hljs-tag,
+.hljs-name,
+.hljs-attribute {
+  color: #000080;
+  font-weight: normal;
+}
+
+.hljs-regexp,
+.hljs-link {
+  color: #009926;
+}
+
+.hljs-symbol,
+.hljs-bullet {
+  color: #990073;
+}
+
+.hljs-built_in,
+.hljs-builtin-name {
+  color: #0086b3;
+}
+
+.hljs-meta {
+  color: #999;
+  font-weight: bold;
+}
+
+.hljs-deletion {
+  background: #fdd;
+}
+
+.hljs-addition {
+  background: #dfd;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/global.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/global.css
@@ -0,0 +1,164 @@
+/* Fonts ---------------------------- */
+
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  src: local('Source Code Pro'), local('SourceCodePro'), url(fonts/SourceCodePro-Regular.ttf) format('truetype');
+}
+
+
+/* Global ---------------------------- */
+
+* {
+  box-sizing: border-box;
+}
+
+html {
+  height: 100%;
+  font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow: hidden; /* Prevents rubber-band scrolling of the whole "page" */
+  color: var(--color);
+  background-color: #fff; /* To cover OSes with no default background color */
+}
+
+body {
+  margin: 0;
+  height: 100%;
+  display: flex;
+}
+
+a {
+  color: var(--color-link);
+}
+
+h1,
+h2,
+h3 {
+  margin-top: 0;
+  line-height: 1.5;
+}
+
+h1 {
+  font-size: 1.5em;
+  font-weight: 600;
+}
+
+h2 {
+  font-size: 1.3em;
+  font-weight: normal;
+}
+
+h3 {
+  font-size: 1.12em;
+  font-weight: 600;
+}
+
+table {
+  width: 100%;
+  border-spacing: 0;
+  border: 1px solid hsla(0,0%,0%,.08);
+  border-width: 0 1px 1px 0;
+}
+th {
+  background-color: hsla(0,0%,50%,.06);
+}
+th,
+td {
+  text-align: center;
+  border: 1px solid hsla(0,0%,0%,.08);
+  border-width: 1px 0 0 1px;
+}
+
+svg {
+  fill: currentColor;
+}
+
+/* Code */
+
+code, kbd {
+  font-family: 'Source Code Pro', monospace;
+  border-radius: 4px;
+  padding: 1px 4px;
+  white-space: nowrap;
+  color: hsl(0,0%,36%);
+  background-color: hsla(0,0%,60%,.15);
+}
+
+pre, kbd {
+  font-size: 13px;
+  overflow: auto;
+  padding: 1em;
+  margin: 0;
+  border-radius: 4px;
+  border: 1px solid;
+  border-color: var(--color-border);
+  background-color: white;
+}
+
+pre code {
+  white-space: pre;
+}
+
+pre > .hljs {
+  color: var(--color-subtle);
+  background-color: white;
+}
+
+kbd {
+  padding: 0.5em;
+}
+
+
+/* Utilities ---------------------------- */
+
+.u-avoid-clicks {
+  pointer-events: none;
+}
+
+/* Visually hidden, but will be read by screen readers */
+.u-visible-to-screen-reader {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.no-display {
+  display: none;
+}
+
+
+/* Content ------------------ */
+
+.content {
+  flex: 1;
+  position: relative;
+  overflow: hidden;
+  visibility: hidden;
+  opacity: 0;
+}
+.content.is-shown {
+  visibility: visible;;
+  opacity: 1;
+}
+
+
+/* Hacks ---------------------------- */
+
+/* Fixes horizontal scrolling in code blocks on OS X El Cap (10.11.3), retina screen
+ *
+ * By adding an invisible outline property, it will force a repaint
+ * which enables the scrolling.
+ */
+
+.hljs:hover,
+.hljs:active {
+  outline: 1px solid transparent;
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/highlight.min.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/highlight.min.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}
--- a/ElectronNET.WebApp/wwwroot/assets/css/nativize.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/nativize.css
@@ -0,0 +1,59 @@
+/*
+** nativize.css
+** Makes the UI feel more native
+*/
+
+html {
+  font-family: sans-serif;
+  -webkit-user-select: none; /* disable selection */
+  -webkit-user-drag: none; /* disable dragging */
+  cursor: default; /* use default cursor */
+}
+
+body {
+  margin: 0; /* remove default margin */
+}
+
+
+/* enable text selection */
+
+.is-selectable,
+pre,
+code {
+  -webkit-user-select: auto;
+  cursor: auto;
+}
+
+
+/* Buttons and links */
+
+button{
+  cursor: default;
+}
+
+/* Internal links */
+a {
+  cursor: pointer;
+  text-decoration: none;
+  border-bottom: 1px dashed;
+  outline: none;
+}
+
+/* New window (target) + external links */
+a[target],
+a[href^="https://"],
+a[href^="http://"] {
+  border-bottom: 1px solid;
+}
+
+a:hover,
+a:focus {
+  border-bottom: none;
+}
+
+
+/* Images */
+
+img {
+  -webkit-user-drag: none; /* disable dragging */
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/nav.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/nav.css
@@ -0,0 +1,149 @@
+/* Nav */
+
+.nav {
+  width: 340px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: var(--color-subtle);
+  border-right: 1px solid var(--color-border);
+  background-color: var(--color-bg);
+  visibility: hidden;
+  opacity: 0;
+}
+.nav.is-shown {
+  visibility: visible;;
+  opacity: 1;
+}
+
+.nav-header {
+  position: relative;
+  padding: 2rem;
+  margin-bottom: 1rem;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.nav-title {
+  text-transform: uppercase;
+  font-weight: 300;
+  line-height: 1;
+  margin: 0;
+}
+
+.nav-title strong {
+  font-weight: 600;
+  color: var(--color-strong);
+}
+
+.nav-header-icon {
+  position: absolute;
+  width: 36px;
+  height: 36px;
+  top: 1.5rem; /* magic */
+  right: 1.75rem; /* magic */
+}
+
+
+
+.nav-item {
+  padding: .5em 0;
+}
+
+.nav-icon {
+  width: 16px;
+  height: 16px;
+  vertical-align: top;
+  margin-right: .25rem;
+}
+
+.nav-category {
+  margin: .2em 0;
+  padding-left: 2rem;
+  font-size: 11px;
+  font-weight: normal;
+  text-transform: uppercase;
+}
+
+.nav-button {
+  display: block;
+  width: 100%;
+  padding: .3rem;
+  padding-left: calc(2rem + 16px + .5rem); /* padding + icon + magic */
+  line-height: 2;
+  text-align: left;
+  font: inherit;
+  font-size: 13px;
+  color: inherit;
+  border: none;
+  background-color: transparent;
+  cursor: default;
+  outline: none;
+}
+.nav-button:hover,
+.nav-button:focus:not(.is-selected) {
+  background-color: hsla(0,0%,0%,.1);
+}
+.nav-button.is-selected {
+  background-color: var(--color-accent);
+}
+.nav-button.is-selected,
+.nav-button.is-selected em {
+  color: #fff;
+}
+.nav-button.is-selected:focus {
+  opacity: .8;
+}
+
+.nav-button em {
+  font-style: normal;
+  font-weight: 600;
+  color: var(--color-strong);
+  pointer-events: none; /* makes it invisible to clicks */
+}
+
+.nav-footer {
+  margin-top: 1rem;
+  padding: 2rem;
+  border-top: 1px solid var(--color-border);
+  text-align: center;
+}
+
+.nav-footer-icon {
+  width: calc(770px / 6.5);
+  height: calc(88px / 6.5);
+}
+
+.nav-footer a {
+  outline: none;
+}
+
+.nav-footer-button {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin-bottom: .75rem;
+  line-height: 2;
+  text-align: left;
+  font: inherit;
+  font-size: 13px;
+  color: inherit;
+  border: none;
+  background-color: transparent;
+  cursor: default;
+  outline: none;
+  text-align: center;
+}
+.nav-footer-button:focus {
+  color: var(--color-strong);
+}
+
+.nav-footer-logo {
+  color: hsl(0,0%,66%);
+}
+.nav-footer-logo:focus {
+  color: hsl(0,0%,33%);
+}
+
+/* Remove border on the logo */
+.nav-footer-logo.nav-footer-logo {
+  border-bottom: none;
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/print.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/print.css
@@ -0,0 +1,31 @@
+@media print {
+  body {
+    background: none;
+    color: black !important;
+    font-size: 70%;
+    margin: 0; padding: 0;
+  }
+
+  h1 {
+    font-size: 22px;
+  }
+
+  .nav, button, .demo-box:before,
+  #pdf-path, header p {
+    display: none;
+  }
+
+  .demo-box, h2,
+  pre, code {
+    padding: 0 !important;
+    margin: 0 !important;
+  }
+
+  header {
+    padding: 0 0 10px 0;
+  }
+
+  code, .support {
+    font-size: 10px;
+  }
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/section.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/section.css
@@ -0,0 +1,51 @@
+/* Section ------------------ */
+
+.section {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  color: var(--color-accent);
+
+  /* Hide */
+  pointer-events: none;
+  visibility: hidden;
+  opacity: 0;
+  transform: translateX(-20px);
+  transition: visibility 0s .12s linear , opacity .12s ease-in, transform .12s ease-in;
+}
+.section.is-shown {
+  pointer-events: auto;
+  visibility: visible;
+  opacity: 1;
+  transform: translateX(0);
+  transition: visibility 0s 0s linear , opacity .36s ease-out, transform .36s ease-out;
+}
+
+.section h3,
+.section p {
+  color: var(--color);
+}
+
+.section-wrapper {
+  position: relative;
+  max-width: 740px;
+  margin: 0 auto;
+  padding: 2rem 2rem 1rem 2rem;
+  border-bottom: 1px solid var(--color-border);
+}
+@media (min-width: 940px) {
+  .section-wrapper {
+    padding-top: 4rem;
+  }
+}
+
+.section-icon {
+  width: 32px;
+  height: 32px;
+  vertical-align: middle;
+  margin-right: .5em;
+}
--- a/ElectronNET.WebApp/wwwroot/assets/css/variables.css
+++ b/ElectronNET.WebApp/wwwroot/assets/css/variables.css
@@ -0,0 +1,24 @@
+
+/* Custom Properties */
+
+:root {
+  --color:          hsl(0,0%,22%);
+  --color-subtle:   hsl(0,0%,44%);
+  --color-strong:   hsl(0,0%,11%);
+  --color-link:     hsl(0,0%,22%);
+
+  --color-border:   hsl(0,0%,88%);
+  --color-bg:       hsl(0,0%,96%);
+
+  --color-accent:   black; /* Fallback */
+}
+
+
+/* Category Colors */
+
+.u-category-windows       { --color-accent: hsl(116, 30%, 36%); }
+.u-category-menu          { --color-accent: hsl(194, 60%, 36%); }
+.u-category-native-ui     { --color-accent: hsl(222, 53%, 50%); }
+.u-category-communication { --color-accent: hsl(285, 47%, 46%); }
+.u-category-system        { --color-accent: hsl(330, 65%, 48%); }
+.u-category-media      { --color-accent: hsl( 36, 77%, 34%); }
--- a/ElectronNET.WebApp/wwwroot/assets/demo-btns.js
+++ b/ElectronNET.WebApp/wwwroot/assets/demo-btns.js
@@ -0,0 +1,11 @@
+const demoBtns = document.querySelectorAll('.js-container-target');
+
+// Listen for demo button clicks
+Array.prototype.forEach.call(demoBtns, function (btn) {
+  btn.addEventListener('click', function (event) {
+      const parent = event.target.parentElement;
+
+    // Toggles the "is-open" class on the demo's parent element.
+    parent.classList.toggle('is-open');
+  })
+})
--- a/ElectronNET.WebApp/wwwroot/assets/ex-links.js
+++ b/ElectronNET.WebApp/wwwroot/assets/ex-links.js
@@ -0,0 +1,14 @@
+(function () {
+    const shell = require('electron').shell
+    const links = document.querySelectorAll('a[href]')
+
+    Array.prototype.forEach.call(links, function (link) {
+        const url = link.getAttribute('href')
+        if (url.indexOf('http') === 0) {
+            link.addEventListener('click', function (e) {
+                e.preventDefault()
+                shell.openExternal(url)
+            })
+        }
+    })
+})
--- a/ElectronNET.WebApp/wwwroot/assets/highlight.min.js
+++ b/ElectronNET.WebApp/wwwroot/assets/highlight.min.js
--- a/ElectronNET.WebApp/wwwroot/assets/img/about.png
+++ b/ElectronNET.WebApp/wwwroot/assets/img/about.png
--- a/ElectronNET.WebApp/wwwroot/assets/img/about@2x.png
+++ b/ElectronNET.WebApp/wwwroot/assets/img/about@2x.png
--- a/ElectronNET.WebApp/wwwroot/assets/img/diagram.png
+++ b/ElectronNET.WebApp/wwwroot/assets/img/diagram.png
--- a/ElectronNET.WebApp/wwwroot/assets/img/icons.svg
+++ b/ElectronNET.WebApp/wwwroot/assets/img/icons.svg
@@ -0,0 +1,48 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <!-- Usage -->
+  <!-- <svg class="nav-icon"><use xlink:href="assets/img/icons.svg#icon-xxx"></use></svg> -->
+
+  <symbol id="icon-windows"       viewBox="0 0 14 16"><path d="M5 3h1v1h-1V3zM3 3h1v1h-1V3zM1 3h1v1H1V3zM13 13H1V5h12V13zM13 4H7v-1h6V4zM14 3c0-0.55-0.45-1-1-1H1c-0.55 0-1 0.45-1 1v10c0 0.55 0.45 1 1 1h12c0.55 0 1-0.45 1-1V3z" /></symbol>
+  <symbol id="icon-menu"          viewBox="0 0 12 16"><path d="M11.41 9H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1z m0-4H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1zM0.59 11h10.81c0.59 0 0.59 0.41 0.59 1s0 1-0.59 1H0.59c-0.59 0-0.59-0.41-0.59-1s0-1 0.59-1z" /></symbol>
+  <symbol id="icon-native-ui"     viewBox="0 0 16 16"><path d="M15 2H1c-0.55 0-1 0.45-1 1v9c0 0.55 0.45 1 1 1h5.34c-0.25 0.61-0.86 1.39-2.34 2h8c-1.48-0.61-2.09-1.39-2.34-2h5.34c0.55 0 1-0.45 1-1V3c0-0.55-0.45-1-1-1z m0 9H1V3h14v8z" /></symbol>
+  <symbol id="icon-communication" viewBox="0 0 16 16"><path d="M10 1c-0.17 0-0.36 0.05-0.52 0.14-1.44 0.88-4.98 3.44-6.48 3.86-1.38 0-3 0.67-3 2.5s1.63 2.5 3 2.5c0.3 0.08 0.64 0.23 1 0.41v4.59h2V11.55c1.34 0.86 2.69 1.83 3.48 2.31 0.16 0.09 0.34 0.14 0.52 0.14 0.52 0 1-0.42 1-1V2c0-0.58-0.48-1-1-1z m0 12c-0.38-0.23-0.89-0.58-1.5-1-0.16-0.11-0.33-0.22-0.5-0.34V3.31c0.16-0.11 0.31-0.2 0.47-0.31 0.61-0.41 1.16-0.77 1.53-1v11z m2-6h4v1H12v-1z m0 2l4 2v1L12 10v-1z m4-6v1L12 6v-1l4-2z" /></symbol>
+  <symbol id="icon-system"        viewBox="0 0 16 16"><path d="M8 5h-1v-1h1v1z m4 3h-1v1h1v-1zM5 5h-1v1h1v-1z m-1 3h-1v1h1v-1z m11-5.5l-0.5-0.5-6.5 5c-0.06-0.02-1 0-1 0-0.55 0-1 0.45-1 1v1c0 0.55 0.45 1 1 1h1c0.55 0 1-0.45 1-1v-0.92l6-5.58zM13.41 6.59c0.19 0.61 0.3 1.25 0.3 1.91 0 3.42-2.78 6.2-6.2 6.2S1.3 11.92 1.3 8.5s2.78-6.2 6.2-6.2c1.2 0 2.31 0.34 3.27 0.94l0.94-0.94c-1.19-0.81-2.64-1.3-4.2-1.3C3.36 1 0 4.36 0 8.5s3.36 7.5 7.5 7.5 7.5-3.36 7.5-7.5c0-1.03-0.2-2.02-0.59-2.91l-1 1z" /></symbol>
+  <symbol id="icon-media"         viewBox="0 0 12 16"><path d="M6 5h2v2H6V5z m6-0.5v9.5c0 0.55-0.45 1-1 1H1c-0.55 0-1-0.45-1-1V2c0-0.55 0.45-1 1-1h7.5l3.5 3.5z m-1 0.5L8 2H1v11l3-5 2 4 2-2 3 3V5z" /></symbol>
+  <symbol id="icon-notification" viewBox="0 0 32 32">
+<path d="M32.047 25c0-9-8-7-8-14 0-0.58-0.056-1.076-0.158-1.498-0.526-3.532-2.88-6.366-5.93-7.23 0.027-0.123 0.041-0.251 0.041-0.382 0-1.040-0.9-1.891-2-1.891s-2 0.851-2 1.891c0 0.131 0.014 0.258 0.041 0.382-3.421 0.969-5.966 4.416-6.039 8.545-0.001 0.060-0.002 0.121-0.002 0.183 0 7-8 5-8 14 0 2.382 5.331 4.375 12.468 4.878 0.673 1.263 2.002 2.122 3.532 2.122s2.86-0.86 3.532-2.122c7.137-0.503 12.468-2.495 12.468-4.878 0-0.007-0.001-0.014-0.001-0.021l0.048 0.021zM25.82 26.691c-1.695 0.452-3.692 0.777-5.837 0.958-0.178-2.044-1.893-3.648-3.984-3.648s-3.805 1.604-3.984 3.648c-2.144-0.18-4.142-0.506-5.837-0.958-2.332-0.622-3.447-1.318-3.855-1.691 0.408-0.372 1.523-1.068 3.855-1.691 2.712-0.724 6.199-1.122 9.82-1.122s7.109 0.398 9.82 1.122c2.332 0.622 3.447 1.318 3.855 1.691-0.408 0.372-1.523 1.068-3.855 1.691z"></path>
+</symbol>
+
+  <!-- <> with 3> by GitHub (770x88) -->
+  <symbol id="icon-love" viewBox="0 0 770 88" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g fill="currentColor">
+      <g transform="translate(489.000000, 0.000000)">
+        <path d="M262.2,24.7 C254.7,24.7 249.7,28 249.7,28 L249.7,4.5 C249.7,3.9 249.2,3.4 248.6,3.4 L235.3,3.4 C234.7,3.4 234.2,3.9 234.2,4.5 L234.2,73.8 C234.2,74.4 234.7,74.9 235.3,74.9 L244.5,74.9 C244.9,74.9 245.2,74.7 245.5,74.3 C245.7,73.9 246.1,71.1 246.1,71.1 C246.1,71.1 251.5,76.2 261.8,76.2 C273.9,76.2 280.8,70.1 280.8,48.7 C280.7,27.5 269.6,24.7 262.2,24.7 L262.2,24.7 Z M257,63.7 C252.4,63.6 249.4,61.5 249.4,61.5 L249.4,39.6 C249.4,39.6 252.4,37.7 256.2,37.4 C260.9,37 265.5,38.4 265.5,49.7 C265.4,61.6 263.4,63.9 257,63.7 L257,63.7 Z"></path>
+        <path d="M226.3,26.2 L213.2,26.2 C212.6,26.2 212.1,26.7 212.1,27.3 L212.1,61.3 C212.1,61.3 208.8,63.7 204,63.7 C199.3,63.7 198,61.6 198,56.9 L198,27.3 C198,26.7 197.5,26.2 196.9,26.2 L183.6,26.2 C183,26.2 182.5,26.7 182.5,27.3 L182.5,59.2 C182.5,73 190.2,76.3 200.7,76.3 C209.4,76.3 216.4,71.5 216.4,71.5 C216.4,71.5 216.7,74 216.9,74.3 C217.1,74.6 217.4,74.9 217.9,74.9 L226.4,74.9 C227,74.9 227.5,74.4 227.5,73.8 L227.5,27.3 C227.4,26.7 226.9,26.2 226.3,26.2 L226.3,26.2 Z"></path>
+        <path d="M176,4.6 C176,4 175.5,3.5 174.9,3.5 L161.7,3.5 C161.1,3.5 160.6,4 160.6,4.6 L160.6,30.2 L140,30.2 L140,4.6 C140,4 139.5,3.5 138.9,3.5 L125.7,3.5 C125.1,3.5 124.6,4 124.6,4.6 L124.6,73.9 C124.6,74.5 125.1,75 125.7,75 L138.9,75 C139.5,75 140,74.5 140,73.9 L140,44.3 L160.6,44.3 L160.6,73.9 C160.6,74.5 161.1,75 161.7,75 L175,75 C175.6,75 176.1,74.5 176.1,73.9 L176.1,4.6 L176,4.6 Z"></path>
+        <path d="M116.9,26.1 L107,26.1 L107,13 C107,12.5 106.7,12.3 106.2,12.3 L92.7,12.3 C92.2,12.3 91.9,12.5 91.9,13 L91.9,26.6 C91.9,26.6 85.1,28.2 84.7,28.4 C84.2,28.5 83.9,29 83.9,29.5 L83.9,38 C83.9,38.6 84.4,39.1 85,39.1 L91.9,39.1 L91.9,59.6 C91.9,74.8 102.6,76.3 109.8,76.3 C113.1,76.3 117,75.2 117.7,75 C118.1,74.9 118.3,74.4 118.3,74 L118.3,64.6 C118.3,64 117.8,63.5 117.2,63.5 C116.6,63.5 115.1,63.7 113.6,63.7 C108.7,63.7 107.1,61.4 107.1,58.5 L107.1,39 L117,39 C117.6,39 118.1,38.5 118.1,37.9 L118.1,27.2 C118,26.6 117.5,26.1 116.9,26.1 L116.9,26.1 Z"></path>
+        <path d="M78.8,59.2 L78.8,27.2 C78.8,26.6 78.3,26.1 77.7,26.1 L64.5,26.1 C63.9,26.1 63.4,26.7 63.4,27.3 L63.4,73.1 C63.4,74.4 64.2,74.8 65.3,74.8 L77.2,74.8 C78.5,74.8 78.8,74.2 78.8,73 C78.8,70.7 78.8,61.1 78.8,59.2 Z M79.8,13.7 C79.8,8.9 76,5.1 71.3,5.1 C66.6,5.1 62.8,9 62.8,13.7 C62.8,18.5 66.6,22.3 71.3,22.3 C76,22.3 79.8,18.4 79.8,13.7 Z"></path>
+        <path d="M54.8,33.1 L31.3,33.1 C30.7,33.1 30.2,33.6 30.2,34.2 L30.2,45.7 C30.2,46.3 30.7,46.8 31.3,46.8 L40.5,46.8 L40.5,61.1 C40.5,61.1 38.4,61.8 32.7,61.8 C26,61.8 16.6,59.3 16.6,38.7 C16.6,18.1 26.4,15.3 35.5,15.3 C43.4,15.3 46.9,16.7 49,17.4 C49.7,17.6 50.3,16.9 50.3,16.3 L52.9,5.2 C52.9,4.9 52.8,4.6 52.5,4.3 C51.6,3.7 46.2,0.7 32.6,0.7 C16.9,0.7 0.8,7.4 0.8,39.5 C0.8,71.6 19.2,76.4 34.8,76.4 C47.7,76.4 55.5,70.9 55.5,70.9 C55.8,70.7 55.9,70.3 55.9,70.1 L55.9,34.2 C55.9,33.6 55.4,33.1 54.8,33.1 L54.8,33.1 Z"></path>
+      </g>
+      <g transform="translate(383.000000, 13.000000)">
+        <path d="M44.9,16.5 L54.9,16.5 L65.7,47.4 L65.9,47.4 L76.4,16.5 L85.9,16.5 L69.8,60.1 C69.1,62 68.3,63.8 67.6,65.5 C66.9,67.2 66,68.7 65,70 C64,71.3 62.7,72.3 61.1,73.1 C59.5,73.9 57.6,74.3 55.2,74.3 C53.1,74.3 51,74.1 48.9,73.8 L48.9,66.1 C49.6,66.2 50.4,66.3 51.1,66.5 C51.8,66.6 52.5,66.7 53.3,66.7 C54.4,66.7 55.2,66.6 55.9,66.3 C56.6,66 57.2,65.6 57.6,65.1 C58.1,64.6 58.4,64 58.8,63.3 C59.1,62.6 59.4,61.8 59.7,60.9 L60.7,57.7 L44.9,16.5 L44.9,16.5 Z"></path>
+        <path d="M0.8,0.8 L9.9,0.8 L9.9,21.9 L10.1,21.9 C10.7,20.9 11.5,20 12.4,19.2 C13.3,18.4 14.3,17.7 15.4,17.2 C16.5,16.6 17.6,16.2 18.8,15.9 C20,15.6 21.2,15.5 22.4,15.5 C25.7,15.5 28.5,16.1 30.9,17.2 C33.3,18.3 35.3,19.9 36.9,21.9 C38.5,23.9 39.7,26.2 40.5,28.9 C41.3,31.6 41.7,34.4 41.7,37.5 C41.7,40.3 41.3,43 40.6,45.6 C39.9,48.2 38.8,50.5 37.3,52.5 C35.8,54.5 34,56.1 31.7,57.3 C29.5,58.5 26.8,59.1 23.8,59.1 C22.4,59.1 21,59 19.6,58.8 C18.2,58.6 16.8,58.3 15.6,57.7 C14.3,57.2 13.2,56.5 12.1,55.6 C11.1,54.7 10.2,53.6 9.5,52.2 L9.3,52.2 L9.3,57.9 L0.7,57.9 L0.7,0.8 L0.8,0.8 Z M32.7,37.2 C32.7,35.3 32.5,33.5 32,31.8 C31.5,30 30.8,28.5 29.8,27.1 C28.8,25.7 27.6,24.6 26.2,23.8 C24.8,23 23.1,22.6 21.2,22.6 C17.4,22.6 14.5,23.9 12.5,26.6 C10.6,29.3 9.6,32.8 9.6,37.2 C9.6,39.3 9.9,41.2 10.4,43 C10.9,44.8 11.7,46.3 12.7,47.6 C13.7,48.9 14.9,49.9 16.3,50.6 C17.7,51.3 19.4,51.7 21.2,51.7 C23.3,51.7 25,51.3 26.5,50.4 C27.9,49.5 29.1,48.4 30.1,47.1 C31,45.7 31.7,44.2 32.1,42.5 C32.5,40.8 32.7,39.1 32.7,37.2 L32.7,37.2 Z"></path>
+      </g>
+      <path d="M321.7,79.1 C360.9,48.2 359.4,37.3 359.4,28.8 C359.4,20.3 352.3,9.9 340.5,9.9 C328.7,9.9 321.6,22.5 321.6,22.5 C321.6,22.5 314.5,9.9 302.7,9.9 C290.9,9.9 283.8,20.2 283.8,28.8 C284,37.3 282.5,48.2 321.7,79.1 L321.7,79.1 Z"></path>
+      <g transform="translate(112.000000, 13.000000)">
+        <path d="M112.2,0.4 L121.3,0.4 L121.3,21.6 L121.5,21.6 C122.6,19.7 124.3,18.2 126.5,16.9 C128.7,15.6 131.2,15 133.9,15 C138.4,15 142,16.2 144.6,18.5 C147.2,20.8 148.5,24.4 148.5,29.1 L148.5,57.5 L139.4,57.5 L139.4,31.5 C139.3,28.2 138.6,25.9 137.3,24.4 C136,22.9 134,22.2 131.3,22.2 C129.8,22.2 128.4,22.5 127.1,23 C125.8,23.5 124.8,24.3 124,25.3 C123.1,26.3 122.5,27.4 122,28.8 C121.5,30.1 121.3,31.5 121.3,33 L121.3,57.4 L112.2,57.4 L112.2,0.4 L112.2,0.4 Z"></path>
+        <path d="M81.5,16.2 L88.4,16.2 L88.4,3.8 L97.5,3.8 L97.5,16.2 L105.7,16.2 L105.7,23 L97.5,23 L97.5,45.1 C97.5,46.1 97.5,46.9 97.6,47.6 C97.7,48.3 97.9,48.9 98.2,49.4 C98.5,49.9 98.9,50.2 99.5,50.5 C100.1,50.7 100.9,50.9 101.9,50.9 L103.8,50.9 C104.4,50.9 105.1,50.8 105.7,50.6 L105.7,57.6 C104.7,57.7 103.7,57.8 102.7,57.9 C101.7,58 100.8,58.1 99.7,58.1 C97.3,58.1 95.4,57.9 93.9,57.4 C92.4,56.9 91.3,56.3 90.5,55.4 C89.7,54.5 89.1,53.4 88.8,52.1 C88.5,50.8 88.3,49.2 88.3,47.5 L88.3,23 L81.4,23 L81.4,16.2 L81.5,16.2 Z"></path>
+        <path d="M66.6,0.4 L75.7,0.4 L75.7,9 L66.6,9 L66.6,0.4 L66.6,0.4 Z M66.6,16.2 L75.7,16.2 L75.7,57.6 L66.6,57.6 L66.6,16.2 L66.6,16.2 Z"></path>
+        <path d="M0.3,16.2 L10,16.2 L18.1,47.1 L18.3,47.1 L26.1,16.2 L35.3,16.2 L42.7,47.1 L42.9,47.1 L51.3,16.2 L60.6,16.2 L47.6,57.6 L38.2,57.6 L30.5,26.9 L30.3,26.9 L22.7,57.6 L13.1,57.6 L0.3,16.2 L0.3,16.2 Z"></path>
+      </g>
+      <path d="M62.5,11.4 L52.7,21.2 L75.6,44.1 L52.7,67 L62.5,76.8 L92,44.1 L62.5,11.4 L62.5,11.4 Z M29.8,11.4 L0.3,44.1 L29.8,76.8 L39.6,67 L16.7,44.1 L39.6,21.2 L29.8,11.4 L29.8,11.4 Z"></path>
+    </g>
+  </symbol>
+
+  <!-- Electron (32x32) -->
+  <symbol id="icon-electron" viewBox="0 0 32 32" stroke-width="1.25" stroke-linecap="round" stroke="none" fill="none" fill-rule="evenodd">
+    <path fill="currentColor" d="M16.3166155,18.3358593 C15.5069762,18.5107902 14.7093189,17.9962674 14.5340397,17.1866556 C14.3594452,16.3770439 14.8736432,15.5794137 15.6832825,15.4041405 C16.4929217,15.2292096 17.290579,15.7437324 17.4658582,16.5533441 C17.6407951,17.3629559 17.1262548,18.160586 16.3166155,18.3358593 Z"></path>
+    <path stroke="currentColor" d="M11.7054423,7.72924079 C7.9200573,7.04629995 4.81451128,7.69646414 3.61603618,9.7527007 C2.7268637,11.2782634 3.03921758,13.3173666 4.27645322,15.4549657 M6.32821425,18.1957705 C7.8943718,19.9006249 9.96996963,21.5565889 12.4163991,22.9557106 C18.2481396,26.2909038 24.3022575,27.0886771 27.1773167,25.1467919 M29.8571429,24.0660377 C29.8571429,23.2063492 29.1535903,22.509434 28.2857143,22.509434 C27.4178383,22.509434 26.7142857,23.2063492 26.7142857,24.0660377 C26.7142857,24.9257263 27.4178383,25.6226415 28.2857143,25.6226415 C29.1535903,25.6226415 29.8571429,24.9257263 29.8571429,24.0660377 L29.8571429,24.0660377 Z"></path>
+    <path stroke="currentColor" d="M26.111681,17.7066994 C28.5900052,14.8065666 29.5677707,11.8255392 28.3717915,9.77358491 C27.4971801,8.27300481 25.6069305,7.52124894 23.1780058,7.48995855 M19.7043666,7.86367207 C17.4117923,8.35023224 14.9002093,9.30797986 12.4285714,10.7215184 C6.42471468,14.1551455 2.65428623,19.1356706 3.16600907,22.5894353 M3.68571472,25.6226415 C4.55359076,25.6226415 5.25714329,24.9257263 5.25714329,24.0660377 C5.25714329,23.2063492 4.55359076,22.509434 3.68571472,22.509434 C2.81783869,22.509434 2.11428615,23.2063492 2.11428615,24.0660377 C2.11428615,24.9257263 2.81783869,25.6226415 3.68571472,25.6226415 L3.68571472,25.6226415 L3.68571472,25.6226415 Z"></path>
+    <path stroke="currentColor" d="M10.1890404,25.079941 C11.4849109,28.6643405 13.604776,31 16,31 C17.7357744,31 19.3269404,29.7733976 20.5647004,27.7338484 M22.0592036,24.34604 C22.7459106,22.1722862 23.1428571,19.6025086 23.1428571,16.8490566 C23.1428571,10.0917401 20.752155,4.44064506 17.5550163,3.03441104 M16,4.25471698 C16.867876,4.25471698 17.5714286,3.55780173 17.5714286,2.69811321 C17.5714286,1.83842468 16.867876,1.14150943 16,1.14150943 C15.132124,1.14150943 14.4285714,1.83842468 14.4285714,2.69811321 C14.4285714,3.55780173 15.132124,4.25471698 16,4.25471698 Z"></path>
+  </symbol>
+</svg>
--- a/ElectronNET.WebApp/wwwroot/assets/img/loading.gif
+++ b/ElectronNET.WebApp/wwwroot/assets/img/loading.gif
--- a/ElectronNET.WebApp/wwwroot/assets/img/programming.png
+++ b/ElectronNET.WebApp/wwwroot/assets/img/programming.png
--- a/ElectronNET.WebApp/wwwroot/assets/img/ui-terminology.png
+++ b/ElectronNET.WebApp/wwwroot/assets/img/ui-terminology.png
--- a/ElectronNET.WebApp/wwwroot/assets/imports.js
+++ b/ElectronNET.WebApp/wwwroot/assets/imports.js
@@ -0,0 +1,12 @@
+const links = document.querySelectorAll('link[rel="import"]')
+
+// Import and add each page to the DOM
+Array.prototype.forEach.call(links, function (link) {
+  let template = link.import.querySelector('.task-template')
+  let clone = document.importNode(template.content, true)
+  if (link.href.match('about.html')) {
+    document.querySelector('body').appendChild(clone)
+  } else {
+    document.querySelector('.content').appendChild(clone)
+  }
+})
--- a/ElectronNET.WebApp/wwwroot/assets/mac/child.plist
+++ b/ElectronNET.WebApp/wwwroot/assets/mac/child.plist
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.app-sandbox</key>
+    <true/>
+    <key>com.apple.security.inherit</key>
+    <true/>
+  </dict>
+</plist>
--- a/ElectronNET.WebApp/wwwroot/assets/mac/info.plist
+++ b/ElectronNET.WebApp/wwwroot/assets/mac/info.plist
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+<dict>
+  <key>CFBundleURLTypes</key>
+  <array>
+    <dict>
+      <key>CFBundleURLSchemes</key>
+      <array>
+        <string>electron-api-demos</string>
+      </array>
+      <key>CFBundleURLName</key>
+      <string>Electron API Demos Protocol</string>
+    </dict>
+  </array>
+  <key>ElectronTeamID</key>
+  <string>VEKTX9H2N7</string>
+</dict>
+</plist>
--- a/ElectronNET.WebApp/wwwroot/assets/mac/parent.plist
+++ b/ElectronNET.WebApp/wwwroot/assets/mac/parent.plist
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
+<plist version="1.0">
+  <dict>
+    <key>com.apple.security.app-sandbox</key>
+    <true/>
+    <key>com.apple.security.application-groups</key>
+    <string>VEKTX9H2N7.com.github.electron-api-demos</string>
+    <key>com.apple.security.files.user-selected.read-write</key>
+    <true/>
+  </dict>
+</plist>
--- a/ElectronNET.WebApp/wwwroot/assets/nav.js
+++ b/ElectronNET.WebApp/wwwroot/assets/nav.js
@@ -0,0 +1,78 @@
+document.body.addEventListener('click', function (event) {
+    if (event.target.dataset.section) {
+        handleSectionTrigger(event)
+    } else if (event.target.dataset.modal) {
+        handleModalTrigger(event)
+    } else if (event.target.classList.contains('modal-hide')) {
+        hideAllModals()
+    }
+});
+
+function handleSectionTrigger(event) {
+    hideAllSectionsAndDeselectButtons();
+
+    // Highlight clicked button and show view
+    event.target.classList.add('is-selected');
+
+    // Display the current section
+    const sectionId = event.target.dataset.section + '-section'
+    document.getElementById(sectionId).classList.add('is-shown');
+}
+
+function activateDefaultSection () {
+  document.getElementById('button-windows').click()
+}
+
+function showMainContent() {
+    showNav();
+    document.querySelector('.js-content').classList.add('is-shown');
+}
+
+function handleModalTrigger(event) {
+    hideAllModals();
+    const modalId = event.target.dataset.modal + '-modal';
+
+    if (modalId === 'about-modal') {
+        hideNav();
+    }
+
+    document.getElementById(modalId).classList.add('is-shown');
+}
+
+function hideAllModals () {
+  const modals = document.querySelectorAll('.modal.is-shown')
+  Array.prototype.forEach.call(modals, function (modal) {
+    modal.classList.remove('is-shown')
+  })
+  showMainContent()
+}
+
+function hideAllSectionsAndDeselectButtons () {
+  const sections = document.querySelectorAll('.js-section.is-shown')
+  Array.prototype.forEach.call(sections, function (section) {
+    section.classList.remove('is-shown')
+  })
+
+  const buttons = document.querySelectorAll('.nav-button.is-selected')
+  Array.prototype.forEach.call(buttons, function (button) {
+    button.classList.remove('is-selected')
+  })
+}
+
+function displayAbout() {
+    hideNav();
+  document.querySelector('#about-modal').classList.add('is-shown')
+}
+
+function hideNav() {
+    document.querySelector('.js-nav').classList.remove('is-shown');
+    document.querySelector('.js-nav').style.display = 'none';
+}
+
+function showNav() {
+    document.querySelector('.js-nav').style.display = null;
+    document.querySelector('.js-nav').classList.add('is-shown');
+}
+
+activateDefaultSection();
+displayAbout();
--- a/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.150x150.png
+++ b/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.150x150.png
--- a/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.310x150.png
+++ b/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.310x150.png
--- a/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.44x44.png
+++ b/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.44x44.png
--- a/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.50x50.png
+++ b/ElectronNET.WebApp/wwwroot/assets/tiles/SampleAppx.50x50.png
				`@@ -0,0 +1 @@`
				.hljs{display:block;overflow-x:auto;padding:0.5em;background:#F0F0F0}.hljs,.hljs-subst{color:#444}.hljs-comment{color:#888888}.hljs-keyword,.hljs-attribute,.hljs-selector-tag,.hljs-meta-keyword,.hljs-doctag,.hljs-name{font-weight:bold}.hljs-type,.hljs-string,.hljs-number,.hljs-selector-id,.hljs-selector-class,.hljs-quote,.hljs-template-tag,.hljs-deletion{color:#880000}.hljs-title,.hljs-section{color:#880000;font-weight:bold}.hljs-regexp,.hljs-symbol,.hljs-variable,.hljs-template-variable,.hljs-link,.hljs-selector-attr,.hljs-selector-pseudo{color:#BC6060}.hljs-literal{color:#78A960}.hljs-built_in,.hljs-bullet,.hljs-code,.hljs-addition{color:#397300}.hljs-meta{color:#1f7199}.hljs-meta-string{color:#4d99bf}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:bold}