Create Table of Contents #1
Closed
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This PR adds a sticky table of contents to the right of posts. It's only visible for screen sizes of
$layout-breakpoint-lg
(1100px
) and up (I considered shoving it under the title for smaller screens but think it looks too much of a long boi).On MBP 13":

In
Post.js
, I pass in thehtml
string to the component. Then I create anhtml
document element in order to traverse the DOM tree and grab the header elements. For each of header elements, I remove their one child (which was thegatsby-remark-autolink-headers
anchor. Then I wrap the header node in an<a>
tag, with the header'sid
as thehref
. IMPORTANT: you have to remove theid
attribute of the header or elsegatsby-remark-autolink-headers
breaks since it'll use the links in this new component. Finally, IdangerouslySetInnerHTML
this generated string. Honestly, not very elegant at all 😬Currently, the CSS only supports up to
h4
because I don't anticipate using smaller headers than that (don't even think I useh4
s anywhere yet).Iffy about:
text-shadow
hover -- it's not super apparent; maybe underline is better?max-width
/max-height
/positioning of component (I did a jank calculation)