cuelang.org: frontend: markdown links to fragments on the same page are broken when used inside several different shortcodes

cue-lang / cue

The home of the CUE language! Validate and define text-based and dynamic configuration

https://cuelang.org

Apache License 2.0

5.02k stars 287 forks source link

cuelang.org: frontend: markdown links to fragments on the same page are broken when used inside several different shortcodes #2971

Open jpluscplusm opened 6 months ago

jpluscplusm commented 6 months ago

What page were you looking at?

https://cuelang.org/examples/shortcodes/columns/

What version of the site were you looking at?

https://github.com/cue-lang/cuelang.org/commit/8d19ca9120f1f8b8d85da21df0fb192fcb95d85c

What did you do?

The links inside the column examples on the above /examples/shortcodes/columns/ page are broken.

I noticed this whilst trying to use markdown to create a link to a section on the same page, inside a column:

{{< columns >}}
[link to foo](#foo)
{{< columns-separator >}}
[link to bar](#bar)
{{< /columns >}}

## foo

some foo

## bar

some bar

## these links work correctly

- [link to foo](#foo)
- [link to bar](#bar)

What did you expect?

I expected the links to work, moving the reader around inside the same page.

What did you see instead?

The links incorrectly took me to the root of the site, with the links' fragments in the URL.

The links at the /end/ of my example work correctly, suggesting it's a problem with columns and not fragment-only links in general.

jpluscplusm commented 5 months ago

This also strikes inside info, caution and warning blocks:

{{< warning >}}
If this goes wrong, restart the tutorial from [step 1](#step-1)
{{< warning >}}

This renders as a link to the root of the site, with the given fragment.

myitcv commented 4 months ago

How much of an issue is this, @jpluscplusm ?

jpluscplusm commented 4 months ago

How much of an issue is this, @jpluscplusm ?

At the moment I've seen it strike in a few places, not least the examples page itself: https://cuelang.org/examples/shortcodes/columns/ (notice the "molestie tortor est eget]" links now go to the top of the site).

This will be an ongoing problem for pages with internal links, such as reference guides.

It feels related to #3002 and #3005, in that a single fix (or a fix per containing-shortcode) will resolve this across several different triggering scenarios (i.e. this issue tracks the effect on links; but it also occurs with info blocks and code blocks).

myitcv commented 4 months ago

At the moment I've seen it strike in a few places, not least the examples page itself: https://cuelang.org/examples/shortcodes/columns/ (notice the "molestie tortor est eget]" links now go to the top of the site).

Is it blocking/interfering with any content?

jpluscplusm commented 4 months ago

Is it blocking/interfering with any content?

From memory, I worked around it on a page that's now merged. It's not currently blocking anything.

anne-usmedia commented 3 months ago

@jpluscplusm this issue has multiple problems.

The first one is that the links in the description are wrong. You should switch the [] and (). So, not (link to foo)[#foo], but [link to foo](#foo).
The other one is that; when using just an id and when the link is in a column shortcode, the link redirects to the homepage. This is indeed weird behaviour since the header whit the according id is actually present on the current page. For some reason it adds a slash in front of the id. As you have mentioned, the links in the list do not have this issue.

jpluscplusm commented 3 months ago

@jpluscplusm this issue has multiple problems.

The first one is that the links in the description are wrong. You should switch the [] and (). So, not (link to foo)[#foo], but [link to foo](#foo).

You're absolutely correct @anne-usmedia! Annoyingly, that's a result of my typing in the issue manually, rather than copying a "failing" example that I had on my machine, so correcting this doesn't represent a "fix" :-) I've fixed up the issue's initial example - thanks for spotting!

The other one is that; when using just an id and when the link is in a column shortcode, the link redirects to the homepage. This is indeed weird behaviour since the header whit the according id is actually present on the current page. For some reason it adds a slash in front of the id. As you have mentioned, the links in the list do not have this issue.

This is the problem that I intended this issue to track, and that the (now corrected!) example suffers from -- along with the same behaviour inside info, warning and caution blocks, as mentioned in https://github.com/cue-lang/cue/issues/2971#issuecomment-2032585138

anne-usmedia commented 3 months ago

Even though the link and the info/warning/caution blocks break when inside another shortcode, they do not seem to have the same fix. The other issue was caused by markdown vs html, this issue has something to do with how the link is build. It needs more investigating.

jpluscplusm commented 3 months ago

@anne-usmedia Given that it's unrelated, please don't re-prioritise (and work on) this issue solely based on my mention of it in the context of those other issues. This issue isn't directly affecting us right now!

JorindeUsMedia commented 1 month ago

I think I found it:

https://gohugo.io/functions/transform/markdownify/ >

Although the markdownify function honors Markdown render hooks when rendering Markdown to HTML, use the RenderString method instead of markdownify if a render hook accesses .Page context. See issue #9692 for details.

https://github.com/gohugoio/hugo/issues/9692

I think we need to use

{{- $.Page.RenderString .Inner -}} instead of

{{- .Inner | markdownify -}}

I will check in which components we use markdownify and change it.