Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

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

Unanswered
dsaffo asked this question in Q&A
Discussion options

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!

You must be logged in to vote

Replies: 1 comment 2 replies

Comment options

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

You must be logged in to vote
2 replies
Comment options

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/
---
Comment options

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"} />
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
Q&A
Labels
None yet

AltStyle によって変換されたページ (->オリジナル) /