svelteness/kit-docs

Documentation integration for SvelteKit.

KitDocs

Documentation integration for SvelteKit. You can think of it as a VitePress alternative for Svelte.

✨ Features

• 📝 Vite plugin for transforming Markdown files to Svelte components with HMR support.
• 📡 Loaders and endpoint handlers for loading Markdown metadata (i.e., title, frontmatter, etc.), and sidebar configurations.
• 🎨 Beautiful pre-designed theme that's inspired by the Tailwind docs.
• ♿ Accessible menus and popovers with full keyboard support, which are included in the default theme and also exported for your convenience.
• 🌎 Global components folder that's imported into all Markdown files and also mapped to custom containers (e.g., Button.svelte -> :::button).
• 🧩 Markdown extensions for header anchors, file links, YAML frontmatter, emojis, custom containers, table of contents, code fences, and importing code snippets.
• 🖼️ Beautiful syntax highlighting with Shiki. This includes pre-designed code blocks that support titles, line highlighting, copy code button and a few other goodies.
• 🏗️ Prebuilt Markdown components for steps, admonitions (i.e., callouts), tabbed links, responsive tables, and yes/no blocks.
• 🔎 Algolia search integration that includes a clean default design.

📖 Documentation

You can find our documentation at kitdocs.vercel.app.

❤️ Special Thanks

Thanks to Vercel for graciously providing us an OSS sponsored account for hosting our docs site!

📝 License

KitDocs is MIT licensed.

kit-docs's Issues

build doesn't work

npm run build doesn't work.

To reproduce:

$ npm init @svelteness/kit-docs mydocs
$ npm install

# development works
$ npm run dev

# build doesn't work
$ npm run build

The error messages is:

