[ImgBot] Optimize images

.gitignore

@@ -25,6 +25,7 @@ yarn-debug.log*
 yarn-error.log*
 
 # local env files
+.env
 .env.local
 .env.development.local
 .env.test.local

components/Header.js

@@ -0,0 +1,63 @@
+import React from "react";
+
+export default function Container() {
+  const [navbarOpen, setNavbarOpen] = React.useState(false);
+
+  return (
+    <div className="z-50 w-full">
+      <div className="flex flex-col  max-w-screen-2xl px-4 pt-2 mx-auto md:items-center md:justify-between md:flex-row md:px-6 lg:px-8">
+        <div className="flex flex-row items-center justify-between p-4">
+          <a
+            href="/"
+            className="text-lg font-semibold rounded-lg focus:outline-none focus:shadow-outline"
+          >
+            <h1 className="font-bold text-white uppercase md:text-md text-4xl">
+              NINE4
+            </h1>
+          </a>
+          <button
+            className="block px-3 py-1 text-xl leading-none text-white bg-transparent border border-transparent border-solid rounded outline-none cursor-pointer md:hidden focus:outline-none"
+            type="button"
+            aria-label="button"
+            onClick={() => setNavbarOpen(!navbarOpen)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="white"
+              strokeWidth="2"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              className="feather feather-menu"
+            >
+              <line x1="3" y1="12" x2="21" y2="12"></line>
+              <line x1="3" y1="6" x2="21" y2="6"></line>
+              <line x1="3" y1="18" x2="21" y2="18"></line>
+            </svg>
+          </button>
+        </div>
+        <div
+          className={
+            "md:flex flex-grow items-center" +
+            (navbarOpen ? " flex" : " hidden")
+          }
+          id="example-navbar-danger"
+        >
+          <nav className="flex-col flex-grow pb-4 md:pb-0 md:flex md:justify-end md:flex-row">
+            <a
+              className="py-2 mt-2 text-xl font-semibold text-white transition duration-500 ease-in-out transform bg-transparent rounded-lg md:mt-0 md:ml-4"
+              href="https://github.com/r1/nine4"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              GitHub
+            </a>
+          </nav>
+        </div>
+      </div>
+    </div>
+  );
+}

components/LayoutGA.tsx → components/LayoutGA.js

@@ -1,13 +1,7 @@
 import React from "react";
 import { initGA, logPageView } from "../utils/analytics";
 
-declare global {
-  interface Window {
-    GA_INITIALIZED: any;
-  }
-}
-
-export default class Layout extends React.Component<any, any> {
+export default class Layout extends React.Component {
   componentDidMount() {
     if (!window.GA_INITIALIZED) {
       initGA();

components/LicenseMain.js

@@ -0,0 +1,27 @@
+export default function Main() {
+  return (
+    <section className="text-black body-font lg:pt-14">
+      <div className="container px-5 mx-auto lg:px-4">
+        <div className="flex flex-col w-full text-left md:text-center ">
+          <h2 className="mb-1 text-5xl font-bold text-white lg:text-7xl md:text-6xl">
+            Creative Commons Zero v1.0 Universal
+          </h2>
+          <a
+            href="https://creativecommons.org/publicdomain/zero/1.0/"
+            className="text-white py-2"
+          >
+            https://creativecommons.org/publicdomain/zero/1.0/
+          </a>
+          <p className="mx-auto text-xl font-normal leading-relaxed text-middle fs521 lg:w-2/3">
+            The person who associated a work with this deed has dedicated the
+            work to the public domain by waiving all of his or her rights to the
+            work worldwide under copyright law, including all related and
+            neighboring rights, to the extent allowed by law. You can copy,
+            modify, distribute and perform the work, even for commercial
+            purposes, all without asking permission.
+          </p>
+        </div>
+      </div>
+    </section>
+  );
+}