Cherry-pick #33 from eecs485staff/enhancement/pr-preview

Author: seshrs

.githooks/pre-commit

@@ -10,5 +10,5 @@ PROJECT_ROOT=`dirname $GITHOOKS_DIR`
 
 set -x
 
-npx webpack --env prod
+npx webpack --env.production
 git add $PROJECT_ROOT/assets/js/primer_spec_plugin.min.js

_layouts/spec.html

@@ -8,6 +8,9 @@
         <!-- BEGIN CUSTOM SPEC CODE -->
         {% if jekyll.environment == "dev" %}
             {% assign base_url = "http://localhost:4000" %}
+        {% elsif jekyll.environment == "site-preview" %}
+            {% assign url_size = site.url | size | minus: 1 %}    
+            {% assign base_url = site.url | slice: 0, url_size %}
         {% else %}
             {% assign base_url = "https://eecs485staff.github.io/primer-spec" %}
         {% endif %}

index.md

@@ -11,8 +11,6 @@ Due: ~~8pm, Apr 1, 2019~~ **Anytime!**  _This is an individual project._
 # Introduction
 In Computer Science courses, project specifications tend to get [really](https://web.archive.org/web/20180425010014/https://eecs485staff.github.io/p3-insta485-clientside/) [long](https://web.archive.org/web/20190424183409/https://eecs280staff.github.io/p3-euchre/). The intention for such a long document is good — they usually provide all the information that a student would need to successfully complete the project. However, this can also make it difficult for students to find information quickly — they often get lost in the document, and cannot easily find the information they need on the fly.
 
-<!-- <img src="https://gdurl.com/npWU" alt="Infinite scroll..." height="250"/> -->
-
 | <img src="https://media.giphy.com/media/vvWhQsVAFkyisScAsM/200w_d.gif" alt="Infinite scroll..." height="150"/> |
 |:--:| 
 | _Infinite scroll..._ |
@@ -74,7 +72,7 @@ $ python3 -m http.server
 
 Visit [http://localhost:8000](http://localhost:8000) on your web browser. The page should look similar to this screenshot:
 
-<img src="https://gdurl.com/1Kq10" height="250" alt="project page without sidebar" />
+<img src="https://drive.google.com/uc?export=view&id=1Kplxw_Eb7343xLFGXTcpjNpsay9GraMe" height="250" alt="project page without sidebar" />
 
 The spec already looks pretty good, but it could certainly be improved with a sidebar.
 
@@ -83,7 +81,7 @@ In this section, you will add a sidebar to the HTML page and hard-code its conte
 
 When you're done with this section, your webpage will have a sidebar on the left, something like this screenshot:
 
-<img src="https://gdurl.com/zJi1" height="250" alt="project page with sidebar" />
+<img src="https://drive.google.com/uc?export=view&id=1_QPsSGlXKjfqY-3TUbsXej5isOZypK7U" height="250" alt="project page with sidebar" />
 
 Of course, _your_ finished webpage doesn't have to look like this. After all, this project isn't autograded! (In fact, feel free to showcase your project spec design with us! Create an issue on [our GitHub repository](https://github.com/eecs485staff/primer-spec/issues) with a screenshot of your design.)
 

script/build

@@ -3,5 +3,5 @@
 
 set -e
 
-npx webpack --env dev
+npx webpack
 JEKYLL_ENV=dev bundle exec jekyll build

script/ci-site-preview-build

@@ -0,0 +1,14 @@
+#!/bin/sh
+# Build a preview of the theme, only to be used in conjunction with
+# Primer Spec Preview.
+
+set -e
+
+if [ "$#" != 1 ]; then
+  echo "Usage: $0 BASE_URL"
+  exit 1
+fi
+BASE_URL="$1"
+
+npx webpack --env.base_url="$BASE_URL"
+JEKYLL_ENV=site-preview bundle exec jekyll build

script/cibuild

@@ -2,7 +2,7 @@
 
 set -e
 
-npx webpack --env prod
+npx webpack --env.production
 JEKYLL_ENV=prod bundle exec jekyll build
 bundle exec htmlproofer ./_site --check-html --url-ignore "/web.archive.org/,/localhost/"
 bundle exec rubocop -D

script/server

@@ -7,7 +7,7 @@ set -e
 # command in the background is killed also.
 # Based on https://unix.stackexchange.com/a/204619
 trap 'kill %1' SIGINT
-npx webpack --env dev --watch &
+npx webpack --watch &
 JEKYLL_ENV=dev bundle exec jekyll serve
 # Finally, undo the trap.
 trap - SIGINT

webpack.config.js

@@ -27,8 +27,26 @@ const DEV_URL = 'http://localhost:4000';
 const PROD_URL = 'https://eecs485staff.github.io/primer-spec';
 const VERSION = fs.readFileSync(path.resolve(__dirname, 'VERSION'), 'utf-8');
 
+function getBaseURL(env) {
+  let base_url;
+  if (env && env.production) {
+    base_url = PROD_URL;
+  }
+  else if (env && env.base_url && typeof env.base_url === 'string') {
+    base_url = env.base_url;
+    if (base_url.endsWith('/')) {
+      base_url = base_url.slice(0, -1);
+    }
+  }
+  else {
+    base_url = DEV_URL;
+  }
+  console.log(`Using base URL: ${base_url}`);
+  return base_url;
+}
+
 module.exports = env => ({
-  mode: env === PROD_ENV ? 'production' : 'development',
+  mode: (env && env.production) ? 'production' : 'development',
   context: path.resolve(__dirname, 'src_js/'),
   entry: './main.ts',
   output: {
@@ -65,7 +83,7 @@ module.exports = env => ({
             options: {
                 data: {
                     // These variables are passed to the liquid templates.
-                    'base_url': env === PROD_ENV ? PROD_URL : DEV_URL,
+                    'base_url': getBaseURL(env),
                     'primer_spec_version': VERSION,
                 }
             }
@@ -87,7 +105,7 @@ module.exports = env => ({
     // These variables become available in any file
     new webpack.DefinePlugin({
       'process.env.AVAILABLE_SUBTHEMES': `'${AVAILABLE_SUBTHEMES}'`,
-      'process.env.BASE_URL': `'${env === PROD_ENV ? PROD_URL : DEV_URL}'`,
+      'process.env.BASE_URL': `'${getBaseURL(env)}'`,
     }),
   ],
   // Minimize output