Cleans up code. Adds helpful comments.

codingfriend1 · codingfriend1 · commit 4575f1288e4b · 2019-06-26T03:08:49.000Z
diff --git a/package.json b/package.json
@@ -40,7 +40,6 @@
     "node-fetch": "^2.6.0",
     "route-cache": "^0.4.4",
     "serve-favicon": "^2.5.0",
-    "sw-precache-webpack-plugin": "^0.11.5",
     "vue": "^2.6.10",
     "vue-analytics": "^5.17.0",
     "vue-meta": "git+https://github.com/codingfriend1/vue-meta.git#dev",
@@ -58,7 +57,6 @@
     "friendly-errors-webpack-plugin": "^1.7.0",
     "gulp": "^3.9.1",
     "gulp-inject": "^4.2.0",
-    "html-webpack-plugin": "^3.2.0",
     "http-server": "^0.11.1",
     "imagemin": "^6.1.0",
     "imagemin-jpeg-recompress": "^6.0.0",
diff --git a/the-magic/build/build.js b/the-magic/build/build.js
@@ -1,10 +1,14 @@
+/**
+ * Renders all markdown files into html files and injects webpack assets
+ * Also renders sitemap.xml and feed.xml to the designated output folder
+ */
+
 const isProd = process.env.NODE_ENV === "production";
 const path = require("path");
 const url = require("url");
 const fs = require("fs");
 const { createBundleRenderer } = require("vue-server-renderer");
 const mkdirp = require("mkdirp");
-const getDirName = require("path").dirname;
 const config = require("../../site.config");
 const webpack = require('webpack');
 const { renderMarkdownFolder } = require("./render-markdown.js");
@@ -32,7 +36,7 @@ function createFile(url, html) {
 
   url = path.join(folders.output_folder, url);
 
-  mkdirp(getDirName(url), function(err) {
+  mkdirp(path.dirname(url), function(err) {
     if (err) return cb(err);
     fs.writeFile(url, html, err => {
       if (err) {
diff --git a/the-magic/build/folders.js b/the-magic/build/folders.js
@@ -8,13 +8,19 @@ const folders = {
   node_modules: path.resolve(root, "node_modules"),
   the_magic: path.resolve(root, 'the-magic'),
   boot: path.resolve(root, "the-magic", "boot"),
-  published_html_path: path.resolve(root, "the-magic", "boot", "_index.html"),
+  src: path.resolve(root, "src"),
+  entry_client: path.resolve(root, "the-magic", "boot", "index.js"),
+  entry_server: path.resolve(root, "the-magic", "boot", "entry-server.js"),
   markdown_folder: path.resolve(root, config.folderStructure.markdown),
   template_html_path: path.resolve(root, config.folderStructure.html),
-  css_folder: path.resolve(root, config.folderStructure.css),
+  css_path: path.resolve(root, config.folderStructure.css),
+  vue_path: path.resolve(root, config.folderStructure.vue),
+  js_path: path.resolve(root, config.folderStructure.js),
+  config_path: path.resolve(root, 'site.config.js'),
   components_folder: path.resolve(root, config.folderStructure.components),
   partials_folder: path.resolve(root, config.folderStructure.partials),
   static_folder: path.resolve(root, config.folderStructure.static),
+  images_folder: path.resolve(root, config.folderStructure.images),
   html_template: path.resolve(root, config.folderStructure.html),
   output_folder: path.resolve(root, config.folderStructure.output),
 };
diff --git a/the-magic/build/optimize-images.js b/the-magic/build/optimize-images.js
@@ -7,14 +7,11 @@ const imagemin = require("imagemin-keep-folder")
 const imageminJpegRecompress = require('imagemin-jpeg-recompress')
 const webp = require("imagemin-webp")
 const imageminOptipng = require('imagemin-optipng')
-const config = require('../../site.config.js')
+const folders = require('./folder.js')
 
-const inputFolder = path.resolve(__dirname, "..", "..", config.folderStructure.images)
-const outputFolder = path.resolve(__dirname, "..", "..", config.folderStructure.static)
-
-const PNG = path.join(inputFolder, `**`, `/*.png`)
-const JPG = path.join(inputFolder, `**`, `*.jpg`)
-const JPEG = path.join(inputFolder, `**`, `*.jpeg`)
+const PNG = path.join(folders.images_folder, `**`, `*.png`)
+const JPG = path.join(folders.images_folder, `**`, `*.jpg`)
+const JPEG = path.join(folders.images_folder, `**`, `*.jpeg`)
 
 imagemin([PNG], {
   use: [
@@ -23,7 +20,7 @@ imagemin([PNG], {
     })
   ],
   replaceOutputDir: output => {
-    return path.join(outputFolder, path.basename(output))
+    return path.join(folders.static_folder, path.basename(output))
   }
 });
 
@@ -34,7 +31,7 @@ imagemin([PNG], {
     })
   ],
   replaceOutputDir: output => {
-    return path.join(outputFolder, path.basename(output))
+    return path.join(folders.static_folder, path.basename(output))
   }
 });
 
@@ -45,7 +42,7 @@ imagemin([JPG, JPEG], {
     })
   ],
   replaceOutputDir: output => {
-    return path.join(outputFolder, path.basename(output))
+    return path.join(folders.static_folder, path.basename(output))
   }
 });
 
@@ -63,6 +60,6 @@ imagemin([JPG, JPEG], {
     })
   ],
   replaceOutputDir: output => {
-    return path.join(outputFolder, path.basename(output))
+    return path.join(folders.static_folder, path.basename(output))
   }
 });
