prelim website state

.babelrc

@@ -0,0 +1,9 @@
+{
+  "env": {
+    "test": {
+      "presets": [
+        ["preact-cli/babel", { "modules": "commonjs" }]
+      ]
+    }
+  }
+}

README.md

@@ -20,6 +20,3 @@ npm run test
 ```
 
 For detailed explanation on how things work, checkout the [CLI Readme](https://github.com/developit/preact-cli/blob/master/README.md).
-
-
-[Design](https://codepen.io/cssgirl/pen/qEKgaJ) by Lindsey Di Napoli - CSSgirl

package.json

@@ -4,31 +4,47 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "start": "if-env NODE_ENV=production && npm run -s serve || npm run -s dev",
+    "start": "per-env",
+    "start:production": "npm run -s serve",
+    "start:development": "npm run -s dev",
     "build": "preact build",
     "serve": "preact build && preact serve",
     "dev": "preact watch",
-    "lint": "standard src",
-    "test": "jest ./tests"
+    "lint": "standard",
+    "test": "jest"
   },
+  "standard": {
+    "parser": "babel-eslint"
+  },
+  "eslintIgnore": [
+    "build/*"
+  ],
   "devDependencies": {
+    "babel-eslint": "^10.0.1",
     "identity-obj-proxy": "^3.0.0",
-    "if-env": "^1.0.0",
     "jest": "^21.2.1",
+    "per-env": "^1.0.2",
     "preact-cli": "^2.1.0",
-    "preact-cli-plugin-netlify": "^1.1.0",
     "preact-render-spy": "^1.2.1"
   },
   "dependencies": {
-    "node-sass": "^4.9.0",
+    "codemirror": "^5.45.0",
+    "highlight.js": "^9.15.6",
     "preact": "^8.2.6",
+    "preact-compat": "^3.17.0",
+    "preact-markdown": "^0.4.1",
     "preact-router": "^2.5.7",
-    "sass-loader": "^7.0.1"
+    "standard": "^12.0.1"
   },
   "jest": {
     "verbose": true,
     "setupFiles": [
-      "<rootDir>/src/tests/__mocks__/browserMocks.js"
+      "<rootDir>/tests/__mocks__/browserMocks.js"
+    ],
+    "testRegex": "(/(__tests__|tests)/.*|(\\.|/)(test|spec))\\.jsx?$",
+    "testPathIgnorePatterns": [
+      "/node_modules/",
+      "<rootDir>/tests/__mocks__/*"
     ],
     "testURL": "http://localhost:8080",
     "moduleFileExtensions": [
@@ -39,7 +55,7 @@
       "node_modules"
     ],
     "moduleNameMapper": {
-      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/src/tests/__mocks__/fileMock.js",
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/tests/__mocks__/fileMock.js",
       "\\.(css|less|scss)$": "identity-obj-proxy",
       "^./style$": "identity-obj-proxy",
       "^preact$": "<rootDir>/node_modules/preact/dist/preact.min.js",

src/components/app.js

@@ -1,50 +1,34 @@
-import { h, Component } from 'preact';
-import { Router } from 'preact-router';
 
-import Header from './header';
-import NavBar from './navbar'
-import Footer from './footer'
-import Home from '../routes/home';
-import Demos from '../routes/demos';
+import { Component } from 'preact'
+import { Router } from 'preact-router'
 
-// import Home from 'async!../routes/home';
-// import Profile from 'async!../routes/profile';
-
-if (module.hot) {
-  require('preact/debug');
-}
+// Code-splitting is automated for routes
+import Home from '../routes/home'
+import Profile from '../routes/profile'
+import Navbar from './navbar'
 
 export default class App extends Component {
-  /** Gets fired when the route changes.
-   *	@param {Object} event		"change" event from [preact-router](http://git.io/preact-router)
-   *	@param {string} event.url	The newly routed URL
+  /**
+   * Gets fired when the route changes.
+   * @param {Object} event "change" event from [preact-router](http://git.io/preact-router)
+   * @param {string} event.url The newly routed URL
    */
   handleRoute = e => {
-    this.currentUrl = e.url;
+    this.currentUrl = e.url
   };
 
-  render() {
+  render () {
     return (
-      <div>
-        <Header />
-        <NavBar />
-        <Router onChange={this.handleRoute}>
-          <Home path="/" />
-          <Demos path="/demos" />
-        </Router>
-        <Footer />
+      <div id='app'>
+        <Navbar />
+        <div id='content'>
+          <Router onChange={this.handleRoute}>
+            <Home path='/' />
+            <Profile path='/profile/' user='me' />
+            <Profile path='/profile/:user' />
+          </Router>
+        </div>
       </div>
     )
-    /*
-    return (
-      <div id="app">
-        <Header />
-        <Router onChange={this.handleRoute}>
-          <Home path="/" />
-          <Profile path="/profile/" user="me" />
-          <Profile path="/profile/:user" />
-        </Router>
-      </div>
-    );*/
   }
 }

src/components/code/index.js

@@ -0,0 +1,23 @@
+import { Component } from 'preact'
+import style from './style'
+
+const hljsPromise = Promise.all([
+  import('highlight.js/lib/highlight'),
+  import('highlight.js/lib/languages/javascript')
+]).then(([hljs, javascript]) => {
+  hljs.registerLanguage('javascript', javascript)
+  return hljs
+})
+
+export default class Livecode extends Component {
+  componentDidMount () {
+    hljsPromise.then(hljs => {
+      hljs.highlightBlock(this.base)
+    })
+  }
+  render ({ code }) {
+    return (
+      <pre class={style.code}><code class='javascript'>{code}</code></pre>
+    )
+  }
+}

src/components/code/style.css

@@ -0,0 +1,4 @@
+
+.code {
+  width: 100%;
+}

src/components/livecode/index.js

@@ -0,0 +1,26 @@
+import { Component } from 'preact'
+import style from './style'
+
+const hljsPromise = Promise.all([
+  import('highlight.js/lib/highlight'),
+  import('highlight.js/lib/languages/javascript')
+]).then(([hljs, javascript]) => {
+  hljs.registerLanguage('javascript', javascript)
+  return hljs
+})
+
+export default class Livecode extends Component {
+  componentDidMount () {
+    hljsPromise.then(hljs => {
+      hljs.highlightBlock(this.base.childNodes[0])
+    })
+  }
+  render ({ code }) {
+    return (
+      <div class={style.livecode}>
+        <pre class={style.codearea}><code class='javascript'>{code}</code></pre>
+        <div class={style.consolearea} />
+      </div>
+    )
+  }
+}

src/components/livecode/style.css

@@ -0,0 +1,10 @@
+
+.livecode {
+  height: 300px;
+  width: 100%;
+}
+
+.codearea {
+  background-color: var(--background-color);
+  height: 30px;
+}

src/components/navbar/index.js

@@ -0,0 +1,16 @@
+import { Component } from 'preact'
+import style from './style'
+
+export default class Navbar extends Component {
+  // Note: `user` comes from the URL, courtesy of our router
+  render () {
+    return (
+      <nav class={style.navbar}>
+        <ol>
+          <li><a href='bikes'>Bikes</a></li>
+          <li><a href='bikes/bmx'>BMX</a></li>
+        </ol>
+      </nav>
+    )
+  }
+}

src/components/navbar/style.css

@@ -0,0 +1,14 @@
+
+.navbar ol {
+  list-style: none;
+  margin: 4rem 0 0 0;
+  padding: 0;
+}
+
+.navbar a {
+  padding-left: 3rem;
+  color: var(--navbar-color);
+  text-decoration: none;
+  display: block;
+  line-height: 2rem;
+}

src/components/textcontent/index.js

@@ -0,0 +1,10 @@
+
+import style from './style'
+
+const Textcontent = ({ children }) => (
+  <div class={style.textcontent}>
+    { children }
+  </div>
+)
+
+export default Textcontent

src/components/textcontent/style.css

@@ -0,0 +1,4 @@
+
+.textcontent {
+  max-width: 50rem;
+}

src/index.js

@@ -1,4 +1,6 @@
 import './style'
+import './style/highlightjs.css'
+
 import App from './components/app'
 
 export default App

src/manifest.json

@@ -4,8 +4,8 @@
   "start_url": "/",
   "display": "standalone",
   "orientation": "portrait",
-  "background_color": "#D7F7FE",
-  "theme_color": "#FF6067",
+  "background_color": "#fff",
+  "theme_color": "#673ab8",
   "icons": [
     {
       "src": "/assets/icons/android-chrome-192x192.png",