Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs: add content to get started page #57

Merged
merged 3 commits into from
Feb 12, 2024
Merged

docs: add content to get started page #57

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bc6dd01
add content to get started page
ollema Feb 12, 2024
c65b7aa
add missing now
ollema Feb 12, 2024
7945b3d
update getting-started
huntabyte Feb 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
43 changes: 39 additions & 4 deletions sites/docs/content/get-started.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,46 @@ tagline: Guide
---

<script>
import { Callout } from '$lib/components'
import { Steps, Step } from "$lib/components";
</script>

<Callout type="warning">
<Steps>

The documentation is still a work in progress. Please refer to the [GitHub README](https://github.com/svecosystem/mode-watcher) for more information.
<Step>Install the package</Step>

</Callout>
Install the `mode-watcher` package from npm.

```bash
npm install mode-watcher
```

<Step>Add the ModeWatcher component</Step>
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I could not get backticks/monspace font to work on the ModeWatcher in this step title here. not sure if that's intended


Add the `<ModeWatcher />` component to your root `+layout.svelte` file.

```svelte {2,5}#add title="src/routes/+layout.svelte"
<script lang="ts">
import { ModeWatcher } from "mode-watcher";
</script>

<ModeWatcher />
<slot />
```

<Step>That's it!</Step>

You're now ready to use Mode Watcher in your Svelte app.

Here's an example of how to use the `toggleMode` function to toggle the mode:

```svelte title="src/lib/components/light-switch.svelte"
<script lang="ts">
import { toggleMode } from "mode-watcher";
</script>

<button on:click={toggleMode}>Toggle Mode</button>
```

For additional information and configuration, please refer to the [API reference](/docs/api-reference/mode-watcher).

</Steps>
Loading