-
Notifications
You must be signed in to change notification settings - Fork 8
Description
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
- Create a new CSSS Code component,
- All of these methods will add an
idattribute 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
