all: Change shortcode usage and design to prevent invalid html

content/en/about/privacy.md

@@ -20,7 +20,7 @@
 
 - GDPR (General Data Protection Regulation): Applies to individuals within the European Union and the European Economic Area.
 - CCPA (California Consumer Privacy Act): Applies to California residents.
 - CPRA (California Privacy Rights Act): Expands upon the CCPA with stronger consumer privacy protections.
 - Virginia Consumer Data Protection Act (CDPA): Applies to businesses that collect, process, or sell the personal data of Virginia residents.
 
 Hugo's privacy settings can assist in compliance efforts.
@@ -34,9 +34,9 @@
 
 ## Configuration
 
-{{% note %}}
+{{< note >}}
 These settings affect the behavior of some of Hugo's embedded templates. These settings may or may not affect the behavior of templates provided by third parties in their modules or themes.
-{{% /note %}}
+{{< /note >}}
 
 These are the default privacy settings for Hugo's embedded templates:
 

content/en/content-management/build-options.md

@@ -60,12 +60,12 @@ render
 [`RelPermalink`]: /methods/resource/relpermalink/
 [`Publish`]: /methods/resource/publish/
 
-{{% note %}}
+{{< note >}}
 Any page, regardless of its build options, will always be available by using the [`.Page.GetPage`] or [`.Site.GetPage`] method.
 
 [`.Page.GetPage`]: /methods/page/getpage/
 [`.Site.GetPage`]: /methods/site/getpage/
-{{% /note %}}
+{{< /note >}}
 
 ## Example -- headless page
 

content/en/content-management/content-adapters.md

@@ -91,9 +91,9 @@ Returns the `Site` to which the pages will be added.
 {{ .Site.Title }}
 {{< /code >}}
 
-{{% note %}}
+{{< note >}}
 Note that the `Site` returned isn't fully built when invoked from the content adapters; if you try to call methods that depends on pages, e.g. `.Site.Pages`, you will get an error saying "this method cannot be called before the site is fully initialized".
-{{% /note %}}
+{{< /note >}}
 
 ###### Store
 
@@ -141,11 +141,11 @@ Key|Description|Required
 `path`|The page's [logical path](g) relative to the content adapter. Do not include a leading slash or file extension.|:heavy_check_mark:
 `title`|The page title.|&nbsp;
 
-{{% note %}}
+{{< note >}}
 While `path` is the only required field, we recommend setting `title` as well.
 
 When setting the `path`, Hugo transforms the given string to a logical path. For example, setting `path` to `A B C` produces a logical path of `/section/a-b-c`.
-{{% /note %}}
+{{< /note >}}
 
 ## Resource map
 
@@ -160,11 +160,11 @@ Key|Description|Required
 `path`|The resources's [logical path](g) relative to the content adapter. Do not include a leading slash.|:heavy_check_mark:
 `title`|The resource title.|&nbsp;
 
-{{% note %}}
+{{< note >}}
 If the `content.value` is a string Hugo creates a new resource. If the `content.value` is a resource, Hugo obtains the value from the existing resource.
 
 When setting the `path`, Hugo transforms the given string to a logical path. For example, setting `path` to `A B C/cover.jpg` produces a logical path of `/section/a-b-c/cover.jpg`.
-{{% /note %}}
+{{< /note >}}
 
 ## Example
 

content/en/content-management/data-sources.md

@@ -22,9 +22,9 @@ The `data` directory in the root of your project may contain one or more data fi
 
 Hugo also merges data directories from themes and modules into this single data structure, where the `data` directory in the root of your project takes precedence.
 
-{{% note %}}
+{{< note >}}
 Hugo reads the combined data structure into memory and keeps it there for the entire build. For data that is infrequently accessed, use global or page resources instead.
-{{% /note %}}
+{{< /note >}}
 
 Theme and module authors may wish to namespace their data files to prevent collisions. For example:
 