[vite]: Rollup failed to resolve import "@docsearch/js" from "node_modules/@svelteness/kit-docs/client/components/algolia/AlgoliaSearch.svelte".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`

This error can be resolved by adding the following to vite setting

// svelte.config.js
// under config.kit.vite setting

build: {
  rollupOptions: {
    external: ["@docsearch/js"],
  },
},

Now comes the second error:

file:///.svelte-kit/output/server/chunks/index-378e2722.js:4052
      const path2 = require("path");
                    ^
ReferenceError: require is not defined

Incorrect page being loaded

I have two pages: [...4]render.md and [...5]create-render.md.

Regardless of what I name page 5, it always displays the content from page 4.

$frontmatter is defined correctly on both pages, but any content written after the frontmatter on page 5 is ignored and the contents of page 4 gets rendered on page 5.

Reproduction

I haven't been able to figure out what's causing the issue.

I've defined a custom CodeInline component which uses hljs to give my inline code syntax highlighting if a certain context is set.

I also use <svelte:window bind:scrollY /> on page 4.

Even if I delete everything on page 4, page 5 ignores its own content and chooses to render the empty content of page 4.

I can't start /demo/ project: [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

I can't start /demo/ project.

$ git clone https://github.com/svelteness/kit-docs.git
$ cd kit-docs
$ pnpm install
$ cd demo
$ pnpm install
Scope: all 4 workspace projects
.. prepare$ husky install
│ husky - Git hooks installed
└─ Done in 84ms
$ pnpm run dev

> demo@ dev /home/stephane/git/github.com/svelteness/kit-docs/demo
> vite dev --port 3002

▲ [WARNING] Cannot find base config file "./.svelte-kit/tsconfig.json" [tsconfig.json]

    tsconfig.json:2:13:
      2 │   "extends": "./.svelte-kit/tsconfig.json",
        ╵              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

failed to load config from /home/stephane/git/github.com/svelteness/kit-docs/demo/vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/stephane/git/github.com/svelteness/kit-docs/demo/node_modules/@svelteness/kit-docs/node/index.js' imported from /home/stephane/git/github.com/svelteness/kit-docs/demo/vite.config.js
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36)
 ELIFECYCLE  Command failed with exit code 1.

Error: ENOENT: no such file or directory, open '...src/app.d.ts' if "Add type checking with TypeScript? › No" is selected

If I install kit-docs with option : Add type checking with TypeScript? › No I have this error:

$ pnpm init @svelteness/[email protected] mydocs
 ERR_PNPM_INIT_ARG  init command does not accept any arguments

Maybe you wanted to run "pnpm create @svelteness/[email protected] mydocs"
$ npm init @svelteness/[email protected] mydocs                                                                                         1

✔ Default KitDocs Theme? (Y/n) · true

[kit-docs]: target directory is empty, creating new SvelteKit app.


create-svelte version 2.0.0-next.149

Welcome to SvelteKit!

This is beta software; expect bugs and missing features.

Problems? Open an issue on https://github.com/sveltejs/kit/issues if none exists already.

✔ Which Svelte app template? › Skeleton project
✔ Add type checking with TypeScript? › No
✔ Add ESLint for code linting? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
✔ Add Playwright for browser testing? … No / Yes

Your project is ready!

Install community-maintained integrations:
  https://github.com/svelte-add/svelte-adders

Next steps:
  1: cd mydocs
  2: npm install (or pnpm install, etc)
  3: git init && git add -A && git commit -m "Initial commit" (optional)
  4: npm run dev -- --open

To close the dev server, hit Ctrl-C

Stuck? Visit us at https://svelte.dev/chat

Error: ENOENT: no such file or directory, open '/home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/mydocs/src/app.d.ts'
    at Object.openSync (node:fs:585:3)
    at Object.readFileSync (node:fs:453:35)
    at main (file:///home/stephane/.npm/_npx/e156d22c8060e77f/node_modules/@svelteness/create-kit-docs/bin/create-kit-docs.js:146:28)
    at processTicksAndRejections (node:internal/process/task_queues:96:5) {
  errno: -2,
  syscall: 'open',
  code: 'ENOENT',
  path: '/home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/mydocs/src/app.d.ts'
}
npm ERR! code 1
npm ERR! path /home/stephane/git/github.com/stephane-klein/kit-docs-playground/services
npm ERR! command failed
npm ERR! command sh -c create-kit-docs "mydocs"

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/stephane/.npm/_logs/2022-07-17T13_28_24_777Z-debug-0.log

Using kit-docs as subpage inside a website

Hello! First of all, I searched for a community or forum to ask this, but I did not find one. So, please excuse me if this is not the right place where to ask.

I need to add a blog and documentation to my website. Using kit-docs for both of them.
The main idea is to set the links in the navbar, next to the other website pages. I could set both documentation and blog in the same website using different sources. The problems I have now are:

• I want to use only one navBar. I can't set the website navbar in the kit-docs pages. And I can't render a page in a different route using kit-docs navbar.
• I also need to do a different CSS for both blog and docs. I tried using different CSS imports for each [email protected] component. But the second page clicked overwrites the CSS variables of both pages. (if you click first blog and then docs, both pages use docs styles. And vice versa).

Here I leave the link of the repository.
Steps to check:

1. Download this branch: https://gitlab.com/anagolay/blog/-/tree/1-build-blog-and-documentation-using-kitdocs
2. pnpm install
3. pnpm dev.
4. Open the URL displayed at the console and click docs, then blog, and then back to docs.
5. Go to home. Refresh. Click blog, then docs and then back to blog.

The question are:

• What is the best way to set different styling for both kit-docs pages?
• How can I render a single page below kit-docs navbar? or use website navbar for kit-docs pages?
  Thank you in advance!

Hardcoded background color in CodeFence

There currently is a hardcoded background for the header of CodeFence. This should probably be either made configurable, or changed to completely transparent instead.

kit-docs/packages/kit-docs/src/lib/kit-docs/block/CodeFence.svelte

Line 84 in ed207cf

style="background-color: rgba(31, 41, 55, 0.3);"

I propose to pin @sveltejs/adapter-auto and @sveltejs/kit version in create-kit-docs script

Hi,

@mihar-22 What do you think about pin @sveltejs/adapter-auto and @sveltejs/kit version here to avoid some version errors like #48 ?

Best regards,
Stéphane

Tailwind styles not working

I am trying to have a custom tailwind theme but after following the instructions here the tailwindcss classes are not included anymore. This is what the page now looks like:

Need a material theme

Like this:

https://squidfunk.github.io/mkdocs-material/

`npm init` needs to be updated

The following command from Quick Installation results in a code base that hasn't been updated since v0.3.3

npm init @svelteness/kit-docs mydocs

Touching dropdown arrow icon in a Select component doesn't trigger dropdown event

In a mouse pointer event, the dropdown arrow in a Select component correctly triggers dropdown menu.
However, the svg icon prevents a touch event (on a mobile device) from triggering dropdown menu. Touching other area of the Select component works as expected.

Can't use curly brackets in markdown content

I can't seem to use curly brackets in markdown content.
Since every mardown file is a Svelte component the usage of curly brackets directly works as expected, but the HTML entites should probably stay as they are?

Markdown:

# Test curly brackets

{} {} {}

Error:

C:/dev/kit-docs-test/src/routes/docs/[...1]test.md:19:4 Unexpected token
 17 |  
 18 |  <h1>Test curly brackets</h1>
 19 |  <p>{} {} {}</p>
           ^

Trying to migrate some API documentation and needed to symbolise an empty object.

Keyboard accessibility nitpicks.

It seems that some components in the default layout are missing keyboard controls. Notably, the sidebar when in expanded mode on small screens cannot be closed using the Esc key, and the custom theme switcher popout cannot be navigated using Home and End keys (to navigate to the first/last item).

Following setup instructions results in weird error message

Followed QuickStart instructions, and now have a file that can't seem to be scanned by typescript. Error message is as follows:

Cannot write file '/Users/lobo/svelteProjects/mydocs/src/routes/kit-docs/[dir].sidebar.json.js' because it would overwrite input file.

How does one fix this and should the Quickstart instructions be modified?

Sidebar no longer visible (`sidebar === null`) since 0.9

Kudos on the quick fixes of all the issues coming in!

Just noticed however, that when updating to 0.9.0, the sidebar no longer shows. There's no error, just nothing. I noticed that changing the formatting function to just return the regular string fixes it. Might be something wrong with the capitalize script.

[FEATURE] Embed Videos

It would be cool to be able to embed videos. A first Step could be providing support for youtube (I assume thats the most popular one), in further steps other platforms, like Vimeo for example.

For realizing this, there are two approaches I believe:

1. Write the Plugin ourselves
2. Use this existing one

markdown inline code not rendered correctly

inline code is rendered like this `this way` instead of this

Cannot find module '~icons/ri/moon-clear-fill' imported from ...@svelteness/kit-docs/client/components/base/ColorSchemeMenu.svelte'

Hello,

I followed Manual Installation and when I execute npm run dev, I have this error on http://localhost:3000/docs/first-category/hello-world page:

Cannot find module '~icons/ri/moon-clear-fill' imported from '/home/stephane/git/github.com/stephane-klein/kit-docs-playground3/mydocs/node_modules/@svelteness/kit-docs/client/components/base/ColorSchemeMenu.svelte'

Here is the content of my package.json file:

{
	"name": "mydocs",
	"version": "0.0.1",
	"scripts": {
		"dev": "vite dev",
		"build": "vite build",
		"package": "svelte-kit package",
		"preview": "vite preview",
		"prepare": "svelte-kit sync"
	},
	"devDependencies": {
		"@iconify-json/ri": "1.1.3",
		"@sveltejs/adapter-auto": "next",
		"@sveltejs/kit": "next",
		"@svelteness/kit-docs": "0.22.12",
		"clsx": "1.2.1",
		"shiki": "0.10.1",
		"svelte": "3.44.0",
		"unplugin-icons": "0.14.7",
		"vite": "2.9.13"
	},
	"type": "module"
}

Best regards,
Stéphane

Unexpected token < in JSON at position 0 on each route

I copied the docs route folder from this repo as a starting point but I keep getting this error,
the only thing I changed in the folder is I removed the images (logo, and social card) and all the references to it, I also renamed layout to layout.reset because I have a root layout

I have a [dir].sidebar.json.js with the following code

import { createSidebarRequestHandler } from '@svelteness/kit-docs/node';

export const get = createSidebarRequestHandler();

and [slug].meta.json.js

import { createMetaRequestHandler } from '@svelteness/kit-docs/node';

export const get = createMetaRequestHandler();

this is my svelte config

import preprocess from 'svelte-preprocess';
import adapter from '@sveltejs/adapter-auto';
import {kitDocsPlugin} from '@svelteness/kit-docs/node'
import Icons from 'unplugin-icons/vite'

/** @type {import('@sveltejs/kit').Config} */
const config = {
	extensions: ['.svelte', '.md'],
	kit: {
		adapter: adapter(),
		vite:{
			optimizeDeps: {
				exclude: ['@urql/svelte', '@urql/core'],
			  },

			  plugins: [
				  Icons({compiler: 'svelte'}),
				  kitDocsPlugin({
					  shiki: {
						  theme: 'material-ocean'
					  },
				  }),
			  ],
			
		}
	},

	preprocess: [
		preprocess({
			postcss: true
		})
	]
};

export default config;

I always get the same error,

500
Unexpected token < in JSON at position 0
SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at Proxy.<anonymous> (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:1797:21)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async eval (/node_modules/@svelteness/kit-docs/client/loaders/index.js:22:22)
    at async load_node (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:1826:12)
    at async respond$1 (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:2177:15)
    at async render_page (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:2378:19)
    at async resolve (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:2610:11)
    at async respond (file:///Users/isaac/Desktop/projects/saffron/redo/frontend/.svelte-kit/runtime/server/index.js:2543:20)
    at async file:///Users/isaac/Desktop/projects/saffron/redo/frontend/node_modules/@sveltejs/kit/dist/chunks/index.js:244:24

Using Cloudflare Adapter

Hey, I really like this project and would love to use it,
but currently I can't build it for Cloudflare.

Whole error message is below, but the node dependencies seam to be the problem.
Is it possible to change the build process to not use them?

If it's a lot of work, I would gladly contribute some solution myself, but I need to know what has to be done.

Thank you in advance. :)

Error Message

✘ [ERROR] Could not resolve "path"

    node_modules/@svelteness/kit-docs/node/index.js:1:19:
      1 │ import __path from 'path';
        ╵                    ~~~~~~

  The package "path" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "url"

    node_modules/@svelteness/kit-docs/node/index.js:2:49:
      2 │ import { fileURLToPath as __fileURLToPath } from 'url';
        ╵                                                  ~~~~~

  The package "url" wasn't found on the file system but is built into node. Are you trying to bundle
  for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "module"

    node_modules/@svelteness/kit-docs/node/index.js:3:49:
      3 │ import { createRequire as __createRequire } from 'module';
        ╵                                                  ~~~~~~~~

  The package "module" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "fs"

    node_modules/@svelteness/kit-docs/node/index.js:20673:46:
      20673 │ import { readFileSync as readFileSync3 } from "fs";
            ╵                                               ~~~~

  The package "fs" wasn't found on the file system but is built into node. Are you trying to bundle
  for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "process"

    node_modules/@svelteness/kit-docs/node/index.js:20685:21:
      20685 │ import process2 from "process";
            ╵                      ~~~~~~~~~

  The package "process" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "stream"

    node_modules/@svelteness/kit-docs/node/index.js:20701:26:
      20701 │ import { Transform } from "stream";
            ╵                           ~~~~~~~~

  The package "stream" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

✘ [ERROR] Could not resolve "crypto"

    node_modules/@svelteness/kit-docs/node/index.js:21245:27:
      21245 │ import { createHash } from "crypto";
            ╵                            ~~~~~~~~

  The package "crypto" wasn't found on the file system but is built into node. Are you trying to
  bundle for node? You can use "platform: 'node'" to do that, which will remove this error.

Support for Asciidoc source in addition to Markdown.

Using asciidoctor.js https://docs.asciidoctor.org/asciidoctor.js/latest/ to process source files to HTML, similar to the Markdown process now.

I can't start /demo/ project: Error [ERR_MODULE_NOT_FOUND]: Cannot find module '.../kit-docs/demo/node_modules/@svelteness/kit-docs/node/index.js'

I can't start /demo/ project.

$ git clone https://github.com/svelteness/kit-docs.git
$ cd kit-docs
$ pnpm install
$ cd demo
$ pnpm ssync
$ pnpm install
$ pnpm run dev

> demo@ dev /home/stephane/git/github.com/svelteness/kit-docs/demo
> vite dev --port 3002

failed to load config from /home/stephane/git/github.com/svelteness/kit-docs/demo/vite.config.js
error when starting dev server:
Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/home/stephane/git/github.com/svelteness/kit-docs/demo/node_modules/@svelteness/kit-docs/node/index.js' imported from /home/stephane/git/github.com/svelteness/kit-docs/demo/vite.config.js
    at new NodeError (node:internal/errors:372:5)
    at finalizeResolution (node:internal/modules/esm/resolve:437:11)
    at moduleResolve (node:internal/modules/esm/resolve:1009:10)
    at defaultResolve (node:internal/modules/esm/resolve:1218:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:580:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:294:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36)
 ELIFECYCLE  Command failed with exit code 1.

"config.kit.vite has been removed — use vite.config.js instead" error

This is my repository https://github.com/stephane-klein/kit-docs-playground/tree/9049d03e2c84f6bf23b80559d26c1cdd57286a0d

When I execute:

$ npm install

I have this error:

$ npm install
npm WARN deprecated @types/[email protected]: This is a stub types definition. lru-cache provides its own type definitions, so you do not need this installed.

> [email protected] prepare
> svelte-kit sync

> config.kit.vite has been removed — use vite.config.js instead
    at file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:565:10
    at file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:457:43
    at file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:443:18
    at file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:443:18
    at validate_config (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:649:9)
    at process_config (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:626:20)
    at load_config (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/chunks/error.js:618:9)
    at async file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/node_modules/@sveltejs/kit/dist/cli.js:48:19
npm ERR! code 1
npm ERR! path /home/stephane/git/github.com/stephane-klein/kit-docs-playground
npm ERR! command failed
npm ERR! command sh -c svelte-kit sync

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/stephane/.npm/_logs/2022-07-05T21_02_20_132Z-debug-0.log

How can I fix this error?

Default Theme: Sidebar slot "sidebar-top" is not at the top if search is active

The sidebar slot with the name "sidebar-top" of the default theme is not at the top of the sidebar if a search is being implemented.
I think it should be at the top but also there should be a slot to put something between the search and the sidebar navigation.

rtl to be possible

for now I put all the layout inside but some things are not right like the next arrow and the theme picker

Exposing tailwind?

It seems like kit-docs is using tailwind under the hood.

Is it be possible to expose it so that custom svelte components get tailwind classes support out of the box (and we are able to add tailwind plugins like using markdown-it plugins via the configureParser option in kitDocsPlugin)?

Or is it something we should configure on top of kit-docs?

P.S.: Love the project, keep up the great work.

`Prev` & `Next` navigation links doesn't works if `trailingSlash` is set to `always`.

To be able to deploy to Amazon CDN(CF S3) we needed index.html files for every (prerendered) page. With @sveltejs/adapter-static trailingSlash, it can be done easily.

Basically it works as it should, the only broken thing what I found up to this point, that the Prev & Next buttons are broken.

Cannot find module './transformers/\"ts\"'

If you use lang="ts" in combination with the copy on a code fence, you get the following error:

Error while preprocessing /home/.../[...1]header.md - Cannot find module './transformers/\"ts\"'

This works:

```svelte
<script lang="ts">
</script>
```

This also works:

```svelte copy
<script>
</script>
```

This does not work:

```svelte copy
<script lang="ts">
</script>
```

Is image supported?

I am unable to use image in Markdown, is it supported?
Thanks!

"@svelteness/kit-docs/client/components/layout/Sidebar.svelte:73:9 Unexpected character '@'" error

In this fresh KitDocs project, I have @svelteness/kit-docs/client/components/layout/Sidebar.svelte:73:9 Unexpected character '@ error.

Here is how to reproduce:

$ git clone [email protected]:stephane-klein/kit-docs-playground.git
$ git checkout -b issue3 59d16ad26d358237dc1a0361641530259fdc439b
$ cd kit-docs-playground/services/kit-docs
$ pnpm install
$ pnpm run dev

Go to http://127.0.0.1:3000/, I have this error:

/home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@svelteness/kit-docs/client/components/layout/Sidebar.svelte:73:9 Unexpected character '@' (x2)
/home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@svelteness/kit-docs/client/components/layout/Sidebar.svelte:73:9 Unexpected character '@'
 71 |      <ul class={clsx(!search && 'mt-8', 'pb-28 992:pb-0')}>
 72 |        {#each Object.keys($config.links) as category (category)}
 73 |          {@const links = $config.links[category]}
                ^
 74 |          <li class="992:mt-10 mt-12 first:mt-0">
 75 |            {#if category !== '.'}
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:938:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:968:5)
    at root.svelte:15:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=e7fad255:1681:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=e7fad255:1689:26)
    at render_response (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:1383:27)
    at async respond_with_error (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:2758:10)
    at async respond$1 (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:2834:10)
    at async resolve (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3346:11)
    at async respond (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3290:20)
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:938:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:968:5)
    at root.svelte:15:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=e7fad255:1681:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=e7fad255:1689:26)
    at render_response (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:1383:27)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async respond_with_error (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:2758:10)
    at async resolve (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3391:13)
    at async respond (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3290:20)

Versions:

$ pnpm list
Legend: production dependency, optional only, dev only

[email protected] /home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs

dependencies:
@fontsource/fira-mono 4.5.0
cookie 0.4.1

devDependencies:
@iconify-json/ri 1.1.1                @sveltejs/kit 1.0.0-next.370          clsx 1.1.1                            eslint-config-prettier 8.3.0          prettier 2.6.2                        shiki 0.10.1                          unplugin-icons 0.13.4
@sveltejs/adapter-auto 1.0.0-next.57  @svelteness/kit-docs 0.23.0           eslint 8.16.0                         eslint-plugin-svelte3 4.0.0           prettier-plugin-svelte 2.7.0          svelte 3.44.0                         vite 2.9.14

Have you an idea to fix this error?

Default Theme: Whitespace in Category breaks link highlighting

Let's assume this directory structure:

src/
├─ routes/
│  ├─ docs/
│  │  ├─ Core Components/
│  │  │  ├─ ComponentA.md
│  │  │  ├─ ComponentB.md

Link highlighting (i.e. link is highlighted when it's the currently active link) breaks when a directory that serves as a documentation category contains a whitespace.

kit-docs isn't powered by SvelteKit? What is the rational?

From the package.json content, it seems that kit-docs is not powered by SvelteKit. Is this correct?

If yes, had the use of SvelteKit been considered?
If yes, why this solution was not chosen?

I ask myself this question, because I think that the SvelteKit could have been interesting for kit-docs 🤔

Official documentation page seems to be broken.

Tried going into the docs and I just got a 500 error.

Undefined `frontmatter` on page navigation

When navigating to any page within the documentation, the following error is thrown:

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'frontmatter')
    at kitDocs.js:7
    at sync (index.mjs:77)
    at Array.<anonymous> (index.mjs:89)
    at Object.set (index.mjs:34)
    at KitDocs.svelte? [sm]:6
    at run (index.mjs:18)
    at Array.forEach (<anonymous>)
    at run_all (index.mjs:24)
    at destroy_component (index.mjs:1833)
    at Object.destroy [as d] (__layout-kit-docs.svelte? [sm]:46)

It seems to be coming from this line in kitDocs.js:

export const frontmatter = derived(kitDocs, ($kitDocs) => $kitDocs?.meta.frontmatter);

failed to load module for ssr

when trying to add my own css as in the docs i get this error

500
failed to load module for ssr: /src/lib/components/base/Menu.svelte
Error: failed to load module for ssr: /src/lib/components/base/Menu.svelte
    at instantiateModule (C:\Users\GitHub\docs\mydocs\node_modules\vite\dist\node\chunks\dep-8f5c9290.js:50206:15) 

[feature] i18n multilanguage support

I'd like to add multi-lang support using kit-docs.
Is this a feature you'd see value in adding?

`npm init` creates empty package on Windows

npm init @svelteness/kit-docs mydocs

PS D:\Github\lancer-docs> npm init @svelteness/kit-docs mydocs

√ Default KitDocs Theme? (Y/n) · true

[kit-docs]: target directory is empty, creating new SvelteKit app.

PS D:\Github\lancer-docs>

Nothing happens, folder is empty.

pnpm build fails - (ELIFECYCLE  Command failed with exit code 1.)

I'm on a Windows 11 machine using Git Bash if that has anything to do with it.
I can confirm the same issue is happening w/ npm run build also

here's the error up front for brevity

307 /docs -> /docs/first-category/first-page
- > 404 /docs/first-category/first-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/first-category/second-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/second-category/first-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/second-category/second-page" style="">                  Page Title                  </a>              </li></ul>        </li></ul>            </nav></aside><div class="992:hidden z-40"><div class="fixed top-0 left-0 bg-black/40 backdrop-blur-sm dark:bg-gray-700/80 transition-opacity duration-75 pointer-events-auto z-40 w-screen h-screen opacity-0 invisible"></div></div>    <main class="w-full overflow-x-hidden 992:min-h-[calc(100vh-var(--kd--navbar-height))] min-h-[calc(100vh-var(--kd--navbar-height))] px-8 992:px-16 pt-8" style="max-width: var(--kd-main-max-width, var(--kd-article-max-width));">      <article class="markdown prose dark:prose-invert z-10 max-w-[var(--kd-article-max-width)]">          <h1>Page Title</h1><p>Page description.</p></article>      <hr class="border-gray-divider mt-20">        <div class="992:text-xl flex items-center pt-12 pb-20 text-lg font-semibold text-gray-300">          <div class="ml-auto mb-4 flex flex-col items-end"><span class="text-gray-inverse mr-3 mb-4 inline-block">Next</span>                <a class="group transform-gpu text-lg font-medium transition-transform hover:scale-105 hover:text-gray-inverse" href="/docs/first-category/first-page" sveltekit:prefetch>    <span class="inline-block transform transition-transform duration-100 group-hover:translate-x-0 translate-x-2">Page Title</span>    <span class="opacity-0 transition-opacity duration-100 group-hover:visible group-hover:opacity-100 inline-block">-&gt;</span></a></div></div>      </main>    <div class="992:flex-1"></div>    </div></div><script type="module" data-sveltekit-hydrate="j7tozk">import { start } from "/_app/start-c57594a6.js";start({target: document.querySelector('[data-sveltekit-hydrate="j7tozk"]').parentNode,paths: {"base":"","assets":""},session: {},route: true,spa: false,trailing_slash: "never",hydrate: {status: 200,error: null,nodes: [import("/_app/pages/__layout-kit-docs.svelte-b66be7be.js"),import("/_app/pages/docs/[email protected]"),import("/_app/pages/docs/_...1_first-category/_...1_first-page.md-4bc77492.js")],params: {"1":""},routeId: "docs/[...1]first-category/[...1]first-page"}});</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/kit-docs/docs_first-category_first-page.meta.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"{/"excerpt/":/"/",/"headers/":[],/"title/":/"Page Title/",/"description/":/"Page description./",/"frontmatter/":{/"title/":/"Page Title/",/"description/":/"Page description./"},/"lastUpdated/":1653269293192}"}</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/kit-docs/docs.sidebar.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"{/"links/":{/"./":[{/"title/":/"Page Title/",/"slug/":/"/docs////first-category////first-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////first-category////second-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////second-category////first-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////second-category////second-page/"}]}}"}</script></div></body></html> (linked from /docs/first-category/first-page)

    at file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1037:11
    at save (file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1257:4)
    at visit (file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1148:3)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
- ELIFECYCLE  Command failed with exit code 1.

Here's the full log

oneezy@oneezy MINGW64 ~/Desktop/www/7.Testing/docs (main)
$ pnpm build

> [email protected] build C:\Users\oneezy\Desktop\www\7.Testing\docs
> svelte-kit build

vite v2.9.9 building for production...
✓ 100 modules transformed.
.svelte-kit/output/client/_app/assets/Inter-VF.roman-latin-1b58736b.woff2                          51.24 KiB
.svelte-kit/output/client/_app/assets/Inter-VF.italic-latin-65279caf.woff2                         55.21 KiB
.svelte-kit/output/client/_app/assets/FiraCode-VF-05b30ba3.woff2                                   103.74 KiB
.svelte-kit/output/client/_app/assets/FiraCode-VF-71c5868a.woff                                    127.05 KiB
.svelte-kit/output/client/_app/manifest.json                                                       4.78 KiB
.svelte-kit/output/client/_app/layout.svelte-5f25ab44.js                                           0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/_app/error.svelte-7bf15e36.js                                            1.56 KiB / gzip: 0.75 KiB
.svelte-kit/output/client/_app/pages/docs/[email protected]                     0.53 KiB / gzip: 0.35 KiB
.svelte-kit/output/client/_app/pages/docs/_...1_first-category/_...1_first-page.md-4bc77492.js     0.77 KiB / gzip: 0.48 KiB
.svelte-kit/output/client/_app/start-c57594a6.js                                                   26.72 KiB / gzip: 9.07 KiB
.svelte-kit/output/client/_app/pages/docs/_...1_first-category/_...2_second-page.md-6085f526.js    0.77 KiB / gzip: 0.48 KiB
.svelte-kit/output/client/_app/pages/docs/_...2_second-category/_...1_first-page.md-8301a3d7.js    0.77 KiB / gzip: 0.48 KiB
.svelte-kit/output/client/_app/pages/docs/_...2_second-category/_...2_second-page.md-478c23b9.js   0.77 KiB / gzip: 0.48 KiB
.svelte-kit/output/client/_app/pages/docs/index.svelte-72b18a38.js                                 0.26 KiB / gzip: 0.21 KiB
.svelte-kit/output/client/_app/chunks/singletons-f222faae.js                                       0.84 KiB / gzip: 0.51 KiB
.svelte-kit/output/client/_app/pages/[email protected]                                 15.35 KiB / gzip: 5.37 KiB
.svelte-kit/output/client/_app/chunks/contexts-e4888282.js                                         3.97 KiB / gzip: 1.77 KiB
.svelte-kit/output/client/_app/chunks/index-6303d0c3.js                                            10.46 KiB / gzip: 4.17 KiB
.svelte-kit/output/client/_app/chunks/scroll-88133740.js                                           2.00 KiB / gzip: 1.03 KiB
.svelte-kit/output/client/_app/assets/scroll-8521731d.css                                          0.03 KiB / gzip: 0.05 KiB
.svelte-kit/output/client/_app/assets/pages/__layout-kit-docs.svelte-7b5852ad.css                  46.28 KiB / gzip: 8.80 KiB
.svelte-kit/output/client/_app/pages/__layout-kit-docs.svelte-b66be7be.js                          84.67 KiB / gzip: 25.70 KiB
vite v2.9.9 building SSR bundle for production...
✓ 100 modules transformed.
Generated an empty chunk: "hooks"
.svelte-kit/output/server/manifest.json                                                      4.13 KiB
.svelte-kit/output/server/index.js                                                           75.17 KiB
.svelte-kit/output/server/entries/endpoints/kit-docs/_slug_.meta.json.js                     0.12 KiB
.svelte-kit/output/server/entries/endpoints/kit-docs/_dir_.sidebar.json.js                   0.13 KiB
.svelte-kit/output/server/entries/fallbacks/layout.svelte.js                                 0.24 KiB
.svelte-kit/output/server/entries/fallbacks/error.svelte.js                                  0.72 KiB
.svelte-kit/output/server/entries/pages/__layout-kit-docs.svelte.js                          49.35 KiB
.svelte-kit/output/server/entries/pages/docs/[email protected]                     0.26 KiB
.svelte-kit/output/server/entries/pages/docs/_...1_first-category/_...1_first-page.md.js     0.58 KiB
.svelte-kit/output/server/entries/pages/docs/_...1_first-category/_...2_second-page.md.js    0.58 KiB
.svelte-kit/output/server/entries/pages/docs/_...2_second-category/_...1_first-page.md.js    0.58 KiB
.svelte-kit/output/server/entries/pages/docs/_...2_second-category/_...2_second-page.md.js   0.58 KiB
.svelte-kit/output/server/entries/pages/docs/index.svelte.js                                 0.34 KiB
.svelte-kit/output/server/entries/pages/[email protected]                                 10.64 KiB
.svelte-kit/output/server/chunks/index-19808547.js                                           7.38 KiB
.svelte-kit/output/server/chunks/contexts-a5b02464.js                                        7.21 KiB
.svelte-kit/output/server/chunks/scroll-94143726.js                                          4.50 KiB
.svelte-kit/output/server/chunks/hooks-1c45ba0b.js                                           0.00 KiB
  307 /docs -> /docs/first-category/first-page
> 404 /docs/first-category/first-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/first-category/second-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/second-category/first-page" style="">                  Page Title                  </a>              </li><li class="first:mt-6"><a class="992:py-1.5 -ml-px flex items-center border-l-2 py-2 pl-4 hover:border-gray-inverse text-gray-soft hover:text-gray-inverse border-transparent font-normal" href="/docs/second-category/second-page" style="">                  Page Title                  </a>              </li></ul>        </li></ul>            </nav></aside><div class="992:hidden z-40"><div class="fixed top-0 left-0 bg-black/40 backdrop-blur-sm dark:bg-gray-700/80 transition-opacity duration-75 pointer-events-auto z-40 w-screen h-screen opacity-0 invisible"></div></div>    <main class="w-full overflow-x-hidden 992:min-h-[calc(100vh-var(--kd--navbar-height))] min-h-[calc(100vh-var(--kd--navbar-height))] px-8 992:px-16 pt-8" style="max-width: var(--kd-main-max-width, var(--kd-article-max-width));">      <article class="markdown prose dark:prose-invert z-10 max-w-[var(--kd-article-max-width)]">          <h1>Page Title</h1><p>Page description.</p></article>      <hr class="border-gray-divider mt-20">        <div class="992:text-xl flex items-center pt-12 pb-20 text-lg font-semibold text-gray-300">          <div class="ml-auto mb-4 flex flex-col items-end"><span class="text-gray-inverse mr-3 mb-4 inline-block">Next</span>                <a class="group transform-gpu text-lg font-medium transition-transform hover:scale-105 hover:text-gray-inverse" href="/docs/first-category/first-page" sveltekit:prefetch>    <span class="inline-block transform transition-transform duration-100 group-hover:translate-x-0 translate-x-2">Page Title</span>    <span class="opacity-0 transition-opacity duration-100 group-hover:visible group-hover:opacity-100 inline-block">-&gt;</span></a></div></div>      </main>    <div class="992:flex-1"></div>    </div></div><script type="module" data-sveltekit-hydrate="j7tozk">import { start } from "/_app/start-c57594a6.js";start({target: document.querySelector('[data-sveltekit-hydrate="j7tozk"]').parentNode,paths: {"base":"","assets":""},session: {},route: true,spa: false,trailing_slash: "never",hydrate: {status: 200,error: null,nodes: [import("/_app/pages/__layout-kit-docs.svelte-b66be7be.js"),import("/_app/pages/docs/[email protected]"),import("/_app/pages/docs/_...1_first-category/_...1_first-page.md-4bc77492.js")],params: {"1":""},routeId: "docs/[...1]first-category/[...1]first-page"}});</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/kit-docs/docs_first-category_first-page.meta.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"{/"excerpt/":/"/",/"headers/":[],/"title/":/"Page Title/",/"description/":/"Page description./",/"frontmatter/":{/"title/":/"Page Title/",/"description/":/"Page description./"},/"lastUpdated/":1653269293192}"}</script><script type="application/json" sveltekit:data-type="data" sveltekit:data-url="/kit-docs/docs.sidebar.json">{"status":200,"statusText":"","headers":{"content-type":"application/json; charset=utf-8"},"body":"{/"links/":{/"./":[{/"title/":/"Page Title/",/"slug/":/"/docs////first-category////first-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////first-category////second-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////second-category////first-page/"},{/"title/":/"Page Title/",/"slug/":/"/docs////second-category////second-page/"}]}}"}</script></div></body></html> (linked from /docs/first-category/first-page)
    at file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1037:11
    at save (file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1257:4)
    at visit (file:///C:/Users/oneezy/Desktop/www/7.Testing/docs/node_modules/.pnpm/@[email protected][email protected]/node_modules/@sveltejs/kit/dist/chunks/index2.js:1148:3)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
 ELIFECYCLE  Command failed with exit code 1.

Type error on npm run dev

I followed the setup instructions but am presented with the following error:

TypeError: Cannot read properties of undefined (reading 'code')
    at CodeFence.svelte:91:19```

