Skip to content

Commit 47193c8

Browse files
x0kx0k
committed
Update install instructions
1 parent 6f33fcd commit 47193c8

File tree

8 files changed

+96
-72
lines changed

8 files changed

+96
-72
lines changed

‎.changeset/many-yaks-doubt.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
"@sjsf/flowbite-theme": patch
3+
"@sjsf/skeleton-theme": patch
4+
"docs": patch
5+
---
6+
7+
Update install instructions

‎apps/docs/src/content/docs/themes/basic.mdx‎

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,26 @@ sidebar:
44
order: 0
55
---
66

7-
import { Code, Card } from '@astrojs/starlight/components';
7+
import { Code, Card, TabItem, Tabs } from '@astrojs/starlight/components';
88

99
import Npm from '@/components/npm.astro';
1010

1111
import BasicTheme from './_basic-theme.astro';
1212
import basicThemeCode from './_basic-theme.svelte?raw';
13+
import demoSchemaCode from './_demo-schema.ts?raw';
1314

1415
By default package `@sjsf/form` comes with a basic theme.
1516

16-
## Usage
17+
## Demo
1718

19+
<Tabs>
20+
<TabItem label="Form.svelte">
1821
<Code code={basicThemeCode} lang="svelte" />
22+
</TabItem>
23+
<TabItem label="_demo-schema.ts">
24+
<Code code={demoSchemaCode} lang="typescript" />
25+
</TabItem>
26+
</Tabs>
1927

2028
<Card>
2129
<BasicTheme />

‎apps/docs/src/content/docs/themes/daisyui.mdx‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,25 @@ sidebar:
44
order: 1
55
---
66

7-
import { Code, Card } from '@astrojs/starlight/components';
7+
import { Code, Card, TabItem, Tabs, LinkButton } from '@astrojs/starlight/components';
88

99
import Npm from '@/components/npm.astro';
1010

1111
import DaisyuiTheme from './_daisyui-theme.astro';
1212
import daisyuiThemeCode from './_daisyui-theme.svelte?raw';
13+
import demoSchemaCode from './_demo-schema.ts?raw';
1314

1415
## Installation
1516

1617
<Npm pkg="@sjsf/form @sjsf/daisyui-theme" />
1718

18-
## Configuration
19+
### Install daisyUI
20+
21+
<LinkButton href="https://daisyui.com/docs/install/" variant='minimal' target="_blank" icon="external">
22+
Install daisyUI as a Tailwind CSS plugin
23+
</LinkButton>
24+
25+
### Setup styles
1926

2027
There is two ways to setup styles:
2128

@@ -32,32 +39,28 @@ export default {
3239
}
3340
```
3441

35-
Or with a preset
36-
37-
```typescript
38-
import themePreset from '@sjsf/daisyui-theme/preset'
39-
40-
/** @type {import('tailwindcss').Config} */
41-
export default {
42-
presets: [themePreset],
43-
}
44-
```
45-
4642
2. Inject prepared styles (not recommended)
4743

4844
```typescript
4945
// Inject them as you like
5046
import daisyStyles from "@sjsf/daisyui-theme/styles.css?inline";
5147
```
5248

53-
## Apply theme
49+
## Additional widgets
50+
51+
- `toggle`
52+
53+
## Demo
5454

55-
<Code code={daisyuiThemeCode} lang="svelte" />
55+
<Tabs>
56+
<TabItem label="Form.svelte">
57+
<Code code={daisyuiThemeCode} lang="svelte" />
58+
</TabItem>
59+
<TabItem label="_demo-schema.ts">
60+
<Code code={demoSchemaCode} lang="typescript" />
61+
</TabItem>
62+
</Tabs>
5663

5764
<Card>
5865
<DaisyuiTheme />
5966
</Card>
60-
61-
## Additional widgets
62-
63-
- `toggle`

‎apps/docs/src/content/docs/themes/flowbite.mdx‎

Lines changed: 26 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,40 +4,38 @@ sidebar:
44
order: 2
55
---
66

7-
import { Code, Card } from '@astrojs/starlight/components';
7+
import { Code, Card, LinkButton, Tabs, TabItem } from '@astrojs/starlight/components';
88

99
import Npm from '@/components/npm.astro';
1010

1111
import FlowbiteTheme from './_flowbite-theme.astro';
1212
import flowbiteThemeCode from './_flowbite-theme.svelte?raw';
13+
import demoSchemaCode from './_demo-schema.ts?raw';
1314

1415
## Installation
1516

1617
<Npm pkg="@sjsf/form @sjsf/flowbite-theme" />
1718

18-
## Configuration
19+
### Install Flowbite Svelte
1920

20-
1. Use tailwindcss config
21+
<LinkButton href="https://flowbite-svelte.com/docs/pages/quickstart" variant='minimal' target="_blank" icon="external" >
22+
Quickstart - Flowbite Svelte
23+
</LinkButton>
2124

22-
```typescript
23-
import flowbite from 'flowbite/plugin';
24-
import { THEME_CONTENT, FLOWBITE_CONTENT, FLOWBITE_ICONS_CONTENT } from '@sjsf/flowbite-theme/preset'
25+
### Setup styles
2526

26-
/** @type {import('tailwindcss').Config} */
27-
export default {
28-
content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT, FLOWBITE_ICONS_CONTENT],
29-
plugins: [flowbite],
30-
}
31-
```
27+
There is two ways to setup styles:
3228

33-
Or with a preset
29+
1. Tailwind configuration
3430

3531
```typescript
36-
import themePreset from '@sjsf/flowbite-theme/preset'
32+
import flowbite from 'flowbite/plugin';
33+
import { THEME_CONTENT, FLOWBITE_CONTENT } from '@sjsf/flowbite-theme/preset'
3734

