BREAKING CHANGE: redesign and using next.js

.gitignore

@@ -24,3 +24,5 @@ yarn-error.log*
 .cache
 *.tmp
 *.temp
+out
+.next

components/Footer.js

@@ -0,0 +1,38 @@
+import Link from 'next/link'
+
+export default ({ links }) => (
+  <footer>
+    <p>
+      <span>
+        <a href='mailto:hello@evilfactory.id'>Email</a> (
+        <a
+          href='https://git.io/evilfactory-pgp'
+          target='_blank'
+          rel='noopener noreferrer'
+        >
+          PGP
+        </a>
+        )
+      </span>
+      {links.map(link => (
+        <span key={link.id}>
+          <a href={link.url} target='_blank' rel='noopener noreferrer'>
+            {link.title}
+          </a>
+        </span>
+      ))}
+    </p>
+    <p>
+      &copy; MMXVIII - present.{' '}
+      <Link href='/'>
+        <a>evilfactory</a>
+      </Link>{' '}
+      rulez.
+    </p>
+    <style jsx>{`
+      span {
+        padding-right: 15px;
+      }
+    `}</style>
+  </footer>
+)

components/fragments/Index/About.js

@@ -0,0 +1,19 @@
+export default () => (
+  <div>
+    <h4>About us</h4>
+    <p>
+      We are small, distributed, agile, and practial. We do care both with user
+      & developer experience. We believes that modern technologies solve modern
+      problem.
+    </p>
+    <p>
+      Beside making software, we do help people & stakeholders build software on
+      top modern web technologies.
+    </p>
+    <p>
+      Open Source is our DNA. While we are relying on Open Source software, we
+      are giving back to the community by open source-ing our software,
+      libraries we made, and knowledge we have.
+    </p>
+  </div>
+)

components/fragments/Index/Hero.js

@@ -0,0 +1,6 @@
+export default () => (
+  <div>
+    <h2>We are evilfactory</h2>
+    <p>We make software with modern web technologies.</p>
+  </div>
+)

components/fragments/Index/Projects.js

@@ -0,0 +1,27 @@
+export default ({ projects }) => (
+  <>
+    <div>
+      <h4>Software & Project we made</h4>
+      <ul>
+        {projects.map(project => (
+          <li key={project.id}>
+            <a href={project.url} target='_blank' rel='noopener noopener'>
+              {project.title}
+            </a>{' '}
+            - {project.description}
+          </li>
+        ))}
+        <li>More awesome open source software will be announced.</li>
+      </ul>
+    </div>
+    <div>
+      <h4>Clients we help</h4>
+      <ul>
+        <li>
+          TBD. Need our help to build your next or existing project?{' '}
+          <a href='mailto:hello@evilfactory.id'>Talk to us!</a>
+        </li>
+      </ul>
+    </div>
+  </>
+)

components/fragments/Index/Stacks.js