@@ -35,9 +35,9 @@ project/
         └── foo.json
 ```
 
-{{% note %}}
+{{< note >}}
 Do not place CSV files in the `data` directory. Access CSV files as page, global, or remote resources.
-{{% /note %}}
+{{< /note >}}
 
 See the documentation for the [`Data`] method on a `Site` object for details and examples.
 

content/en/content-management/front-matter.md

@@ -45,11 +45,11 @@ Front matter fields may be [boolean](g), [integer](g), [float](g), [string](g),
 
 The most common front matter fields are `date`, `draft`, `title`, and `weight`, but you can specify metadata using any of fields below.
 
-{{% note %}}
+{{< note >}}
 The field names below are reserved. For example, you cannot create a custom field named `type`. Create custom fields under the `params` key. See the [parameters] section for details.
 
 [parameters]: #parameters
-{{% /note %}}
+{{< /note >}}
 
 ###### aliases
 
@@ -382,11 +382,11 @@ Use any combination of these keywords to target a set of pages:
 
 Any of the above can be omitted.
 
-{{% note %}}
+{{< note >}}
 With a multilingual site it may be more efficient to define the `cascade` values in your site configuration to avoid duplicating the `cascade` values on the section, taxonomy, or term page for each language.
 
 With a multilingual site, if you choose to define the `cascade` values in front matter, you must create a section, taxonomy, or term page for each language; the `lang` keyword is ignored.
-{{% /note %}}
+{{< /note >}}
 
 ### Example
 

content/en/content-management/image-processing/index.md

@@ -104,17 +104,17 @@ Example 4: Skips rendering if there's problem accessing a remote resource.
 
 The `image` resource implements the  [`Process`],  [`Resize`], [`Fit`], [`Fill`], [`Crop`], [`Filter`], [`Colors`] and [`Exif`] methods.
 
-{{% note %}}
+{{< note >}}
 Metadata (EXIF, IPTC, XMP, etc.) is not preserved during image transformation. Use the `Exif` method with the _original_ image to extract EXIF metadata from JPEG, PNG, TIFF, and WebP images.
-{{% /note %}}
+{{< /note >}}
 
 ### Process
 
 {{< new-in 0.119.0 />}}
 
-{{% note %}}
+{{< note >}}
 The `Process` method is also available as a filter, which is more effective if you need to apply multiple filters to an image. See [Process filter](/functions/images/process).
-{{% /note %}}
+{{< /note >}}
 
 Process processes the image with the given specification. The specification can contain an optional action, one of `resize`, `crop`, `fit` or `fill`. This means that you can use this method instead of [`Resize`], [`Fit`], [`Fill`], or [`Crop`].
 
@@ -460,11 +460,11 @@ excludeFields
 includeFields
 : Regular expression matching the EXIF tags to include in the `.Tags` collection. Default is&nbsp;`""`. To include all available tags, set this value to&nbsp;`".*"`.
 
-  {{% note %}}
+  {{< note >}}
   To improve performance and decrease cache size, Hugo excludes the following tags: `ColorSpace`, `Contrast`, `Exif`, `Exposure[M|P|B]`, `Flash`, `GPS`, `JPEG`, `Metering`, `Resolution`, `Saturation`, `Sensing`, `Sharp`, and `WhiteBalance`.
 
   To control tag availability, change the `excludeFields` or `includeFields` settings as described above.
-  {{% /note %}}
+  {{< /note >}}
 
 ## Smart cropping of images
 

content/en/content-management/mathematics.md

@@ -43,13 +43,13 @@ Equations and expressions can be displayed inline with other text, or as standal
 
 Whether an equation or expression appears inline, or as a block, depends on the delimiters that surround the mathematical markup. Delimiters are defined in pairs, where each pair consists of an opening and closing delimiter. The opening and closing delimiters may be the same, or different.
 
-{{% note %}}
+{{< note >}}
 You can configure Hugo to render mathematical markup on the client side using the MathJax or KaTeX display engine, or you can render the markup with the [`transform.ToMath`] function while building your site.
 
 The first approach is described below.
 
 [`transform.ToMath`]: /functions/transform/tomath/
-{{% /note %}}
+{{< /note >}}
 
 ## Setup
 
@@ -73,11 +73,11 @@ math = true
 
 The configuration above enables mathematical rendering on every page unless you set the `math` parameter to `false` in front matter. To enable mathematical rendering as needed, set the `math` parameter to `false` in your site configuration, and set the `math` parameter to `true` in front matter. Use this parameter in your base template as shown in [Step 3].
 
-{{% note %}}
+{{< note >}}
 The configuration above precludes the use of the `$...$` delimiter pair for inline equations. Although you can add this delimiter pair to the configuration and JavaScript, you will need to double-escape the `$` symbol when used outside of math contexts to avoid unintended formatting.
 
 See the [inline delimiters](#inline-delimiters) section for details.
-{{% /note %}}
+{{< /note >}}
 
 To disable passthrough of inline snippets, omit the `inline` key from the configuration:
 
@@ -178,19 +178,19 @@ If you add the `$...$` delimiter pair to your configuration and JavaScript, you
 A \\$5 bill _saved_ is a \\$5 bill _earned_.
 ```
 