What do you think about refactoring kit-docs i18n support with sveltekit-i18n ?

Hello,

I know about the existence of

• #13 (comment)
• https://kit-docs.svelteness.dev/docs/default-layout/configuration#language-i18n
• and https://github.com/svelteness/kit-docs/blob/main/packages/kit-docs/src/lib/components/layout/contexts.ts#L224-L256

and I was wondering if it would be revelant that kit-docs use sveltekit-i18n for its i18n support 🤔.

@mihar-22 what do you think about this idea? I am willing to create a Pull Request to see what is might look like.

Best regards,
Stéphane

Any thoughts to using MDsveX ?

Hi,
I've recently had a look at the code, I've noticed for the Markdown side of things I think you're using a custom bit of code for that.
I was thinking that https://mdsvex.com/ might save a bit of work here / may have more features etc.

Should "Next" & "Previous" at page bottom be clickable for navigation?

An end user would naturally try to click "Next" & "Previous" at page bottom to navigate between pages. Maybe they should be clickable for navigation?

Outdated Github links

Hi! Working through the documentation I found that some Github links are outdated and send to 404 pages.
Example: links in this section

Provide example of custom sidebar

Could you provide an example of how to best override the sidebar styles/structure etc. and provide a custom sidebar to the kitdocs layout?
Thanks!

