Use vanilla JS for the homepage

src/front/.babelrc.js

@@ -1,14 +0,0 @@
-const transformReactJsx = require("@babel/plugin-transform-react-jsx");
-
-
-module.exports = {
-  "presets": [
-    "@babel/preset-env",
-    // "preact" disabling temporary
-  ],
-  // remove plugins and deps when preact preset supports Babel 7
-  "plugins": [
-    [ transformReactJsx, { "pragma": "h" }],
-    require("@babel/plugin-syntax-jsx"),
-  ]
-}

src/front/index.html

@@ -38,6 +38,12 @@
         View
         <a href="https://github.com/typicode/json-server">README</a>
       </p>
+
+      <h4>See also</h4>
+      <ul>
+        <li><a href="https://www.patreon.com/typicode">Patreon</a></li>
+        <li><a href="https://thanks.typicode.com">Supporters</a></li>
+      </ul>
     </div>
   </main>
 

src/front/index.js

@@ -1,75 +1,81 @@
 import 'promise-polyfill/src/polyfill'
 import 'whatwg-fetch'
-import { h, render } from 'preact'
 import 'milligram/dist/milligram.css'
 import './style.css'
 
 function ResourceItem({ name, length }) {
-  return (
+  return `
     <li>
-      <a href={name}>/{name}</a> <sup>{length ? `${length}x` : 'object'}</sup>
+      <a href="${name}">/${name}</a>
+      <sup>${length ? `${length}x` : 'object'}</sup>
     </li>
-  )
+  `
 }
 
 function ResourceList({ db }) {
-  return (
+  return `
     <ul>
-      {Object.keys(db).map(name => (
-        <ResourceItem
-          name={name}
-          length={Array.isArray(db[name]) && db[name].length}
-        />
-      ))}
+      ${Object.keys(db)
+        .map(name =>
+          ResourceItem({
+            name,
+            length: Array.isArray(db[name]) && db[name].length
+          })
+        )
+        .join('')}
     </ul>
-  )
+  `
 }
 
 function NoResources() {
-  return <p>No resources found</p>
+  return `<p>No resources found</p>`
 }
 
 function ResourcesBlock({ db }) {
-  return (
+  return `
     <div>
       <h4>Resources</h4>
-      {Object.keys(db).length ? <ResourceList db={db} /> : <NoResources />}
+      ${Object.keys(db).length ? ResourceList({ db }) : NoResources()}
     </div>
-  )
+  `
 }
 
 window
   .fetch('db')
   .then(response => response.json())
-  .then(db =>
-    render(<ResourcesBlock db={db} />, document.getElementById('resources'))
+  .then(
+    db =>
+      (document.getElementById('resources').innerHTML = ResourcesBlock({ db }))
   )
 
 function CustomRoutesBlock({ customRoutes }) {
   const rules = Object.keys(customRoutes)
   if (rules.length) {
-    return (
+    return `
       <div>
         <h4>Custom Routes</h4>
         <table>
-          {rules.map(rule => (
-            <tr>
-              <td>{rule}</td>
-              <td>⇢ {customRoutes[rule]}</td>
-            </tr>
-          ))}
+          ${rules
+            .map(
+              rule =>
+                `<tr>
+              <td>${rule}</td>
+              <td>⇢ ${customRoutes[rule]}</td>
+            </tr>`
+            )
+            .join('')}
         </table>
       </div>
-    )
+    `
   }
 }
 
 window
   .fetch('__rules')
   .then(response => response.json())
-  .then(customRoutes => {
-    render(
-      <CustomRoutesBlock customRoutes={customRoutes} />,
-      document.getElementById('custom-routes')
-    )
-  })
+  .then(
+    customRoutes =>
+      (document.getElementById('custom-routes').innerHTML = CustomRoutesBlock({
+        customRoutes
+      }))
+  )

src/front/style.css

@@ -51,7 +51,7 @@ table {
 td {
   border: 0;
   padding: 0 1em .5em 0;
-  color: #014c8c;
+  font-weight: 300;
 }
 
 td:first-child {