[Question] Split into sections

[oskar-gmerek]

Hi @janosh,

This is not about bugs or issues, but the discussions tab is not active in this repo.

Am I thinking if this will have any sense to add to svelte-toc or if not if you mind helping me do something like that with the current implementation?

What I need:

I need to wrap headers and their contents into HTML tags (preferably of the choice).

So if I have content like this:

<h1>title</h1>
<p>some text in paragraph</p>
<img />
<p>next paragraph</p>
<p>and one more paragraph</p>
<h2>title</h2>
<p>paragraph in subtitle>
<h3>3rd title</h3>
<p>dfdfd</p>

I would need to be wrapped like this:

<tag id='title'>
<h1>title</h1>
<p>some text in paragraph</p>
<img />
<p>next paragraph</p>
<p>and one more paragraph</p>
<tag id='title2>
<h2>title2</h2>
<p>paragraph in subtitle>
</tag>
</tag>
<tag id='last-title'>
<h1>last title</h1>
<p>some paragraph content</p>
</tag>

as that HTML tag of choice
Wrapping each header and its own child.

The biggest problem here is to detect 'child' of the header because, from a technical point of view, this is not the child but unrelated content.
Probably logic will need to be something like this:

• find all headers
• wrap all headers with a starting HTML <tag>
• before starting a new tag check if is not already open, and if is - put </tag> before
• still have no idea how find out how to close the last section

[janosh]

Don't remember deactivating the discussions tab but it's back now.

Thanks for the describing your use case! This feature sounds like it's out of scope for svelte-toc though. If the goal is to render anchors for each heading like on the demo site for this component:

then my advice would be to use a markdown/HTML parser that allows customizing the output based on tag. This site uses
mdsvex with plugins rehype-autolink-headings and rehype-slug in svelte.config.js to do this:

svelte-toc/svelte.config.js

Lines 3 to 30 in b7f6f49

	import { mdsvex } from 'mdsvex'
	import linkHeadings from 'rehype-autolink-headings'
	import headingSlugs from 'rehype-slug'
	import preprocess from 'svelte-preprocess'
	const rehypePlugins = [
	headingSlugs,
	[
	linkHeadings,
	{
	behavior: `append`,
	test: [`h2`, `h3`, `h4`, `h5`, `h6`], // don't auto-link <h1>
	content: s(
	`svg`,
	{ width: 16, height: 16, viewBox: `0 0 16 16` },
	// symbol #octicon-link defined in app.html
	s(`use`, { 'xlink:href': `#octicon-link` })
	),
	},
	],
	]
	export default {
	extensions: [`.svelte`, `.svx`, `.md`],
	preprocess: [
	preprocess(),
	mdsvex({ rehypePlugins, extensions: [`.svx`, `.md`] }),

[oskar-gmerek]

Thanks, @janosh.
I was think that was breaking the bank, as the rehype has a plugin doing exactly what I need, but unfortunately is broken and not maintained. I need it for animations, so the rehype-slug will be close, but not enough.

Anyway thanks a lot!

BTW. Is it possible to detect in someway when ToC is turning to be fixed position? My use case is on top of my content currently and can't find a way to move it out at the exact time.

[janosh]

BTW. Is it possible to detect in someway when ToC is turning to be fixed position? My use case is on top of my content currently and can't find a way to move it out at the exact time.

Maybe this helps? https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned

[oskar-gmerek]

https://css-tricks.com/how-to-detect-when-a-sticky-element-gets-pinned

Thanks again!