rebase onto Victor Hugo, update all the things 🎉

germs-at · Jul 16, 2019 · bde5fb5 · bde5fb5
1 parent c9dbff5
commit bde5fb5
Show file tree

Hide file tree

Showing 11 changed files with 3,452 additions and 13,436 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,7 +1,7 @@
 {
   "presets": [
     "@babel/preset-env",
-    "react"
+    "@babel/preset-react"
   ],
   "plugins": [
     "@babel/plugin-syntax-object-rest-spread",

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -26,6 +26,7 @@
     "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
     "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
     "@babel/preset-env": "^7.1.0",
+    "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
     "assets-webpack-plugin": "^3.9.7",
     "babel-eslint": "^10.0.1",
@@ -34,14 +35,17 @@
     "copy-webpack-plugin": "^5.0.0",
     "cross-env": "^5.2.0",
     "css-loader": "^3.0.0",
+    "date-fns": "^1.30.1",
     "eslint": "^6.0.0",
     "eslint-plugin-import": "^2.14.0",
     "exports-loader": "^0.7.0",
     "fancy-log": "^1.3.2",
     "file-loader": "^4.0.0",
-    "hugo-bin": "^0.37.0",
+    "html-webpack-plugin": "^3.2.0",
+    "hugo-bin": "^0.43.6",
     "imports-loader": "^0.8.0",
     "mini-css-extract-plugin": "^0.7.0",
+    "netlify-cms-app": "^2.9.6",
     "node-sass": "^4.10.0",
     "npm-run-all": "^4.1.5",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
@@ -52,15 +56,12 @@
     "rimraf": "^2.6.2",
     "sass-loader": "^7.1.0",
     "style-loader": "^0.23.1",
-    "uglifyjs-webpack-plugin": "^2.0.1",
+    "terser-webpack-plugin": "^1.3.0",
+    "to-string-loader": "^1.1.5",
     "url-loader": "^2.0.0",
     "webpack": "^4.25.1",
     "webpack-cli": "^3.1.2",
     "webpack-dev-server": "^3.1.10",
-    "webpack-merge": "^4.1.4",
-    "whatwg-fetch": "^3.0.0"
-  },
-  "resolutions": {
-    "natives": "1.1.6"
+    "webpack-merge": "^4.1.4"
   }
 }
diff --git a/postcss.config.js b/postcss.config.js
@@ -4,6 +4,7 @@ module.exports = {
     "postcss-preset-env": {
       browsers: "last 2 versions"
     },
+    "postcss-custom-media": {},
     autoprefixer: {}
   }
 };
diff --git a/site/layouts/404.html b/site/layouts/404.html
@@ -1,7 +1,6 @@
 {{ define "main" }}
 
 <h1>Nothing Here...</h1>
-<h2 style="font-size: 120px; margin:0;">💩</h2>
 <h3><a href="{{ "/" | relURL }}">Go Home</a></h3>
 
 {{ end }}
diff --git a/site/static/admin/index.html → src/cms.html b/site/static/admin/index.html → src/cms.html
@@ -5,11 +5,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
   <title>Content Manager</title>
-  <!-- Include the stylesheets from your site here -->
 
   <script src="https://identity-js.netlify.com/v1/netlify-identity-widget.js"></script>
 </head>
 <body>
-  <script src="/cms.js"></script>
+  <script src="<%= htmlWebpackPlugin.files.chunks.cms.entry %>"></script>
 </body>
 </html>