@@ -0,0 +1,16 @@
+export default ({ stacks }) => {
+  return (
+    <div>
+      <h4>Some tech stacks we enjoy</h4>
+      <ul>
+        {stacks.map(stack => (
+          <li key={stack.id}>
+            <a href={stack.url} target='_blank' rel='noopener noreferrer'>
+              {stack.title}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  )
+}

package.json

@@ -1,18 +1,14 @@
 {
-  "name": "@evilfactorylabs/web",
   "private": true,
+  "license": "MIT",
   "scripts": {
-    "build": "gridsome build",
-    "develop": "gridsome develop",
-    "explore": "gridsome explore"
+    "dev": "next dev",
+    "build": "next build",
+    "export": "next build && next export"
   },
   "dependencies": {
-    "@gridsome/plugin-google-analytics": "0.1.0",
-    "@gridsome/remark-prismjs": "0.0.5",
-    "@gridsome/transformer-remark": "0.2.1",
-    "gridsome": "0.5.8"
-  },
-  "devDependencies": {
-    "gridsome-plugin-purgecss": "1.0.10"
+    "next": "8.1.0",
+    "react": "16.8.6",
+    "react-dom": "16.8.6"
   }
 }

pages/_app.js

@@ -0,0 +1,140 @@
+import React, { Component } from 'react'
+import App, { Container } from 'next/app'
+
+class MyApp extends App {
+  static async getInitialProps({ Component, ctx }) {
+    let pageProps = {}
+
+    if (Component.getInitialProps) {
+      pageProps = await Component.getInitialProps(ctx)
+    }
+
+    return { pageProps }
+  }
+  componentDidMount() {
+    this.loadFont(
+      'https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap'
+    )
+  }
+
+  loadFont = url => {
+    var xhr = new XMLHttpRequest()
+    xhr.open('GET', url, true)
+    xhr.onreadystatechange = () => {
+      if (xhr.readyState == 4 && xhr.status == 200) {
+        let css = xhr.responseText
+
+        const head = document.getElementsByTagName('head')[0]
+        const style = document.createElement('style')
+        style.appendChild(document.createTextNode(css))
+        head.appendChild(style)
+      }
+    }
+    xhr.send()
+  }
+
+  render() {
+    const { Component, pageProps } = this.props
+
+    return (
+      <Container>
+        <Component {...pageProps} />
+        <style jsx global>{`
+          * {
+            padding: 0;
+            margin: 0;
+            box-sizing: border-box;
+          }
+
+          ::selection {
+            background-color: #ccc;
+            color: #fff;
+          }
+
+          body {
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+            font-size: 16px;
+            font-family: 'Poppins', 'Roboto', -apple-system, BlinkMacSystemFont,
+              “Roboto”, “Droid Sans”, “Helvetica Neue”, Helvetica, Arial,
+              sans-serif;
+            background-color: #000;
+            color: #fff;
+            max-width: 666px;
+            width: 100%;
+            animation: 0.5s bhaa;
+          }
+
+          footer,
+          div {
+            padding: 0.666rem;
+          }
+          h2 {
+            margin-top: 1.8rem;
+            font-size: 36px;
+          }
+          h4 {
+            font-size: 28px;
+            margin-bottom: 0.13rem;
+          }
+          a {
+            color: #fff;
+            text-decoration: none;
+          }
+          a:hover,
+          a:focus {
+            text-decoration: underline;
+          }
+          p,
+          li {
+            font-family: 'Roboto';
+            font-size: 18px;
+            line-height: 1.7rem;
+            color: #666;
+          }
+          p + p {
+            margin-top: 1.666rem;
+          }
+          ul {
+            margin-top: 1rem;
+            margin-left: 2rem;
+          }
+          li {
+            margin-bottom: 0.5rem;
+            list-style-type: square;
+          }
+          footer p {
+            margin-top: 2rem;
+            font-size: inherit;
+            font-family: inherit;
+            text-align: center;
+          }
+
+          @media screen and (min-width: 40em) {
+            h2 {
+              font-size: 48px;
+            }
+            footer p {
+              text-align: left;
+            }
+            footer,
+            div {
+              padding: 1.8rem;
+            }
+          }
+
+          @keyframes bhaa {
+            from {
+              opacity: 0;
+            }
+            to {
+              opacity: 1;
+            }
+          }
+        `}</style>
+      </Container>
+    )
+  }
+}
+
+export default MyApp

pages/_document.js

@@ -0,0 +1,33 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+
+class MyDocument extends Document {
+  static async getInitialProps(ctx) {
+    const initialProps = await Document.getInitialProps(ctx)
+    return { ...initialProps }
+  }
+
+  render() {
+    return (
+      <Html lang='en'>
+        <Head>
+          <meta name='charset' content='utf-8' />
+          <meta name='theme-color' content='#000000' />
+          <meta
+            name='viewport'
+            content='width=device-width, initial-scale=1, viewport-fit=cover'
+          />
+          <link rel='preconnect' href='https://fonts.gstatic.com' />
+          <link rel='preconnect' href='https://fonts.googleapis.com' />
+          <link rel='manifest' href='/static/manifest.json' />
+          <link rel='icon' href='/static/favicon/favicon.ico' />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+export default MyDocument