diff --git a/the-magic/build/server.js b/the-magic/build/server.js
@@ -1,3 +1,10 @@
+/**
+ * Based off of
+ * https://github.com/vuejs/vue-hackernews-2.0/blob/master/server.js
+ * By Evan You
+ * Contains modifications
+ */
+
 const fs = require('fs')
 const path = require('path')
 const LRU = require('lru-cache')
@@ -9,8 +16,6 @@ const resolve = file => path.resolve(__dirname, file)
 const { createBundleRenderer } = require('vue-server-renderer')
 const { renderMarkdownFile, renderMarkdownFolder } = require("./render-markdown.js");
 const folders = require('./folders.js')
-const config = require("../../site.config")
-
 const isProd = process.env.NODE_ENV === 'production'
 const useMicroCache = process.env.MICRO_CACHE !== 'false'
 const serverInfo =
diff --git a/the-magic/build/setup-dev-server.js b/the-magic/build/setup-dev-server.js
@@ -1,3 +1,9 @@
+/**
+ * Retrieved from 
+ * https://github.com/vuejs/vue-hackernews-2.0/blob/master/build/setup-dev-server.js
+ * By Evan You
+ */
+
 const fs = require('fs')
 const path = require('path')
 const MFS = require('memory-fs')
@@ -78,10 +84,7 @@ module.exports = function setupDevServer (app, templatePath, cb) {
 
     // read bundle generated by vue-ssr-webpack-plugin
     bundle = JSON.parse(readFile(mfs, 'vue-ssr-server-bundle.json'))
-    setTimeout(() => {
-      update()
-    }, 1000);
-    
+    update()
   })
 
   return readyPromise
diff --git a/the-magic/build/webpack.base.config.js b/the-magic/build/webpack.base.config.js
@@ -7,9 +7,7 @@ const CopyWebpackPlugin = require("copy-webpack-plugin")
 const ProgressBarPlugin = require("progress-bar-webpack-plugin")
 const CompressionWebpackPlugin = require("compression-webpack-plugin")
 const { VueLoaderPlugin } = require('vue-loader')
-const config = require('../../site.config')
 const folders = require('./folders.js')
-
 const NODE_ENV = process.env.NODE_ENV || 'development'
 const isProd = NODE_ENV === 'production'
 
