feat(favicon): change default favicon, handle custom favicon

nogizhopaboroda · nogizhopaboroda · commit 0c7d010a9484 · 2018-08-29T15:10:32.000+02:00
diff --git a/README.md b/README.md
@@ -192,13 +192,19 @@ module.exports = [
 ]
 ```
 
+
 #### Use cases
 
 - Mock ajax calls
 - Redirect ajax calls to another endpoint
 - Base authorisation
 - etc
 
+
+### `favicon.ico`
+
+Custom project icon
+
 ----
 
 ## Addons
diff --git a/build_storybook.js b/build_storybook.js
@@ -7,7 +7,7 @@ const path = require('path');
 const fs = require('fs');
 
 const customFs = require('./lib/fs');
-const { CUSTOM_PREVIEW_HEADER } = require('./config').paths;
+const { CUSTOM_PREVIEW_HEADER, FAVICON_FILE, FALLBACK_FAVICON_FILE } = require('./config').paths;
 
 const getWebpackConfig = require('./lib/get_webpack_config');
 
@@ -27,7 +27,8 @@ program
 Promise.all([
   customFs.readFile(CUSTOM_PREVIEW_HEADER),
   getWebpackConfig(),
-]).then(([header, webpackConfig]) => {
+  customFs.checkFile(FAVICON_FILE),
+]).then(([header, webpackConfig, faviconFileExists]) => {
   if (program.output) {
     if (!fs.existsSync(program.output)) {
       // Make output Directory
@@ -61,6 +62,11 @@ Promise.all([
       assets: [].concat(statsJson.assetsByChunkName.preview).map(asset => `${statsJson.publicPath}${asset}`),
     }));
 
+    customFs.copyFile(
+      faviconFileExists ? FAVICON_FILE : FALLBACK_FAVICON_FILE,
+      path.resolve(BUILD_DIR, 'favicon.ico')
+    );
+
   });
 }).catch(console.log);
 
diff --git a/config.js b/config.js
@@ -45,5 +45,8 @@ module.exports = {
 
     MANAGER_APP: path.resolve(PROJECT_DIR, 'js/manager.js'),
     PREVIEW_APP: path.resolve(PROJECT_DIR, 'js/preview.js'),
+
+    FAVICON_FILE: path.resolve(TARGET_DIR, storiesConfig.storybookDir, 'favicon.ico'),
+    FALLBACK_FAVICON_FILE: path.resolve(PROJECT_DIR, 'favicon.ico'),
   }
 }
diff --git a/favicon.ico b/favicon.ico
diff --git a/lib/fs.js b/lib/fs.js
@@ -24,5 +24,14 @@ const saveFile = (file, content) => new Promise((resolve, reject) => {
   });
 });
 
+const copyFile = (source, target) => new Promise((resolve, reject) => {
+  fs.copyFile(source, target, (err) => {
+    if(err){
+      return reject(err);
+    }
+    resolve(true);
+  });
+});
+
 
-module.exports = { readFile, checkFile, saveFile };
+module.exports = { readFile, checkFile, saveFile, copyFile };
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "js-beautify": "^1.7.5",
     "modulor": "github:modulor-js/modulor",
     "path-to-regexp": "^2.1.0",
+    "serve-favicon": "^2.5.0",
     "split.js": "^1.3.5",
     "webpack-dev-middleware": "^3.1.2"
   },
diff --git a/server.js b/server.js
@@ -2,13 +2,14 @@
 
 const express = require('express');
 const webpack = require('webpack');
+const favicon = require('serve-favicon');
 const program = require('commander');
 const pack = require('./package');
 
 const customFs = require('./lib/fs');
 const getWebpackConfig = require('./lib/get_webpack_config');
 
-const { CUSTOM_PREVIEW_HEADER, MIDDLEWARES_FILE } = require('./config').paths;
+const { CUSTOM_PREVIEW_HEADER, MIDDLEWARES_FILE, FAVICON_FILE, FALLBACK_FAVICON_FILE } = require('./config').paths;
 
 const managerPageTemplate = require('./templates/manager_page.html');
 const previewPageTemplate = require('./templates/preview_page.html');
@@ -38,9 +39,15 @@ Promise.all([
   customFs.readFile(CUSTOM_PREVIEW_HEADER),
   getWebpackConfig(),
   customFs.checkFile(MIDDLEWARES_FILE),
-]).then(([header, webpackConfig, customMiddlewaresExist]) => {
+  customFs.checkFile(FAVICON_FILE),
+]).then(([header, webpackConfig, customMiddlewaresExist, faviconFileExists]) => {
   const compiler = webpack(webpackConfig);
 
+  if(faviconFileExists){
+    console.log('using custon favicon');
+  }
+  app.use(favicon(faviconFileExists ? FAVICON_FILE : FALLBACK_FAVICON_FILE));
+
   app.use(webpackMiddleware(compiler, {
     serverSideRender: true,
     stats: 'minimal',
diff --git a/templates/common.html.js b/templates/common.html.js
@@ -1,7 +1,7 @@
 module.exports = scope => `
     <html>
       <head>
-        <link rel="icon" href="//www.iconsdb.com/icons/download/black/square-dashed-16.ico" type="image/x-icon" />
+        <link rel="icon" href="favicon.ico" type="image/x-icon" />
         ${scope.headContent}
       </head>
       <body style="margin:0">

Original file line number	Diff line number	Diff line change
`@@ -45,5 +45,8 @@ module.exports = {`
`45`	`45`
`46`	`46`	`MANAGER_APP: path.resolve(PROJECT_DIR, 'js/manager.js'),`
`47`	`47`	`PREVIEW_APP: path.resolve(PROJECT_DIR, 'js/preview.js'),`
	`48`	`+`
	`49`	`+ FAVICON_FILE: path.resolve(TARGET_DIR, storiesConfig.storybookDir, 'favicon.ico'),`
	`50`	`+ FALLBACK_FAVICON_FILE: path.resolve(PROJECT_DIR, 'favicon.ico'),`
`48`	`51`	`}`
`49`	`52`	`}`