Skip to content

Commit 3d2ac28

Browse files
benmccannmanuel3108
benmccann
and
manuel3108
authored
docs: add-on docs (#546)
* docs: add `add-on` docs * Apply suggestions from code review Co-authored-by: Ben McCann <[email protected]> * docs: add-on docs * Update documentation/docs/30-add-ons/05-drizzle.md Co-authored-by: Manuel <[email protected]> * Update documentation/docs/30-add-ons/50-tailwind.md Co-authored-by: Manuel <[email protected]> * Update documentation/docs/30-add-ons/25-paraglide.md Co-authored-by: Manuel <[email protected]> --------- Co-authored-by: Manuel Serret <[email protected]> Co-authored-by: Manuel <[email protected]>
1 parent 9dde45f commit 3d2ac28

12 files changed

+288
-0
lines changed

‎documentation/docs/30-add-ons/05-drizzle.md

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
---
2+
title: drizzle
3+
---
4+
5+
[Drizzle ORM](https://orm.drizzle.team/) is a TypeScript ORM offering both relational and SQL-like query APIs, and which is serverless-ready by design.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add drizzle
11+
```
12+
13+
## What you get
14+
15+
- a setup that keeps your database access in SvelteKit's server files
16+
- an `.env` file to store your credentials
17+
- compatibility with the Lucia auth add-on
18+
- an optional Docker configuration to help with running a local database
19+
20+
## Options
21+
22+
### database
23+
24+
Which database variant to use:
25+
26+
- `postgresql` — the most popular open source database
27+
- `mysql` — another popular open source database
28+
- `sqlite` — file-based database not requiring a database server
29+
30+
```bash
31+
npx sv add --drizzle=postgresql
32+
```
33+
34+
### client
35+
36+
The SQL client to use, depends on `database`:
37+
38+
- For `postgresql`: `postgres.js`, `neon`,
39+
- For `mysql`: `mysql2`, `planetscale`
40+
- For `sqlite`: `better-sqlite3`, `libsql`, `turso`
41+
42+
```bash
43+
npx sv add --drizzle=postgresql,postgres.js
44+
```
45+
46+
Drizzle is compatible with well over a dozen database drivers. We just offer a few of the most common ones here for simplicity, but if you'd like to use another one you can choose one as a placeholder and swap it out for another after setup by choosing from [Drizzle's full list of compatible drivers](https://orm.drizzle.team/docs/connect-overview#next-steps).
47+
48+
### docker
49+
50+
Whether to add Docker Compose configuration. Only available for [`database`](#Options-database) `postgresql` or `mysql`
51+
52+
- `docker` - generates `docker-compose.yml`
53+
- `no-docker` - does not generate docker config
54+
55+
```bash
56+
npx sv add --drizzle=postgresql,postgres.js,docker
57+
```

‎documentation/docs/30-add-ons/10-eslint.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: eslint
3+
---
4+
5+
[ESLint](https://eslint.org/) finds and fixes problems in your code.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add eslint
11+
```
12+
13+
## What you get
14+
15+
- the relevant packages installed including `eslint-plugin-svelte`
16+
- an `eslint.config.js` file
17+
- updated `.vscode/settings.json`
18+
- configured to work with TypeScript and `prettier` if you're using those packages

‎documentation/docs/30-add-ons/15-lucia.md

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
title: lucia
3+
---
4+
5+
An auth setup following [the Lucia auth guide](https://lucia-auth.com/).
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add lucia
11+
```
12+
13+
## What you get
14+
15+
- an auth setup for SvelteKit and Drizzle following the best practices from the Lucia auth guide
16+
- optional demo registration and login pages
17+
18+
## Options
19+
20+
### demo
21+
22+
Whether to include demo registration and login pages.
23+
24+
```bash
25+
npx sv add --lucia=demo
26+
```

‎documentation/docs/30-add-ons/20-mdsvex.md

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
---
2+
title: mdsvex
3+
---
4+
5+
[mdsvex](https://mdsvex.pngwn.io) is a markdown preprocessor for Svelte components - basically MDX for Svelte. It allows you to use Svelte components in your markdown, or markdown in your Svelte components.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add mdsvex
11+
```
12+
13+
## What you get
14+
15+
- mdsvex installed and configured in your `svelte.config.js`

‎documentation/docs/30-add-ons/25-paraglide.md

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
---
2+
title: paraglide
3+
---
4+
5+
[Paraglide from Inlang](https://inlang.com/m/gerre34r/library-inlang-paraglideJs) is a compiler-based i18n library that emits tree-shakable message functions with small bundle sizes, no async waterfalls, full type-safety, and more.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add paraglide
11+
```
12+
13+
## What you get
14+
15+
- Inlang project settings
16+
- paraglide Vite plugin
17+
- SvelteKit `reroute` and `handle` hooks
18+
- `text-direction` and `lang` attributes in `app.html`
19+
- updated `.gitignore`
20+
- an optional demo page showing how to use paraglide
21+
22+
## Options
23+
24+
### availableLanguageTags
25+
26+
The languages you'd like to support specified as IETF BCP 47 language tags.
27+
28+
```bash
29+
npx sv add --paraglide=en,es
30+
```
31+
32+
### demo
33+
34+
Whether to generate an optional demo page showing how to use paraglide.
35+
36+
```bash
37+
npx sv add --paraglide=demo
38+
```

‎documentation/docs/30-add-ons/30-playwright.md

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
---
2+
title: playwright
3+
---
4+
5+
[Playwright](https://playwright.dev) browser testing.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add playwright
11+
```
12+
13+
## What you get
14+
15+
- scripts added in your `package.json`
16+
- a Playwright config file
17+
- an updated `.gitignore`
18+
- a demo test

‎documentation/docs/30-add-ons/35-prettier.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: prettier
3+
---
4+
5+
[Prettier](https://prettier.io) is an opinionated code formatter.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add prettier
11+
```
12+
13+
## What you get
14+
15+
- scripts in your `package.json`
16+
- `.prettierignore` and `.prettierrc` files
17+
- updates to your eslint config if you're using that package

‎documentation/docs/30-add-ons/40-storybook.md

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
---
2+
title: storybook
3+
---
4+
5+
[Storybook](https://storybook.js.org/) is a frontend component workshop.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add storybook
11+
```
12+
13+
## What you get
14+
15+
- `npx storybook init` run for you from the same convenient `sv` CLI used for all other add-ons
16+
- [Storybook for SvelteKit](https://storybook.js.org/docs/get-started/frameworks/sveltekit) or [Storybook for Svelte & Vite](https://storybook.js.org/docs/get-started/frameworks/svelte-vite) with default config provided, easy mocking of many SvelteKit modules, automatic link handling, and more.

‎documentation/docs/30-add-ons/45-sveltekit-adapter.md

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
title: sveltekit-adapter
3+
---
4+
5+
[SvelteKit adapters](/docs/kit/adapters) allow you to deploy your site to numerous platforms. This add-on allows you to configure officially provided SvelteKit adapters, but a number of [community-provided adapters](https://www.sveltesociety.dev/packages?category=sveltekit-adapters) are also available.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add sveltekit-adapter
11+
```
12+
13+
## What you get
14+
15+
- the chosen SvelteKit adapter installed and configured in your `svelte.config.js`
16+
17+
## Options
18+
19+
### adapter
20+
21+
Which SvelteKit adapter to use:
22+
23+
- `auto` — [`@sveltejs/adapter-auto`](/docs/kit/adapter-auto) automatically chooses the proper adapter to use, but is less configurable
24+
- `node` — [`@sveltejs/adapter-node`](/docs/kit/adapter-node) generates a standalone Node server
25+
- `static` — [`@sveltejs/adapter-static`](/docs/kit/adapter-static) allows you to use SvelteKit as a static site generator (SSG)
26+
- `vercel` — [`@sveltejs/adapter-vercel`](/docs/kit/adapter-vercel) allows you to deploy to Vercel
27+
- `cloudflare` — [`@sveltejs/adapter-cloudflare`](/docs/kit/adapter-cloudflare) allows you to deploy to Cloudflare
28+
- `netlify` — [`@sveltejs/adapter-netlify`](/docs/kit/adapter-netlify) allows you to deploy to Netlify
29+
30+
```bash
31+
npx sv add --sveltekit-adapter=node
32+
```

‎documentation/docs/30-add-ons/50-tailwind.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
---
2+
title: tailwindcss
3+
---
4+
5+
[Tailwind CSS](https://tailwindcss.com/) allows you to rapidly build modern websites without ever leaving your HTML.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add tailwindcss
11+
```
12+
13+
## What you get
14+
15+
- Tailwind setup following the [Tailwind for SvelteKit guide](https://tailwindcss.com/docs/installation/framework-guides/sveltekit)
16+
- Tailwind Vite plugin
17+
- updated `app.css` and `+layout.svelte` (for SvelteKit) or `App.svelte` (for non-SvelteKit Vite apps)
18+
- integration with `prettier` if using that package
19+
20+
## Options
21+
22+
### plugins
23+
24+
Which plugin to use:
25+
26+
- `typography` — [`@tailwindcss/typography`](https://github.com/tailwindlabs/tailwindcss-typography)
27+
- `forms` — [`@tailwindcss/forms`](https://github.com/tailwindlabs/tailwindcss-forms)
28+
29+
```bash
30+
npx sv add --tailwindcss=typography
31+
```

‎documentation/docs/30-add-ons/55-vitest.md

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title: vitest
3+
---
4+
5+
[Vitest](https://vitest.dev/) is a Vite-native testing framework.
6+
7+
## Usage
8+
9+
```bash
10+
npx sv add vitest
11+
```
12+
13+
## What you get
14+
15+
- the relevant packages installed and scripts added to your `package.json`
16+
- client/server-aware testing setup for Svelte in your Vite config file
17+
- demo tests

‎documentation/docs/30-add-ons/index.md

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
---
2+
title: Add-ons
3+
---

0 commit comments

Comments
 (0)