Add website

GoogleChromeLabs · Oct 1, 2019 · e644762 · e644762
1 parent 7d7944e
commit e644762
Show file tree

Hide file tree

Showing 5 changed files with 181 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,4 @@
+website
 node_modules
 dist
 *.wasm
diff --git a/genwebsite.js b/genwebsite.js
@@ -0,0 +1,18 @@
+const md = require("markdown-it")();
+const ejs = require("ejs");
+const fsp = require("fs").promises;
+
+
+async function init() {
+  const readmeSrc = await fsp.readFile("./README.md", "utf8");
+  const readme = md.render(readmeSrc);
+
+  await fsp.copyFile("./dist/esm/index.js", "./website/wasm-feature-detect.js");
+
+  const template = await fsp.readFile("./website.ejs", "utf8");
+  const output = ejs.render(template, {readme});
+  await fsp.mkdir("website").catch(e => {});
+  await fsp.writeFile("./website/index.html", output);
+}
+
+init();
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -8,6 +8,7 @@
     "build:library": "rollup -c",
     "build:readme": "node --experimental-modules ./render-readme.mjs",
     "build": "npm run build:library && npm run build:readme && npm run fmt",
+    "build:website": "node genwebsite.js",
     "fmt": "prettier --write ./{,{src,rollup-plugins}/**/}*.{mjs,js,md}"
   },
   "repository": "GoogleChromeLabs/wasm-feature-detect",
@@ -16,6 +17,7 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "ejs": "^2.7.1",
+    "markdown-it": "^10.0.0",
     "prettier": "^1.18.2",
     "rollup": "^1.20.3",
     "rollup-plugin-terser": "^5.1.1"

diff --git a/website.ejs b/website.ejs
@@ -0,0 +1,105 @@
+<!DOCTYPE html>
+<title>Wasm Feature Detect</title>
+<meta charset="utf-8" />
+<link
+  href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
+  rel="stylesheet"
+/>
+<style>
+  :root {
+    --tint: 30;
+    --contrast: 70;
+    --saturation: 10%;
+  }
+  html {
+    background: hsl(
+      var(--tint),
+      var(--saturation),
+      calc(50% + var(--contrast) / 2)
+    );
+    color: hsl(var(--tint), var(--saturation), calc(50% - var(--contrast) / 2));
+    font-family: "Roboto", sans-serif;
+    font-size: 18px;
+  }
+  body {
+    max-width: 960px;
+    margin: 0 auto;
+    padding: 0 4em;
+    box-sizing: border-box;
+  }
+  section {
+    margin: 4em 0;
+  }
+  #supporttable {
+    margin: 0 auto;
+  }
+  .marker {
+    padding: 0 0.5em;
+  }
+  tr {
+    height: 2em;
+  }
+  tr:nth-of-type(odd) {
+    background-color: hsla(0, 0%, 0%, 0.04);
+  }
+  .not-supported .marker {
+    color: hsl(10, 80%, 40%);
+  }
+  .supported .marker {
+    color: hsl(100, 80%, 50%);
+  }
+  header {
+    font-size: 1.5rem;
+  }
+  footer {
+    font-size: 0.8rem;
+    text-align: right;
+  }
+</style>
+<header>
+  Wasm feature detect —
+  <a
+    href="https://npm.im/wasm-feature-detect"
+    rel="noopener noreferrer"
+    target="_blank"
+    >npm.im/wasm-feature-detect</a
+  >
+</header>
+<section>
+  <h1>Your browser supports:</h1>
+  <table id="supporttable" cellspacing="0"></table>
+</section>
+<script type="module">
+  import * as ft from "./wasm-feature-detect.js";
+
+  async function generate() {
+    let acc = "";
+    for (const [name, detector] of Object.entries(ft)) {
+      const supported = await detector();
+      acc += `
+      <tr class="${supported ? "supported" : "not-supported"}">
+        <td class="marker">${supported ? "✔️" : "❌"}</td>
+        <td class="name">${name}</td>
+        </tr>
+        `;
+    }
+
+    const table = document.querySelector("#supporttable");
+    table.innerHTML = `<tbody>${acc}</tbody>`;
+  }
+  generate();
+</script>
+
+<section>
+  <%- readme %>
+</section>
+
+<footer>
+  Made with 💻 by
+  <a
+    href="https://twitter.com/dassurma"
+    rel="noopener noreferrer"
+    target="_blank"
+    >Surma</a
+  >
+</footer>