Add Webpack, Babel, and Modern ES6 Syntax Support

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-env"
+  ],
+  "plugins": [
+    "@babel/plugin-syntax-object-rest-spread",
+    "@babel/plugin-proposal-class-properties",
+    "@babel/plugin-proposal-object-rest-spread",
+    ["@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

.gitignore

@@ -1,2 +1,4 @@
-/public
-*.DS_store
+public/
+*.DS_store
+node_modules/
+site/data/webpack.json

netlify.toml

@@ -0,0 +1,6 @@
+[build]
+  command = "npm run build"
+  publish = "public"
+
+[context.deploy-preview]
+  command = "npm run build:preview"

package.json

@@ -0,0 +1,66 @@
+{
+  "name": "tour.dgraph.io",
+  "version": "1.0.0",
+  "description": "Dgraph Tour",
+  "main": "index.js",
+  "repository": "https://github.com/dgraph-io/tutorial.git",
+  "author": "Gabe Wyatt <gabe@gabewyatt.com>",
+  "license": "MIT",
+  "scripts": {
+    "lint": "eslint src",
+    "start": "run-p start:**",
+    "start:hugo": "hugo -d ../public -s site -vw",
+    "start:webpack": "webpack-dev-server --config webpack.dev.js",
+    "preview": "run-p preview:**",
+    "preview:hugo": "npm run start:hugo -- -D -F",
+    "preview:webpack": "npm run start:webpack",
+    "prebuild": "rimraf public",
+    "build": "npm run build:webpack && npm run build:hugo",
+    "build:preview": "npm run build:webpack && npm run build:hugo:preview",
+    "build:hugo": "hugo -d ../public -s site -v",
+    "build:hugo:preview": "npm run build:hugo -- -D -F",
+    "build:webpack": "cross-env NODE_ENV=production webpack --config webpack.prod.js --hot --inline"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/plugin-proposal-class-properties": "^7.4.4",
+    "@babel/plugin-proposal-object-rest-spread": "^7.0.0",
+    "@babel/plugin-syntax-object-rest-spread": "^7.0.0",
+    "@babel/plugin-transform-runtime": "^7.4.4",
+    "@babel/preset-env": "^7.1.0",
+    "@babel/register": "^7.0.0",
+    "@babel/runtime": "^7.4.5",
+    "assets-webpack-plugin": "^3.9.7",
+    "babel-eslint": "^10.0.1",
+    "babel-loader": "^8.0.4",
+    "clean-webpack-plugin": "^2.0.0",
+    "copy-webpack-plugin": "^5.0.0",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.0.0",
+    "eslint": "^5.8.0",
+    "eslint-plugin-import": "^2.14.0",
+    "exports-loader": "^0.7.0",
+    "fancy-log": "^1.3.2",
+    "file-loader": "^3.0.0",
+    "hugo-bin": "^0.37.0",
+    "imports-loader": "^0.8.0",
+    "mini-css-extract-plugin": "^0.6.0",
+    "node-sass": "^4.10.0",
+    "npm-run-all": "^4.1.5",
+    "optimize-css-assets-webpack-plugin": "^5.0.1",
+    "plugin-error": "^1.0.1",
+    "postcss-import": "^12.0.1",
+    "postcss-loader": "^3.0.0",
+    "postcss-preset-env": "^6.3.0",
+    "rimraf": "^2.6.2",
+    "sass-loader": "^7.1.0",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.0.1",
+    "url-loader": "^1.1.2",
+    "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"
+  }
+}

postcss.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  plugins: {
+    'postcss-import': {},
+    'postcss-preset-env': {
+      browsers: 'last 2 versions'
+    },
+    autoprefixer: {}
+  }
+};

scripts/build.sh

@@ -16,9 +16,11 @@ rebuild() {
 	# Generate new after merging.
 
 	# In Unix environments, env variables should also be exported to be seen by Hugo
-	hugo\
-		--destination=public\
-		--baseURL="$HOST" 1> /dev/null
+	# hugo\
+	# 	--destination=public\
+	# 	--baseURL="$HOST" 1> /dev/null
+  # Perform webpack and hugo builds.
+  npm build 1> /dev/null
 }
 
 branchUpdated()

config.toml → site/config.toml

@@ -1,4 +1,4 @@
-baseURL = "https://tour.dgraph.io"
+baseURL = ""
 languageCode = "en-us"
 title = "A Tour of Dgraph"
 theme="hugo-tutorials"

site/themes/hugo-tutorials/layouts/partials/footer.html

@@ -0,0 +1,13 @@
+    </main>
+
+    {{ $script := .Site.Data.webpack.main }}
+    {{ with $script.js }}
+    <script src="{{ relURL . }}"></script>
+    {{ end }}
+
+    <script>
+      hljs.initHighlightingOnLoad();
+    </script>
+    </body>
+
+    </html>

themes/hugo-tutorials/layouts/partials/header.html → site/themes/hugo-tutorials/layouts/partials/header.html

@@ -93,10 +93,6 @@
     {{ end }}
   </title>
 
-  <link href="{{ .Site.BaseURL }}/css/theme.css?{{ now }}" rel="stylesheet" />
-  <link href="{{ .Site.BaseURL }}/css/runnable.css?{{ now }}" rel="stylesheet" />
-  <link href="{{ .Site.BaseURL }}/css/runnable-custom.css?{{ now }}" rel="stylesheet" />
-  <link href="{{ .Site.BaseURL }}/css/runnable-url.css?{{ now }}" rel="stylesheet" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
     integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
   <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"
@@ -108,6 +104,12 @@
   <link href="https://fonts.googleapis.com/css?family=Lato:400,700" rel="stylesheet" />
   <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
     integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous" />
+
+
+  {{ $stylesheet := .Site.Data.webpack.main }}
+  {{ with $stylesheet.css }}
+  <link href="{{ relURL . }}" rel="stylesheet">
+  {{ end }}
 </head>
 
 <body>

src/css/main.css

@@ -0,0 +1,4 @@
+@import 'imports/theme.css';
+@import 'imports/runnable.css';
+@import 'imports/runnable-custom.css';
+@import 'imports/runnable-url.css';

src/index.js

@@ -0,0 +1,8 @@
+// CSS
+import './css/main.css';
+
+// JavaScript
+import './js/clipboard.min.js';
+import './js/dgraph.js';
+import './js/runnable.js';
+import './js/runnable-url/index.js';

webpack.common.js

@@ -0,0 +1,58 @@
+const webpack = require('webpack');
+const path = require('path');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+const AssetsPlugin = require('assets-webpack-plugin');
+
+module.exports = {
+  entry: {
+    main: path.join(__dirname, 'src', 'index.js')
+  },
+
+  output: {
+    path: path.join(__dirname, 'public')
+  },
+
+  module: {
+    rules: [
+      {
+        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/,
+        use: [
+          'style-loader',
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          'postcss-loader',
+          'sass-loader'
+        ]
+      }
+    ]
+  },
+
+  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
+    })
+  ]
+};