3835
/** @type {import('tailwindcss').Config} */
3936
export default {
40-
presets: [themePreset],
37+
content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT],
38+
plugins: [flowbite],
4139
}
4240
```
4341

@@ -48,14 +46,21 @@ export default {
4846
import flowbiteStyles from "@sjsf/flowbite-theme/styles.css?inline";
4947
```
5048

51-
## Apply theme
49+
## Additional widgets
50+
51+
- `toggle`
52+
53+
## Demo
5254

53-
<Code code={flowbiteThemeCode} lang="svelte" />
55+
<Tabs>
56+
<TabItem label="Form.svelte">
57+
<Code code={flowbiteThemeCode} lang="svelte" />
58+
</TabItem>
59+
<TabItem label="_demo-schema.ts">
60+
<Code code={demoSchemaCode} lang="typescript" />
61+
</TabItem>
62+
</Tabs>
5463

5564
<Card>
5665
<FlowbiteTheme />
5766
</Card>
58-
59-
## Additional widgets
60-
61-
- `toggle`

‎apps/docs/src/content/docs/themes/skeleton.mdx‎

Lines changed: 24 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,13 @@ sidebar:
44
order: 3
55
---
66

7-
import { Code, Card } from '@astrojs/starlight/components';
7+
import { Code, Card, TabItem, Tabs, LinkButton } from '@astrojs/starlight/components';
88

99
import Npm from '@/components/npm.astro';
1010

1111
import SkeletonTheme from './_skeleton-theme.astro';
1212
import skeletonThemCode from './_skeleton-theme.svelte?raw';
13+
import demoSchemaCode from './_demo-schema.ts?raw';
1314

1415
## Installation
1516

@@ -21,7 +22,13 @@ This is Skeleton v3 based theme.
2122

2223
:::
2324

24-
## Configuration
25+
### Install Skeleton
26+
27+
<LinkButton href="https://next.skeleton.dev/docs/get-started/installation/sveltekit" variant='minimal' target="_blank" icon="external" >
28+
SvelteKit - Skeleton
29+
</LinkButton>
30+
31+
### Setup styles
2532

2633
There is two ways to setup styles:
2734

@@ -45,17 +52,6 @@ export default {
4552
}
4653
```
4754

48-
Or with a preset
49-
50-
```typescript
51-
import themePreset from '@sjsf/skeleton-theme/preset'
52-
53-
/** @type {import('tailwindcss').Config} */
54-
export default {
55-
presets: [themePreset],
56-
}
57-
```
58-
5955
2. Inject prepared styles (not recommended)
6056

6157
```typescript
@@ -65,14 +61,21 @@ import daisyStyles from "@sjsf/skeleton-theme/styles.css?inline";
6561

6662
Bundled themes:
6763

68-
- cerberus
69-
- catppuccin
70-
- pine
71-
- rose
72-
73-
## Apply theme
74-
75-
<Code code={skeletonThemCode} lang="svelte" />
64+
- `cerberus`
65+
- `catppuccin`
66+
- `pine`
67+
- `rose`
68+
69+
## Demo
70+
71+
<Tabs>
72+
<TabItem label="Form.svelte">
73+
<Code code={skeletonThemCode} lang="svelte" />
74+
</TabItem>
75+
<TabItem label="_demo-schema.ts">
76+
<Code code={demoSchemaCode} lang="typescript" />
77+
</TabItem>
78+
</Tabs>
7679

7780
<Card>
7881
<SkeletonTheme />

‎packages/flowbite-theme/README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,11 @@ There is two ways to setup styles:
2121

2222
```typescript
2323
import flowbite from 'flowbite/plugin';
24-
import { THEME_CONTENT, FLOWBITE_CONTENT, FLOWBITE_ICONS_CONTENT } from '@sjsf/flowbite-theme/preset'
24+
import { THEME_CONTENT, FLOWBITE_CONTENT } from '@sjsf/flowbite-theme/preset'
2525

2626
/** @type {import('tailwindcss').Config} */
2727
export default {
28-
content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT, FLOWBITE_ICONS_CONTENT],
28+
content: ['./src/**/*.{html,js,svelte,ts}', THEME_CONTENT, FLOWBITE_CONTENT],
2929
plugins: [flowbite],
3030
}
3131
```

‎packages/flowbite-theme/src/lib/preset.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,9 @@ import flowbite from 'flowbite/plugin';
33

44
export const APP_CONTENT = './src/**/*.{html,js,svelte,ts}';
55
export const FLOWBITE_CONTENT = './node_modules/flowbite-svelte/**/*.{html,js,svelte,ts}';
6-
export const FLOWBITE_ICONS_CONTENT =
7-
'"./node_modules/flowbite-svelte-icons/**/*.{html,js,svelte,ts}",';
86
export const THEME_CONTENT = './node_modules/@sjsf/flowbite-theme/dist/**/*.{html,js,svelte,ts}';
97

108
export default {
11-
content: [APP_CONTENT, FLOWBITE_CONTENT, FLOWBITE_ICONS_CONTENT, THEME_CONTENT],
9+
content: [APP_CONTENT, FLOWBITE_CONTENT, THEME_CONTENT],
1210
plugins: [flowbite]
1311
} satisfies Config;

‎packages/skeleton-theme/README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -57,10 +57,10 @@ import daisyStyles from "@sjsf/skeleton-theme/styles.css?inline";
5757

5858
Bundled themes:
5959

60-
- cerberus
61-
- catppuccin
62-
- pine
63-
- rose
60+
- `cerberus`
61+
- `catppuccin`
62+
- `pine`
63+
- `rose`
6464

6565
### Apply theme
6666

0 commit comments

Comments
 (0)