Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(blog): add toc #9707

Merged
merged 9 commits into from
Oct 2, 2023
Merged

feat(blog): add toc #9707

merged 9 commits into from
Oct 2, 2023

Conversation

fiji-flo
Copy link
Contributor

@fiji-flo fiji-flo commented Sep 21, 2023

Summary

Display a ToC on blog posts.
This also refactors the useStickyHeaderHeight hook.

Problem

Hard to navigate long blog posts.

Solution

Reuse the ToC component with some tweaks.


Screenshots

Before

image

After

image


How did you test this change?

Locally

Copy link
Member

@LeoMcA LeoMcA left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

mostly looks good from my slightly time pressured review, mostly nits, give it a good test before deploying to prod!

client/src/blog/post.scss Show resolved Hide resolved
client/src/blog/post.scss Show resolved Hide resolved
client/src/blog/post.scss Outdated Show resolved Hide resolved
client/src/blog/post.scss Outdated Show resolved Hide resolved
client/src/blog/post.scss Outdated Show resolved Hide resolved
Comment on lines +199 to +203
<aside className="toc">
<nav>
{doc.toc && !!doc.toc.length && <TOC toc={doc.toc} />}
</nav>
</aside>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do we want all of this to be conditional on doc.toc && !!doc.toc.length, or do this aside and nav need to be here permanently for the css to work with the placement properly?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

That's a copy of the article toc. And I'm already touching to many things here, sorry.

client/src/document/hooks.ts Outdated Show resolved Hide resolved
client/src/document/organisms/toc/index.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Overall LGTM, but I have some naming suggestions.

However, I noticed when trying this out locally the TOC entries flash blue when clicked (but only in the blog):
image

client/src/document/hooks.ts Outdated Show resolved Hide resolved
client/src/app.scss Outdated Show resolved Hide resolved
client/src/app.scss Outdated Show resolved Hide resolved
client/src/app.scss Outdated Show resolved Hide resolved
client/src/app.tsx Outdated Show resolved Hide resolved
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Also just noticed that when navigating to a section via a TOC entry, the previous TOC entry is getting highlighted after the navigation has finished:
image

@caugner caugner marked this pull request as draft September 22, 2023 18:00
fiji-flo and others added 6 commits September 28, 2023 10:55
Only for large screens for now.
This also refactors the useStickyHeaderHeight hook.
Co-authored-by: Leo McArdle <lmcardle@mozilla.com>
@fiji-flo fiji-flo marked this pull request as ready for review September 28, 2023 14:54
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM, but I'm still experiencing the mentioned issues:

Screen.Recording.2023-09-29.at.00.20.22.mov

@fiji-flo
Copy link
Contributor Author

Sorry I fixed that now.

fiji-flo and others added 2 commits September 29, 2023 15:06
Avoids sidebar being inside the main-page-content,
to be consistent with document pages.
Copy link
Contributor

@caugner caugner left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pushed a fix (73d492f, the TOC links were not readable while clicking on them, due to .main-page-content style being applied to them), now it looks good.

@fiji-flo fiji-flo merged commit e31ba94 into main Oct 2, 2023
15 checks passed
@fiji-flo fiji-flo deleted the blog-toc branch October 2, 2023 08:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants