blog/todo-webpack.todo

@@ -0,0 +1,3 @@
+App.js:
+  ☐ Document using the `/* webpackChunkname: "name" */
+  ☐ What does `const { default: App }` do?

blog/webpack.md

@@ -1,5 +1,88 @@
 ## Webpack
 
+Great tutorial for the basics: <https://www.sitepoint.com/bundle-static-site-webpack/>.
+
 We can use webpack to bundle up our resources (javascript files or css files) and create a minified bundle for a website.
 
 You can bundle anything up, we can even write `scss` and have webpack lint, compile and minify into the `dist` directory for us automatically.
+
+### Structure
+
+#### Folder structure
+
+The structure can depend on the project. If you are using webpack you can create `./src` folder where you can place `./src/js` or `./src/scss` for example. We can have a `./node_modules` folder then use webpack to compile.
+
+You can use a layout suggestion as given here: <https://medium.com/@nmayurashok/file-and-folder-structure-for-web-development-8c5c83810a5> for inside the `./src` folder.
+
+#### Files location
+
+Raw files go in `./src` or at the root level. See the folder structure on how to name folders.
+
+Any bundled/compiled files which will be used by the website itself should go in `./dist` or `./static/dist`.
+
+### Build patterns/ code organisation
+
+#### SCSS/CSS
+
+Any scss/css you want to use should go in your raw folder.
+
+You should have a `_variables.scss` which should define and/or overwrite any variables from any frameworks you are importing (bootstrap).
+
+You can then have as many `scss` files as needed for your content. You can split them by page, or by component etc.
+
+Finally you should have a `styles.scss`. This file should import all the `scss` files you've created, in addition to any provided by third party packages. Remember to import the `_variables.scss` file first and any other `scss` files that are overwriting something else.
+
+TODO: Link to the example `styles.scss` in git.
+
+With `scss`, imports are done with the `@import "";` syntax. You leave out the extension if it's `.scss`, otherwise provide it if it's `css`.
+
+If you want to reference a file in `node_modules` you can use the `~` as a shortcut to that path. E.g `@import "~bootstrap/scss/bootstrap";`.
+
+#### Javascript
+
+You should use asynchronous imports to improve performance in your `.js` files.
+
+We create two files: `App.js` and `main.js`.
+
+##### App.js
+
+This file should go in `./src/js`. It should contain all the javascript configuration needed for your app. E.g if using font-awesome's javascript loader and library functionality you should import them and add them here.
+
+TODO: Link to the example `App.js` file in git.
+
+We go through some common options for a project (in Hugo) here.
+
+### Config
+
+`output.path` is where the bundles files will go
+is `output.publicPath` the path you will reference in the `html`. Here is a webpack wiki explanation: <https://github.com/webpack/docs/wiki/configuration#outputpublicpath>.
+
+### Use npm to install bower dependencies
+
+As `bower` is deprecated in favour of `yarn` and `webpack`, most packages now come with `npm`.`yarn`.
+
+You can use `npm` to install bower dependencies if they are old and haven't been updated for `npm`.
+
+#### Change bower installation path
+
+You should change the installation path for `bower` from `bower_modules` to `node_modules`.
+
+To do this create a `.bowerrc` file in the root of your repo that contains the following:
+
+```json
+{
+  "directory" : "node_modules"
+}
+```
+
+#### Allow npm to run bower install
+
+You can use an `npm` script to run `bower install` which will install your bower dependencies whenever you do `npm install`.
+
+Edit the `scripts` in your `package.json` to add the following:
+
+```json
+"scripts": {
+  "postinstall": "bower install"
+}
+```

tasks.todo

@@ -39,6 +39,18 @@ Tasks:
     ☐ Use the envanto website layouts (whole static themes) to find suitable wallpaper for a post page.
     ☐ Add tags to front page cards
     ☐ Using date in the slug, customising the slugs further?
+    ☐ Find a font from envanto and customise the vars in bootstrap (https://getbootstrap.com/docs/4.0/content/reboot/#native-font-stack)
+      Notes:
+        ☐ Change the bootstrap variables above to the font-family you want to use.
+        ☐ Create a new font-family with all the weights/types you want in the css
+        ☐ Change the $headings-font-weight variable to the weight you want to use. You should create this style in the css above for the font family.
+        ☐ You can check all availbale css variables in the bootstrap `_variables.scss` file: <https://github.com/twbs/bootstrap/blob/v4.1.3/scss/_variables.scss#L260-L264>. - Make sure when adding a new font that these weights are added to the font family. It might not be possible to add them for all styles (e.g bolder and italic combined) so just cover as much as possible.
+        Maybe template could be:
+          ☐ keep default of light:300, normal:400 and bold:700.
+          ☐ overwrite the header weight to 400 from 500
+          ☐ create a font family that implements the usual styles
+          ☐ if you want to use lighter and bolder, implement 100 and 900
+
 
   Sidebar:
     ☐ Add a table of contents to the side.
@@ -68,11 +80,11 @@ Tasks:
     ☐ https://www.netlify.com/blog/2018/07/24/hugo-tips-how-to-create-author-pages/
 
   SEO:
-    ☐ Document + Set all metadata using https://www.skcript.com/svr/perfect-seo-meta-tags-with-hugo/
-    ☐ Change the manifest.json
-    ☐ Set the favicon and apple-touch-icons
-    ☐ Fix the structured data
-    ☐ Finish the metadata + document
+    ✔ Document + Set all metadata using https://www.skcript.com/svr/perfect-seo-meta-tags-with-hugo/ @done (5/16/2020, 3:48:59 AM)
+    ✔ Change the manifest.json @done (5/16/2020, 3:49:00 AM)
+    ✔ Set the favicon and apple-touch-icons @done (5/16/2020, 3:49:01 AM)
+    ✔ Fix the structured data @done (5/16/2020, 3:49:02 AM)
+    ✔ Finish the metadata + document @done (5/16/2020, 3:49:03 AM)
     ☐ Create social media accounts for the site and add to structured data + config.toml
 
   CI:
@@ -102,3 +114,7 @@ Tasks:
     ☐ https://www.integralist.co.uk/posts/python-asyncio/
       Notes:
         This blog in general has some interesting things to look at.
+
+  Restructure:
+    ☐ Create new theme entirely, using a fresh webpack configuration.
+    ☐ Move the AOS from the partials css and js into a webpack configuration.