In-page Anchors

[jerry.nummi]

Is there a way to link to an in page anchor like the screenshot below? Currently the system appends https:// to the front.

[renaud (Renaud Bressand)]

Hey @jerry.nummi,

At the moment we are not planning to work on that. This is an interesting feedback though that i will track as a feature request.

If we start to work on this i’ll let you know.

[jerry.nummi]

Thanks for responding. Am I the first person to make a request for this? I thought linking to another section on a page was a common need.

[marcellothearcane]

Do absolute urls work? i.e. yoursite.com/some-page#some-anchor?

[renaud (Renaud Bressand)]

No you’re not the only one, We might work on that at some point but this is not in our priority list for now. I understand your point and as @marcellothearcane pointed out. You can use absolute url to manage your anchor at the moment.

Can you give maybe more details on your use case ? If it’s a table of content, we might be able to provide an example for that.

[jerry.nummi]

My current use cases are: a sub navigation that links to major sections on the current page; a few links across the site that link to specific sections on other pages.

Absolute URLs will work for me except for localhost development but I can work around that.

[Phil (Phil Snow (On holiday, tag @team-education for help))]

Hey @jerry.nummi,

For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id’s to my H2’s from my rich texts. Like I do here:

  if (type === Elements.heading2) {
    var id = element.text.replace(/\W+/g, '-').toLowerCase();
    return '<h2 id="' + id + '">' + children.join('') + '</h2>';
  }

You can see a full example here.

Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can easily recreate it in whatever technology:

<template>
    <section v-if="sections.length" class="table-of-content">
        <h5>On this page</h5>
        <ul>
            <li v-for="([anchor, text], index) in sections" :key="`section-${index}`">
                <a :href="`#${anchor}`">
                    {{ text }}
                </a>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    name: 'toc-slice',
    props: {
		slices: {
			type: Array,
			required: true
		}
    },
    computed: {
        sections: function () {
            const buildAnchor = (text) => text.replace(/\W+/g, '-').toLowerCase()
            return this.slices
                .map((slice) => {
                    if(!(slice.slice_type === 'title' && slice.primary.title)) return;
                    const heading = slice.primary.title.find(elem => elem.type === 'heading2');
                    if(heading) return [buildAnchor(heading.text), heading.text];
                })
                .filter(e => !!e)
        }
    }
}
</script>

Here’s the full file.

Let me know if you have any questions about this.

Thanks.

[stephanie.eckles]

Adding a bit more context that for documentation sites, anchor links are quite a high priority need for interlinking between content, and having to use absolute URLs is nontrivial barrier for local development and QA of large sites particularly for unpublished content.

[Phil (Phil Snow (On holiday, tag @team-education for help))]

Hi Stephanie,

Thanks for your feedback.

This is an interesting use case. Can you tell me a bit more?

When your linking between content, do you mean content that doesn’t live in Prismic? If it’s inside Prismic you can use the ‘link to a document’ option.

When you say unpublished content, do you mean unpublished content in Prismic? because I’m not sure how anchor links are a solution here. The solution for linking to unpublished content is adding your documents to a release.

Thanks.

[amanda.petersen]

Good Morning Phil,

In regards to this post: In-page Anchors - #10 by Phil I wanted to provide you with more context behind Stephanie's comment.
We are building out a documentation site that has links to sibling pages within paragraphs of text (ie: Panels has a link to Cards - which we need to access via an in-page anchor link). Since that text lives within Prismic, I do not think the proposed solution about rendering the hrefs using the HTMLSerializer will work for us. Additionally, we have a live QA site who's URL would be different than that of our live production site, so hard-coding the URL values is not an ideal or sustainable solution long term.
Any ideas as to potential work arounds for our situation? Or any idea when the in-page anchor-linking will be available?

Thanks!
Amanda

[amanda.petersen]

Hi Phil,

Just checking in to confirm that you saw my comment above?

Thanks!
Amanda

[Phil (Phil Snow (On holiday, tag @team-education for help))]

Hi Amanda,

Welcome to the community!

I was taking some time to compose my response, this is a tricky one.

I'm not 100% sure what you mean when you say, sibling pages. Do you mean they are separate Prismic documents or separate sections within the same page?

I see this issue here since you're working with a QA site and the sub-navigation solution doesn't work for you either. Though parsing the rich text in the HTMLSerializer to replace the domain only in your QA project might help with the hard-coding the URL and at least allow you to advance.

Unfortunately, there are no good workarounds for your use case at the moment. The team is planning to revamp the rich text editor in the next 6 months and hopefully, relative links might be something that is included in that work.

Thanks.