bundle size stuff

frontend-react/package-lock.json

@@ -3685,6 +3685,11 @@
         "node-int64": "^0.4.0"
       }
     },
+    "btoa": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/btoa/-/btoa-1.2.1.tgz",
+      "integrity": "sha512-SB4/MIGlsiVkMcHmT+pSmIPoNDoHg+7cMzmt3Uxt628MTz2487DKSqK/fuhFBrkuqrYv5UCEnACpF4dTFNKc/g=="
+    },
     "buffer": {
       "version": "4.9.2",
       "resolved": "https://registry.npmjs.org/buffer/-/buffer-4.9.2.tgz",
@@ -5155,6 +5160,11 @@
       "resolved": "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz",
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
+    "ejs": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.0.1.tgz",
+      "integrity": "sha512-cuIMtJwxvzumSAkqaaoGY/L6Fc/t6YvoP9/VIaK0V/CyqKLEQ8sqODmYfy/cjXEdZ9+OOL8TecbJu+1RsofGDw=="
+    },
     "electron-to-chromium": {
       "version": "1.3.351",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.351.tgz",
@@ -13454,6 +13464,161 @@
       "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
     },
+    "source-map-explorer": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/source-map-explorer/-/source-map-explorer-2.3.1.tgz",
+      "integrity": "sha512-l3WQUCwaqia5x7EBnNp4GYwhXnROMz3NqKM2QMwQ3ADgjekp+enP+PHkjjbjoVX6WJ2G5mbvM6TjeE/q7fnIFw==",
+      "requires": {
+        "btoa": "^1.2.1",
+        "chalk": "^3.0.0",
+        "convert-source-map": "^1.7.0",
+        "ejs": "^3.0.1",
+        "escape-html": "^1.0.3",
+        "glob": "^7.1.6",
+        "gzip-size": "^5.1.1",
+        "lodash": "^4.17.15",
+        "open": "^7.0.2",
+        "source-map": "^0.7.3",
+        "temp": "^0.9.1",
+        "yargs": "^15.1.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.2.1",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.2.1.tgz",
+          "integrity": "sha512-9VGjrMsG1vePxcSweQsN20KY/c4zN0h9fLjqAbwbPfahM3t+NL+M9HC8xeXG2I8pX5NoamTGNuomEUFI7fcUjA==",
+          "requires": {
+            "@types/color-name": "^1.1.1",
+            "color-convert": "^2.0.1"
+          }
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "cliui": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cliui/-/cliui-6.0.0.tgz",
+          "integrity": "sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==",
+          "requires": {
+            "string-width": "^4.2.0",
+            "strip-ansi": "^6.0.0",
+            "wrap-ansi": "^6.2.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
+        },
+        "find-up": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
+          "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
+          "requires": {
+            "locate-path": "^5.0.0",
+            "path-exists": "^4.0.0"
+          }
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ=="
+        },
+        "locate-path": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
+          "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
+          "requires": {
+            "p-locate": "^4.1.0"
+          }
+        },
+        "p-locate": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
+          "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
+          "requires": {
+            "p-limit": "^2.2.0"
+          }
+        },
+        "path-exists": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
+          "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="
+        },
+        "source-map": {
+          "version": "0.7.3",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
+          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ=="
+        },
+        "strip-ansi": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
+          "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+          "requires": {
+            "ansi-regex": "^5.0.0"
+          }
+        },
+        "supports-color": {
+          "version": "7.1.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.1.0.tgz",
+          "integrity": "sha512-oRSIpR8pxT1Wr2FquTNnGet79b3BWljqOuoW/h4oBhxJ/HUbX5nX6JSruTkvXDCFMwDPvsaTTbvMLKZWSy0R5g==",
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        },
+        "wrap-ansi": {
+          "version": "6.2.0",
+          "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz",
+          "integrity": "sha512-r6lPcBGxZXlIcymEu7InxDMhdW0KDxpLgoFLcguasxCaJ/SOIZwINatK9KY/tf+ZrlywOKU0UDj3ATXUBfxJXA==",
+          "requires": {
+            "ansi-styles": "^4.0.0",
+            "string-width": "^4.1.0",
+            "strip-ansi": "^6.0.0"
+          }
+        },
+        "yargs": {
+          "version": "15.1.0",
+          "resolved": "https://registry.npmjs.org/yargs/-/yargs-15.1.0.tgz",
+          "integrity": "sha512-T39FNN1b6hCW4SOIk1XyTOWxtXdcen0t+XYrysQmChzSipvhBO8Bj0nK1ozAasdk24dNWuMZvr4k24nz+8HHLg==",
+          "requires": {
+            "cliui": "^6.0.0",
+            "decamelize": "^1.2.0",
+            "find-up": "^4.1.0",
+            "get-caller-file": "^2.0.1",
+            "require-directory": "^2.1.1",
+            "require-main-filename": "^2.0.0",
+            "set-blocking": "^2.0.0",
+            "string-width": "^4.2.0",
+            "which-module": "^2.0.0",
+            "y18n": "^4.0.0",
+            "yargs-parser": "^16.1.0"
+          }
+        },
+        "yargs-parser": {
+          "version": "16.1.0",
+          "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-16.1.0.tgz",
+          "integrity": "sha512-H/V41UNZQPkUMIT5h5hiwg4QKIY1RPvoBV4XcjUbRM8Bk2oKqqyZ0DIEbTFZB0XjbtSPG8SAa/0DxCQmiRgzKg==",
+          "requires": {
+            "camelcase": "^5.0.0",
+            "decamelize": "^1.2.0"
+          }
+        }
+      }
+    },
     "source-map-resolve": {
       "version": "0.5.3",
       "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz",
@@ -14032,6 +14197,14 @@
         "inherits": "2"
       }
     },
