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

toc without highlighting and without mobile view #214

Merged
merged 13 commits into from
Nov 21, 2023
Merged

Conversation

cinxmo
Copy link
Contributor

@cinxmo cinxmo commented Nov 20, 2023

Quick and simple TOC without the following:

  • highlighting the section the user is on as the user is scrolling. see implementation in client.js here using a doubly linked list to keep track of the prev, current, and next sections. It could be too slow to react to a scroll event every single time to determine which section should be highlighted.
  • mobile view - should have hamburger menu, etc. right now it just hides the toc. for simplicity, let's have this merged in first.

@cinxmo cinxmo changed the title toc without highlighting toc without highlighting and without mobile view Nov 20, 2023
@cinxmo cinxmo requested a review from Fil November 20, 2023 22:51
@cinxmo cinxmo marked this pull request as ready for review November 20, 2023 22:51
@Fil Fil force-pushed the cindy/render-toc branch from 8e60cfe to 046272b Compare November 21, 2023 11:18
@Fil Fil force-pushed the cindy/render-toc branch from 11baefa to 4c45277 Compare November 21, 2023 11:29
@@ -5,6 +5,6 @@ export default {
{path: "/sub/two", name: "Two"}
],
toc: {
label: "Contents"
label: "On this page"
Copy link
Contributor Author

Choose a reason for hiding this comment

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

do we want to follow the exact same naming as Vitepress? I think we should opt for something different

Copy link
Contributor

Choose a reason for hiding this comment

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

this is the override test, it needs to be different from the new default which is "Contents"

@cinxmo cinxmo merged commit fe22f7a into main Nov 21, 2023
1 check passed
@cinxmo cinxmo deleted the cindy/render-toc branch November 21, 2023 14:22
@Fil
Copy link
Contributor

Fil commented Nov 21, 2023

We discussed fast-follows:

  • responsive mode (small screens), maybe with a hamburger (css) and tracking width changes in JS
  • test on iPhone and iPad (easy, maybe use ngrok)
  • use IntersectionObserver to highlight the current section (hard!)

This css rule will show a hamburger next to (or instead of) the toc header:

#observablehq-toc summary::before  {
 content: '☰ ';
}

@cinxmo cinxmo mentioned this pull request Nov 21, 2023
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.

2 participants