Skip to content

[Feature] Add a jump list to the nav entries when Code Article is focused #165

@jbriones1

Description

@jbriones1

Motivation behind the feature and what it will do

The pages on the site can sometimes be long, which means there is a lot of scrolling that needs to be done to reach certain sections. People may also wish to link certain sections to others and have it go directly to that section on the page. Since our pages have a fairly standard structure of:

<code-article>
    <header>
        <h1>
        <p>
    <section>
        <h2>
        <p>

we can safely use an <h2> or <section> tag to jump to the section. We can also have a button next to the <h2> which will allow people to copy the URL of the page and have that URL immediately go to that section.

We could then have that article display the jumpable section display under the nav entries when an article is focused.

Which part of the application will this feature be for?

Component library and the main site

Minimal Viable Product

  • Have the code article have sections it can jump to, based on the hash in the URL
    • If the article doesn't contain the specified hash, do nothing
  • In the navlist/file system, when a user is focused on a Code Article page, display the sections users can jump to underneath the article's nav entry OR have the file system be replaced with the sections they can jump to (first one seems better as long as the number of entries in the navbar doesn't get too long)
  • When clicking these entries, the article should smoothly scroll until that section is at the top of the viewport or the bottom is reached, whichever comes first
  • Add a button to the right of each section's header that copies the URL of the article along with the hash of the section appended to it

Code changes

  • We have a few options for how how the Code Articles can find the sections they jump to
    • Create a new CSSS Code component, <code-section> which would take in an ID that would serve as the hash to jump to in the page. The would then just be filled with these sections instead of defining <section><h2><p> sections. We could then query for these articles
    • Add a directive that we add to any part of the text that we want to jump to
  • All of these methods will add an id attribute to the HTML elements
  • The nav entries will have jump list

Additional context

This Angular page shows all the things that I think we should have:
https://angular.dev/guide/components/queries#view-queries

Image

Metadata

Metadata

Assignees

No one assigned

    Labels

    code componentRelated to the CSSSCode Component libraryenhancementNew feature or requestmainRelated to the main site

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions