🎉 Entry Emulator - sidebar table of contents #2869
Conversation
| @@ -23,6 +23,118 @@ | |||
| color: $vermillion !important; | |||
| } | |||
| } | |||
|
|
|||
| .toc-wrapper { | |||
There was a problem hiding this comment.
A lot of this duplicates the existing site sidebar CSS because much of that CSS is stuck inside media queries (because for old-style entries, the sidebar is always open on xxlg, which we can't do here because it would obscure full-width content beneath it)
db/migrateWpPostsToArchieMl.ts
Outdated
| @@ -168,6 +168,7 @@ const migrate = async (): Promise<void> => { | |||
| // Provide an empty array to prevent the sticky nav from rendering at all | |||
| // Because if it isn't defined, it tries to automatically populate itself | |||
| "sticky-nav": isEntry ? [] : undefined, | |||
| "sidebar-toc": true, | |||
There was a problem hiding this comment.
shouldn't this be only true for entries?
| const supertitleString = supertitle | ||
| ? spansToSimpleString(supertitle) | ||
| : "" | ||
| if (titleString && (level === primary || level === secondary)) { | ||
| toc.push({ | ||
| title: titleString, | ||
| supertitle: supertitleString, | ||
| text: titleString, | ||
| slug: urlSlug(`${supertitleString} ${titleString}`), |
There was a problem hiding this comment.
I came across two headings with the same title/slug in time-use ("Additional information"), which made them both light up at the same time in the ToC. We had a provision in WP code to handle this special case but it hasn't been ported over yet. It is not the most critical bug but it can be quite visible so I'm a bit on the fence as to whether to make the fix par of this PR.
Here is an example doc: https://docs.google.com/document/d/1uYZEcCP2shwa5U1EYaGb6cRvLFEz0MrUJv9m8UASbqs/edit
| } | ||
| contentHeadings.forEach((contentHeading) => { | ||
| observer.observe(contentHeading) | ||
| }) | ||
|
|
||
| return () => observer.disconnect() |
There was a problem hiding this comment.
I'm sure hover states (toggle, title vs close) are on your radar, just making a note here for good measure.
ikesau
force-pushed
the
linear-topic-page-toc
branch
from
1b41a96 to
3baee54
Compare
Adds support for sidebars in Gdocs articles. Luckily, because the sdg-toc was already an extension of the original site
TableOfContents, required changes were minimal 🙌Marwa had given the component a refresh on figma, but when I began working on this I realized it wouldn't really work. It has to be an overlay because we have textual and graphic content that goes full width.
Thus, an overlay it is (and one that isn't exactly integrated with our grid system either 🙈.)
There's an issue where scrolling doesn't always correctly update the highlighted heading in the sidebar. I'll check with Matthieu if he has any ideas, but first wanted to validate this overall solution with the team before working on it further.
Also need to test on more browsers.