Customizing app.html
By default, when your run your Kitbook (vite dev --mode kitbook
) the augmentSvelteConfigForKitbook
will update your svelte.config.js
to point to an app.html
file and assets folder contained in the kitbook package (in your node_modules folder), like this:
ts
constDEFAULT_KITBOOK_OPTIONS :Config = {extensions : ['.svelte', ...MDSVEX_EXTENSIONS ],kit : {files : {appTemplate : 'node_modules/kitbook/dist/app.html',assets : 'node_modules/kitbook/dist/assets',},}}
If you would like to provide your own app.html
file or point to the same one used by your main app then you can simply pass a few options to the augmentSvelteConfigForKitbook
function which will overwrite Kitbook defaults.
svelte.config.jsjs
//.../** @type {import('@sveltejs/kit').Config} */constsvelteConfigAdjustments = {kit : {files : {appTemplate : 'src/app.html',assets : 'static',},}}export defaultaugmentSvelteConfigForKitbook (config , {svelteConfigAdjustments });
If you do this, ensure you have a styles reset loaded in your app.html
file above %sveltekit.head%
. Tailwind and many other CSS frameworks include this. If you don’t have one yet, place your desired reset file into your static directory and link to it in your app.html
: <link rel="stylesheet" href="%sveltekit.assets%/tw-reset.css">
.