In-page Anchors

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.

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.

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

1 Like

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.

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.

1 Like

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>';
  }

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.

2 Likes

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.

7 Likes

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.

A post was merged into an existing topic: Link field relative

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

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

Hi Phil,

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

Thanks!
Amanda

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.

This is being tracked as an open feature request.

If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the :heart: button to show your support for the feature and check out our Feature Request Guidelines.

Just to add my support for Michael - every single client I've worked with has requested this feature and is something that is missing from the core functionality of the product

Oh, my apologies! Please could you add a bit more information on what you are hoping to achieve?

Are you trying to create something like a table of contents?

Of course, I’ll try to explain a bit more.

So in a RichText, using the “hyperlink” button, I would like to :

  • link to a Document (that means an internal content, with all the usual logic from Prismic)
  • add an hash to that link object (so I can use that value in my HTML), it could be a simple optional text input

This is not an attempt to create a “one page navigation through anchor menu” or a “table of contents”.

Just the way any website make a reference to a certain part of a web page, for both UX and A11Y concerns.

As an example, the documentation of Prismic includes anchors to specific sections :

Adding #search-and-browse-your-media at the end of the url allows you to jump to the corresponding H2 on page load.

That’s pretty basic html5 stuff here, nothing fancy.

5 Likes