redpwn · ethanwu10 · Mar 28, 2020 · Mar 28, 2020 · Mar 28, 2020 · Mar 28, 2020
diff --git a/.gitignore b/.gitignore
@@ -27,3 +27,6 @@ $RECYCLE.BIN
 # nyc test runner
 /.nyc_output
 /coverage
+
+# preact-cli build size plugin
+size-plugin.json
diff --git a/.travis.yml b/.travis.yml
@@ -6,7 +6,7 @@ jobs:
   include:
     - name: "shellcheck"
       script:
-        - shellcheck client/*.sh install/*.sh
+        - shellcheck install/*.sh
     - name: "Test"
       services:
         - postgresql

diff --git a/client/build.sh b/client/build.sh
diff --git a/client/index.html b/client/index.html
@@ -1,15 +1,17 @@
-<!doctype html>
+<!DOCTYPE html>
 <html lang="en">
 	<head>
 		<meta charset="utf-8">
 		<title><%= htmlWebpackPlugin.options.view.ctfName %></title>
 		<meta name="viewport" content="width=device-width,initial-scale=1">
 		<meta name="mobile-web-app-capable" content="yes">
 		<meta name="apple-mobile-web-app-capable" content="yes">
+		<link rel="apple-touch-icon" href="./assets/icons/apple-touch-icon.png">
 		<link href="https://fonts.googleapis.com/css?family=Nunito+Sans:200,300,400,600,700" rel="stylesheet">
 		<link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
+		<% preact.headEnd %>
 	</head>
 	<body>
-    <script src="<%= htmlWebpackPlugin.options.view.assetsPrefix %><%= htmlWebpackPlugin.files.chunks['bundle'].entry %>"></script>
+		<% preact.bodyEnd %>
 	</body>
 </html>
diff --git a/public/static/logo-256.png → client/src/assets/logo-256.png b/public/static/logo-256.png → client/src/assets/logo-256.png
diff --git a/client/src/components/modal.js b/client/src/components/modal.js
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'preact/hooks'
+import { createPortal } from 'preact/compat'
 import withStyles from './jss'
 
 const ANIMATION_DURATION = 150
@@ -31,16 +32,14 @@ function Modal ({
     }
   }, [open, onClose])
 
-  // For some reason unmounting portals causes Preact to crash, so just don't
-  // render the modal in a portal as Cirrus already applies styles to make the
-  // modal appear over everything from anywhere in the tree.
-  return (open || isLinger) &&
+  return (open || isLinger) && createPortal((
     <div class={`modal shown ${classes.animated}${open ? '' : ' leaving'}`} hidden={!(open || isLinger)}>
       <div class='modal-overlay' onClick={onClose} aria-label='Close' />
       <div class='modal-content' role='document'>
         {children}
       </div>
     </div>
+  ), document.body)
 }
 
 const ANIMATION_INITIAL_SCALE = 0.8

diff --git a/client/static/icons/address-book.svg → client/src/icons/address-book.svg b/client/static/icons/address-book.svg → client/src/icons/address-book.svg
diff --git a/client/static/icons/envelope-open.svg → client/src/icons/envelope-open.svg b/client/static/icons/envelope-open.svg → client/src/icons/envelope-open.svg
diff --git a/client/static/icons/id-card.svg → client/src/icons/id-card.svg b/client/static/icons/id-card.svg → client/src/icons/id-card.svg
diff --git a/client/static/icons/rank.svg → client/src/icons/rank.svg b/client/static/icons/rank.svg → client/src/icons/rank.svg
diff --git a/client/static/icons/trophy.svg → client/src/icons/trophy.svg b/client/static/icons/trophy.svg → client/src/icons/trophy.svg
diff --git a/client/static/icons/user-circle.svg → client/src/icons/user-circle.svg b/client/static/icons/user-circle.svg → client/src/icons/user-circle.svg
diff --git a/client/src/index.js b/client/src/index.js
@@ -5,9 +5,19 @@ import 'regenerator-runtime/runtime'
 import { Component } from 'preact'
 import config from '../../config/client'
 
-import Header from './components/header'
-import { Home, Registration, Login, Profile, Challenges, Scoreboard, Error, Sponsors, Verify, Logout } from './pages'
 import 'cirrus-ui'
+import Header from './components/header'
+
+import Home from './routes/home'
+import Registration from './routes/registration'
+import Login from './routes/login'
+import Profile from './routes/profile'
+import Challenges from './routes/challenges'
+import Scoreboard from './routes/scoreboard'
+import Error from './routes/error'
+import Sponsors from './routes/sponsors'
+import Verify from './routes/verify'
+import Logout from './routes/logout'
 
 import { ToastProvider } from './components/toast'
 

diff --git a/client/src/pages/index.js b/client/src/pages/index.js
diff --git a/client/src/pages/challenges.js → client/src/routes/challenges.js b/client/src/pages/challenges.js → client/src/routes/challenges.js
diff --git a/client/src/pages/error.js → client/src/routes/error.js b/client/src/pages/error.js → client/src/routes/error.js
diff --git a/client/src/pages/home.js → client/src/routes/home.js b/client/src/pages/home.js → client/src/routes/home.js
diff --git a/client/src/pages/login.js → client/src/routes/login.js b/client/src/pages/login.js → client/src/routes/login.js
@@ -5,7 +5,7 @@ import 'linkstate/polyfill'
 import withStyles from '../components/jss'
 
 import { login } from '../api/auth'
-import IdCard from '../../static/icons/id-card.svg'
+import IdCard from '../icons/id-card.svg'
 import { route } from 'preact-router'
 
 export default withStyles({

diff --git a/client/src/pages/logout.js → client/src/routes/logout.js b/client/src/pages/logout.js → client/src/routes/logout.js
diff --git a/client/src/pages/profile.js → client/src/routes/profile.js b/client/src/pages/profile.js → client/src/routes/profile.js
@@ -9,10 +9,10 @@ import { withToast } from '../components/toast'
 import Form from '../components/form'
 import Modal from '../components/modal'
 import util from '../util'
-import Trophy from '../../static/icons/trophy.svg'
-import AddressBook from '../../static/icons/address-book.svg'
-import UserCircle from '../../static/icons/user-circle.svg'
-import Rank from '../../static/icons/rank.svg'
+import Trophy from '../icons/trophy.svg'
+import AddressBook from '../icons/address-book.svg'
+import UserCircle from '../icons/user-circle.svg'
+import Rank from '../icons/rank.svg'
 
 const divisionMap = new Map()
 
@@ -112,28 +112,13 @@ class Profile extends Component {
     })
   }
 
-  componentDidMount () {
-    document.title = `Profile${config.ctfTitle}`
-  }
-
   isPrivate () {
     const { uuid } = this.props
 
     return uuid === undefined || uuid === 'me'
   }
 
-  static getDerivedStateFromProps (props, state) {
-    if (props.uuid !== state.uuid) {
-      return {
-        uuid: props.uuid,
-        error: undefined,
-        loaded: false
-      }
-    }
-    return null
-  }
-
-  componentDidUpdate () {
+  maybeFetchData () {
     if (!this.state.loaded) {
       const { uuid } = this.state
 
@@ -161,6 +146,26 @@ class Profile extends Component {
     }
   }
 
+  static getDerivedStateFromProps (props, state) {
+    if (props.uuid !== state.uuid) {
+      return {
+        uuid: props.uuid,
+        error: undefined,
+        loaded: false
+      }
+    }
+    return null
+  }
+
+  componentDidMount () {
+    document.title = `Profile${config.ctfTitle}`
+    this.maybeFetchData()
+  }
+
+  componentDidUpdate () {
+    this.maybeFetchData()
+  }
+
   handleUpdate = e => {
     e.preventDefault()
 

diff --git a/client/src/pages/registration.js → client/src/routes/registration.js b/client/src/pages/registration.js → client/src/routes/registration.js
@@ -5,8 +5,8 @@ import 'linkstate/polyfill'
 import withStyles from '../components/jss'
 
 import { register } from '../api/auth'
-import UserCircle from '../../static/icons/user-circle.svg'
-import EnvelopeOpen from '../../static/icons/envelope-open.svg'
+import UserCircle from '../icons/user-circle.svg'
+import EnvelopeOpen from '../icons/envelope-open.svg'
 
 export default withStyles({
   root: {

diff --git a/client/src/pages/scoreboard.js → client/src/routes/scoreboard.js b/client/src/pages/scoreboard.js → client/src/routes/scoreboard.js
@@ -158,7 +158,7 @@ const Scoreboard = withStyles({
                   return (
                     <tr key={id}
                       class={isSelf ? classes.selected : ''}
-                      ref={isSelf && selfRow}
+                      ref={isSelf ? selfRow : null}
                     >
                       <td>{rank}</td>
                       <td>

diff --git a/client/src/pages/sponsors.js → client/src/routes/sponsors.js b/client/src/pages/sponsors.js → client/src/routes/sponsors.js
diff --git a/client/src/pages/verify.js → client/src/routes/verify.js b/client/src/pages/verify.js → client/src/routes/verify.js
diff --git a/public/favicon.ico → client/src/static/favicon.ico b/public/favicon.ico → client/src/static/favicon.ico
diff --git a/public/security.txt → client/src/static/security.txt b/public/security.txt → client/src/static/security.txt
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "lint": "tsc --noEmit && eslint --ext .js,.ts .",
     "start": "node dist/server/index.js",
     "migrate": "node-pg-migrate --database-url-var=RCTF_DATABASE_URL",
-    "build:client": "sh client/build.sh",
+    "build:client": "preact build --src client/src --template client/index.html --dest dist/build --no-prerender",
     "build:ts": "tsc && yarn copy-static",
     "build": "yarn build:ts && yarn build:client",
     "watch:client": "preact watch --src client/src --template client/index.html",
@@ -69,11 +69,11 @@
     "nodemon": "^2.0.2",
     "nyc": "^15.0.0",
     "preact": "^10.3.1",
-    "preact-cli": "^2.2.1",
+    "preact-cli": "^3.0.0-rc.10",
     "preact-router": "^3.2.1",
     "preact-svg-loader": "^0.2.1",
     "promise-polyfill": "^8.1.3",
-    "purgecss-webpack-plugin": "0.23.0",
+    "purgecss-webpack-plugin": "^2.1.0",
     "regenerator-runtime": "^0.13.3",
     "supertest": "^4.0.2",
     "typescript": "^3.8.3",

diff --git a/preact.config.js b/preact.config.js
@@ -1,40 +1,44 @@
 require('dotenv').config()
-const config = require('./config/server')
-// The webpack base config has minicssextractplugin already loaded
-const path = require('path')
+const appCfg = require('./config/server')
+
 const glob = require('glob')
+
 const PurgecssPlugin = require('purgecss-webpack-plugin')
 
-export default (webpackConfig, env, helpers) => {
-  if (env.ssr) {
-    return
-  }
+export default (config, env, helpers) => {
   if (env.production) {
-    // Remove comment to disable sourcemaps
-    // webpackConfig.devtool = false
+    // Disable sourcemaps
+    config.devtool = false
+  } else {
+    config.devServer.proxy = {
+      '/api': 'http://localhost:3000'
+    }
   }
-  webpackConfig.plugins.push(
-    new PurgecssPlugin(
-      {
-        paths: glob.sync(path.join(__dirname, 'client/src/**/*'), { nodir: true })
-      }
-    ))
+
+  // The webpack base config has minicssextractplugin already loaded
+  config.plugins.push(
+    new PurgecssPlugin({
+      paths: glob.sync(env.source('**/*'), { nodir: true })
+    })
+  )
+
   // Remove .svg from preconfigured webpack file-loader
