Getting headings from Markdown files

[spences10]

Hi, does anyone have any experience with getting headings out of markdown files?

I'm using MDsveX with SvelteKit and I can get the metadata fine but I'm trying to access headings as well from the actual file, here's what I'm using in the index of the project:

<script context="module">
  export async function load() {
    const posts = import.meta.globEager('../sheets/*.md')
    const postsList = Object.values(posts)
    const postsMeta = postsList.map(post => {
      return post.metadata
    })
    return {
      props: {
        posts: postsMeta,
      },
    }
  }
</script>

<script>
  export let posts
</script>

<ul>
  {#each posts as post}
    {#if post.published}
      <li>
        <a sveltekit:prefetch href={`/${post.slug}`}>{post.title}</a>
      </li>
    {/if}
  {/each}
</ul>

Then in the [slug].svelte this:

<script context="module">
  export async function load(ctx) {
    try {
      const Post = await import(
        `../sheets/${ctx.page.params.slug}.md`
      )

      return {
        props: {
          Post: Post.default,
          metadata: Post.metadata,
        },
      }
    } catch (e) {
      return {
        status: 404,
        error: 'Post not found',
      }
    }
  }
</script>

<script>
  import { format } from 'date-fns'

  export let Post, metadata
  let created = format(new Date(metadata.createdDate), 'yyy MMM do')
  let updated = format(new Date(metadata.updatedDate), 'yyy MMM do')
</script>

<h1 class="text-4xl font-medium">
  {metadata.title}
</h1>
<div class="my-3 opacity-75">
  <p class="text-xs font-semibold">Created: {created}</p>
  <p class="text-xs font-semibold">Updated: {updated}</p>
  <a
    class="text-xs font-semibold underline hover:no-underline hover:text-purple-600"
    href={`https://github.com/spences10/cheat-sheets/edit/production/sheets/${metadata.slug}.md`}
    >Edit this page on GitHub</a
  >
</div>

<article class="prose mb-16">
  <Post />
</article>

Ideally I'd want to have access to the headings for the index page and to use as a ToC in the [slug].svelte component.

Any pointers appreciated, thanks

[kainsavage]

Your heading thing seems to work for me, too.

Interestingly, I get an error when trying to do the dynamic import based on the slug. I did a similar example test with the following:

<script context="module">
    export async function load(context) {
        const Post = await import("$lib/components/header.svelte");
        console.log(Post);

        const Post2 = await import("$lib/posts/foo.md");
        console.log(Post);

        const test = "$lib/posts/" + context.page.params.slug + ".md";
        console.log(test);
        const Post3 = await import(test);

        return {
            props: {
                slug: context.page.params.slug
            },
        };
    }
</script>

The first two work fine, and the third one causes an error: Cannot find module '$lib/posts/foo.md' from '[dir redacted]' even though the third one resolves to the same $lib/posts/foo.md. This appears to be an issue with SvelteKit and not necessarily MDsveX.

[pngwn]

The error you are seeing is at runtime not build time.

This is a limitation of bundlers, so in this case Vite. Although calling it a limitation is a little harsh. In reality this is a limitation of build-time analysis and is mostly unsolvable (although there are some workarounds).

mdsvex, svelte and vite all work at build time. At this time no component or route has been instantiated, the 'page' does not exist, so Vite cannot know what value context.page.params.slug will have in the future when it is run. It could literally be anything. Dynamic imports are not a bundler specific language construct, they exist in browsers as well.

When Vite (or rollup or webpack) sees a dynamic import, if it is a simple path path/to/file.ext, it will treat it the same as a normal import statement. It will load the source and run all transforms on it as expected. If it cannot work out what file it refers to, as in this example, then it will be left exactly as it is for node or browsers to handle (depending on the context).

At runtime (in the browser or in node for ssr) import("$lib/posts/" + context.page.params.slug + ".md") will not work for a few reasons:

• $lib is a vite alias, outside of vite, it is meaningless and resolves to nothing. In node, you would need a node_module named $lib. In a browser this would just break; bare imports are not supported.
• Even if it could resolve this alias somehow, those files probably have not been uploaded anywhere that they could be found. The file wouldn't exist on a server at runtime.
• Assuming we did resolve the alias and managed to upload it, .md extensions do not work in any form in node or the browser without a bunch of custom logic. mdsvex certainly wouldn't be there to transform the source to something usable and svelte wouldn't be there to deal with the svelte component that mdsvex outputs.

[pngwn]

You could pull out the headings with a remark plugin, something like this would work:

function get_headings() {
  let visit;
  let tree_to_string;
  return async function transformer(tree, vFile) {
    if (!visit) {
      tree_to_string = (await import('mdast-util-to-string')).toString;
      visit = (await import('unist-util-visit')).visit;
    }

    vFile.data.headings = [];
		
    visit(tree, 'heading', (node) => {
      vFile.data.headings.push({
        level: node.depth,
        title: tree_to_string(node),
      });
    });

    if (!vFile.data.fm) vFile.data.fm = {};
    vFile.data.fm.headings = vFile.data.headings;
  };
}

// later

mdsvex({ remarkPlugins: [ get_headings() ] })

Then an array of headings would be available on the metadata object and you could use those for whatever you wanted.

[rchrdnsh]

just installed these two packages in another project and they seem to default to really old versions when installing.

mdast-util-to-string installed a 1.x.x version even though the latest is a 3.x.x version
unist-util-visit installed a 2.x.x versions even though the latest versions is 4.0.0

...this is odd, no? Had to manually update the version numbers to the latest versions in package and it works now...

[rchrdnsh]

ok...seems to be working now...

...next step...

...how to use it...

...no idea, lololololol...

🤪

[ProQuestionAsker]

Definitely seems odd that old versions are installing by default, but glad to hear you got it up and running!

In case this helps, the plugin you've added has basically appended a headers element to the exportable metadata for each markdown file. As far as I can tell, this doesn't change your original markdown file at all, but it is available when you import the metadata into your file. So, here where you are creating your Article in [slug].svelte and defining props, you should be able to do

export async function load({ page }) {
    const Post = await import(`../../content/blog/${page.params.slug}.md`);
    return {
      props: {
        title: Post.metadata.title,
        description: Post.metadata.description,
        icon: Post.metadata.icon,
        headers: Post.metadata.headers,
        Post: Post.default,
      }
    }
  }

where Post.metadata.headers is the new data you added via the headers plugin. (Full disclosure, I haven't tested your code, but this seems like a good place to start.

[rchrdnsh]

yeah, tried that...then I tried to console.log it, but it comes back as undefined...trying to figure out what to do next...

<script context='module'>
  export const prerender = true;

  export async function load({ page }) {
    try {
      const Article = await import(`../../content/words/${page.params.slug}.md`);
      return {
        props: {
          order: Article.metadata.order,
          status: Article.metadata.status,
          category: Article.metadata.category,
          title: Article.metadata.title,
          subtitle: Article.metadata.subtitle,
          image: Article.metadata.image,
          alt: Article.metadata.alt,
          headings: Article.metadata.headings,
          Article: Article.default
        }
      }
    } catch (event) {
      return {
        status: 404,
        error: 'The article that you are looking for is not here.'
      }
    };
  };
</script>

<script>
  export let headings;
  console.log(headings);
</script>

[rchrdnsh]

so! ... i finally got everything working pretty well!

Now I'm tying to figure out how to add github-slugger to this code so I can generate the same slugs for these headings that rehype-slug generates...I was trying to do it manually in the toc component itself, but that misses a couple if things....as I have it processing each individual link once, it ends up adding a new number to each slug, which does not work...I also need it add numbers to each heading that is the same as a previous heading...something like 'example' as a subheading under different headings needs to be '#example' and '#example-2', as that's what github-slugger does inside of rehype-slug...just don't quite understand how I can add github slugger to this or how to make sure it creates the correct slugs for each heading...

[EricRovell]

@pngwn I am trying to use your example to generate TOC, it works just fine, thank you. But I need to use it as rehype, not remark. Using the code below I get the TOC data I need, but it do not appear in metadata object somehow...

import { visit } from "unist-util-visit";

const checkHeading = node => {
	let name = "";
	let level = 0;

	if (node && node.type === "element") {
		name = node.tagName.toLowerCase() || "";
	}

	if (name.length === 2 && name[0] === "h") {
		level = name[1];
	}

	return (level < 7)
		? level
		: 0;
};

export const transformerTOC = () => (tree, vFile) => {
	const toc = [];

	visit(tree, "element", node => {
		const heading = checkHeading(node);
		if (heading) {
			toc.push({
				id: node.properties.id,
				level: heading,
				title: node.children[0].value
			});
		}
	});

	if (!vFile.data.fm) {
		vFile.data.fm = {};
	}

	vFile.data.fm.toc = toc;
};

What am I doing wrong?

[RyanYANG52]

my guess is before rehype, metadata context script node is already created, vFile.data has no use after transform_hast. code here transform_hast

My approach is use github-slugger to generate id in remark plugin, and let rehypeSlug do it again...