Deploy to vercel

I get this error

Error: The Serverless Function "." has invalid runtime: "nodejs18.x". Learn More: https://github.com/vercel/vercel/blob/main/DEVELOPING_A_RUNTIME.md#lambdaruntime

Dark theme not loading initially

On version 0.20.0 the dark theme is not applied, if I reload the page.

https://svelte-babylon.netlify.app/docs/introduction/getting-started#creating-a-project

The mode is correctly being set in the localStorage

Translations

It would be great to be able to change the default text strings to be able to translate them.

As far as I see, there are these static strings:

Title of the Buttons on the Bottom:

• "Next"
• "Previous"

Title of the right Sidebar:

• "On this page"

Options on the Theme toggle:

• "Light"
• "Dark"
• "System"

Titles on the admonitions:

• "Note"
• "Info"
• "Tip"
• "Warning"
• "Danger"
• "Experimental"

Search (?):

• "Search Documentation"
• "No recent searches"
• "to select"
• "to navigate"
• "to close"
• "Search by"

Cannot find package $app

Fresh install with these commands:

npm init @svelteness/kit-docs docs
> Skeleton project
> Typescript
> eslint
cd docs
pnpm i
pnpm dev

Yields this error:

Error [ERR_MODULE_NOT_FOUND]: Cannot find package '$app' imported from ...\node_modules\.pnpm\@[email protected][email protected]\node_modules\@svelteness\kit-docs\client\polyfills\focus-visible.js
    at new NodeError (node:internal/errors:388:5)
    at packageResolve (node:internal/modules/esm/resolve:910:9)
    at moduleResolve (node:internal/modules/esm/resolve:959:20)
    at defaultResolve (node:internal/modules/esm/resolve:1174:11)
    at ESMLoader.resolve (node:internal/modules/esm/loader:605:30)
    at ESMLoader.getModuleJob (node:internal/modules/esm/loader:318:18)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/module_job:80:40)
    at link (node:internal/modules/esm/module_job:78:36)

