Add anchors for headings while keeping existing links on them

[EmilyGraceSeville7cf]

Here is a problematic page. What I wanna do with it:

• enable # automatically appear on eg, TlDr, pros and cons headings on hovering cursor over them
• but at the same time, I wonder to be able to open project’s page (for instance eg GitHub one) by clicking on the header text (not on appearing #)
• also it would be great to have eg, TlDr, pros and cons appear in the TOC

The issue that this project list is auto generated from projects.yaml data file. How can I fix these problems with my site page?

[razon]

Those three issues could be fixed by moving the project’s partial into a shortcode.

layouts/shortcodes/projects.html

{{ range site.Data.projects }}
## {{ printf "[%s](%s)" .name .url }}
{{ .description }}
{{ end }}

content/projects/index.md

{{% projects %}}

Please note that use % instead of < to render the content in Markdown fully. The headings handled by markdownify method will not be included into the TableOfContents.

[EmilyGraceSeville7cf]

Here is my shortcode:

{{ range $project := $.Site.Data.projects }}
{{ printf "## [%s](%s)" $project.name $project.url | emojify }}
{{ $project.description }}
{{ if $project.image }}
{{ printf "![%s](%s)" $project.image $project.name | emojify }}
{{ end }}
{{ if $project.pros }}
{{ printf "%s" "### Pros :smile:" | emojify }}
{{ range $pros := $project.pros }}
- {{ $pros }}
{{ end }}
{{ end }}
{{ if $project.cons }}
{{ printf "%s" "### Cons :disappointed:" | emojify }}
{{ range $cons := $project.cons }}
- {{ $cons }}
{{ end }}
{{ end }}
{{ end }}

and my project page:

---
title: "Similar projects"
date: 2023-03-24T09:12:35+10:00
draft: false
---

# Introduction

There are several projects listed down below.

## List

> :warning: Note: projects are compared to this one.

{{% project_list %}}

There is just one issue left: images are not rendered now. I wonder to know why.

[razon]

@EmilyGraceSeville7cf

{{ printf "![%s](%s)" $project.image $project.name | emojify }}

There is a typo, ![TEXT](IMG_URL), it should be:

{{ printf "![%s](%s)" $project.name $project.image | emojify }}

[EmilyGraceSeville7cf]

@razon

{{ printf "![%s](%s)" $project.name $project.image | emojify }}

Thanks. Hmm… It seems that I can’t reuse {{< image src="git-man.jpg" alt="git man" position="center" style="border-radius: 4px;" >}} in the shortcode. To check whether HTML can be used I’ve typed <h1>bla bla bla</h1> and such headers got discarded after rendering. Is it expected? And how to make image corners rounded in a shortcode which is called with percent signs? Or I have to change theme CSS to do it?

[razon]

@EmilyGraceSeville7cf

It seems that I can’t reuse {{< image src="git-man.jpg" alt="git man" position="center" style="border-radius: 4px;" >}} in the shortcode.

As I know, it’s not allowed that use a shortcode inside the shortcode template, but nested shortcode is valid, see Create your own shortcodes | Hugo for details.

A workaround is that create an image partial, and invoke it inside shortcode template. You can reuse the image partial on the image shortcode.
You can also output the raw HTML, see below.

@EmilyGraceSeville7cf

To check whether HTML can be used I’ve typed <h1>bla bla bla</h1> and such headers got discarded after rendering

I guess the RAW HTML was omitted, you can turn it off.

// config.yaml
markup:
  goldmark:
    renderer:
      unsafe: true

[EmilyGraceSeville7cf]

Yes, it solved my problem.