Skip to content

Commit 55180c3

Browse files
onmaxonmax
committed
feat: enhance card components with title, description, and label props for improved content display
1 parent 813bbb5 commit 55180c3

File tree

6 files changed

+198
-158
lines changed

6 files changed

+198
-158
lines changed

‎docs/vitepress-theme/components/card.md‎

Lines changed: 54 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -4,75 +4,89 @@ A simple card that can turn any boring content into something that looks intenti
44

55
## Props
66

7-
| Name | Type | Default | Description |
8-
| ---------- | -------- | ----------- | ---------------------------------------------------- |
9-
| `href` | `string` | `undefined` | Where your card wants to teleport users to |
10-
| `bg-color` | `string` | `undefined` | The mood lighting for your card |
11-
| `icon` | `string` | `undefined` | The tiny picture that makes your card feel important |
12-
| slot | `string` | `undefined` | The magic portal where your content lives |
7+
| Name | Type | Default | Description |
8+
| ------------- | -------- | ----------- | ---------------------------------------------------- |
9+
| `href` | `string` | `undefined` | Where your card wants to teleport users to |
10+
| `bg-color` | `string` | `undefined` | The mood lighting for your card |
11+
| `icon` | `string` | `undefined` | The tiny picture that makes your card feel important |
12+
| `title` | `string` | `undefined` | The card's title |
13+
| `description` | `string` | `undefined` | The card's description |
14+
| `label` | `string` | `undefined` | Optional label displayed above the title |
15+
16+
The component also supports using slots for custom content instead of props.
1317

