diff --git a/content/en/functions/js/Babel.md b/content/en/functions/js/Babel.md
index f5b54a3b0..fddc5e296 100644
--- a/content/en/functions/js/Babel.md
+++ b/content/en/functions/js/Babel.md
@@ -1,6 +1,6 @@
---
title: js.Babel
-description: Compiles the given JavaScript resource with Babel.
+description: Compile the given JavaScript resource with Babel.
categories: []
keywords: []
action:
diff --git a/content/en/functions/js/Build.md b/content/en/functions/js/Build.md
index 3e78e8e98..9bdc2454a 100644
--- a/content/en/functions/js/Build.md
+++ b/content/en/functions/js/Build.md
@@ -1,6 +1,6 @@
---
title: js.Build
-description: Bundles, transpiles, tree shakes, and minifies JavaScript resources.
+description: Bundle, transpile, tree shake, and minify JavaScript resources.
categories: []
keywords: []
action:
diff --git a/content/en/functions/resources/PostProcess.md b/content/en/functions/resources/PostProcess.md
index 82f02c9e5..ed144740c 100644
--- a/content/en/functions/resources/PostProcess.md
+++ b/content/en/functions/resources/PostProcess.md
@@ -31,7 +31,7 @@ Call `resources.PostProcess` when one or more of the steps in the transformation
A prime use case for this is purging unused CSS rules using the [PurgeCSS] plugin for the PostCSS Node.js package.
-## CSS Purging
+## CSS purging
{{% note %}}
There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of `resources.PostProcess` and just extract keywords from the templates. See the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/#app) for examples.
diff --git a/content/en/getting-started/configuration-build.md b/content/en/getting-started/configuration-build.md
index 8ec88f61c..654b1f7dc 100644
--- a/content/en/getting-started/configuration-build.md
+++ b/content/en/getting-started/configuration-build.md
@@ -70,7 +70,7 @@ target
If `enable` is set to `true`, creates a `hugo_stats.json` file in the root of your project. This file contains arrays of the `class` attributes, `id` attributes, and tags of every HTML element within your published site. Use this file as data source when [removing unused CSS] from your site. This process is also known as pruning, purging, or tree shaking.
-[removing unused CSS]: /hugo-pipes/postprocess/#css-purging-with-postcss
+[removing unused CSS]: /functions/resources/postprocess/#css-purging
Exclude `class` attributes, `id` attributes, or tags from `hugo_stats.json` with the `disableClasses`, `disableIDs`, and `disableTags` keys.
diff --git a/content/en/hugo-pipes/bundling.md b/content/en/hugo-pipes/bundling.md
index 7fc9fc9df..1e0908737 100755
--- a/content/en/hugo-pipes/bundling.md
+++ b/content/en/hugo-pipes/bundling.md
@@ -9,18 +9,6 @@ menu:
parent: hugo-pipes
weight: 90
weight: 90
-action:
- aliases: []
- returnType: resource.Resource
- signatures: ['resources.Concat TARGETPATH [RESOURCE...]']
---
-## Usage
-
-Asset files of the same MIME type can be bundled into one resource using `resources.Concat` which takes two arguments, the target path for the created resource bundle and a slice of resource objects to be concatenated.
-
-```go-html-template
-{{ $plugins := resources.Get "js/plugins.js" }}
-{{ $global := resources.Get "js/global.js" }}
-{{ $js := slice $plugins $global | resources.Concat "js/bundle.js" }}
-```
+See the [`resources.Concat`](/functions/resources/concat/) function.
diff --git a/content/en/hugo-pipes/fingerprint.md b/content/en/hugo-pipes/fingerprint.md
index 68e41acd1..78fb18081 100755
--- a/content/en/hugo-pipes/fingerprint.md
+++ b/content/en/hugo-pipes/fingerprint.md
@@ -1,7 +1,7 @@
---
title: Fingerprint
linkTitle: Fingerprinting and SRI hashing
-description: Process a given resource, adding a hash string of the resource's content.
+description: Cryptographically hash the content of the given resource.
categories: [asset management]
keywords: []
menu:
@@ -9,22 +9,6 @@ menu:
parent: hugo-pipes
weight: 100
weight: 100
-action:
- aliases: [fingerprint]
- returnType: resource.Resource
- signatures: ['resources.Fingerprint [ALGORITHM] RESOURCE']
---
-## Usage
-
-Fingerprinting and [SRI](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity) can be applied to any asset file using `resources.Fingerprint` which takes two arguments, the resource object and an optional [hash algorithm](https://en.wikipedia.org/wiki/Secure_Hash_Algorithms).
-
-The default hash algorithm is `sha256`. Other available algorithms are `sha384` and (as of Hugo `0.55`) `sha512` and `md5`.
-
-Any so processed asset will bear a `.Data.Integrity` property containing an integrity string, which is made up of the name of the hash algorithm, one hyphen and the base64-encoded hash sum.
-
-```go-html-template
-{{ $js := resources.Get "js/global.js" }}
-{{ $secureJS := $js | resources.Fingerprint "sha512" }}
-
-```
+See the [`resources.Fingerprint`](/functions/resources/fingerprint/) function.
diff --git a/content/en/hugo-pipes/minification.md b/content/en/hugo-pipes/minification.md
index a5d4724f9..3943d87d0 100755
--- a/content/en/hugo-pipes/minification.md
+++ b/content/en/hugo-pipes/minification.md
@@ -1,7 +1,7 @@
---
title: Minify
linkTitle: Asset minification
-description: Minifies a given resource.
+description: Minify a given resource.
categories: [asset management]
keywords: []
menu:
@@ -9,19 +9,6 @@ menu:
parent: hugo-pipes
weight: 80
weight: 80
-action:
- aliases: [minify]
- returnType: resource.Resource
- signatures: [resources.Minify RESOURCE]
---
-## Usage
-
-Any CSS, JS, JSON, HTML, SVG, or XML resource can be minified using `resources.Minify` which takes for argument the resource object.
-
-```go-html-template
-{{ $css := resources.Get "css/main.css" }}
-{{ $style := $css | resources.Minify }}
-```
-
-Note that you can also minify the final HTML output to `/public` by running `hugo --minify`.
+See the [`resources.Minify`](/functions/resources/minify/) function.
diff --git a/content/en/hugo-pipes/postcss.md b/content/en/hugo-pipes/postcss.md
index 8ca983f7e..72a091c8f 100755
--- a/content/en/hugo-pipes/postcss.md
+++ b/content/en/hugo-pipes/postcss.md
@@ -1,6 +1,6 @@
---
title: PostCSS
-description: Process CSS files with PostCSS, using any of the available plugins.
+description: Process the given resource with PostCSS using any PostCSS plugin.
categories: [asset management]
keywords: []
menu:
@@ -8,124 +8,6 @@ menu:
parent: hugo-pipes
weight: 40
weight: 40
-toc: true
-action:
- aliases: [postCSS]
- returnType: resource.Resource
- signatures: ['css.PostCSS [OPTIONS] RESOURCE']
---
-## Setup
-
-Follow the steps below to transform CSS using any of the [available PostCSS plugins](https://www.postcss.parts/).
-
-Step 1
-: Install [Node.js](https://nodejs.org/en/download).
-
-Step 2
-: Install the required Node.js packages in the root of your project. For example, to add vendor prefixes to CSS rules:
-
-```sh
-npm i -D postcss postcss-cli autoprefixer
-```
-
-Step 3
-: Create a PostCSS configuration file in the root of your project. You must name this file `postcss.config.js` or one of the other [supported file names]. For example:
-
-[supported file names]: https://github.com/postcss/postcss-load-config#usage
-
-{{< code file=postcss.config.js >}}
-module.exports = {
- plugins: [
- require('autoprefixer')
- ]
-};
-{{< /code >}}
-
-{{% note %}}
-If you are a Windows user, and the path to your project contains a space, you must place the PostCSS configuration within the package.json file. See [this example](https://github.com/postcss/postcss-load-config#packagejson) and issue [#7333](https://github.com/gohugoio/hugo/issues/7333).
-{{% /note %}}
-
-Step 4
-: Place your CSS file within the `assets` directory.
-
-Step 5
-: Capture the CSS file as a resource and pipe it through `css.PostCSS` (alias `postCSS`):
-
-{{< code file=layouts/partials/css.html >}}
-{{ with resources.Get "css/main.css" | postCSS }}
-
-{{ end }}
-{{< /code >}}
-
-If starting with a Sass file within the `assets` directory:
-
-{{< code file=layouts/partials/css.html >}}
-{{ with resources.Get "sass/main.scss" | toCSS | postCSS }}
-
-{{ end }}
-{{< /code >}}
-
-## Options
-
-The `css.PostCSS` method takes an optional map of options.
-
-config
-: (`string`) The directory that contains the PostCSS configuration file. Default is the root of the project directory.
-
-noMap
-: (`bool`) Default is `false`. If `true`, disables inline sourcemaps.
-
-inlineImports
-: (`bool`) Default is `false`. Enable inlining of @import statements. It does so recursively, but will only import a file once.
-URL imports (e.g. `@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');`) and imports with media queries will be ignored.
-Note that this import routine does not care about the CSS spec, so you can have @import anywhere in the file.
-Hugo will look for imports relative to the module mount and will respect theme overrides.
-
-skipInlineImportsNotFound
-: (`bool`) Default is `false`. If you have regular CSS imports in your CSS that you want to preserve, you can either use imports with URL or media queries (Hugo does not try to resolve those) or set `skipInlineImportsNotFound` to true.
-
-{{< code file=layouts/partials/css.html >}}
-{{ $opts := dict "config" "config-directory" "noMap" true }}
-{{ with resources.Get "css/main.css" | postCSS $opts }}
-
-{{ end }}
-{{< /code >}}
-
-## No configuration file
-
-To avoid using a PostCSS configuration file, you can specify a minimal configuration using the options map.
-
-use
-: (`string`) A space-delimited list of PostCSS plugins to use.
-
-parser
-: (`string`) A custom PostCSS parser.
-
-stringifier
-: (`string`) A custom PostCSS stringifier.
-
-syntax
-: (`string`) Custom postcss syntax.
-
-{{< code file=layouts/partials/css.html >}}
-{{ $opts := dict "use" "autoprefixer postcss-color-alpha" }}
-{{ with resources.Get "css/main.css" | postCSS $opts }}
-
-{{ end }}
-{{< /code >}}
-
-## Check Hugo environment
-
-The current Hugo environment name (set by `--environment` or in configuration or OS environment) is available in the Node context, which allows constructs like this:
-
-{{< code file=postcss.config.js >}}
-module.exports = {
- plugins: [
- require('autoprefixer'),
- ...process.env.HUGO_ENVIRONMENT === 'production'
- ? [purgecss]
- : []
- ]
-}
-{{< /code >}}
+See the [`css.PostCSS`](/functions/css/postcss/) function.
diff --git a/content/en/hugo-pipes/postprocess.md b/content/en/hugo-pipes/postprocess.md
index 5a0a5797e..e916dfc4d 100755
--- a/content/en/hugo-pipes/postprocess.md
+++ b/content/en/hugo-pipes/postprocess.md
@@ -1,6 +1,6 @@
---
title: PostProcess
-description: Allows delaying of resource transformations to after the build.
+description: Process the given resource after the build.
categories: [asset management]
keywords: []
menu:
@@ -8,97 +8,6 @@ menu:
parent: hugo-pipes
weight: 50
weight: 50
-action:
- aliases: []
- returnType: postpub.PostPublishedResource
- signatures: [resources.PostProcess RESOURCE]
---
-## Usage
-
-Marking a resource with `resources.PostProcess` delays any transformations to after the build, typically because one or more of the steps in the transformation chain depends on the result of the build (e.g. files in `public`).
-
-A prime use case for this is [CSS purging with PostCSS](#css-purging-with-postcss).
-
-There are currently two limitations to this:
-
-1. This only works in `*.html` templates (i.e. templates that produces HTML files).
-1. You cannot manipulate the values returned from the resource's methods. E.g. the `upper` in this example will not work as expected:
-
- ```go-html-template
- {{ $css := resources.Get "css/main.css" }}
- {{ $css = $css | css.PostCSS | minify | fingerprint | resources.PostProcess }}
- {{ $css.RelPermalink | upper }}
- ```
-
-## CSS purging with PostCSS
-
-{{% note %}}
-There are several ways to set up CSS purging with PostCSS in Hugo. If you have a simple project, you should consider going the simpler route and drop the use of `resources.PostProcess` and just extract keywords from the templates. See the [Tailwind documentation](https://tailwindcss.com/docs/controlling-file-size/#app) for some examples.
-{{% /note %}}
-
-The below configuration will write a `hugo_stats.json` file to the project root as part of the build. If you're only using this for the production build, you should consider placing it below [`config/production`](/getting-started/configuration/#configuration-directory).
-
-{{< code-toggle file=hugo >}}
-[build.buildStats]
- enable = true
-{{< /code-toggle >}}
-
-See the [configure build] documentation for details and options.
-
-[configure build]: /getting-started/configuration/#configure-build
-
-`postcss.config.js`
-
-```js
-const purgecss = require('@fullhuman/postcss-purgecss')({
- content: [ './hugo_stats.json' ],
- defaultExtractor: (content) => {
- let els = JSON.parse(content).htmlElements;
- return els.tags.concat(els.classes, els.ids);
- }
-});
-
-module.exports = {
- plugins: [
- ...(process.env.HUGO_ENVIRONMENT === 'production' ? [ purgecss ] : [])
- ]
- };
-```
-
-Note that in the example above, the "CSS purge step" will only be applied to the production build. This means that you need to do something like this in your head template to build and include your CSS:
-
-```go-html-template
-{{ $css := resources.Get "css/main.css" }}
-{{ $css = $css | css.PostCSS }}
-{{ if hugo.IsProduction }}
-{{ $css = $css | minify | fingerprint | resources.PostProcess }}
-{{ end }}
-
-```
-
-## Hugo environment variables available in PostCSS
-
-These are the environment variables Hugo passes down to PostCSS (and Babel), which allows you do do `process.env.HUGO_ENVIRONMENT === 'production' ? [autoprefixer] : []` and similar:
-
-PWD
-: The absolute path to the project working directory.
-
-HUGO_ENVIRONMENT
-: The value e.g. set with `hugo -e production` (defaults to `production` for `hugo` and `development` for `hugo server`).
-
-HUGO_PUBLISHDIR
-: The absolute path to the publish directory (the `public` directory). Note that the value will always point to a directory on disk even when running `hugo server` in memory mode. If you write to this directory from PostCSS when running the server, you could run the server with one of these flags:
-
-```sh
-hugo server --renderToDisk
-hugo server --renderStaticToDisk
-```
-
-Also, Hugo will add environment variables for all files mounted below `assets/_jsconfig`. A default mount will be set up with files in the project root matching this regexp: `(babel|postcss|tailwind)\.config\.js`.
-
-These will get environment variables named on the form `HUGO_FILE_:filename:` where `:filename:` is all upper case with periods replaced with underscore. This allows you to do this and similar:
-
-```js
-let tailwindConfig = process.env.HUGO_FILE_TAILWIND_CONFIG_JS || './tailwind.config.js';
-```
+See the [`resources.PostProcess`](/functions/resources/postprocess/) function.
diff --git a/content/en/hugo-pipes/resource-from-string.md b/content/en/hugo-pipes/resource-from-string.md
index 53bcfff74..9c943591c 100755
--- a/content/en/hugo-pipes/resource-from-string.md
+++ b/content/en/hugo-pipes/resource-from-string.md
@@ -1,7 +1,7 @@
---
title: FromString
linkTitle: Resource from string
-description: Creates a resource from a string.
+description: Create a resource from a string.
categories: [asset management]
keywords: []
menu:
@@ -9,26 +9,6 @@ menu:
parent: hugo-pipes
weight: 110
weight: 110
-action:
- aliases: []
- returnType: resource.Resource
- signatures: [resources.FromString TARGETPATH STRING]
---
-## Usage
-
-It is possible to create a resource directly from the template using `resources.FromString` which takes two arguments, the target path for the created resource and the given content string.
-
-The result is cached using the target path as the cache key.
-
-The following example creates a resource file containing localized variables for every project's languages.
-
-```go-html-template
-{{ $string := (printf "var rootURL = '%s'; var apiURL = '%s';" (absURL "/") (.Param "API_URL")) }}
-{{ $targetPath := "js/vars.js" }}
-{{ $vars := $string | resources.FromString $targetPath }}
-{{ $global := resources.Get "js/global.js" | resources.Minify }}
-
-
-
-```
+See the [`resources.FromString`](/functions/resources/fromstring/) function.
diff --git a/content/en/hugo-pipes/resource-from-template.md b/content/en/hugo-pipes/resource-from-template.md
index 0c81f0c00..76303822d 100755
--- a/content/en/hugo-pipes/resource-from-template.md
+++ b/content/en/hugo-pipes/resource-from-template.md
@@ -1,7 +1,7 @@
---
title: ExecuteAsTemplate
linkTitle: Resource from template
-description: Creates a resource from a template
+description: Create a resource from a Go template, parsed and executed with the given context.
categories: [asset management]
keywords: []
menu:
@@ -9,30 +9,6 @@ menu:
parent: hugo-pipes
weight: 120
weight: 120
-action:
- aliases: []
- returnType: resource.Resource
- signatures: [resources.ExecuteAsTemplate TARGETPATH CONTEXT RESOURCE]
---
-## Usage
-
-In order to use Hugo Pipes function on an asset file containing Go Template magic the function `resources.ExecuteAsTemplate` must be used.
-
-The function takes three arguments: the target path for the created resource, the template context, and the resource object. The target path is used to cache the result.
-
-```go-html-template
-// assets/sass/template.scss
-$backgroundColor: {{ .Param "backgroundColor" }};
-$textColor: {{ .Param "textColor" }};
-body{
- background-color:$backgroundColor;
- color: $textColor;
-}
-// [...]
-```
-
-```go-html-template
-{{ $sassTemplate := resources.Get "sass/template.scss" }}
-{{ $style := $sassTemplate | resources.ExecuteAsTemplate "main.scss" . | css.Sass }}
-```
+See the [`resources.ExecuteAsTemplate`](/functions/resources/executeastemplate/) function.