feat(images): add initial brand assets

Add the official @nodewell/brand package with image and color assets.
Update webpack to handle images.
Add brand assets in the <header>.

Author: richrdkng

package-lock.json

@@ -26,12 +26,18 @@
     "url": "https://github.com/nodewell/website/issues"
   },
   "homepage": "https://github.com/nodewell/website#readme",
+  "config": {
+    "commitizen": {
+      "path": "./node_modules/cz-conventional-changelog"
+    }
+  },
   "devDependencies": {
     "@babel/core": "^7.4.3",
     "@babel/preset-env": "^7.4.3",
     "@fortawesome/fontawesome-svg-core": "^1.2.17",
     "@fortawesome/free-brands-svg-icons": "^5.8.1",
     "@fortawesome/free-solid-svg-icons": "^5.8.1",
+    "@nodewell/brand": "^1.1.4",
     "@semantic-release/changelog": "^3.0.2",
     "@semantic-release/commit-analyzer": "^6.1.0",
     "@semantic-release/exec": "^3.3.2",
@@ -42,6 +48,7 @@
     "@types/jquery": "^3.3.29",
     "@types/node": "^11.13.0",
     "babel-loader": "^8.0.5",
+    "bootstrap": "^4.3.1",
     "commitizen": "^3.0.7",
     "css-loader": "^2.1.1",
     "cz-conventional-changelog": "^2.1.0",
@@ -50,14 +57,17 @@
     "directory-exists": "^2.0.1",
     "execa": "^1.0.0",
     "fast-glob": "^2.2.6",
+    "file-loader": "^3.0.1",
     "gulp": "^4.0.0",
     "handlebars": "^4.1.1",
     "handlebars-loader": "^1.7.1",
     "html-webpack-plugin": "^3.2.0",
     "is-travis": "^2.0.0",
+    "jquery": "^3.3.1",
     "lodash": "^4.17.11",
     "mini-css-extract-plugin": "^0.5.0",
     "node-sass": "^4.11.0",
+    "popper.js": "^1.15.0",
     "sass-loader": "^7.1.0",
     "semantic-release": "^15.13.3",
     "semver": "^6.0.0",
@@ -66,15 +76,5 @@
     "webpack": "^4.29.6",
     "webpack-cli": "^3.3.0",
     "webpack-dev-server": "^3.2.1"
-  },
-  "config": {
-    "commitizen": {
-      "path": "./node_modules/cz-conventional-changelog"
-    }
-  },
-  "dependencies": {
-    "bootstrap": "^4.3.1",
-    "jquery": "^3.3.1",
-    "popper.js": "^1.15.0"
   }
 }

package.json

@@ -1,8 +1,19 @@
 <header>
   <nav class="navbar navbar-expand-sm navbar-light bg-light">
     <a class="navbar-brand mr-auto" href="#">
-      <img src="https://getbootstrap.com/docs/4.3/assets/brand/bootstrap-solid.svg" width="30" height="30" class="d-inline-block align-top" alt="">
-      nodewell
+      <img
+        class="d-block d-sm-none align-top"
+        src="assets/images/logo.svg"
+        width="auto"
+        height="60"
+        alt="">
+
+      <img
+        class="d-none d-sm-inline-block align-top"
+        src="assets/images/github-lead.svg"
+        width="auto"
+        height="60"
+        alt="">
     </a>
 
     {{!-- <div class="collapse navbar-collapse" id="navbarNav">

src/markup/body/header.hbs

@@ -0,0 +1,2 @@
+import '@nodewell/brand/dist/logo.svg'
+import '@nodewell/brand/dist/github-lead.svg'

src/scripts/Assets/icons.js

@@ -1,2 +1,3 @@
-import './styles'
+import './icons'
 import './FontAwesome'
+import './styles'

src/scripts/Assets/index.js

@@ -10,11 +10,23 @@ module.exports = {
   output: {
     path: data.path.build,
     publicPath: '/',
-    filename: 'bundle.js'
+    filename: 'assets/scripts.js'
   },
   devtool: 'source-map',
   module: {
     rules: [
+      // Image processing
+      {
+        test: /\.(png|jpg|gif|svg)$/,
+        use: [
+          {
+            loader: 'file-loader',
+            options: {
+              name: 'assets/images/[name].[ext]'
+            }
+          }
+        ]
+      },
       // Markup processing
       {
         test: /\.hbs$/,
@@ -60,7 +72,7 @@ module.exports = {
       templateParameters: data,
       filename: path.join(data.path.build, '/index.html')
     }),
-    new MiniCssExtractPlugin({ filename: 'styles.css' })
+    new MiniCssExtractPlugin({ filename: 'assets/styles.css' })
   ],
   devServer: {
     contentBase: data.path.build,