homepage mdx -> jsx

components/home-header.js

@@ -0,0 +1,11 @@
+export default () => <>
+  <h1>
+    <img src='https://badgen.net/static/badgen-logo.svg' /> Badgen
+  </h1>
+  <p>Fast badge generating service.</p>
+  <p>
+    <a href='https://badgen.net'>classic</a>
+    <a href='https://flat.badgen.net'>flat</a>
+    <a href='https://api.badgen.net'>api</a>
+  </p>
+</>

components/home-intro.js

@@ -0,0 +1,107 @@
+import icons from 'badgen-icons'
+
+export default ({ isFlat, children }) => (
+  <div>
+    <h3>Usage</h3>
+    <pre>{ explainCode(isFlat) }</pre>
+
+    <h3 id='color-examples'>Available color names</h3>
+    { colorExamples() }
+
+    <h3>Available icons</h3>
+    { iconExamples() }
+
+    <h3>Available query params</h3>
+    <ul>
+      <li>
+        <code>color</code>
+        Override badge color.
+        <a href='/npm/dm/express?color=pink'>e.g.</a>
+      </li>
+      <li>
+        <code>icon</code>
+        Use builtin icon in front of subject text.
+        <a href='/badge/docker/v1.2.3/blue?icon=docker'>e.g.</a>
+      </li>
+      <li>
+        <code>list</code>
+        Set <code>list=1</code> will replace <code>,</code> with <code>|</code> in status text.
+        <a href='/badge/platform/ios,macos,tvos?list=1'>e.g.</a>
+      </li>
+      <li>
+        <code>label</code>
+        Override default subject text (<a href='https://developer.mozilla.org/en-US/docs/Glossary/percent-encoding'>URL-Encoding</a> needed for spaces or special characters).
+        <a href='/badge/docker/v1.2.3/blue?icon=docker'>e.g.</a>
+      </li>
+    </ul>
+
+    <h3>Advanced usage</h3>
+    <ul>
+      <li>
+        <a href='/docs/runkit'><code>/runkit</code></a>
+        create arbitrary live badge with RunKit's online IDE.
+      </li>
+      <li>
+        <a href='/docs/https'><code>/https</code></a>
+        create arbitrary live badge from arbitrary endpoint.
+      </li>
+    </ul>
+    <style jsx>{`
+      pre {
+        font-size: 15px;
+      }
+      code {
+        margin-right: 6px;
+      }
+    `}</style>
+  </div>
+)
+
+const colorExamples = () => {
+  const colors = ['blue', 'cyan', 'green', 'yellow', 'orange', 'red', 'pink', 'purple', 'grey']
+  return colors.map(c => (
+    <a href={`/badge/color/${c}/${c}`} key={c}>
+      <img src={`/badge/color/${c}/${c}`} />
+      <style jsx>{`
+        a {
+          margin-right: 4px;
+        }
+      `}</style>
+    </a>
+  ))
+}
+
+const iconExamples = () => {
+  return Object.keys(icons).map(icon => {
+    const url = `/badge//${icon}?icon=${icon}`
+    return (
+      <a href={url}>
+        <img src={url} />
+        <style jsx>{`
+          a {
+            margin-right: 4px;
+          }
+        `}</style>
+      </a>
+    )
+  })
+}
+
+const explainCode = (isFlat) => {
+  const text = `
+https://badgen.net/badge/:subject/:status/:color?icon=github
+                   ──┬──  ───┬───  ──┬───  ──┬── ────┬──────
+                     │       │       │       │       └─ Extra Options (label, list, icon, color)
+                     │       │       │       │
+                     │      TEXT    TEXT    RGB / COLOR_NAME ( optional )
+                     │
+                  "badge" - default (static) badge generator`
+  if (isFlat) {
+    return text
+      .replace('badgen.net', 'flat.badgen.net')
+      .replace(/\n/g, '\n     ')
+      .trim()
+  } else {
+    return text.trim()
+  }
+}

endpoints/npm.js

@@ -0,0 +1,9 @@
+import serve from '../libs/badgen-serve.js'
+
+const help = ``
+const schemes = []
+const examples = []
+
+const handler = () => {}
+
+export default serve('npm', handler, { help, schemes, examples })

libs/badgen-serve.js

@@ -0,0 +1 @@
+export default () => {}

libs/examples-live.js

@@ -230,5 +230,9 @@ module.exports = {
   ],
   keybase: [
     ['pgp', '/keybase/pgp/lukechilds']
+  ],
+  twitter: [
+    ['follower count', '/twitter/follow/rustlang'],
+    ['follower count', '/twitter/follow/golang']
   ]
 }

next.config.js

@@ -1,5 +0,0 @@
-const withMDX = require('@zeit/next-mdx')()
-
-module.exports = withMDX({
-  pageExtensions: ['js', 'jsx', 'mdx']
-})

now.json

@@ -1,7 +1,7 @@
 {
   "version": 2,
   "builds": [
-    { "src": "package.json", "use": "@now/static-build" },
+    { "src": "package.json", "use": "@now/next" },
     { "src": "endpoints/*.js", "use": "@now/node" }
   ],
   "routes": [

pages/_app.js

@@ -2,6 +2,7 @@ import React from 'react'
 import App, { Container } from 'next/app'
 import Head from 'next/head'
 import DocsLayout from '../components/docs-layout.js'
+import Footer from '../components/footer.js'
 
 export default class MyApp extends App {
   render () {
@@ -17,6 +18,7 @@ export default class MyApp extends App {
           <meta name='viewport' content='initial-scale=1.0, width=device-width' />
           <link rel='stylesheet'
             href='https://fonts.googleapis.com/css?family=Merriweather:700,300' />
+          <link rel='stylesheet' href='/static/index.css' />
         </Head>
         { pageContent }
         <style jsx global>{`

pages/index.js

@@ -1,5 +1,28 @@
-import Builder from './builder.js'
+import liveBadges from '../libs/examples-live.js'
+import BadgeExamples from '../components/badge-examples.js'
+import Header from '../components/home-header.js'
+import Intro from '../components/home-intro.js'
+import Footer from '../components/footer.js'
 
-export default () => {
-  return <Builder />
-}
+export default ({ children }) => <>
+  <Header />
+  <div className='docs'>
+    <Intro />
+    <h3 style={{ textAlign: 'center' }}>Examples</h3>
+    <p>
+      live badges / <a href='/gallery/static'>static badges</a>
+    </p>
+    <BadgeExamples data={liveBadges} />
+  </div>
+  <Footer />
+  <style jsx>{`
+    .docs {
+      width: 960px;
+      margin: 0 auto;
+      padding-bottom: 6em;
+    }
+    p {
+      text-align: center
+    }
+  `}</style>
+</>