Deploy example on heroku (#30)

* Update packages and use Script component

* Add requirements for nginx buildpack

* Add script that cleans all but necessary files after build

* Fix(?) heroku script

* Remove script and just point nginx at path

* Make main layout body expand to full height

* Add new homepage

* Escape apostraphe on homepage

* Prettier

* Remove Script component

* Revert script tag to exact state it was in before

Procfile

@@ -0,0 +1 @@
+web: bin/start-nginx-solo

config/nginx.conf.erb

@@ -0,0 +1,39 @@
+daemon off;
+# Heroku dynos have at least 4 cores.
+worker_processes <%= ENV['NGINX_WORKERS'] || 4 %>;
+
+events {
+	use epoll;
+	accept_mutex on;
+	worker_connections <%= ENV['NGINX_WORKER_CONNECTIONS'] || 1024 %>;
+}
+
+http {
+	gzip on;
+	gzip_comp_level 2;
+	gzip_min_length 512;
+	gzip_proxied any; # Heroku router sends Via header
+
+	server_tokens off;
+
+	log_format l2met 'measure#nginx.service=$request_time request_id=$http_x_request_id';
+	access_log <%= ENV['NGINX_ACCESS_LOG_PATH'] || 'logs/nginx/access.log' %> l2met;
+	error_log <%= ENV['NGINX_ERROR_LOG_PATH'] || 'logs/nginx/error.log' %>;
+
+
+	include mime.types;
+	default_type application/octet-stream;
+	sendfile on;
+
+	# Must read the body in 5 seconds.
+	client_body_timeout <%= ENV['NGINX_CLIENT_BODY_TIMEOUT'] || 5 %>;
+
+	server {
+		listen <%= ENV["PORT"] %>;
+		server_name _;
+		keepalive_timeout 5;
+		client_max_body_size <%= ENV['NGINX_CLIENT_MAX_BODY_SIZE'] || 1 %>M;
+
+		root /app/packages/example/public;
+	}
+}

package.json

@@ -20,16 +20,16 @@
     "./packages/*"
   ],
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.25.0",
-    "@typescript-eslint/parser": "^5.25.0",
-    "eslint": "^8.12.0",
+    "@typescript-eslint/eslint-plugin": "^5.29.0",
+    "@typescript-eslint/parser": "^5.29.0",
+    "eslint": "^8.18.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-json": "^3.1.0",
     "eslint-plugin-jsx-a11y": "^6.5.1",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.30.0",
-    "prettier": "^2.6.2",
-    "stylelint": "^14.6.1",
-    "stylelint-config-standard": "^25.0.0"
+    "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-standard": "^26.0.0"
   }
 }

packages/example/src/pages/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link } from 'gatsby'
+
+export default function Home() {
+  return (
+    <div>
+      <h1>Gatsby Theme: Iterative</h1>
+      <p>
+        Welcome to the documentation and example website for Iterative&apos;s
+        website engine!
+      </p>
+      <p>
+        This theme is primarily related to adding a documentation engine, which
+        you can see <Link to="/doc">here!</Link>
+      </p>
+    </div>
+  )
+}

packages/gatsby-theme-iterative/package.json

@@ -47,7 +47,7 @@
     "iso-url": "^1.2.1",
     "isomorphic-fetch": "^3.0.0",
     "lodash": "^4.17.21",
-    "nanoid": "^3.3.2",
+    "nanoid": "^4.0.0",
     "perfect-scrollbar": "^1.5.5",
     "postcss": "^8.4.14",
     "postcss-color-mod-function": "^3.0.3",
@@ -70,7 +70,7 @@
     "remark-preset-lint-recommended": "^6.1.2",
     "reset-css": "^5.0.1",
     "scroll": "^3.0.1",
-    "tailwindcss": "3.0.23",
+    "tailwindcss": "^3.1.3",
     "title-case": "^3.0.3",
     "unified": "^10.1.2",
     "unist-util-remove-position": "^4.0.1",

packages/gatsby-theme-iterative/src/components/MainLayout/index.tsx

@@ -50,16 +50,13 @@ const MainLayout: LayoutComponent = ({
   }, [])
 
   return (
-    <>
+    <div className={styles.layoutWrapper}>
       <LayoutHeader modifiers={modifiers} />
-      <div
-        id="layoutContent"
-        //  className={styles.pageContent}
-      >
+      <div id="layoutContent" className={styles.layoutContent}>
         {children}
       </div>
       <LayoutFooter />
-    </>
+    </div>
   )
 }
 

packages/gatsby-theme-iterative/src/components/MainLayout/styles.module.css

@@ -1,3 +1,22 @@
+:global {
+  html,
+  body,
+  #___gatsby,
+  #gatsby-focus-wrapper {
+    height: 100%;
+  }
+}
+
+.layoutWrapper {
+  height: 100%;
+  display: flex;
+  flex-flow: column nowrap;
+}
+
+.layoutContent {
+  flex: 1;
+}
+
 .mainLayout {
   font-weight: 400 !important;
   background-color: #fff;