From 782006eeb48a3ab931c63bccac1e2dea69e92974 Mon Sep 17 00:00:00 2001
From: Daniel Tomlinson <dtomlinson@panaetius.co.uk>
Date: Tue, 2 Jun 2020 04:23:17 +0100
Subject: [PATCH] Updating documentation

---
 blog/build-lunrjs-index.js |  4 ++++
 blog/todo-webpack.todo     | 20 ++++++++++--------
 blog/webpack-structure.md  | 43 ++++++++++++++++++++++++++++++++++++++
 3 files changed, 58 insertions(+), 9 deletions(-)

diff --git a/blog/build-lunrjs-index.js b/blog/build-lunrjs-index.js
index b5916eb..cef1dc0 100644
--- a/blog/build-lunrjs-index.js
+++ b/blog/build-lunrjs-index.js
@@ -68,3 +68,7 @@ run()
     console.error(error.stack);
     process.exit(1);
   });
+
+export default {
+  run: run()
+}
diff --git a/blog/todo-webpack.todo b/blog/todo-webpack.todo
index ab5a4a0..2096f1e 100644
--- a/blog/todo-webpack.todo
+++ b/blog/todo-webpack.todo
@@ -4,19 +4,21 @@ Tasks:
   ✔ Recreate the fonts scss file and apply it. @done (5/31/2020, 5:06:58 AM)
     ✔ Download and create the monospace font. @done (5/31/2020, 5:06:59 AM)
   ✔ Remove any unneccessary additions from old theme (custom css, prism etc). @done (6/1/2020, 4:27:36 AM)
-  ☐ Create a gulpfile to build the search index.
   ✔ Configure autoprefixer. @done (6/1/2020, 4:13:55 AM)
-  ☐ Add matomo to project.
   ✔ Add animate on scroll to the bundle. @done (6/1/2020, 4:51:38 AM)
   ✔ Configure purgecss with aos library. @done (6/1/2020, 5:36:38 AM)
-  ☐ Document purgecss with multiple paths
-    Notes:
-      ☐ Using glob-all
-      ☐ Using paths and whitelistPatterns
-      ☐ Using whitelister plugin
+  ✔ Document purgecss with multiple paths @done (6/2/2020, 3:46:41 AM)
+  ✔ Change font to Liberv2. @done (6/2/2020, 3:46:49 AM)
+  ✔ Change main font weight using variables rather than font file. @done (6/2/2020, 3:46:51 AM)
+  ✔ Fix table and bootstrap issues with monospace font. @done (6/2/2020, 3:47:27 AM)
+  ☐ Create a gulpfile to build the search index.
+  ☐ Add matomo to project.
+  ☐ Using archetypes.
   ☐ Theme similar to forestry.
-  ☐ Change font to Liberv2.
-  ☐ Change main font weight using variables rather than font file.
 
 Search:
   ☐ Have search auto run whenever a button is pressed
+
+Gulp:
+  ☐ Document yarn automatically resolving modules locally for commands you give it (running gulp it will automaitcally find it).
+  ☐ Document javascript exports using ES6.
diff --git a/blog/webpack-structure.md b/blog/webpack-structure.md
index 1ca9dbe..63a0689 100644
--- a/blog/webpack-structure.md
+++ b/blog/webpack-structure.md
@@ -275,3 +275,46 @@ And add it to the `plugins` object:
       }),
     }),
 ```
+
+If you want to use multiple paths you should use `glob-all` instead of glob: `yarn add glob-all`. Then import as usual with: `const glob = require("glob-all");`.
+
+You can then use a list of paths to find files in multiple directories:
+
+```javascript
+new PurgeCssPlugin({
+  paths: glob.sync([path.join(__dirname, "layouts") + "/**/*.html"], {
+    nodir: true,
+  }),
+});
+```
+
+You can whitelist specific classes/selectors/ids with the `whitelist` option.
+
+You can use regex with `whitelistPatterns`.
+
+You can also use the `whitelister` addon `yarn add whitelister`, and pass instances of this into the `whitelist`, although it may not be perfect.
+
+An example using whitelisting:
+
+```javascript
+new PurgeCssPlugin({
+  paths: glob.sync([path.join(__dirname, "layouts") + "/**/*.html"], {
+    nodir: true,
+  }),
+  whitelistPatterns: [
+    /zoom/,
+    /aos/,
+    /table/,
+    /thead/,
+    /blockquote/,
+    /img-fluid/,
+    /code/,
+    /highlight/,
+  ],
+  whitelistPatternsChildren: [/code/, /highlight/],
+  whitelist: [
+    whitelister("node_modules/aos/dist/aos.css"),
+    whitelister("node_modules/bootstrap/dist/css/bootstrap.css"),
+  ],
+});
+```