Demo Docs (coming soon)
Pronounced Boo-Kit or Book-It
A new Story environment with a different approach. Finely tuned to work directly within your Svelte Kit projects. Stay tuned for more information and docs on how to use and add to your projects.
- Easy
- Build for Svelte Kit
- No webpack, or extra build process
- Integrated into your app
- Themeable
- Use your real data
- Simple
You'll need to create this route structure
-
First step is to create this new route structure
src/routes/ โโ +layout.svelte โโ ... // other routes +โโ (book)/ + โโ +layout.svelte + โโ +layout.ts + โโ book/ + โโ [parent]-[title]/ + โโ +page.svelte + โโ +page.ts
-
In
src/routes/(book)/+layout.svelte
<script lang="ts"> import { Book } from '@leveluptuts/bookit'; import '../../../src/app.css'; // your app's css </script> <Book> <slot /> </Book>
-
In
src/routes/(book)/+layout.svelte
export { layoutLoad as load } from '@leveluptuts/bookit';
-
In
src/routes/(book)/book/[parent][title]/+page.svelte
<script lang="ts"> import { Bookit } from '@leveluptuts/bookit'; type Data = { props: { params: { parent: string; title: string; }; }; }; export let data: Data; </script> <Bookit params={data.props.params} />
-
In
src/routes/(book)/book/[parent]-[title]/+page.ts
export { load } from '@leveluptuts/bookit';
-
-
Now your project is set up, let's now create our first story file that has a name like this
MyButton.story.svelte
-
Import and wrap your component with
Canvas
andFrame
<script context="module" lang="ts"> import { Canvas, Frame } from '@leveluptuts/bookit'; import MyButton from './MyButton.svelte'; export const parent = 'Library'; export const title = 'Button'; </script> <Canvas> <Frame title="Primary"> <MyButton color="blue" /> </Frame> </Canvas>
-
To view the story in the browser, navigate to
/book/Library-Button
.
Note: Both variables in the story parent
and title
are used for the paramterized route in /book/[parent]-[title]