-  const fileLoader = helpers.getLoadersByName(webpackConfig, 'file-loader')
+  const fileLoader = helpers.getLoadersByName(config, 'file-loader')
   fileLoader.map(entry => { entry.rule.test = /\.(woff2?|ttf|eot|jpe?g|png|gif|mp4|mov|ogg|webm)(\?.*)?$/i })
 
-  const urlLoader = helpers.getLoadersByName(webpackConfig, 'url-loader')
+  const urlLoader = helpers.getLoadersByName(config, 'url-loader')
   urlLoader.map(entry => { entry.rule.test = /\.(woff2?|ttf|eot|jpe?g|png|gif|mp4|mov|ogg|webm)(\?.*)?$/i })
 
-  webpackConfig.module.loaders.push(
-    {
-      test: /\.svg$/,
-      loader: ['preact-svg-loader']
+  config.module.rules.push({
+    test: /\.svg$/,
+    loader: 'preact-svg-loader'
+  })
+
+  const HtmlWebpackPluginWrapper = helpers.getPluginsByName(config, 'HtmlWebpackPlugin')[0]
+  if (HtmlWebpackPluginWrapper !== undefined) {
+    const HtmlWebpackPlugin = HtmlWebpackPluginWrapper.plugin
+    HtmlWebpackPlugin.options.view = {
+      ctfName: appCfg.ctfName
     }
-  )
-  const { plugin } = helpers.getPluginsByName(webpackConfig, 'HtmlWebpackPlugin')[0]
-  plugin.options.view = {
-    assetsPrefix: env.production ? '/static' : '',
-    ctfName: config.ctfName
   }
 }