Skip to content

Commit 48da6d8

Browse files
mgcreamgcrea
committed
docs: add custom Card and CardGrid components with emoji support
Create custom Astro components to replace Starlight's default cards, enabling emoji icons and configurable grid layouts. Cards feature a modern glass-morphism design with semi-transparent backgrounds and improved readability in both light and dark modes. Features: - Emoji icon support in Card component - Configurable columns and gap spacing in CardGrid - Responsive grid layout (3 -> 2 -> 1 columns) - Semi-transparent backgrounds for modern aesthetic - Smooth hover effects with accent color - Optimized text contrast for readability
1 parent 15828ee commit 48da6d8

File tree

3 files changed

+136
-19
lines changed

3 files changed

+136
-19
lines changed

‎docs/src/components/Card.astro‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
---
2+
export interface Props {
3+
title: string;
4+
icon?: string;
5+
}
6+
7+
const { title, icon } = Astro.props;
8+
---
9+
10+
<div class="card">
11+
<div class="card-header">
12+
{icon && <span class="card-icon">{icon}</span>}
13+
<h3 class="card-title">{title}</h3>
14+
</div>
15+
<div class="card-content">
16+
<slot />
17+
</div>
18+
</div>
19+
20+
<style>
21+
.card {
22+
background: rgba(255, 255, 255, 0.05);
23+
border: 1px solid rgba(255, 255, 255, 0.15);
24+
border-radius: 0.75rem;
25+
padding: 1.5rem;
26+
height: 100%;
27+
transition: all 0.2s ease;
28+
}
29+
30+
.card:hover {
31+
border-color: var(--sl-color-accent);
32+
background: rgba(255, 255, 255, 0.08);
33+
}
34+
35+
.card-header {
36+
display: flex;
37+
align-items: center;
38+
gap: 0.75rem;
39+
margin-bottom: 0.75rem;
40+
}
41+
42+
.card-icon {
43+
font-size: 1.75rem;
44+
line-height: 1;
45+
flex-shrink: 0;
46+
}
47+
48+
.card-title {
49+
margin: 0;
50+
font-size: 1.125rem;
51+
font-weight: 600;
52+
color: #ffffff;
53+
}
54+
55+
.card-content {
56+
color: rgba(255, 255, 255, 0.75);
57+
line-height: 1.6;
58+
font-size: 0.9375rem;
59+
}
60+
61+
.card-content :global(p) {
62+
margin: 0;
63+
}
64+
65+
/* Light mode adjustments */
66+
:root[data-theme="light"] .card {
67+
background: rgba(0, 0, 0, 0.03);
68+
border-color: rgba(0, 0, 0, 0.15);
69+
}
70+
71+
:root[data-theme="light"] .card:hover {
72+
background: rgba(0, 0, 0, 0.05);
73+
}
74+
75+
:root[data-theme="light"] .card-title {
76+
color: #000000;
77+
}
78+
79+
:root[data-theme="light"] .card-content {
80+
color: rgba(0, 0, 0, 0.7);
81+
}
82+
</style>

‎docs/src/components/CardGrid.astro‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
---
2+
export interface Props {
3+
cols?: number;
4+
gap?: number;
5+
}
6+
7+
const { cols = 3, gap = 4 } = Astro.props;
8+
---
9+
10+
<div class="card-grid not-content" style={`--cols: ${cols}; --gap: ${gap};`}>
11+
<slot />
12+
</div>
13+
14+
<style>
15+
.card-grid {
16+
display: grid;
17+
grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
18+
gap: calc(var(--gap, 4) * 0.25rem);
19+
margin: 2rem 0;
20+
}
21+
22+
/* Responsive breakpoints */
23+
@media (max-width: 72rem) {
24+
.card-grid {
25+
grid-template-columns: repeat(2, minmax(0, 1fr));
26+
}
27+
}
28+
29+
@media (max-width: 50rem) {
30+
.card-grid {
31+
grid-template-columns: 1fr;
32+
}
33+
}
34+
</style>

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

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -16,57 +16,58 @@ hero:
1616
icon: external
1717
---
1818

