docs(website): add crawler and fix footer styling

Author: christianalfoni

packages/overmind-website/backend/index.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const express = require('express')
+const puppeteer = require('puppeteer')
 const app = express()
 const fs = require('fs')
 const api = require('./api')
@@ -102,6 +103,26 @@ const apis = getApis()
 
 const searchData = getSearchData()
 
+const googleCrawlMiddleware = async function ssr(req, res, next) {
+  if (
+    req
+      .get('user-agent')
+      .toLowerCase()
+      .indexOf('googlebot') >= 0
+  ) {
+    const browser = await puppeteer.launch({ headless: true })
+    const page = await browser.newPage()
+    await page.goto(req.hostname + req.path, { waitUntil: 'networkidle0' })
+    const html = await page.content()
+    await browser.close()
+
+    res.send(html)
+  } else {
+    next()
+  }
+}
+
+app.use(googleCrawlMiddleware)
 app.use(express.static(path.join(__dirname, '..', 'dist')))
 app.use('/images', express.static(path.join(__dirname, '..', 'images')))
 app.get('/workshop/posts', api.posts)

packages/overmind-website/package.json

@@ -9,8 +9,8 @@
 	"scripts": {
 		"start": "node backend/index",
 		"dev": "concurrently \"node backend/index.js\" \"webpack-dev-server --port 4000 --mode development --hot --inline\"",
-    "build": "webpack --mode=production",
-    "now-build": "npm run build",
+		"build": "webpack --mode=production",
+		"now-build": "npm run build",
 		"typecheck": "tsc --noEmit",
 		"prepare": "npm run build",
 		"posttest": "npm run typecheck"
@@ -40,9 +40,10 @@
 		"install": "^0.12.1",
 		"marksy": "^6.1.0",
 		"npm": "^6.3.0",
-    "overmind-react": "next",
+		"overmind-react": "next",
 		"page": "^1.8.6",
-		"prismjs": "^1.15.0"
+		"prismjs": "^1.15.0",
+		"puppeteer": "^1.11.0"
 	},
 	"devDependencies": {
 		"@babel/plugin-transform-react-jsx": "^7.1.6",

packages/overmind-website/src/components/App/index.tsx

@@ -50,7 +50,9 @@ const App: SFC = () => {
   return (
     <div ref={mainRef} className={styles.wrapper}>
       {isMobile ? <MobileTopBar /> : <TopBar />}
-      <Page />
+      <div className={styles.pageWrapper}>
+        <Page />
+      </div>
       <Footer />
     </div>
   )

packages/overmind-website/src/components/App/styles.ts

@@ -1,5 +1,9 @@
 import { css } from 'emotion'
 
+export const pageWrapper = css`
+  min-height: calc(100vh - 198px);
+`
+
 export const wrapper = css`
   font-family: Nunito, 'helvetica neue';
   background-color: inherit;

packages/overmind-website/src/components/Footer/styles.ts

@@ -6,6 +6,7 @@ export const wrapper = css`
   height: 100px;
   justify-content: center;
   align-items: center;
+  margin-top: var(--padding-6);
   > * {
     margin: 0 var(--padding-4);
   }

packages/overmind-website/src/components/FrontPage/styles.ts

@@ -5,7 +5,6 @@ export const wrapper = css`
   padding-top: 100px;
   display: flex;
   box-sizing: border-box;
-  height: 100vh;
   justify-content: center;
 
   @media (max-width: 700px) {