+    "temp": {
+      "version": "0.9.1",
+      "resolved": "https://registry.npmjs.org/temp/-/temp-0.9.1.tgz",
+      "integrity": "sha512-WMuOgiua1xb5R56lE0eH6ivpVmg/lq2OHm4+LtT/xtEtPQ+sz6N3bBM6WZ5FvO1lO4IKIOb43qnhoc4qxP5OeA==",
+      "requires": {
+        "rimraf": "~2.6.2"
+      }
+    },
     "terser": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/terser/-/terser-4.6.3.tgz",

frontend-react/package.json

@@ -40,6 +40,7 @@
     "react-select": "^3.0.8",
     "react-super-responsive-table": "^5.1.1",
     "react-tweet-embed": "^1.2.2",
+    "source-map-explorer": "^2.3.1",
     "typescript": "^3.8.2",
     "use-query-params": "^0.6.0"
   },
@@ -47,7 +48,8 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "analyze": "source-map-explorer 'build/static/js/*.js'"
   },
   "eslintConfig": {
     "extends": "react-app"

frontend-react/public/index.html

@@ -10,10 +10,8 @@
     <link
       href="https://fonts.googleapis.com/css?family=Montserrat|Pacifico&display=swap"
       rel="stylesheet"
-      <link
-      rel="manifest"
-      href="%PUBLIC_URL%/manifest.json"
     />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>sendou.ink</title>
   </head>
   <body>

frontend-react/src/components/root/SideNavContent.tsx

@@ -1,5 +1,13 @@
-import React from "react"
-import { IconButton, useColorMode, Flex, List } from "@chakra-ui/core"
+import React, { useContext } from "react"
+import {
+  IconButton,
+  useColorMode,
+  Flex,
+  List,
+  ListIcon,
+  PseudoBox,
+  ListItem,
+} from "@chakra-ui/core"
 import { Link } from "@reach/router"
 import {
   FaTshirt,
@@ -19,16 +27,39 @@ import DividingBox from "../common/DividingBox"
 import { UserData } from "../../types"
 import ColorPicker from "./ColorPicker"
 import Error from "../common/Error"
+import MyThemeContext from "../../themeContext"
 
 const UserItem: React.FC<{ data?: UserData }> = ({ data }) => {
+  const { themeColorWithShade } = useContext(MyThemeContext)
   if (!data || !data.user) {
-    // prolly need to do href here
     return (
-      <NavItem
-        to="auth/discord"
-        Icon={FaSignInAlt}
-        title="Log in via Discord"
-      />
+      <List>
+        <ListItem>
+          <a href="/auth/discord">
+            <PseudoBox
+              mx={-2}
+              display="flex"
+              cursor="pointer"
+              px="2"
+              py="1"
+              transition="all 0.2s"
+              fontWeight="medium"
+              outline="none"
+              _focus={{ shadow: "outline" }}
+              _hover={{
+                transform: "translateX(2px)",
+              }}
+            >
+              <ListIcon
+                icon={FaSignInAlt}
+                color={themeColorWithShade}
+                size="1.5em"
+              />{" "}
+              Log in via Discord
+            </PseudoBox>
+          </a>
+        </ListItem>
+      </List>
     )
   }
 

frontend-react/src/utils/helperFunctions.ts

@@ -17,3 +17,11 @@ export function ordinal_suffix_of(i: number) {
   }
   return "th"
 }
+
+export function importAll(r: __WebpackModuleApi.RequireContext) {
+  const images: any = {}
+  r.keys().forEach(item => {
+    images[item.substring(6, item.length - 4)] = r(item)
+  })
+  return images
+}

package.json

@@ -4,10 +4,11 @@
   "description": "",
   "main": "index.js",
   "scripts": {
-    "start": "cross-env LOGGED_IN=TRUE node index.js",
+    "start": "node index.js",
     "withprod": "cross-env LOGGED_IN=TRUE USE_PRODUCTION_DB=TRUE node index.js",
-    "loggedout": "node index.js",
-    "watch": "cross-env LOGGED_IN=TRUE nodemon index.js",
+    "withdev": "cross-env LOGGED_IN=TRUE node index.js",
+    "watchdev": "cross-env LOGGED_IN=TRUE nodemon index.js",
+    "watchprod": "cross-env LOGGED_IN=TRUE USE_PRODUCTION_DB=TRUE nodemon index.js",
     "build": "cd frontend-react && npm install && npm run build && mv build ../build",
     "testbuild": "rmdir /s /q build && cd frontend-react && npm run build && move build ../build"
   },