1418
> [!TIP]
1519
> Remember to [register `NqCard`](/vitepress-theme/#register-the-components) in your app. It's like introducing your components to a party - they need to be on the guest list!
1620
1721
## Examples
1822

19-
<ComponentPreview lang="Vue">
20-
21-
<NqCard>
23+
<ComponentPreview lang="vue">
2224

23-
#### The Lonely Card
24-
25-
I'm just sitting here, carrying some content. No fancy links, no colors - I'm the minimalist of cards.
26-
27-
</NqCard>
25+
<NqCard
26+
title="The Lonely Card"
27+
description="I'm just sitting here, carrying some content. No fancy links, no colors - I'm the minimalist of cards."
28+
/>
2829

2930
</ComponentPreview>
3031

31-
<ComponentPreview lang="Vue">
32-
33-
<NqCard href="https://nimiq.com">
34-
35-
#### The Adventurous Card
36-
37-
Click me! I'll take you on a journey to the Nimiq website. I promise it's better than your average cat video.
32+
<ComponentPreview lang="vue">
3833

39-
</NqCard>
34+
<NqCard
35+
href="https://nimiq.com"
36+
title="The Adventurous Card"
37+
description="Click me! I'll take you on a journey to the Nimiq website. I promise it's better than your average cat video."
38+
/>
4039

4140
</ComponentPreview>
4241

43-
<ComponentPreview lang="Vue">
42+
<ComponentPreview lang="vue">
4443

45-
<NqCard bg-color="blue" href="#" icon="i-nimiq:icons-lg-browsermesh">
44+
<NqCard
45+
bg-color="blue"
46+
href="#"
47+
icon="i-nimiq:icons-lg-browsermesh"
48+
label="Build Something Amazing"
49+
title="The 5-Minute Challenge"
50+
description="Create a Nimiq app faster than making instant noodles (and it'll be more satisfying too!)"
51+
/>
4652

47-
#### Build Something Amazing {.nq-label}
53+
</ComponentPreview>
4854

49-
##### The 5-Minute Challenge
55+
<ComponentPreview lang="vue">
5056

51-
Create a Nimiq app faster than making instant noodles (and it'll be more satisfying too!)
52-
53-
</NqCard>
57+
<NqCard
58+
bg-color="green"
59+
href="#"
60+
icon="i-nimiq:icons-lg-cubes"
61+
label="Learn The Magic"
62+
title="Nimiq Under The Hood"
63+
description="Discover how Nimiq works - it's like LEGO for grownups, but with blockchain!"
64+
/>
5465

5566
</ComponentPreview>
5667

57-
<ComponentPreview lang="Vue">
58-
59-
<NqCard bg-color="green" href="#" icon="i-nimiq:icons-lg-cubes">
68+
<ComponentPreview lang="vue">
6069

61-
#### Learn The Magic {.nq-label}
70+
<NqCard
71+
bg-color="orange"
72+
description="Remember to backup your wallet! Because losing crypto is like dropping your ice cream cone - sad and completely avoidable."
73+
/>
6274

63-
##### Nimiq Under The Hood
75+
</ComponentPreview>
6476

65-
Discover how Nimiq works - it's like LEGO for grownups, but with blockchain!
77+
## With Markdown Content
6678

67-
</NqCard>
79+
<ComponentPreview lang="vue">
6880

69-
</ComponentPreview>
81+
<NqCard>
7082

71-
<ComponentPreview lang="Vue">
83+
### The Markdown Card
7284

73-
<NqCard bg-color="orange">
85+
I'm a card with markdown content. I can be used to display formatted text, lists, and even images!
7486

75-
Remember to backup your wallet! Because losing crypto is like dropping your ice cream cone - sad and completely avoidable.
87+
- Item 1
88+
- Item 2
89+
- Item 3
7690

7791
</NqCard>
7892

‎docs/vitepress-theme/components/grid.md‎

Lines changed: 96 additions & 91 deletions
Original file line numberDiff line numberDiff line change
@@ -2,38 +2,60 @@
22

33
Think of grids as the Marie Kondo of UI components - they help keep your cards organized and spark joy in your layouts!
44

5-
> [!TIP]
6-
> Remember to [register `NqGrid`](/vitepress-theme/#register-the-components) in your app.
7-
8-
## Basic grid
5+
## Props
6+
7+
| Name | Type | Default | Description |
8+
| ------- | -------- | ----------- | ------------------------------------- |
9+
| `cards` | `Card[]` | `undefined` | Array of card objects to render |
10+
11+
The component also supports using slots for custom content instead of props.
12+
13+
## Basic grid with frontmatter
14+
15+
You can define your grid cards directly in the frontmatter of your markdown file:
16+
17+
```yaml
18+
---
19+
cards:
20+
- bgColor: blue
21+
icon: i-nimiq:fire
22+
title: Build with Nimiq
23+
description: Create powerful blockchain applications with our easy-to-use tools
24+
label: Development
25+
- bgColor: green
26+
icon: i-nimiq:tools
27+
title: Developer Tools
28+
description: Everything you need to build and deploy Nimiq applications
29+
label: Resources
30+
- title: Community Support
31+
description: Join our vibrant community of developers and enthusiasts
32+
- title: Documentation
33+
description: Comprehensive guides and API references at your fingertips
34+
- title: Get Started
35+
description: Take your first steps into blockchain development with Nimiq
36+
---
37+
38+
<NqGrid :cards="frontmatter.cards" />
39+
```
940

1041
<ComponentPreview>
1142

1243
<NqGrid>
1344

14-
<NqCard>
15-
16-
#### The Three Musketeers: Part 1
17-
18-
All for one and one for all! I'm just the first musketeer in this grid adventure.
19-
20-
</NqCard>
21-
22-
<NqCard>
23-
24-
#### The Three Musketeers: Part 2
45+
<NqCard
46+
title="The First Card"
47+
description="I'm just the first in a series of amazing cards."
48+
/>
2549

26-
Second musketeer reporting for duty! I keep the middle space warm and cozy.
50+
<NqCard
51+
title="The Second Card"
52+
description="Right in the middle, keeping things balanced."
53+
/>
2754

28-
</NqCard>
29-
30-
<NqCard>
31-
32-
#### The Three Musketeers: Part 3
33-
34-
And I complete the trio! Together we make this grid look awesome.
35-
36-
</NqCard>
55+
<NqCard
56+
title="The Third Card"
57+
description="Last but not least, completing the trilogy."
58+
/>
3759

3860
</NqGrid>
3961

@@ -45,49 +67,38 @@ And I complete the trio! Together we make this grid look awesome.
4567

4668
<NqGrid>
4769

48-
<NqCard bg-color="blue" href="#" icon="i-nimiq:icons-lg-browsermesh">
49-
50-
#### Build Something Cool {.nq-label}
51-
52-
##### Your Journey Starts Here
53-
54-
Like building with LEGO, but for grown-ups who code!
55-
56-
</NqCard>
57-
58-
<NqCard bg-color="green" href="#" icon="i-nimiq:icons-lg-cubes">
59-
60-
#### Learn The Ropes {.nq-label}
61-
62-
##### Beyond "Hello World"
63-
64-
Because understanding Nimiq is easier than explaining why you need another mechanical keyboard.
65-
66-
</NqCard>
67-
68-
<NqCard>
69-
70-
#### The Support Squad
71-
72-
We're like your coding best friends, minus the coffee borrowing.
73-
74-
</NqCard>
75-
76-
<NqCard>
77-
78-
#### The Innovation Corner
79-
80-
Where ideas come to party and bugs come to retire.
81-
82-
</NqCard>
83-
84-
<NqCard>
85-
86-
#### The Fun Zone
87-
88-
Because who said documentation had to be boring?
89-
90-
</NqCard>
70+
<NqCard
71+
bg-color="blue"
72+
href="#"
73+
icon="i-nimiq:icons-lg-browsermesh"
74+
label="Build Something Cool"
75+
title="Your Journey Starts Here"
76+
description="Like building with LEGO, but for grown-ups who code!"
77+
/>
78+
79+
<NqCard
80+
bg-color="green"
81+
href="#"
82+
icon="i-nimiq:icons-lg-cubes"
83+
label="Learn The Ropes"
84+
title="Beyond Hello World"
85+
description="Because understanding Nimiq is easier than explaining why you need another mechanical keyboard."
86+
/>
87+
88+
<NqCard
89+
title="The Support Squad"
90+
description="We're like your coding best friends, minus the coffee borrowing."
91+
/>
92+
93+
<NqCard
94+
title="The Innovation Corner"
95+
description="Where ideas come to party and bugs come to retire."
96+
/>
97+
98+
<NqCard
99+
title="The Fun Zone"
100+
description="Because who said documentation had to be boring?"
101+
/>
91102

92103
</NqGrid>
93104

@@ -99,29 +110,23 @@ Because who said documentation had to be boring?
99110

100111
<NqGrid>
101112

102-
<NqLargeCard icon="i-nimiq:tools">
103-
104-
#### The Wise Elder
105-
106-
I'm the big card that's seen it all. Think of me as the senior developer of cards.
107-
108-
</NqLargeCard>
109-
110-
<NqLargeCard icon="i-nimiq:tools">
111-
112-
#### The Middle Manager
113-
114-
I keep things balanced, like a good project manager (but more reliable).
115-
116-
</NqLargeCard>
117-
118-
<NqLargeCard icon="i-nimiq:tools">
119-
120-
#### The Team Player
121-
122-
I complete the trio with style. Three's company, four's a grid overflow!
123-
124-
</NqLargeCard>
113+
<NqLargeCard
114+
icon="i-nimiq:tools"
115+
title="The Wise Elder"
116+
description="I'm the big card that's seen it all. Think of me as the senior developer of cards."
117+
/>
118+
119+
<NqLargeCard
120+
icon="i-nimiq:tools"
121+
title="The Middle Manager"
122+
description="I keep things balanced, like a good project manager (but more reliable)."
123+
/>
124+
125+
<NqLargeCard
126+
icon="i-nimiq:tools"
127+
title="The Team Player"
128+
description="I complete the trio with style. Three's company, four's a grid overflow!"
129+
/>
125130

126131
</NqGrid>
127132

‎docs/vitepress-theme/components/large-card.md‎

Lines changed: 20 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,33 +4,35 @@ A variant of the card component that is larger and more prominent.
44

55
## Props
66

7-
| Name | Type | Default | Description |
8-
| ------ | -------- | ----------- | ----------------------------------------------- |
9-
| `href` | `string` | `undefined` | The destination of your card's journey |
10-
| `icon` | `string` | `undefined` | The fancy hat your card wears |
11-
| slot | `string` | `undefined` | Where the magic happens - put your content here |
7+
| Name | Type | Default | Description |
8+
| ------------- | -------- | ----------- | ----------------------------------------------- |
9+
| `href` | `string` | `undefined` | The destination of your card's journey |
10+
| `icon` | `string` | `undefined` | The fancy hat your card wears |
11+
| `title` | `string` | `undefined` | The card's title |
12+
| `description` | `string` | `undefined` | The card's description |
1213

13-
<ComponentPreview>
14-
15-
<NqLargeCard icon="i-nimiq:tools">
14+
The component also supports using slots for custom content instead of props.
1615

17-
## The Gentle Giant
16+
## Examples
1817

19-
I may be big, but I'm friendly! Perfect for showcasing important content that needs some breathing room.
18+
<ComponentPreview>
2019

21-
</NqLargeCard>
20+
<NqLargeCard
21+
icon="i-nimiq:tools"
22+
title="The Gentle Giant"
23+
description="I may be big, but I'm friendly! Perfect for showcasing important content that needs some breathing room."
24+
/>
2225

2326
</ComponentPreview>
2427

2528
<ComponentPreview>
2629

27-
<NqLargeCard icon="i-nimiq:tools" href="#">
28-
29-
## The Social Butterfly
30-
31-
I'm big AND I can take you places! Click me, I don't bite.
32-
33-
</NqLargeCard>
30+
<NqLargeCard
31+
icon="i-nimiq:tools"
32+
href="#"
33+
title="The Social Butterfly"
34+
description="I'm big AND I can take you places! Click me, I don't bite."
35+
/>
3436

3537
</ComponentPreview>
3638

0 commit comments

Comments
 (0)