webpack.dev.js

@@ -0,0 +1,42 @@
+const merge = require('webpack-merge');
+const path = require('path');
+const CleanWebpackPlugin = require('clean-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const common = require('./webpack.common');
+
+module.exports = merge(common, {
+  mode: 'development',
+
+  output: {
+    filename: '[name].js',
+    chunkFilename: '[id].css'
+  },
+
+  devServer: {
+    port: process.env.PORT || 3000,
+    contentBase: path.join(process.cwd(), './public'),
+    watchContentBase: true,
+    stats: 'none',
+    quiet: false,
+    open: true,
+    historyApiFallback: {
+      rewrites: [{ from: /./, to: '404.html' }]
+    }
+  },
+
+  plugins: [
+    new CleanWebpackPlugin({
+      cleanOnceBeforeBuildPatterns: [
+        'public/**/*.js',
+        'public/**/*.css',
+        'site/content/webpack.json'
+      ]
+    }),
+
+    new MiniCssExtractPlugin({
+      filename: '[name].css',
+      chunkFilename: '[id].css'
+    })
+  ]
+});

webpack.prod.js

@@ -0,0 +1,32 @@
+const merge = require('webpack-merge');
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
+const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
+
+const common = require('./webpack.common.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+
+  output: {
+    filename: '[name].[hash:5].js',
+    chunkFilename: '[id].[hash:5].css'
+  },
+
+  optimization: {
+    minimizer: [
+      new UglifyJsPlugin({
+        cache: true,
+        parallel: true,
+        sourceMap: true
+      }),
+
+      new MiniCssExtractPlugin({
+        filename: '[name].[hash:5].css',
+        chunkFilename: '[id].[hash:5].css'
+      }),
+
+      new OptimizeCSSAssetsPlugin({})
+    ]
+  }
+});