Merge commit 'e48ffb763572814a3788780bb9653dfa2daeae22'

docs/content/en/hugo-pipes/babel.md

@@ -29,7 +29,7 @@ If you are using the Hugo Snap package, Babel and plugin(s) need to be installed
 
 {{< new-in "v0.75.0" >}}
 
-In Hugo `v0.75` we improved the way we resolve JS configuration and dependencies. One of them is that we now adds the main project's `node_modules` to `NODE_PATH` when running Babel and similar tools. There are some known [issues](https://github.com/babel/babel/issues/5618) with Babel in this area, so if you have a `babel.config.js` living in a Hugo Module (and not in the project itself), we recommend using `require` to load the presets/plugins, e.g.:
+In Hugo `v0.75` we improved the way we resolve JS configuration and dependencies. One of them is that we now add the main project's `node_modules` to `NODE_PATH` when running Babel and similar tools. There are some known [issues](https://github.com/babel/babel/issues/5618) with Babel in this area, so if you have a `babel.config.js` living in a Hugo Module (and not in the project itself), we recommend using `require` to load the presets/plugins, e.g.:
 
 
 ```js

docs/content/en/hugo-pipes/js.md

@@ -115,7 +115,7 @@ And then in your JS file:
 import * as params from '@params';
 ```
 
-Hugo will, by default, generate a `assets/jsconfig.js` file that maps the imports. This is useful for navigation/intellisense help inside code editors, but if you don't need/want it, you can [turn it off](/getting-started/configuration/#configure-build).
+Hugo will, by default, generate a `assets/jsconfig.json` file that maps the imports. This is useful for navigation/intellisense help inside code editors, but if you don't need/want it, you can [turn it off](/getting-started/configuration/#configure-build).
 
 
 
@@ -147,27 +147,27 @@ Or with options:
 
 #### Shimming a JS library 
 
-It's a very common practice to load external libraries using CDN rather than importing all packages in a single JS file, making it bulky. To do the same with Hugo, you'll need to shim the libraries as follows. In this example, `algoliasearch` and `instantsearch.js` will be shimmed.
+It's a common practice to load external libraries using a content delivery network (CDN) rather than importing all packages in a single JS file. To load scripts from a CDN with Hugo, you'll need to shim the libraries as follows. In this example, `react` and `react-dom` will be shimmed.
 
-Firstly, add the following to your project's `package.json`:
+First, add React and ReactDOM [CDN script tags](https://reactjs.org/docs/add-react-to-a-website.html#tip-minify-javascript-for-production) in your HTML template files. Then create `assets/js/shims/react.js` and `assets/js/shims/react-dom.js` with the following contents:
+```js
+// In assets/js/shims/react.js
+module.exports = window.React;
+
+// In assets/js/shims/react-dom.js
+module.exports = window.ReactDOM;
+```
+
+Finally, add the following to your project's `package.json`:
 ```json
 {
   "browser": {
-    "algoliasearch/lite": "./public/js/shims/algoliasearch.js",
-    "instantsearch.js/es/lib/main": "./public/js/shims/instantsearch.js"
+    "react": "./assets/js/shims/react.js",
+    "react-dom": "./assets/js/shims/react-dom.js"
   }
 }
 ```
 
-What this does is it tells Hugo to look for the listed packages somewhere else. Here we're telling Hugo to look for `algoliasearch/lite` and `instantsearch.js/es/lib/main` in the project's `public/js/shims` folder.
+This tells Hugo's `js.Build` command to look for `react` and `react-dom` in the project's `assets/js/shims` folder. Note that the `browser` field in your `package.json` file will cause React and ReactDOM to be excluded from your JavaScript bundle. Therefore, **it is unnecessary to add them to the `js.Build` command's `externals` argument.**
 
-Now we'll need to create the shim JS files which export the global JS variables `module.exports = window.something`. You can create a separate shim JS file in your `assets` directory, and redirect the import paths there if you wish, but a much cleaner way is to create these files on the go, by having the following before your JS is built.
-
-```go-html-template
-{{ $a := "module.exports = window.algoliasearch" | resources.FromString "js/shims/algoliasearch.js" }}
-{{ $i := "module.exports = window.instantsearch" | resources.FromString "js/shims/instantsearch.js" }}
-
-{{/* Call RelPermalink unnecessarily to generate JS files */}}
-{{ $placebo := slice $a.RelPermalink $i.RelPermalink }}
-```
 That's it! You should now have a browser-friendly JS which can use external JS libraries.

docs/content/en/hugo-pipes/scss-sass.md

@@ -27,7 +27,7 @@ Any SASS or SCSS file can be transformed into a CSS file using `resources.ToCSS`
 
 transpiler [string] {{< new-in "0.80.0" >}}
 
-: The `transpiler` to use, valid values are `libsass` (default) and `dartsass`. Note that the Embedded Dart Sass project is still in beta (beta 5 at the time of writing). The release is scheduled for Q1 2021. We will try to improve the installation process by then, but if you want to use Hugo with Dart Sass you need to download a release binary from [Embedded Dart Sass](https://github.com/sass/dart-sass-embedded/releases) and make sure it's in your PC's `$PATH` (or `%PATH%` on Windows).
+: The `transpiler` to use, valid values are `libsass` (default) and `dartsass`. Note that the Embedded Dart Sass project is still in beta (beta 5 at the time of writing). The release is scheduled for Q1 2021. We will try to improve the installation process by then, but if you want to use Hugo with Dart Sass you need to download a release binary from [Embedded Dart Sass](https://github.com/sass/dart-sass-embedded/releases) (beta 5) and make sure it's in your PC's `$PATH` (or `%PATH%` on Windows).
 
 targetPath [string]
 : If not set, the resource's target path will be the asset file original path with its extension replaced by `.css`.