diff --git a/src/js/cms-preview-templates/post.js b/src/js/cms-preview-templates/post.js
@@ -9,10 +9,6 @@ export default class PostPreview extends React.Component {
     return <div className="mw6 center ph3 pv4">
       <h1 className="f2 lh-title b mb3">{ entry.getIn(["data", "title"])}</h1>
       <div className="flex justify-between grey-3">
-        <div style={{
-          width: "80px",
-          height: "80px"
-        }}></div>
         <p>{ format(entry.getIn(["data", "date"]), "ddd, MMM D, YYYY") }</p>
         <p>Read in x minutes</p>
       </div>

diff --git a/src/js/cms.js b/src/js/cms.js
@@ -1,29 +1,19 @@
 import React from "react";
-import CMS from "netlify-cms";
+import CMS from "netlify-cms-app";
+
+// Import main site styles as a string to inject into the CMS preview pane
+import styles from "!to-string-loader!css-loader!postcss-loader!sass-loader!../css/main.css";
 
 import HomePreview from "./cms-preview-templates/home";
 import PostPreview from "./cms-preview-templates/post";
 import ProductsPreview from "./cms-preview-templates/products";
 import ValuesPreview from "./cms-preview-templates/values";
 import ContactPreview from "./cms-preview-templates/contact";
 
-
-// Example of creating a custom color widget
-class ColorControl extends React.Component {
-  render() {
-    return <input
-      style={{height: "80px"}}
-      type="color"
-      value={this.props.value}
-      onInput={(e) => this.props.onChange(e.target.value)}
-    />;
-  }
-}
-
-CMS.registerPreviewStyle("/css/main.css");
+CMS.registerPreviewStyle(styles, { raw: true });
 CMS.registerPreviewTemplate("home", HomePreview);
 CMS.registerPreviewTemplate("post", PostPreview);
 CMS.registerPreviewTemplate("products", ProductsPreview);
 CMS.registerPreviewTemplate("values", ValuesPreview);
 CMS.registerPreviewTemplate("contact", ContactPreview);
-CMS.registerWidget("color", ColorControl);
+CMS.init();
diff --git a/webpack.common.js b/webpack.common.js
@@ -3,10 +3,12 @@ const path = require("path");
 const CopyWebpackPlugin = require("copy-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const AssetsPlugin = require("assets-webpack-plugin");
+const HtmlWebpackPlugin = require("html-webpack-plugin");
 
 module.exports = {
   entry: {
-    main: path.join(__dirname, "src", "index.js")
+    main: path.join(__dirname, "src", "index.js"),
+    cms: path.join(__dirname, "src", "js", "cms.js"),
   },
 
   output: {
@@ -19,16 +21,12 @@ module.exports = {
         test: /\.((png)|(eot)|(woff)|(woff2)|(ttf)|(svg)|(gif))(\?v=\d+\.\d+\.\d+)?$/,
         loader: "file-loader?name=/[hash].[ext]"
       },
-
-      {test: /\.json$/, loader: "json-loader"},
-
       {
         loader: "babel-loader",
         test: /\.js?$/,
         exclude: /node_modules/,
         query: {cacheDirectory: true}
       },
-
       {
         test: /\.(sa|sc|c)ss$/,
         exclude: /node_modules/,
@@ -38,22 +36,22 @@ module.exports = {
   },
 
   plugins: [
-    new webpack.ProvidePlugin({
-      fetch: "imports-loader?this=>global!exports-loader?global.fetch!whatwg-fetch"
-    }),
-
     new AssetsPlugin({
       filename: "webpack.json",
       path: path.join(process.cwd(), "site/data"),
       prettyPrint: true
     }),
-
     new CopyWebpackPlugin([
       {
         from: "./src/fonts/",
         to: "fonts/",
         flatten: true
       }
-    ])
+    ]),
+    new HtmlWebpackPlugin({
+      filename: 'admin/index.html',
+      template: 'src/cms.html',
+      inject: false,
+    }),
   ]
 };
diff --git a/webpack.prod.js b/webpack.prod.js
@@ -1,5 +1,5 @@
 const merge = require("webpack-merge");
-const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
+const TerserPlugin = require("terser-webpack-plugin");
 const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 
@@ -15,18 +15,17 @@ module.exports = merge(common, {
 
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({
+      new TerserPlugin({
         cache: true,
         parallel: true,
-        sourceMap: true
+        sourceMap: true,
+        exclude: /\/node_modules\//,
       }),
-
       new MiniCssExtractPlugin({
         filename: "[name].[hash:5].css",
         chunkFilename: "[id].[hash:5].css"
       }),
-
-      new OptimizeCSSAssetsPlugin({})
+      new OptimizeCSSAssetsPlugin({}),
     ]
   }
 });