@@ -28,10 +26,10 @@ module.exports = {
   resolve: {
     alias: {
       vue: "vue/dist/vue.esm.js",
-      config: path.join(folders.root, "site.config.js"),
-      src: path.join(folders.root, "src"),
-      static: path.join(folders.root, "src", "static"),
-      templates: path.join(folders.root, "src", "templates"),
+      config: folders.config_path,
+      src: folders.src,
+      static: folders.static_folder,
+      templates: folders.components_folder,
     }
   },
   module: {
@@ -46,9 +44,6 @@ module.exports = {
           optimizeSSR: false,
           compilerOptions: {
             preserveWhitespace: false
-          },
-          loaders: {
-            html: "pug-loader",
           }
         }
       },
@@ -86,7 +81,7 @@ module.exports = {
           'css-loader',
           'sass-loader'
         ],
-        include: [folders.css_folder, folders.components_folder, folders.partials_folder]
+        include: [folders.css_path, folders.components_folder, folders.partials_folder]
       },
       {
         test: /\.styl(us)?$/,
@@ -96,7 +91,7 @@ module.exports = {
           'stylus-loader'
         ],
         exclude: folders.node_modules,
-        include: [folders.css_folder, folders.components_folder, folders.partials_folder]
+        include: [folders.css_path, folders.components_folder, folders.partials_folder]
       },
       {
         test: /\.svg$/,
@@ -126,9 +121,12 @@ module.exports = {
   },
   plugins: [
     new webpack.DefinePlugin({
-      main_js: JSON.stringify(path.resolve(folders.root, config.folderStructure.js)),
-      main_css: JSON.stringify(path.resolve(folders.root, config.folderStructure.css)), 
-      main_vue: JSON.stringify(path.resolve(folders.root, config.folderStructure.vue))
+      main_js: JSON.stringify(folders.js_path),
+      main_css: JSON.stringify(folders.css_path), 
+      main_vue: JSON.stringify(folders.vue_path),
+
+      // strip dev-only code in Vue source
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
     }),
     new MiniCssExtractPlugin({
       filename: "production.css"
diff --git a/the-magic/build/webpack.client.config.js b/the-magic/build/webpack.client.config.js
@@ -1,53 +1,20 @@
 const webpack = require('webpack')
-const path = require('path')
 const merge = require('webpack-merge')
 const base = require('./webpack.base.config')
-const SWPrecachePlugin = require('sw-precache-webpack-plugin')
-const HtmlWebpackPlugin = require("html-webpack-plugin")
 const VueSSRClientPlugin = require('vue-server-renderer/client-plugin')
-const site_config = require("../../site.config")
 const folders = require('./folders.js')
 
 const config = merge(base, {
   entry: {
-    app: path.resolve(folders.boot, 'index.js')
-  },
-  resolve: {
-    alias: {
-      'create-api': './create-api-client.js'
-    }
+    app: folders.entry_client
   },
   plugins: [
     // strip dev-only code in Vue source
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.VUE_ENV': '"client"'
     }),
     new VueSSRClientPlugin()
   ]
 })
 
-// if (process.env.NODE_ENV === 'production') {
-//   config.plugins.push(
-//     // auto generate service worker
-//     new SWPrecachePlugin({
-//       cacheId: 'vue-hn',
-//       filename: 'service-worker.js',
-//       minify: true,
-//       dontCacheBustUrlsMatching: /./,
-//       staticFileGlobsIgnorePatterns: [/\.map$/, /\.json$/],
-//       runtimeCaching: [
-//         {
-//           urlPattern: '/',
-//           handler: 'networkFirst'
-//         },
-//         {
-//           urlPattern: /\/(top|new|show|ask|jobs)/,
-//           handler: 'networkFirst'
-//         },
-//       ]
-//     })
-//   )
-// }
-
 module.exports = config
diff --git a/the-magic/build/webpack.server.config.js b/the-magic/build/webpack.server.config.js
@@ -1,34 +1,26 @@
 const webpack = require('webpack')
-const path = require('path')
 const merge = require('webpack-merge')
 const base = require('./webpack.base.config')
 const nodeExternals = require('webpack-node-externals')
 const VueSSRServerPlugin = require('vue-server-renderer/server-plugin')
-const site_config = require("../../site.config")
 const folders = require('./folders.js')
 
 module.exports = merge(base, {
   target: 'node',
   devtool: '#source-map',
-  entry: path.resolve(folders.boot, "entry-server.js"),
+  entry: folders.entry_server,
   output: {
     path: folders.output_folder,
     filename: "[name].js",
     libraryTarget: 'commonjs2'
   },
-  resolve: {
-    alias: {
-      'create-api': './create-api-server.js'
-    }
-  },
   // https://webpack.js.org/configuration/externals/#externals
   // https://github.com/liady/webpack-node-externals
   externals: nodeExternals({
     whitelist: /(\.css$|\.less$|\.sass$|\.scss$|\.styl$|\.stylus$|\.(png|jpe?g|gif|svg)(\?.*)?$|\.(woff2?|eot|ttf|otf)(\?.*)?$)/
   }),
   plugins: [
     new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
       'process.env.VUE_ENV': '"server"'
     }),
     new VueSSRServerPlugin()
diff --git a/yarn.lock b/yarn.lock
