Merge pull request #40 from eecs485staff/hotfix/print-preview-chrome

[Hotfix] Un-garble print previews in Chrome

.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

.gitignore

@@ -8,3 +8,4 @@ assets/**/*.html
 assets/**/*.md
 
 .DS_Store
+.jekyll-cache

VERSION

@@ -1 +1 @@
-1.1.0
+1.1.1

_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.)
 

jekyll-theme-primer-spec.gemspec

@@ -15,7 +15,7 @@ Gem::Specification.new do |s|
   s.platform      = Gem::Platform::RUBY
   s.license       = 'MIT'
 
-  s.add_dependency 'jekyll', '> 3.5', '< 5.0'
+  s.add_dependency 'jekyll', '> 3.5', '< 4.0'
   s.add_runtime_dependency 'jekyll-github-metadata', '~> 2.9'
   s.add_runtime_dependency 'jekyll-seo-tag', '~> 2.0'
   s.add_development_dependency 'html-proofer', '~> 3.0'

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

src_js/NodeManager.ts

@@ -92,6 +92,29 @@ export default class NodeManager {
     });
   }
 
+  /**
+   * HACK: Toggles italics in Chrome before printing.
+   * (See issue eecs485staff/primer-spec#38)
+   * @param isItalicsEnabled boolean indicating whether italics should be enabled
+   */
+  _toggleItalicsInChrome(isItalicsEnabled: boolean) {
+    const chromeVersion = Utilities.getChromeVersion();
+    if (chromeVersion === false || chromeVersion >= 82) {
+      return;
+    }
+
+    const all_italic_els =
+      'em, dfn, .text-italic, dt, .highlight .cm, .highlight .c1, ' +
+      '.highlight .cs, .highlight .cd, .highlight .ge, .primer-spec-toc-h4';
+    const font_style = isItalicsEnabled ? 'italic' : 'inherit';
+
+    const nodes: NodeListOf<HTMLElement> =
+      document.querySelectorAll(all_italic_els);
+    Array.from(nodes).map(el => {
+      el.style.fontStyle = font_style;
+    });
+  }
+
   /**
    * Register handler when page is previewed for printing. The handler hides
    * the sidebar and settings panes and restores them after the print preview
@@ -111,6 +134,7 @@ export default class NodeManager {
         should_undo_settings_toggle = true;
         this.settings.toggle();
       }
+      this._toggleItalicsInChrome(false);
     };
     const afterPrint = () => {
       if (should_undo_sidebar_toggle) {
@@ -121,6 +145,7 @@ export default class NodeManager {
         should_undo_settings_toggle = false;
         this.settings.toggle();
       }
+      this._toggleItalicsInChrome(true);
     };
     // Safari doesn't support onbeforeprint, etc.
     // So this is the "official" work-around for webkit.

src_js/Utilities.ts

@@ -9,4 +9,14 @@ export default class Utilities {
   static isSmallScreen() {
     return document.documentElement.clientWidth < 900;
   }
+
+  /**
+   * Return a number indicating the Chrome major version. Returns false if
+   * not Chrome.
+   */
+  static getChromeVersion () {
+    // Based on: https://stackoverflow.com/a/4900484/5868796
+    const raw = navigator.userAgent.match(/Chrom(e|ium)\/([0-9]+)\./);
+    return raw ? parseInt(raw[2], 10) : false;
+  }
 }

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