The culprit:

// @svelteness/kit-docs/client/polyfills/focus-visible.js
import { browser } from '$app/env';

$app would lead me to believe this is a missing alias?

Support for MyST markdown

Hi! First of all, cool project! Looking at your extension syntax (https://kit-docs.svelteness.dev/docs/markdown/extensions#header-anchors) couldn't fail to notice this is very similar to the capabilities of MyST-markdown - https://myst-parser.readthedocs.io/en/latest/

MyST has a JS parser: https://executablebooks.github.io/mystjs/ and follows the CommonMark spec, with rst-compatible extensions.

The huge win is that MyST markdown also works seamlessly in a super-popular documentation framework, Sphinx, so it creates an interop later with a ton of preexisting documentation authored in rst or MyST - migrating to MyST from rst is a breeze.

Function called outside component initialization error

In this fresh KitDocs project, I have Function called outside component initialization error.

Here is how to reproduce:

$ git clone [email protected]:stephane-klein/kit-docs-playground.git
$ git checkout -b issue 474b05c80e26816a8c69799008abde67bf5e897f
$ cd kit-docs-playground/services/kit-docs
$ pnpm install
$ pnpm run dev

Go to http://127.0.0.1:3000/, I have this error:

$ pnpm run dev                                                                                                                       130

> [email protected] dev /home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs
> vite dev


  vite v2.9.14 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 739ms.

Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:15:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=8cb0458f:1755:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=8cb0458f:1763:26)
    at render_response (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:1383:27)
    at async respond$1 (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:2996:4)
    at async resolve (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3346:11)
    at async respond (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3290:20)
    at async file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@sveltejs/kit/dist/vite.js:2324:22
