Merge pull request #65 from bstaruk/develop

2.5.0

.eslintrc.js

@@ -8,7 +8,7 @@ const prettierOptions = JSON.parse(
 module.exports = {
   parser: 'babel-eslint',
   extends: ['airbnb-base', 'prettier'],
-  plugins: ['import', 'prettier'],
+  plugins: ['prettier', 'import'],
   rules: {
     'prettier/prettier': ['error', prettierOptions],
     'no-use-before-define': 0,
@@ -18,6 +18,7 @@ module.exports = {
     document: true,
     window: true,
     location: true,
+    fetch: true,
   },
   settings: {
     'import/resolver': {

README.md

@@ -124,8 +124,7 @@ You may see an info log entry in your console from `offline-plugin` while using
 
 1. in `/package.json`, remove the `offline-plugin` dependency
 2. in `/webpack/webpack.config.base.js`, remove all references to `OfflinePlugin` and/or `offline-plugin`
-3. in `/src/app.js`, remove the `import` statement that references `offline-plugin`
-4. delete `/src/app/lib/offline-plugin.js`
+3. in `/src/app.js`, remove the `import` statement for `offline-plugin`, and the code at the bottom of the file that references it
 
 _There is no consequence to removing this feature, besides limiting offline access to your project._
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "starbase",
-  "version": "2.4.0",
+  "version": "2.5.0",
   "author": "Brian Staruk <[email protected]>",
   "contributors": [
     {
@@ -24,29 +24,30 @@
   },
   "main": "index.js",
   "scripts": {
-    "build": "webpack --config ./webpack/webpack.config.prod.js --mode production",
-    "start": "webpack-dev-server --config ./webpack/webpack.config.dev.js --mode development"
+    "build": "cross-env NODE_ENV=production webpack --config ./webpack/webpack.config.prod.js",
+    "start": "cross-env NODE_ENV=develop webpack-dev-server --config ./webpack/webpack.config.dev.js"
   },
   "keywords": [],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "^7.11.1",
+    "@babel/core": "^7.11.4",
     "@babel/preset-env": "^7.11.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "clean-webpack-plugin": "^3.0.0",
+    "cross-env": "^7.0.2",
     "css-loader": "^4.2.1",
     "css-mqpacker": "^7.0.0",
     "cssnano": "^4.1.10",
-    "eslint": "^7.6.0",
+    "eslint": "^7.7.0",
     "eslint-config-airbnb-base": "^14.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-import-resolver-webpack": "^0.12.2",
     "eslint-loader": "^4.0.2",
     "eslint-plugin-import": "^2.22.0",
     "eslint-plugin-prettier": "^3.1.4",
     "file-loader": "^6.0.0",
-    "html-loader": "^1.1.0",
+    "html-loader": "^1.2.1",
     "html-webpack-plugin": "^4.3.0",
     "mini-css-extract-plugin": "^0.10.0",
     "offline-plugin": "^5.0.7",
@@ -67,7 +68,7 @@
     "webpack": "^4.44.1",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.0",
-    "webpack-merge": "^5.1.1"
+    "webpack-merge": "^5.1.2"
   },
   "dependencies": {
     "es6-promise": "^4.2.8",

src/app.css

@@ -1,8 +1,11 @@
 /* ordered css @imports */
-@import 'lib/fonts/fonts';
+@import 'fonts/fonts';
 @import 'css/root';
 
 /* all other (alphabetical) css imports */
 @import 'css/footer';
 @import 'css/header';
+@import 'css/heading';
+@import 'css/link';
 @import 'css/rich-text';
+@import 'css/repo-details';

src/app.js

@@ -1,12 +1,29 @@
-// offline-plugin
-import '@lib/offline-plugin';
+import * as OfflinePluginRuntime from 'offline-plugin/runtime';
+
+// fetch & promise polyfills (comment-out if not needed)
+import 'es6-promise/auto';
+import 'whatwg-fetch';
 
 // styles
-import '@src/app.css';
+import 'app.css';
 
-// fetch & promise polyfills (comment-out if not needed)
-// require('es6-promise').polyfill();
-// require('whatwg-fetch');
+// js components
+import RepoDetails from 'js/RepoDetails';
 
 // remove .no-js from html tag
 document.querySelector('html').classList.remove('no-js');
+
+// initialize RepoDetails component
+const repoDetailsWrapper = document.getElementById('repo-details');
+if (repoDetailsWrapper) {
+  RepoDetails({ el: repoDetailsWrapper });
+}
+
+// run offline plugin last (skip for dev)
+if (process.env.NODE_ENV === 'production') {
+  OfflinePluginRuntime.install({
+    onUpdateReady: () => {
+      OfflinePluginRuntime.applyUpdate();
+    },
+  });
+}

src/css/_variables.css

@@ -1,15 +1,18 @@
 :root {
-  /* theme colors (http://chir.ag/projects/name-that-color/) */
+  /* theme colors */
   --color-white: #fefefe;
   --color-silver: #ccc;
-  --color-gray: #888;
-  --color-mine-shaft: #333;
-  --color-mariner: #2472be;
-  --color-picton-blue: #23a5f0;
+  --color-grey: #888;
+  --color-dark-grey: #333;
+  --color-red: #cc283d;
+  --color-orange: #ee763a;
+  --color-green: #2ba667;
+  --color-blue: #2472be;
+  --color-purple: #861bbb;
 
   /* typography */
-  --font-sans: 'PT Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  --font-serif: 'PT Serif', Palatino, 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', Georgia, serif;
+  --font-sans: 'PT Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
+  --font-serif: 'PT Serif', 'Palatino', 'Palatino Linotype', 'Palatino LT STD', 'Book Antiqua', 'Georgia', serif;
 
   /* dimensions */
   --body-width-max: 48rem; /* 768/16 */