-{{% note %}}
+{{< note >}}
 If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
-{{% /note %}}
+{{< /note >}}
 
 ## Engines
 
 MathJax and KaTeX are open-source JavaScript display engines. Both engines are fast, but at the time of this writing MathJax v3.2.2 is slightly faster than KaTeX v0.16.11.
 
-{{% note %}}
+{{< note >}}
 If you use the `$...$` delimiter pair for inline equations, and occasionally use the&nbsp;`$`&nbsp;symbol outside of math contexts, you must use MathJax instead of KaTeX to avoid unintended formatting caused by [this KaTeX limitation](https://github.com/KaTeX/KaTeX/issues/437).
 
 See the [inline delimiters](#inline-delimiters) section for details.
-{{% /note %}}
+{{< /note >}}
 
 To use KaTeX instead of MathJax, replace the partial template from [Step 2] with this:
 

content/en/content-management/menus.md

@@ -28,9 +28,9 @@ There are three ways to define menu entries:
 1. In front matter
 1. In site configuration
 
-{{% note %}}
+{{< note >}}
 Although you can use these methods in combination when defining a menu, the menu will be easier to conceptualize and maintain if you use one method throughout the site.
-{{% /note %}}
+{{< /note >}}
 
 ## Define automatically
 
@@ -62,9 +62,9 @@ menus = ['main','footer']
 
 Access the entry with `site.Menus.main` and `site.Menus.footer` in your templates. See [menu templates] for details.
 
-{{% note %}}
+{{< note >}}
 The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
-{{% /note %}}
+{{< /note >}}
 
 ### Properties {#properties-front-matter}
 
@@ -149,17 +149,17 @@ weight = 20
 
 This creates a menu structure that you can access with `site.Menus.footer` in your templates. See [menu templates] for details.
 
-{{% note %}}
+{{< note >}}
 The configuration key in the examples above is `menus`. The `menu` (singular) configuration key is an alias for `menus`.
-{{% /note %}}
+{{< /note >}}
 
 ### Properties {#properties-site-configuration}
 
-{{% note %}}
+{{< note >}}
 The [properties available to entries defined in front matter] are also available to entries defined in site configuration.
 
 [properties available to entries defined in front matter]: /content-management/menus/#properties-front-matter
-{{% /note %}}
+{{< /note >}}
 
 Each menu entry defined in site configuration requires two or more properties:
 

content/en/content-management/multilingual.md

@@ -30,9 +30,9 @@ Artificial languages with private use subtags as defined in [RFC 5646 § 2.2.7]
 
 - `hugolang`
 
-{{% note %}}
+{{< note >}}
 Private use subtags must not exceed 8 alphanumeric characters.
-{{% /note %}}
+{{< /note >}}
 
 [RFC 5646]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.1
 [RFC 5646 § 2.2.7]: https://datatracker.ietf.org/doc/html/rfc5646#section-2.2.7
@@ -174,9 +174,9 @@ Note that you cannot disable the default content language.
 
 Hugo supports multiple languages in a multihost configuration. This means you can configure a `baseURL` per `language`.
 
-{{% note %}}
+{{< note >}}
 If a `baseURL` is set on the `language` level, then all languages must have one and they must all be different.
-{{% /note %}}
+{{< /note >}}
 
 Example:
 
@@ -232,9 +232,9 @@ Their language is __assigned__ according to the language code added as a __suffi
 
 By having the same **path and base file name**, the content pieces are __linked__ together as translated pages.
 
-{{% note %}}
+{{< note >}}
 If a file has no language code, it will be assigned the default language.
-{{% /note %}}
+{{< /note >}}
 
 ### Translation by content directory
 
@@ -314,9 +314,9 @@ If, across the linked bundles, two or more files share the same basename, only o
 * File from current language bundle, if present.
 * First file found across bundles by order of language `Weight`.
 
-{{% note %}}
+{{< note >}}
 Page Bundle resources follow the same language assignment logic as content files, both by file name (`image.jpg`, `image.fr.jpg`) and by directory (`english/about/header.jpg`, `french/about/header.jpg`).
-{{%/ note %}}
+{{< /note >}}
 
 ## Reference translated content
 
@@ -588,9 +588,9 @@ If a string does not have a translation for the current language, Hugo will use
 
 While translating a Hugo website, it can be handy to have a visual indicator of missing translations. The [`enableMissingTranslationPlaceholders` configuration option][config] will flag all untranslated strings with the placeholder `[i18n] identifier`, where `identifier` is the id of the missing translation.
 
-{{% note %}}
+{{< note >}}
 Hugo will generate your website with these missing translation placeholders. It might not be suitable for production environments.
-{{% /note %}}
+{{< /note >}}
 
 For merging of content from other languages (i.e. missing content translations), see [lang.Merge].
 

content/en/content-management/organization/index.md

@@ -73,9 +73,9 @@ The following demonstrates the relationships between your content organization a
 
 `_index.md` has a special role in Hugo. It allows you to add front matter and content to `home`, `section`, `taxonomy`, and `term` pages. 
 
-{{% note %}}
+{{< note >}}
 **Tip:** You can get a reference to the content and metadata in `_index.md` using the [`.Site.GetPage` function](/methods/page/getpage).
-{{% /note %}}
+{{< /note >}}
 
 You can create one `_index.md` for your home page and one in each of your content sections, taxonomies, and terms. The following shows typical placement of an `_index.md` that would contain content and front matter for a `posts` section list page on a Hugo website:
 

content/en/content-management/page-bundles.md

@@ -35,9 +35,9 @@ leaf bundle
 branch bundle
 : A _branch bundle_ is a directory that contains an `_index.md` file and zero or more resources. Analogous to a physical branch, a branch bundle may have descendants including leaf bundles and other branch bundles. Top level directories with or without `_index.md` files are also branch bundles. This includes the home page.
 
-{{% note %}}
+{{< note >}}
 In the definitions above and the examples below, the extension of the index file depends on the [content format](g). For example, use `index.md` for Markdown content, `index.html` for HTML content, `index.adoc` for AsciiDoc content, etc.
-{{% /note %}}
+{{< /note >}}
 
 ## Comparison
 
@@ -108,9 +108,9 @@ my-other-post
 another-leaf-bundle
 : This leaf bundle does not contain any page resources.
 
-{{% note %}}
+{{< note >}}
 Create leaf bundles at any depth within the `content` directory, but a leaf bundle may not contain another bundle. Leaf bundles do not have descendants.
-{{% /note %}}
+{{< /note >}}
 
 ## Branch bundles
 
@@ -142,9 +142,9 @@ branch-bundle-1
 branch-bundle-2
 : This branch bundle contains an index file and a leaf bundle.
 
-{{% note %}}
+{{< note >}}
 Create branch bundles at any depth within the `content` directory. Branch bundles may have descendants.
-{{% /note %}}
+{{< /note >}}
 
 ## Headless bundles