diff --git a/README.md b/README.md index d91c934..621b764 100644 --- a/README.md +++ b/README.md @@ -18,3 +18,81 @@ A new Story environment with a different approach. Finely tuned to work directly - Themeable - Use your real data - Simple + +### Setting up your project + +You'll need to create this route structure + +1. First step is to create this new route structure + ```diff + src/routes/ + ├─ +layout.svelte + ├─ ... // other routes + +└─ (book)/ + + ├─ +layout.svelte + + ├─ +layout.ts + + └─ book/ + + └─ [parent]-[title]/ + + ├─ +page.svelte + + └─ +page.ts + ``` + + - In `src/routes/(book)/+layout.svelte` + + ```html + + + + + + ``` + - In `src/routes/(book)/+layout.svelte` + ```js + export { layoutLoad as load } from '@leveluptuts/bookit'; + ``` + - In `src/routes/(book)/book/[parent][title]/+page.svelte` + ```html + + + + ``` + - In `src/routes/(book)/book/[parent]-[title]/+page.ts` + ```js + export { load } from '@leveluptuts/bookit'; + ``` +2. Now your project is set up, let's now create our first story file that has a name like this `MyButton.story.svelte` + +3. Import and wrap your component with `Canvas` and `Frame` + + ```html + + + + + + + + ``` +4. 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]` \ No newline at end of file