Favicon support

Ives van Hoorne · Ives van Hoorne · commit 00b3e8810f58 · 2017-03-28T01:52:22.000+02:00
diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -109,15 +109,6 @@ const config = {
           name: 'favicon.ico?[hash:8]',
         },
       },
-      // A special case for robots.txt to place it into build root directory.
-      {
-        test: /\/robots.txt$/,
-        include: [paths.src],
-        loader: 'file-loader',
-        options: {
-          name: 'robots.txt?[hash:8]',
-        },
-      },
       // "url" loader works just like "file" loader but it also embeds
       // assets smaller than specified size as data URLs to avoid requests.
       {
diff --git a/package.json b/package.json
@@ -66,6 +66,7 @@
     "babel-plugin-transform-decorators-legacy": "^1.3.4",
     "babel-plugin-transform-remove-strict-mode": "^0.0.2",
     "babel-standalone": "^6.21.1-0",
+    "base64-loader": "^1.0.0",
     "codemirror": "^5.22.0",
     "color": "^0.11.4",
     "cssnano": "^3.10.0",
diff --git a/src/app/components/Switch.js b/src/app/components/Switch.js
@@ -11,7 +11,7 @@ const Container = styled.div`
   transition: 0.3s ease all;
   position: relative;
   background-color: ${getColor};
-  width: 3.5rem;
+  width: ${({ small }) => small ? 3 : 3.5}rem;
   color: rgba(0,0,0,0.5);
   border: 1px solid rgba(0,0,0,.1);
   padding: 0.5rem;
@@ -35,7 +35,8 @@ const Dot = styled.div`
   width: 1rem;
   left: 0.1rem;
   border-radius: 4px;
-  transform: translateX(${props => props.right ? 'calc(2rem + 2px)' : '0'});
+  transform: translateX(${props =>
+  props.right ? props.small ? 'calc(1.5rem + 2px)' : 'calc(2rem + 2px)' : '0'});
   top: ${({ small }) => small ? `calc(0.1rem + 1px)` : `calc(0.1rem)`};
   background-color: white;
   box-shadow: 0 0 4px rgba(0,0,0,0.2);
diff --git a/src/app/store/entities/sandboxes/create-zip.js b/src/app/store/entities/sandboxes/create-zip.js
@@ -7,6 +7,39 @@ import type { Module } from './modules/entity';
 import type { Directory } from './directories/entity';
 
 import README from './README.md';
+import favicon from '!base64-loader!./favicon.ico';
+
+const HTML = `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
+    <!--
+      Notice the use of %PUBLIC_URL% in the tag above.
+      It will be replaced with the URL of the \`public\` folder during the build.
+      Only files inside the \`public\` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running \`npm run build\`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run \`npm start\`.
+      To create a production bundle, use \`npm run build\`.
+    -->
+  </body>
+</html>`;
 
 function slugify(text) {
   const a = 'àáäâèéëêìíïîòóöôùúüûñçßÿœæŕśńṕẃǵǹḿǘẍźḧ·/_,:;';
@@ -83,6 +116,13 @@ export default (async function createZip(
     .filter(x => x.directoryShortid == null)
     .forEach(x => createDirectoryWithFiles(modules, directories, x, src));
 
+  const publicFolder = zip.folder('public');
+  publicFolder.file('index.html', HTML);
+
+  publicFolder.file('favicon.ico', favicon, {
+    base64: true,
+  });
+
   if (
     !modules.find(x => x.directoryShortid == null && x.title === 'README.md')
   ) {
diff --git a/src/app/store/entities/sandboxes/favicon.ico b/src/app/store/entities/sandboxes/favicon.ico
diff --git a/yarn.lock b/yarn.lock
@@ -942,6 +942,10 @@ base64-js@^1.0.2:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"
 
+base64-loader@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base64-loader/-/base64-loader-1.0.0.tgz#e530bad88e906dd2a1fad0af2d9e683fa8bd92a8"
+
 batch@0.5.3:
   version "0.5.3"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.5.3.tgz#3f3414f380321743bfc1042f9a83ff1d5824d464"
