Adding .html extensions to urls for routing when using tutorialkit as a sub-site

[dsaffo]

Hello, I am trying to add a tutorialkit site to my documentation site built with vitepress. It seems like the best way to do this is to include the static tutorialkit site in the public folder of my vitepress site and linking to it as an external page. Vitepress supports this but you need to use the html file extension in the link (https://vitepress.dev/guide/routing#linking-to-non-vitepress-pages).

Is there a way I can configure tutorialkit to include the file extensions in the url links between pages? If not is this a feature that could be added? I've already switched the astro build to use file mode which helps reduce the length of urls so we don't need to include index.html, but still need the file extension from what I can tell.

Thanks!

[AriPerkkio]

Does it work if you define the extension in the slug option? https://tutorialkit.dev/reference/configuration/#slug

[dsaffo]

That is almost working, but using this markdown when you build you generate a file like 1-welcome.html.html

---
type: lesson
title: Welcome to TutorialKit
focus: /counter.js
slug: /:partSlug/:chapterSlug/1-welcome.html/
---

[AriPerkkio]

Maybe this is not possible currently. We should probably allow users to customize all links in the tutorials by providing component override.

It would be something like:

export default defineConfig({
  integrations: [
    tutorialkit({
      components: {
        Link: './src/components/Link.tsx',
      },
    }),
  ],
});

// src/components/Link.tsx
export default function Link(props) {
  return <a {...props} href={props.html + ".html"} />
}