Cleaning up project docs, folder structure, and adding service landing page.

Author: matthewhudson

README.md

@@ -1,11 +1,97 @@
-# WebPipe Block Demos
+# WebPipe Examples
 
-In this repo we're demonstrating simple but complete example blocks. Using
-`now.sh`, Node, and the node-webpipe server module.
+> Welcome to the world's finest private collection of meticulously handcrafted
+> WebPipes.
 
-## Examples
+> This project is a single web service (available at
+> [webpip.es](https://webpip.es)) built on top of the
+> [ZEIT Now](https://github.com/zeit/now-examples) cloud platform.
 
-Try running a few client requests locally.
+\*Note: As of 6/8/2019, only NodeJS examples exist the moment. However,we should
+be able to include any Now-supported runtime.
+
+## Public Convenience API
+
+As a convenience, each example is publically available at via
+[webpip.es](https://webpip.es). You can check `now.json` for each example's HTTP
+pathname, but basically, the folder each lives in is also the HTTP pathname.
+Accordingly, you can find the `./api/parse-url` example is available via
+`https://webpip.es/parse-url`:
+
+```bash
+curl -v -X OPTIONS https://webpip.es/parse-url
+```
+
+<details>
+  <summary>Response body is the input & output block definitions.</summary>
+
+```json
+{
+  "name": "Parse URL",
+  "description": "Parse URL using WHATWG URL Standard.",
+  "inputs": [
+    {
+      "name": "url",
+      "type": "string",
+      "description": "A url to parse."
+    }
+  ],
+  "outputs": [
+    {
+      "name": "parts",
+      "type": "objects",
+      "description": "Returns the parsed URL parts."
+    }
+  ]
+}
+```
+
+</details>
+
+> _Nice things are nice._ Please be mindful and keep your _use_ & _usage_
+> responsible. It's intended to serve primarily as a hands-on demonstration for
+> newcomers.
+
+## Full Example
+
+Try running a few client requests locally. Just run `node index.js` inside the
+example folder, or `now dev` if you prefer.
+
+It may be a bit easier starting with the very minimal `calculate-square-root`
+WebPipe. That said, the examples aren't structured in any particular order or
+and don't have any sort of difficulty levels, so feel free to explore in
+whatever way feels most comfortable.
+
+```bash
+curl -v -X OPTIONS \
+  https://webpip.es/inspect-hostname-dns
+```
+
+<details>
+  <summary>Response body is the input & output block definitions.</summary>
+
+```json
+{
+  "name": "DNS Lookup",
+  "description": "Determine whether or not a hostname exists.",
+  "inputs": [
+    {
+      "name": "hostname",
+      "type": "string",
+      "description": "A hostname to lookup."
+    }
+  ],
+  "outputs": [
+    {
+      "name": "ok",
+      "type": "bool",
+      "description": "Returns true of false if lookup succeeds."
+    }
+  ]
+}
+```
+
+</details>
 
 ### DNS Lookup Block
 
@@ -15,7 +101,7 @@ to do is provide. a hostname then the block does its work to find us answer.
 
 ## Example Usage
 
-```sh
+```bash
 curl -v -X OPTIONS \
   https://webpip.es/inspect-hostname-dns
 ```
@@ -46,7 +132,7 @@ curl -v -X OPTIONS \
 
 </details>
 
-```sh
+```bash
 curl -i -X POST \
   -H "Content-Type: application/json" \
   -d '{"inputs":[{"domain":"google.com"}]}' \

blocks/calculate-square-root/index.js renamed to api/calculate-square-root/index.js

@@ -1,7 +1,7 @@
 const stream = require('stream')
 const axios = require('axios')
 const AWS = require('aws-sdk')
-const url = require('url') // built-in utility
+const url = require('url')
 
 class S3RemoteUploader {
   constructor (remoteAddr) {

blocks/calculate-square-root/package-lock.json renamed to api/calculate-square-root/package-lock.json

@@ -1,8 +1,9 @@
 {
-  "name": "block-demos",
+  "name": "webpipe-examples",
   "version": 2,
   "builds": [
-    { "src": "blocks/calculate-square-root/*.js", "use": "@now/node" },
+    { "src": "www/package.json", "use": "@now/next" },
+    { "src": "api/calculate-square-root/*.js", "use": "@now/node" },
     { "src": "blocks/parse-url/*.js", "use": "@now/node" },
     { "src": "blocks/parse-rss/*.js", "use": "@now/node" },
     { "src": "blocks/convert-markdown-to-html/*.js", "use": "@now/node" },
@@ -15,6 +16,11 @@
     {
       "src": "/(.*)",
       "dest": "blocks/$1"
+    },
+    {
+      "src": "/(.*)",
+      "methods": ["GET"],
+      "dest": "www/$1"
     }
   ],
   "regions": ["gru1", "hnd1", "iad1", "sfo1"],

blocks/calculate-square-root/yarn.lock renamed to api/calculate-square-root/yarn.lock

@@ -1,14 +1,13 @@
 {
-  "name": "block-demos",
+  "name": "webpipe-examples",
   "version": "1.0.0",
-  "description": "A fine collection of hand-crafted webpipes.",
+  "description": "A fine collection of hand-crafted example webpipes.",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": "Matthew Hudson",
   "license": "MIT",
   "dependencies": {
-    "@google-cloud/vision": "^1.1.3",
     "node-webpipe": "0.0.3"
   }
 }

blocks/convert-markdown-to-html/index.js renamed to api/convert-markdown-to-html/index.js

@@ -0,0 +1,3 @@
+module.exports = {
+  target: 'serverless'
+}

blocks/inspect-hostname-dns/index.js renamed to api/inspect-hostname-dns/index.js

@@ -0,0 +1,13 @@
+{
+  "name": "webpipe-examples",
+  "license": "MIT",
+  "private": true,
+  "dependencies": {
+    "next": "^8.0.0-canary.2",
+    "react": "^16.7.0",
+    "react-dom": "^16.7.0"
+  },
+  "scripts": {
+    "now-build": "next build"
+  }
+}

blocks/parse-rss/index.js renamed to api/parse-rss/index.js

@@ -0,0 +1,209 @@
+const Page = () => (
+  <div className='container'>
+    <div className='logo'>
+      <svg
+        xmlns='http://www.w3.org/2000/svg'
+        xmlSpace='preserve'
+        width={200}
+        height={200}
+        fill='#0036ff'
+        version='1.1'
+        viewBox='-21.125 -5 100 100'>
+        <path d='m60.053 3v18.439c0 1.657-1.293 3-2.89 3h-4.738v62.265c0 1.82-1.411 3.296-3.153 3.296h-38.605c-1.742 0-3.154-1.476-3.154-3.296v-62.265h-4.624c-1.596 0-2.889-1.343-2.889-3v-18.439c0-1.657 1.293-3 2.889-3h54.274c1.597 0 2.89 1.343 2.89 3zm-39.544 23.268c0-1.063-0.816-1.926-1.823-1.926h-3.931c-1.006 0-1.823 0.863-1.823 1.926v57.551c0 1.063 0.816 1.927 1.823 1.927h3.931c1.006 0 1.823-0.863 1.823-1.927v-57.551zm-10.583-22.896h-3.932c-1.006 0-1.822 0.784-1.822 1.75v13.221c0 0.967 0.816 1.751 1.822 1.751h3.932c1.006 0 1.822-0.784 1.822-1.751v-13.22c0-0.967-0.816-1.751-1.822-1.751z' />
+      </svg>
+    </div>
+
+    <div className='intro'>
+      <h1>
+        Uh oh! If you're here you're probably a little lost, need a little help?
+      </h1>
+      <h3>Warning Notice</h3>
+      <p>
+        Webpip.es do not accept HTTP <code>GET</code> requests.
+      </p>
+      <p>
+        Please remember to use the appropriate HTTP Method, either{' '}
+        <code>OPTIONS</code>
+        or <code>POST</code>.
+      </p>
+
+      <hr />
+      <h3>Helpful Resources</h3>
+      <p>
+        You might find this{' '}
+        <a href='https://codepen.io/matthewhudson/full/GVEmBo' target='_blank'>
+          Codepen
+        </a>{' '}
+        helpful, it's an example of the JavaScript client invoking a simple
+        WebPipe that converts GitHub-flavored Markdown.
+      </p>
+      <p>
+        You can also visit the{' '}
+        <a
+          href='https://webpipes.org'
+          title='WebPipes Official Site'
+          target='_blank'>
+          WebPipes.org
+        </a>{' '}
+        Official Site for a Slack invite, and access to other community
+        resources &amp; gathering spots.
+      </p>
+
+      <hr />
+
+      <p>
+        View this project on{' '}
+        <a
+          href='https://github.com/webpipes/webpipe-examples'
+          title='GitHub for this project'
+          target='_blank'>
+          GitHub
+        </a>
+        .
+      </p>
+    </div>
+    <style jsx global>{`
+      * {
+        box-sizing: border-box;
+      }
+      html,
+      body {
+        height: 100%;
+      }
+      body {
+        margin: 0;
+        color: white;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
+          'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+          'Helvetica Neue', sans-serif;
+        text-rendering: optimizeLegibility;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+        background: radial-gradient(circle, #333, #333 1px, #000 1px, #000);
+        background-size: 28px 28px;
+        background-position: center;
+        font-size: 18px;
+        line-height: 1.6;
+        font-weight: 400;
+      }
+      a {
+        text-decoration: none;
+        color: white;
+      }
+      strong {
+        color: white;
+        font-weight: 600;
+      }
+      code {
+        font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
+          DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace,
+          serif;
+        font-size: 0.9em;
+      }
+      code::before,
+      code::after {
+        content: '\`';
+      }
+      ::selection {
+        background: #f81ce5;
+        color: white;
+      }
+      ::-moz-selection {
+        background: #f81ce5;
+        color: white;
+      }
+      .container {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        max-width: 100%;
+        width: 1080px;
+        min-height: 100vh;
+        margin: auto;
+        padding: 30px 20px;
+      }
+      .logo {
+        margin: 30px 0 20px;
+      }
+      .intro {
+        text-align: left;
+        max-width: 640px;
+      }
+      .intro a {
+        margin-right: 0.15em;
+        border-bottom: 1px solid;
+      }
+      h2 {
+        font-size: 30px;
+      }
+      hr {
+        display: none;
+        border: none;
+        border-bottom: 1px solid #666;
+        width: 100px;
+        margin: 30px 0;
+      }
+      .clocks {
+        display: flex;
+        flex-wrap: wrap;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        width: 100%;
+        margin: 0 -10px;
+        padding: 40px 0;
+        max-height: 500px;
+      }
+      .clocks a {
+        position: relative;
+        flex: 1 0 25%;
+        text-align: center;
+        padding: 10px;
+        margin: 20px 0;
+        font-size: 17px;
+        transition: all 0.1s ease;
+      }
+      .clocks a:hover {
+        box-shadow: 0 0 0 1px #666;
+      }
+      .clock span {
+        font-weight: 700;
+      }
+      .clock time {
+        display: block;
+        height: 3.2em;
+        font-weight: 700;
+        color: #fff;
+        animation: pulse 1s forwards;
+      }
+      @keyframes pulse {
+        from {
+          color: #fff;
+        }
+        to {
+          color: #bbb;
+        }
+      }
+      @media screen and (max-width: 960px) {
+        .clocks a {
+          flex: 1 0 50%;
+          font-size: 20px;
+        }
+      }
+      @media screen and (max-width: 480px) {
+        .clocks a {
+          flex: 1 0 100%;
+        }
+        .clocks {
+          max-height: unset;
+        }
+        hr {
+          display: block;
+        }
+      }
+    `}</style>
+  </div>
+)
+
+export default Page