hugo: Fix anchor links

- Add example of anchor link using ref to the example/ref page - 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) - Change links in column to '/' instead of a non-existing anchor link Closes cue-lang/cue#2971 Signed-off-by: Jorinde Reijnierse <[email protected]>
cue-lang · Nov 1, 2024 · a05566e · a05566e
1 parent 026db95
commit a05566e
Show file tree

Hide file tree

Showing 21 changed files with 79 additions and 40 deletions.
diff --git a/content/examples/basic/text/en.md b/content/examples/basic/text/en.md
@@ -34,22 +34,23 @@ 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'.  Adding custom IDs allows you to link directly to headings using a custom id/anchor href.
+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 >}}
 
 ---

diff --git a/content/examples/shortcodes/columns/en.md b/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

diff --git a/content/examples/shortcodes/info/en.md b/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

diff --git a/content/examples/shortcodes/ref-relref/en.md b/content/examples/shortcodes/ref-relref/en.md
@@ -15,6 +15,7 @@ Read a more extensive description of `ref` and `relref` in the [Hugo cross refer
 [Links example]({{</* ref "examples/basic/text/index.md#links" */>}})
 
 [Buttons example]({{</* relref "buttons/index.md" */>}})
+
 ```
 
 The result will be just like a link. But the difference is that with ref/relref you link to a file instead of an url.
@@ -23,3 +24,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.
+
diff --git a/content/examples/shortcodes/spotlight/en.md b/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 >}}
 

diff --git a/hugo/assets/ts/main.ts b/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);
             });

diff --git a/hugo/content/en/examples/basic/text/index.md b/hugo/content/en/examples/basic/text/index.md
@@ -34,22 +34,23 @@ 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'.  Adding custom IDs allows you to link directly to headings using a custom id/anchor href.
+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 >}}
 
 ---

diff --git a/hugo/content/en/examples/shortcodes/columns/index.md b/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

diff --git a/hugo/content/en/examples/shortcodes/info/index.md b/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

diff --git a/hugo/content/en/examples/shortcodes/ref-relref/index.md b/hugo/content/en/examples/shortcodes/ref-relref/index.md
@@ -15,6 +15,7 @@ Read a more extensive description of `ref` and `relref` in the [Hugo cross refer
 [Links example]({{</* ref "examples/basic/text/index.md#links" */>}})
 
 [Buttons example]({{</* relref "buttons/index.md" */>}})
+
 ```
 
 The result will be just like a link. But the difference is that with ref/relref you link to a file instead of an url.
@@ -23,3 +24,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.
+
diff --git a/hugo/content/en/examples/shortcodes/spotlight/index.md b/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 >}}
 

diff --git a/hugo/layouts/partials/notification-bar.html b/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 }}">

diff --git a/hugo/layouts/shortcodes/cards.html b/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 }}

diff --git a/hugo/layouts/shortcodes/caution.html b/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 -}}

diff --git a/hugo/layouts/shortcodes/columns.html b/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 -}}

diff --git a/hugo/layouts/shortcodes/info.html b/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 -}}

diff --git a/hugo/layouts/shortcodes/logos__item.html b/hugo/layouts/shortcodes/logos__item.html
@@ -31,7 +31,7 @@
         <span class="sr-only">{{ T "logo_redirect" }} {{ with $name }}{{ . }}{{ end }}</span>
     </a>
 {{ else }}
-    <div class="{{ $cssClass }}"{{ if $popup }} data-dialog-trigger="logo-dialog-{{ .Ordinal }}" aria-label="{{ T "popup_open" }}"{{ end }}>
+    <button class="{{ $cssClass }}"{{ if $popup }} data-dialog-trigger="logo-dialog-{{ .Ordinal }}" aria-label="{{ T "popup_open" }}"{{ end }}>
         <img src="{{ $src }}"
             class="logos__logo"
             width="160"
@@ -47,7 +47,7 @@
         {{ if $popup }}
             {{ partial "icon.html" (dict "icon" "info" "class" "logos__info") }}
         {{ end }}
-    </div>
+    </button>
 {{ end }}
 
 {{ if $popup }}
@@ -78,7 +78,7 @@
 
             <div class="dialog__content">
                 {{ with .Inner }}
-                    {{ . | markdownify }}
+                    {{ . | $.Page.RenderString }}
                 {{ end }}
 
                 {{ if and ($buttonUrl) ($buttonText) }}

diff --git a/hugo/layouts/shortcodes/spotlight.html b/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 }}

diff --git a/hugo/layouts/shortcodes/step.html b/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 -}}

diff --git a/hugo/layouts/shortcodes/table.html b/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>
 

diff --git a/hugo/layouts/shortcodes/warning.html b/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 -}}