Skip to content

Commit 01fb076

Browse files
dangreendangreen
committed
docs: add svelte to website
1 parent 233b9b2 commit 01fb076

File tree

8 files changed

+215
-2
lines changed

8 files changed

+215
-2
lines changed

‎README.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ _Read the docs and explore examples at [masonry-grid.js.org](https://masonry-gri
3030
|---------|---------|------|
3131
| [`@masonry-grid/vanilla`](packages/vanilla#readme) | [![NPM version][vanilla-npm]][vanilla-npm-url] | [![Bundle size][vanilla-size]][vanilla-size-url] |
3232
| [`@masonry-grid/react`](packages/react#readme) | [![NPM version][react-npm]][react-npm-url] | [![Bundle size][react-size]][react-size-url] |
33+
| [`@masonry-grid/svelte`](packages/svelte#readme) | [![NPM version][svelte-npm]][svelte-npm-url] | [![Bundle size][svelte-size]][svelte-size-url] |
3334

3435
<!-- vanilla -->
3536

@@ -46,3 +47,11 @@ _Read the docs and explore examples at [masonry-grid.js.org](https://masonry-gri
4647

4748
[react-size]: https://deno.bundlejs.com/badge?q=%40masonry-grid%2Freact
4849
[react-size-url]: https://bundlejs.com/?q=%40masonry-grid%2Freact
50+
51+
<!-- svelte -->
52+
53+
[svelte-npm]: https://img.shields.io/npm/v/%40masonry-grid%2Fsvelte.svg
54+
[svelte-npm-url]: https://www.npmjs.com/package/@masonry-grid/svelte
55+
56+
[svelte-size]: https://deno.bundlejs.com/badge?q=%40masonry-grid%2Fsvelte
57+
[svelte-size-url]: https://bundlejs.com/?q=%40masonry-grid%2Fsvelte

‎website/src/content/docs/api/svelte.mdx‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
---
2+
title: '@masonry-grid/svelte'
3+
description: Documentation for the Svelte package of Masonry Grid
4+
sidebar:
5+
order: 3
6+
---
7+
8+
## MasonryGrid
9+
10+
Standard masonry layout that stacks items by pulling them up to fill gaps.
11+
12+
```svelte
13+
<script>
14+
import { MasonryGrid, Frame } from '@masonry-grid/svelte'
15+
</script>
16+
17+
<MasonryGrid
18+
frameWidth={200}
19+
gap={10}
20+
>
21+
<Frame width={4} height={3}>
22+
<img src='...' alt='' />
23+
</Frame>
24+
<!-- more frames... -->
25+
</MasonryGrid>
26+
```
27+
28+
### Props
29+
30+
- `frameWidth?: number | string` - Minimum width of each frame. Used to calculate `grid-template-columns`. Can be a number (px) or string with units.
31+
- `gap?: number | string` - Gap between items. Can be a number (px) or string with units.
32+
- `disabled?: boolean` - Disable the masonry layout (no transforms/reordering will be applied).
33+
- `as?: string` - Render as a different element (default: `'div'`).
34+
- All other HTML attributes are passed through.
35+
36+
## BalancedMasonryGrid
37+
38+
Balanced masonry layout that reorders items inside rows to minimize overall grid height.
39+
40+
```svelte
41+
<script>
42+
import { BalancedMasonryGrid, Frame } from '@masonry-grid/svelte'
43+
</script>
44+
45+
<BalancedMasonryGrid
46+
frameWidth={200}
47+
gap={10}
48+
>
49+
<Frame width={4} height={3}>
50+
<img src='...' alt='' />
51+
</Frame>
52+
<!-- more frames... -->
53+
</BalancedMasonryGrid>
54+
```
55+
56+
### Props
57+
58+
Same as `MasonryGrid`.
59+
60+
## Frame
61+
62+
Component for defining masonry grid item with aspect ratio.
63+
64+
```svelte
65+
<script>
66+
import { Frame } from '@masonry-grid/svelte'
67+
</script>
68+
69+
<Frame
70+
width={16}
71+
height={9}
72+
as='li'
73+
>
74+
<img src='...' alt='' />
75+
</Frame>
76+
```
77+
78+
### Props
79+
80+
- `width: number` - Width for aspect ratio calculation (not necessarily real pixel width).
81+
- `height: number` - Height for aspect ratio calculation (not necessarily real pixel height).
82+
- `as?: string` - Render as a different element (default: `'div'`).
83+
- All other HTML attributes are passed through.
84+
85+
## masonry
86+
87+
Svelte action for advanced use cases when you need direct access to the masonry grid instance.
88+
89+
```svelte
90+
<script>
91+
import { masonry } from '@masonry-grid/svelte'
92+
import { MasonryGrid as VanillaMasonryGrid } from '@masonry-grid/vanilla'
93+
</script>
94+
95+
<div
96+
use:masonry={{ type: VanillaMasonryGrid }}
97+
style="display: grid; overflow: hidden; gap: 10px;"
98+
>
99+
<!-- children -->
100+
</div>
101+
```

‎website/src/content/docs/examples/index.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,3 +19,9 @@ Interactive examples demonstrating various features and use cases of Masonry Gri
1919
- [Balanced React Grid](./react-balanced/) - Balanced algorithm with controls
2020
- [Semantic List](./react-unordered-list/) - Using `<ul>` and `<li>` elements
2121

22+
## Svelte
23+
24+
- [Regular Svelte Grid](./svelte-regular/) - Interactive example with controls
25+
- [Balanced Svelte Grid](./svelte-balanced/) - Balanced algorithm with controls
26+
- [Semantic List](./svelte-unordered-list/) - Using `<ul>` and `<li>` elements
27+

‎website/src/content/docs/examples/svelte-balanced.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Svelte Balanced Grid
3+
description: Example of using BalancedMasonryGrid component from @masonry-grid/svelte
4+
sidebar:
5+
order: 8
6+
---
7+
8+
<iframe
9+
src="https://stackblitz.com/github/TrigenSoftware/masonry-grid/tree/main/examples/svelte-balanced?embed=1&file=App.svelte&view=preview"
10+
style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
11+
title="Masonry Grid - Svelte Balanced Example"
12+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
13+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
14+
></iframe>

‎website/src/content/docs/examples/svelte-regular.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Svelte Regular Grid
3+
description: Example of using MasonryGrid component from @masonry-grid/svelte
4+
sidebar:
5+
order: 7
6+
---
7+
8+
<iframe
9+
src="https://stackblitz.com/github/TrigenSoftware/masonry-grid/tree/main/examples/svelte-regular?embed=1&file=App.svelte&view=preview"
10+
style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
11+
title="Masonry Grid - Svelte Regular Example"
12+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
13+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
14+
></iframe>

‎website/src/content/docs/examples/svelte-unordered-list.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
---
2+
title: Svelte Unordered List
3+
description: Example of using BalancedMasonryGrid component with `as` prop from @masonry-grid/svelte
4+
sidebar:
5+
order: 9
6+
---
7+
8+
<iframe
9+
src="https://stackblitz.com/github/TrigenSoftware/masonry-grid/tree/main/examples/svelte-unordered-list?embed=1&file=App.svelte&view=preview"
10+
style="width: 100%; height: 500px; border: 0; border-radius: 4px; overflow: hidden;"
11+
title="Masonry Grid - Svelte Unordered List Example"
12+
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
13+
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
14+
></iframe>

‎website/src/content/docs/getting-started/index.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -156,4 +156,59 @@ Masonry Grid is a fast, lightweight, and responsive masonry grid layout library.
156156
</Steps>
157157

158158
</TabItem>
159+
<TabItem label='Svelte' icon='seti:svelte'>
160+
161+
<Steps>
162+
163+
1. Install package by running the following command in your terminal:
164+
165+
<Tabs syncKey='pkg'>
166+
<TabItem label='pnpm' icon='pnpm'>
167+
<Code frame='none' lang='bash' code='pnpm add @masonry-grid/svelte' />
168+
</TabItem>
169+
<TabItem label='Yarn' icon='seti:yarn'>
170+
<Code frame='none' lang='sh' code='yarn add @masonry-grid/svelte' />
171+
</TabItem>
172+
<TabItem label='npm' icon='seti:npm'>
173+
<Code frame='none' lang='sh' code='npm install @masonry-grid/svelte' />
174+
</TabItem>
175+
</Tabs>
176+
177+
2. Now you can import the components and start using them in your Svelte project:
178+
179+
```svelte
180+
<script>
181+
import { BalancedMasonryGrid, Frame } from '@masonry-grid/svelte'
182+
</script>
183+
184+
<BalancedMasonryGrid
185+
frameWidth={200}
186+
gap={10}
187+
>
188+
<Frame width={4} height={3}>
189+
<img src='https://picsum.photos/400/300' alt='Photo 1' />
190+
</Frame>
191+
<Frame width={1} height={1}>
192+
<img src='https://picsum.photos/200/200' alt='Photo 2' />
193+
</Frame>
194+
<Frame width={3} height={4}>
195+
<img src='https://picsum.photos/300/400' alt='Photo 3' />
196+
</Frame>
197+
<Frame width={3} height={4}>
198+
<img src='https://picsum.photos/300/400' alt='Photo 4' />
199+
</Frame>
200+
<Frame width={1} height={1}>
201+
<img src='https://picsum.photos/200/200' alt='Photo 5' />
202+
</Frame>
203+
<Frame width={4} height={3}>
204+
<img src='https://picsum.photos/400/300' alt='Photo 6' />
205+
</Frame>
206+
</BalancedMasonryGrid>
207+
```
208+
209+
3. Run your Svelte application and see the masonry grid in action!
210+
211+
</Steps>
212+
213+
</TabItem>
159214
</Tabs>

‎website/src/content/docs/index.mdx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { Card, CardGrid } from '@astrojs/starlight/components'
3737
<Card title='TypeScript' icon='seti:tsconfig'>
3838
TypeScript-first with type definitions included.
3939
</Card>
40-
<Card title='Framework Support' icon='seti:react'>
41-
First-class support for React.
40+
<Card title='Frameworks Support' icon='seti:react'>
41+
First-class support for React and Svelte.
4242
</Card>
4343
</CardGrid>

0 commit comments

Comments
 (0)