(node:494086) ExperimentalWarning: buffer.Blob is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
Function called outside component initialization
Error: Function called outside component initialization
    at get_current_component (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:953:15)
    at Module.setContext (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs:985:5)
    at root.svelte:15:1
    at $$render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=8cb0458f:1755:22)
    at Object.render (/node_modules/.pnpm/[email protected]/node_modules/svelte/internal/index.mjs?v=8cb0458f:1763:26)
    at render_response (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:1383:27)
    at async respond_with_error (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:2758:10)
    at async respond$1 (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3013:4)
    at async resolve (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3346:11)
    at async respond (file:///home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs/.svelte-kit/runtime/server/index.js:3290:20)

Versions:

$ pnpm list
Legend: production dependency, optional only, dev only

[email protected] /home/stephane/git/github.com/stephane-klein/kit-docs-playground/services/kit-docs

dependencies:
@fontsource/fira-mono 4.5.0
cookie 0.4.1

devDependencies:
@iconify-json/ri 1.1.1                eslint 8.16.0                         shiki 0.10.1
@sveltejs/adapter-auto 1.0.0-next.57  eslint-config-prettier 8.3.0          svelte 3.48.0
@sveltejs/kit 1.0.0-next.370          eslint-plugin-svelte3 4.0.0           unplugin-icons 0.13.4
@svelteness/kit-docs 0.23.0           prettier 2.6.2                        vite 2.9.14
clsx 1.1.1                            prettier-plugin-svelte 2.7.0

Have you an idea to fix this error?