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.

Sign up for GitHub

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

Jump to bottom

Possibility to put the TOC in a specific element #2

Open
nayaabkhan opened this issue Jun 3, 2020 · 8 comments
Open

Possibility to put the TOC in a specific element #2

nayaabkhan opened this issue Jun 3, 2020 · 8 comments
Labels
enhancement New feature or request help wanted Extra attention is needed

Comments

@nayaabkhan
Copy link

Is there a way to specify a selector within which I can put the TOC?

I have a use-case where I want to make the TOC position: sticky. But because the sticky elements still remain in the flow of the document I have a weird spacing.

This could be a good use-case where I'd like to place the TOC in a pre-determined position in the document.

Happy to elaborate more if needed.
@JamesMessinger
Copy link
Member

Currently the code specifically searches for the <main> or <body> element and places the TOC in there. There's no option to override that behavior, but I like that idea! If you're interested in submitting a PR, I'd be happy to review it.

rehype-toc/src/find-main-node.ts

Lines 5 to 22 in b0298c3

/**
* Returns the `<main>` node, or the `<body>` node if there is no `<main>`.
* The second node returned is the parent of the first node.
*/
export function findMainNode(root: Node): [HtmlElementNode, HtmlElementNode] {
let [body, bodyParent] = findTagName(root, "body");
let [main, mainParent] = findTagName(body || root, "main");
if (main) {
return [main, mainParent || body || root as HtmlElementNode];
}
else {
return [
body || root as HtmlElementNode,
bodyParent || root as HtmlElementNode
];
}
}

@JamesMessinger JamesMessinger added enhancement New feature or request help wanted Extra attention is needed labels Jul 11, 2020
@Jule- Jule- mentioned this issue Jan 6, 2021
Open
@Jule-
Copy link

Jule- commented Jan 25, 2021

Hi, check #3 if you want this feature.

@JounQin
Copy link

JounQin commented Sep 29, 2021

If this plugin can be separated into parseTOC and renderTOC it would be greater? So that we can customize where the TOC should be rendered in the final HTML document.

@ghost
Copy link

ghost commented Oct 23, 2021

I think this plays into the same vein of a feature request I was about to open for discussion.

In my use case, I didn't actually want the TOC automatically inserted into my HTML because the from-markdown HTML was actually just a single part of a larger template. So, rather than creating too much customization into where the TOC is placed in the overall HTML document, perhaps the most flexible solution would be a secondary option to export JUST the TOC HTML and insert it wherever may be appropriate inside of the template?

@Jule-
Copy link

Jule- commented Oct 29, 2021 •
edited
Loading

@jodylecompte do not know if it could fit your needs but I have already made a PR #3 as advertised in a previous comment of this issue.

You can test it right now as described here: #3 (comment)

Please read the full PR thread for more info, especially about the fallback behaviour that do not insert TOC at all (#3 (comment)).

HTH

@pavelloz
Copy link

I would like to see it merged as well :)

@ChristianMurphy ChristianMurphy mentioned this issue May 1, 2023
Closed
4 tasks
@TravelingTice
Copy link

I would like to see it merged as well :)

Same here!

@mfrachet
Copy link

mfrachet commented Oct 9, 2024

I don't know if it would help you, but I managed to have a sticky toc to the right side of my content using the following css:

  .toc-post {
    position: sticky;
    top: 20px;
    transform: translateX(100%);
    font-size: 0.8em;
  }

  .toc-level-1 {
    position: absolute;
  }

Ending up in something like the following =>

Example of position stciky with rehype-toc

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request help wanted Extra attention is needed
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@nayaabkhan @pavelloz @JamesMessinger @mfrachet @JounQin @Jule- @TravelingTice