19-
import { Card, CardGrid } from "@astrojs/starlight/components";
19+
import Card from "../../components/Card.astro";
20+
import CardGrid from "../../components/CardGrid.astro";
2021

2122
## Features
2223

23-
<CardGrid cols="3" gap="6">
24-
<Card title="Zero Runtime Overhead" icon="rocket">
24+
<CardGrid cols={3} gap={6}>
25+
<Card title="Zero Runtime Overhead" icon="⚡">
2526
All transformations happen at compile time
2627
</Card>
27-
<Card title="No Dependencies" icon="setting">
28+
<Card title="No Dependencies" icon="🔧">
2829
Direct-to-React-Native style generation without tailwindcss package
2930
</Card>
30-
<Card title="Babel-only Setup" icon="puzzle">
31+
<Card title="Babel-only Setup" icon="🎯">
3132
No Metro configuration required
3233
</Card>
33-
<Card title="TypeScript-first" icon="typescript">
34+
<Card title="TypeScript-first" icon="📝">
3435
Full type safety and autocomplete support
3536
</Card>
36-
<Card title="Optimized Performance" icon="rocket">
37+
<Card title="Optimized Performance" icon="🚀">
3738
Compiles down to StyleSheet.create for optimal performance
3839
</Card>
39-
<Card title="Small Bundle Size" icon="seti:zip">
40+
<Card title="Small Bundle Size" icon="📦">
4041
Only includes actual styles used in your app
4142
</Card>
42-
<Card title="Custom Colors" icon="seti:paint">
43+
<Card title="Custom Colors" icon="🎨">
4344
Extend the default palette via tailwind.config.*
4445
</Card>
45-
<Card title="Arbitrary Values" icon="pencil">
46+
<Card title="Arbitrary Values" icon="📐">
4647
Use custom sizes and borders: w-[123px], rounded-[20px]
4748
</Card>
48-
<Card title="Dynamic className" icon="random">
49+
<Card title="Dynamic className" icon="🔀">
4950
Conditional styles with hybrid compile-time optimization
5051
</Card>
51-
<Card title="Runtime Option" icon="forward-slash">
52+
<Card title="Runtime Option" icon="🏃">
5253
Optional tw template tag for fully dynamic styling (~25KB)
5354
</Card>
54-
<Card title="State Modifiers" icon="approve-check">
55+
<Card title="State Modifiers" icon="🎯">
5556
active:, hover:, focus:, and disabled: modifiers for interactive components
5657
</Card>
57-
<Card title="Platform Modifiers" icon="laptop">
58+
<Card title="Platform Modifiers" icon="📱">
5859
ios:, android:, and web: modifiers for platform-specific styling
5960
</Card>
60-
<Card title="Color Scheme Modifiers" icon="moon">
61+
<Card title="Color Scheme Modifiers" icon="🌓">
6162
dark: and light: modifiers for automatic theme adaptation
6263
</Card>
63-
<Card title="Scheme Modifier" icon="seti:config">
64+
<Card title="Scheme Modifier" icon="🎨">
6465
scheme: convenience modifier that expands to both dark: and light: variants
6566
</Card>
66-
<Card title="Special Style Props" icon="list-format">
67+
<Card title="Special Style Props" icon="📜">
6768
Support for contentContainerClassName, columnWrapperClassName, and more
6869
</Card>
69-
<Card title="Custom Attributes" icon="setting">
70+
<Card title="Custom Attributes" icon="🎛️">
7071
Configure which props to transform with exact matching or glob patterns
7172
</Card>
7273
</CardGrid>
@@ -114,7 +115,7 @@ const _twStyles = StyleSheet.create({
114115

115116
## Ready to get started?
116117

117-
<Card title="Installation Guide" icon="rocket">
118+
<Card title="Installation Guide" icon="🚀">
118119
Follow our [installation guide](./getting-started/installation/) to set up React Native Tailwind in your
119120
project.
120121
</Card>

0 commit comments

Comments
 (0)