Migrate to webpack, scss, and hugo (#157)

.dockerignore

@@ -1,5 +1,10 @@
+data/webpack.json
+public
+static/js
+resources/
 node_modules
 .git
 dist
-*/target
+crate/target
+crate/pkg
 .cache

.gitignore

@@ -1,3 +1,7 @@
+data/webpack.json
+public
+static/js
+resources/
 dist/
 .cache
 

Dockerfile

@@ -3,8 +3,11 @@ FROM node
 # Install zopfli for a better gzip and sponge from moreutils
 RUN apt-get update && apt-get install -y moreutils zopfli && rm -rf /var/lib/apt/lists/*
 
+RUN curl -O -L https://github.com/gohugoio/hugo/releases/download/v0.68.3/hugo_extended_0.68.3_Linux-64bit.deb && \
+    dpkg -i hugo_extended_0.68.3_Linux-64bit.deb 
+
 # Install rust
-RUN set -eux; curl https://sh.rustup.rs -sSf | sh -s -- -y && \
+RUN set -eux; curl https://sh.rustup.rs -sSf | sh -s -- --profile minimal -y && \
   . ~/.cargo/env && \
   curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh -s
 
@@ -25,13 +28,9 @@ COPY . .
 # modify the source as else parcel will derive the same hash when only the
 # /crate directory has been modified.
 RUN set -eux; . ~/.cargo/env && \
-  ./assets/build-wasm.sh && \
-  ./assets/asset-pipeline.sh rl_wasm_bg.wasm src/worker.ts && \
-  ./assets/asset-pipeline.sh sample.replay src/components/LoadSample.tsx && \
   npm run build && \
-  rm dist/rl_wasm_bg.wasm dist/sample.replay && \
-  zopfli dist/*.js dist/*.wasm dist/*.css dist/*.html dist/*.png
+  find public -iname "*.js" -o -iname "*.wasm" -o -iname "*.html" -o -iname "*.png" -o -iname "*.replay" | xargs zopfli
 
 FROM nginx:stable-alpine
-COPY --from=0 /usr/src/rl-web/dist /usr/share/nginx/html
-COPY assets/nginx.conf /etc/nginx/conf.d/default.conf
+COPY --from=0 /usr/src/rl-web/public /usr/share/nginx/html
+COPY dev/nginx.conf /etc/nginx/conf.d/default.conf

README.md

@@ -13,7 +13,7 @@ feature rich analysis of replays, see [calculated.gg](https://calculated.gg/)
 
 ## Screenshot
 
-![Screenshot of web page](assets/rl-web-screenshot.png?raw=true)
+![Screenshot of web page](dev/rl-web-screenshot.png?raw=true)
 
 ## Goals
 

src/styles.css → assets/styles.scss

@@ -1,6 +1,6 @@
-@import url(sanitize.css);
-@import url(sanitize.css/typography.css);
-@import url(sanitize.css/forms.css);
+@import "sanitize.css/sanitize";
+@import "sanitize.css/typography";
+@import "sanitize.css/forms";
 
 :root {
   --rlBlue: #00179e;

azure-pipelines.yml

@@ -7,20 +7,22 @@ steps:
     displayName: Install rust
   - script: curl https://rustwasm.github.io/wasm-pack/installer/init.sh -sSf | sh
     displayName: Install wasm-pack
+  - script: |
+      curl -O -L https://github.com/gohugoio/hugo/releases/download/v0.68.3/hugo_extended_0.68.3_Linux-64bit.deb
+      sudo dpkg -i hugo_extended_0.68.3_Linux-64bit.deb 
+    displayName: Install hugo
   - script: npm ci
     displayName: Npm Install
-  - script: './assets/build-wasm.sh'
-    displayName: Build rust crate
+  - script: npm run build
+    displayName: Build app
   - script: 'wasm-pack test --node'
     workingDirectory: './crate'
     displayName: Test rust crate
-  - script: npm run type-check
-    displayName: Typescript check
   - script: npm run unit
     displayName: Unit Tests
   - script: npm test
     displayName: e2e tests
   - script: docker build .
     displayName: build docker image
-  - script: ./assets/wasm-size-check.sh
+  - script: ./dev/wasm-size-check.sh
     displayName: test wasm bundle size

config.toml

@@ -0,0 +1 @@
+disableKinds = ["taxonomy", "taxonomyTerm", "RSS", "sitemap"]

crate/tests/test.rs

@@ -1,7 +1,7 @@
 use rl_wasm::*;
 use wasm_bindgen_test::*;
 
-const REPLAY: &'static [u8] = include_bytes!("../../assets/3d07e.replay");
+const REPLAY: &'static [u8] = include_bytes!("../../dev/sample.replay");
 
 #[wasm_bindgen_test]
 fn test_parse_header() {

cypress/fixtures/no-stats.replay

@@ -1 +1 @@
-../../assets/no-stats.replay
+../../dev/no-stats.replay

cypress/fixtures/sample.replay

@@ -0,0 +1 @@
+../../dev/sample.replay

cypress/integration/app_spec.js

@@ -1,13 +1,13 @@
 describe('RL web tests', function() {
   it('replay 3d07e', function() {
-    cy.visit("http://localhost:1234");
+    cy.visit("http://localhost:1313");
     cy.contains("Rocket League Replay Parser");
-	cy.uploadFile("input[type=file]", '3d07e.replay');
+	cy.uploadFile("input[type=file]", 'sample.replay');
     cy.get('p.description').contains('On 12/8/2016, comagoosie, TheGoldenGarp, TrUeLiFe98 vs. Grim Reefer, Doomsayer2050, PUT YOUR WEIGHT ON IT in a 3v3 soccar match');
   })
 
   it('replay with no stats', function() {
-    cy.visit("http://localhost:1234");
+    cy.visit("http://localhost:1313");
     cy.contains("Rocket League Replay Parser");
 	cy.uploadFile("input[type=file]", 'no-stats.replay');
     cy.get('p.error').contains('Replay successfully parsed but no stats extracted');

assets/wasm-size-check.sh → dev/wasm-size-check.sh

@@ -1,5 +1,5 @@
 #!/bin/bash
 
-bytes=$(docker run --rm -i "$(docker build -q .)" find /usr/share/nginx/html -iname rl_wasm_bg-*.wasm -exec wc -c {} \; | cut -d " " -f1)
+bytes=$(docker run --rm -i "$(docker build -q .)" find /usr/share/nginx/html -iname *.wasm -exec wc -c {} \; | cut -d " " -f1)
 [[ $bytes -lt 1000 ]] && echo "wasm generated incorrectly" && exit 1
 echo "done"

src/index.html → layouts/index.html

@@ -5,11 +5,12 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" type="text/css" href="styles.css" />
-    <link rel="apple-touch-icon" sizes="180x180" href="../assets/apple-touch-icon.png">
-    <link rel="icon" type="image/png" sizes="32x32" href="../assets/favicon-32x32.png">
-    <link rel="icon" type="image/png" sizes="16x16" href="../assets/favicon-16x16.png">
-    <link rel="shortcut icon" href="../assets/favicon.ico">
+    {{ $opts := (dict "outputStyle" "compressed" "includePaths" (slice "node_modules")) }}
+    {{ $style := resources.Get "styles.scss" | toCSS $opts | fingerprint }}
+    <link rel="stylesheet" type="text/css" href="{{ $style.RelPermalink }}" />
+    <link rel="apple-touch-icon" sizes="180x180" href="{{ (resources.Get "apple-touch-icon.png" | fingerprint).RelPermalink }}">
+    <link rel="icon" type="image/png" sizes="32x32" href="{{ (resources.Get "favicon-32x32.png" | fingerprint).RelPermalink }}">
+    <link rel="icon" type="image/png" sizes="16x16" href="{{ (resources.Get "favicon-16x16.png" | fingerprint).RelPermalink }}">
     <title>Rocket League Replay Parser</title>
   </head>
   <body>
@@ -35,6 +36,6 @@ <h1>Rocket League Replay Parser</h1>
       <div id="app"/>
     </main>
     <div id="drag-hover" class="hover hidden"/>
-    <script src="./index.tsx"></script>
+    <script type="text/javascript" src="{{ .Site.Data.webpack.main.js | relURL }}"></script>
   </body>
 </html>