hugo: Fix anchor links

- Add example of anchor link using ref to the example/ref page (this is not
mandatory to use this way but it can be used like this)
- Add working example to Example - Text on how to use custom-id's.
- Fix smoothscroll of anchor links that start with the path of the current
page (instead of starting with #)
- Change markdownify to $.Page.RenderString so anchor links get rendered
correctly (recommended by hugo for more complicated markdown which uses the
Page context such as anchor links, see highlighted block on https://gohugo.io/functions/transform/markdownify/)
. Only tabs still uses markdownify because for some reason RenderString does
not work here because it's a partial inside a shortcode.
- Change links in example/columns to '/' instead of a non-existing anchor link

To test:
Go to /examples and test if all the shortcodes are still working as expected.

Closes cue-lang/cue#2971

Signed-off-by: Jorinde Reijnierse <[email protected]>

content/examples/basic/text/en.md

@@ -34,22 +34,24 @@ Also on simple detail page's you should generally not use a Heading 1 in the con
 This is because the main title of the page is already a Heading 1.
 
 
-### Heading - Custom Ids
+### Heading - Custom Ids {#custom-id}
 
-Adding custom IDs allows you to link directly to headings. To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.
+By default Hugo adds the slugified header as the id. For instance: "Heading 2" becomes id 'heading-2'.  Providing a custom id allows you to override the automatically generated id, and can be linked to using the custom id as a URL fragment (e.g. `.../url/path/page#custom-id`).
+
+To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.
 
 ```
 ### My Great Heading {#custom-id}
 ```
 
-You can link to headings with custom IDs in the file by creating a standard link with a number sign (#) followed by the custom heading ID. These are commonly referred to as anchor links.
+You can link to headings with (custom) IDs in the file by creating a standard link with a hash sign (#) followed by the custom heading ID. These are commonly referred to as anchor links.
 
 {{< columns >}}
 ```
-[Go to Paragraphs](#paragraphs)
+[Go to Custom Id Header](#custom-id)
 ```
 {{< columns-separator >}}
-[Go to Paragraphs](#paragraphs)
+[Go to Custom Id Header](#custom-id)
 {{< /columns >}}
 
 ---

content/examples/shortcodes/columns/en.md

@@ -31,13 +31,13 @@ turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor es
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec molestie tortor est eget erat.
 {{< columns-separator >}}
 #### Column 2
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec molestie tortor est eget erat.
 {{< /columns >}}
 
 ## 3 columns

content/examples/shortcodes/info/en.md

@@ -15,7 +15,7 @@ In order to show an informative highlight, you can use `{{</* info */>}}`.
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#info) erat.
 {{</* /info */>}}
 ```
 
@@ -26,7 +26,7 @@ The rendered output looks like this:
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#info) erat.
 {{< /info >}}
 
 ## Warning

content/examples/shortcodes/ref-relref/en.md

@@ -23,3 +23,20 @@ The result will be just like a link. But the difference is that with ref/relref
 
 [Buttons example]({{< relref "buttons/index.md" >}})
 
+Ref can also be used for anchor links:
+
+```
+[Anchor links example]({{</* ref "#anchor-header" */>}})
+
+```
+
+[Anchor links example]({{<ref "#anchor-header" >}})
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non felis non justo lobortis tempus ut vitae diam. Quisque ultrices nec ipsum et posuere. Vestibulum non malesuada eros, posuere luctus nulla. In hac habitasse platea dictumst. Nulla dapibus erat odio, ac dignissim quam ullamcorper in. Vivamus vitae metus justo. In hac habitasse platea dictumst. Quisque est nibh, tincidunt sed imperdiet vitae, convallis vel mauris. Nullam porttitor velit vel augue iaculis, eget molestie est ultrices. Sed metus nulla, sodales aliquam sapien at, blandit dignissim arcu.
+
+## Anchor header
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non felis non justo lobortis tempus ut vitae diam. Quisque ultrices nec ipsum et posuere. Vestibulum non malesuada eros, posuere luctus nulla. In hac habitasse platea dictumst. Nulla dapibus erat odio, ac dignissim quam ullamcorper in. Vivamus vitae metus justo. In hac habitasse platea dictumst. Quisque est nibh, tincidunt sed imperdiet vitae, convallis vel mauris. Nullam porttitor velit vel augue iaculis, eget molestie est ultrices. Sed metus nulla, sodales aliquam sapien at, blandit dignissim arcu.
+
+Curabitur quis consectetur lectus. Cras dictum fermentum sapien, sed sollicitudin quam volutpat a. Aenean pellentesque volutpat tincidunt. Duis vestibulum auctor risus at laoreet. Vivamus tincidunt erat et lacus suscipit, nec maximus enim efficitur. Ut auctor quis arcu in iaculis. Ut pharetra rutrum ante non aliquam. Donec nec nisi in mauris lacinia iaculis. Donec cursus mattis orci. Praesent nec ex nec ipsum hendrerit vehicula eu eu mauris. Nulla tincidunt tellus eu lacinia lobortis. Morbi sed orci tellus. Vivamus eget imperdiet magna. Vivamus dictum sit amet sapien quis sodales. Cras nec orci eget quam ornare tempus non sed nibh. Duis sed dolor dolor.
+

content/examples/shortcodes/spotlight/en.md

@@ -12,8 +12,8 @@ In order to spotlight some content, you can use `{{</* spotlight */>}}`.
 
 ## Prerequisites
 
-- **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
-- **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
+- **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
+- **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
 
 {{</* /spotlight */>}}
 ```
@@ -24,8 +24,8 @@ The rendered output looks like this:
 
 ## Prerequisites
 
--   **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
--   **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
+-   **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
+-   **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
 
 {{< /spotlight >}}
 

hugo/assets/ts/main.ts

@@ -99,10 +99,11 @@ class App {
             scrollToHash(hash);
         }
 
-        document.querySelectorAll('a[href^="#"]').forEach((element) => {
+        const currentPath = window.location.pathname;
+        document.querySelectorAll(`a[href^="#"], a[href^="${currentPath}#"]`).forEach((element) => {
             element.addEventListener('click', (e) => {
                 e.preventDefault();
-                const target = element.getAttribute('href');
+                const target = element.getAttribute('href').replace(currentPath, '');
                 window.history.replaceState(null, '', target);
                 scrollToHash(target);
             });

hugo/content/en/examples/basic/text/index.md

@@ -34,22 +34,24 @@ Also on simple detail page's you should generally not use a Heading 1 in the con
 This is because the main title of the page is already a Heading 1.
 
 
-### Heading - Custom Ids
+### Heading - Custom Ids {#custom-id}
 
-Adding custom IDs allows you to link directly to headings. To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.
+By default Hugo adds the slugified header as the id. For instance: "Heading 2" becomes id 'heading-2'.  Providing a custom id allows you to override the automatically generated id, and can be linked to using the custom id as a URL fragment (e.g. `.../url/path/page#custom-id`).
+
+To add a custom heading ID, enclose the custom ID in curly braces on the same line as the heading.
 
 ```
 ### My Great Heading {#custom-id}
 ```
 
-You can link to headings with custom IDs in the file by creating a standard link with a number sign (#) followed by the custom heading ID. These are commonly referred to as anchor links.
+You can link to headings with (custom) IDs in the file by creating a standard link with a hash sign (#) followed by the custom heading ID. These are commonly referred to as anchor links.
 
 {{< columns >}}
 ```
-[Go to Paragraphs](#paragraphs)
+[Go to Custom Id Header](#custom-id)
 ```
 {{< columns-separator >}}
-[Go to Paragraphs](#paragraphs)
+[Go to Custom Id Header](#custom-id)
 {{< /columns >}}
 
 ---

hugo/content/en/examples/shortcodes/columns/index.md

@@ -31,13 +31,13 @@ turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor es
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec molestie tortor est eget erat.
 {{< columns-separator >}}
 #### Column 2
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum posuere nisl quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec molestie tortor est eget erat.
 {{< /columns >}}
 
 ## 3 columns

hugo/content/en/examples/shortcodes/info/index.md

@@ -15,7 +15,7 @@ In order to show an informative highlight, you can use `{{</* info */>}}`.
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#info) erat.
 {{</* /info */>}}
 ```
 
@@ -26,7 +26,7 @@ The rendered output looks like this:
 
 Lorem ipsum *dolor sit amet*, consectetur adipiscing elit. Phasellus tristique lectus ut bibendum tincidunt. Vestibulum `posuere nisl` quis bibendum fermentum.
 Aenean viverra commodo erat ac porttitor. Suspendisse **a interdum leo**. Etiam volutpat lectus auctor, porttitor urna et, egestas quam. Curabitur sodales,
-turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#link) erat.
+turpis id tristique blandit, purus orci efficitur velit, nec [molestie tortor est eget](#info) erat.
 {{< /info >}}
 
 ## Warning

hugo/content/en/examples/shortcodes/ref-relref/index.md

@@ -23,3 +23,20 @@ The result will be just like a link. But the difference is that with ref/relref
 
 [Buttons example]({{< relref "buttons/index.md" >}})
 
+Ref can also be used for anchor links:
+
+```
+[Anchor links example]({{</* ref "#anchor-header" */>}})
+
+```
+
+[Anchor links example]({{<ref "#anchor-header" >}})
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non felis non justo lobortis tempus ut vitae diam. Quisque ultrices nec ipsum et posuere. Vestibulum non malesuada eros, posuere luctus nulla. In hac habitasse platea dictumst. Nulla dapibus erat odio, ac dignissim quam ullamcorper in. Vivamus vitae metus justo. In hac habitasse platea dictumst. Quisque est nibh, tincidunt sed imperdiet vitae, convallis vel mauris. Nullam porttitor velit vel augue iaculis, eget molestie est ultrices. Sed metus nulla, sodales aliquam sapien at, blandit dignissim arcu.
+
+## Anchor header
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non felis non justo lobortis tempus ut vitae diam. Quisque ultrices nec ipsum et posuere. Vestibulum non malesuada eros, posuere luctus nulla. In hac habitasse platea dictumst. Nulla dapibus erat odio, ac dignissim quam ullamcorper in. Vivamus vitae metus justo. In hac habitasse platea dictumst. Quisque est nibh, tincidunt sed imperdiet vitae, convallis vel mauris. Nullam porttitor velit vel augue iaculis, eget molestie est ultrices. Sed metus nulla, sodales aliquam sapien at, blandit dignissim arcu.
+
+Curabitur quis consectetur lectus. Cras dictum fermentum sapien, sed sollicitudin quam volutpat a. Aenean pellentesque volutpat tincidunt. Duis vestibulum auctor risus at laoreet. Vivamus tincidunt erat et lacus suscipit, nec maximus enim efficitur. Ut auctor quis arcu in iaculis. Ut pharetra rutrum ante non aliquam. Donec nec nisi in mauris lacinia iaculis. Donec cursus mattis orci. Praesent nec ex nec ipsum hendrerit vehicula eu eu mauris. Nulla tincidunt tellus eu lacinia lobortis. Morbi sed orci tellus. Vivamus eget imperdiet magna. Vivamus dictum sit amet sapien quis sodales. Cras nec orci eget quam ornare tempus non sed nibh. Duis sed dolor dolor.
+

hugo/content/en/examples/shortcodes/spotlight/index.md

@@ -12,8 +12,8 @@ In order to spotlight some content, you can use `{{</* spotlight */>}}`.
 
 ## Prerequisites
 
-- **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
-- **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
+- **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
+- **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
 
 {{</* /spotlight */>}}
 ```
@@ -24,8 +24,8 @@ The rendered output looks like this:
 
 ## Prerequisites
 
--   **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
--   **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
+-   **A tool to edit text files.** Any text editor you have will be fine. Some popular text editors are VSCode, Vim, Nano, and Emacs; but if you need to use Notepad that will work fine.
+-   **A command terminal.** `cue` works well using any terminal on Linux and Mac, and on PowerShell or `cmd.exe` in Windows.
 
 {{< /spotlight >}}
 

hugo/layouts/partials/notification-bar.html

@@ -3,7 +3,7 @@
     <div class="notification-bar is-hidden" data-notification-bar="{{ .type | default "default" }}">
         <div class="notification-bar__container">
             <div class="notification-bar__content">
-                {{ .content | markdownify }}
+                {{ .content | $.Page.RenderString }}
             </div>
             {{ if .button -}}
                 <a class="button button--outline notification-bar__cta" href="{{ .button.link }}">

hugo/layouts/shortcodes/cards.html

@@ -9,7 +9,7 @@
                 <h3 class="cards__title">{{ $card.title }}</h3>
 
                 <div class="cards__content">
-                    {{ $card.content | markdownify }}
+                    {{ $card.content | $.Page.RenderString }}
                 </div>
 
                 {{ if and $card.href $card.label }}

hugo/layouts/shortcodes/caution.html

@@ -3,7 +3,7 @@
 
     <div class="note__content">
         {{- if eq .Page.File.Ext "md" -}}
-            {{- .Inner | markdownify -}}
+            {{- .Inner | $.Page.RenderString -}}
         {{- else -}}
             {{- .Inner | htmlUnescape | safeHTML -}}
         {{- end -}}

hugo/layouts/shortcodes/columns.html

@@ -1,7 +1,7 @@
 <div id="side-{{ .Ordinal }}" class="columns">
     <div class="columns__col">
         {{- if eq .Page.File.Ext "md" -}}
-            {{- .Inner | markdownify -}}
+            {{- .Inner | $.Page.RenderString  -}}
         {{- else -}}
             {{- .Inner | htmlUnescape | safeHTML -}}
         {{- end -}}

hugo/layouts/shortcodes/info.html

@@ -3,7 +3,7 @@
 
     <div class="note__content">
         {{- if eq .Page.File.Ext "md" -}}
-            {{- .Inner | markdownify -}}
+            {{- .Inner | $.Page.RenderString -}}
         {{- else -}}
             {{- .Inner | htmlUnescape | safeHTML -}}
         {{- end -}}

hugo/layouts/shortcodes/logos__item.html

@@ -78,7 +78,7 @@
 
             <div class="dialog__content">
                 {{ with .Inner }}
-                    {{ . | markdownify }}
+                    {{ . | $.Page.RenderString }}
                 {{ end }}
 
                 {{ if and ($buttonUrl) ($buttonText) }}

hugo/layouts/shortcodes/spotlight.html

@@ -18,7 +18,7 @@ <h2 class="spotlight__title">{{ . }}</h2>
 
     <div class="spotlight__content">
         {{ if eq .Page.File.Ext "md" -}}
-            {{ .Inner | markdownify }}
+            {{ .Inner | $.Page.RenderString }}
         {{ else -}}
             {{ .Inner | htmlUnescape | safeHTML }}
         {{- end }}

hugo/layouts/shortcodes/step.html

@@ -11,7 +11,7 @@
 
     <div class="step__content">
         {{- if eq .Page.File.Ext "md" -}}
-            {{- .Inner | markdownify -}}
+            {{- .Inner | $.Page.RenderString -}}
         {{- else -}}
             {{- .Inner | htmlUnescape | safeHTML -}}
         {{- end -}}

hugo/layouts/shortcodes/table.html

@@ -6,7 +6,7 @@
     {{- if $dataFile -}}
         {{- template "data-table" (dict "file" $dataFile) -}}
     {{- else -}}
-        {{- .Inner | markdownify -}}
+        {{- .Inner | $.Page.RenderString -}}
     {{- end -}}
 </div>
 

hugo/layouts/shortcodes/warning.html

@@ -3,7 +3,7 @@
 
     <div class="note__content">
         {{- if eq .Page.File.Ext "md" -}}
-            {{- .Inner | markdownify -}}
+            {{- .Inner | $.Page.RenderString -}}
         {{- else -}}
             {{- .Inner | htmlUnescape | safeHTML -}}
         {{- end -}}