Skip to content

Commit 2a607fa

Browse files
guntagunta
committed
New ideas
1 parent 40fb76b commit 2a607fa

File tree

17 files changed

+835
-327
lines changed

17 files changed

+835
-327
lines changed

‎apps/docs/astro.config.mjs‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,25 @@
11
// @ts-check
22
import { defineConfig } from "astro/config";
33
import starlight from "@astrojs/starlight";
4+
import tailwind from "@astrojs/tailwind";
5+
import react from "@astrojs/react";
46

57
// https://astro.build/config
68
export default defineConfig({
79
site: 'https://code-agents.github.io',
810
base: '/convex-ideas',
911
integrations: [
12+
react(),
13+
tailwind({
14+
applyBaseStyles: false,
15+
}),
1016
starlight({
1117
customCss: ['./src/styles/custom.css'],
18+
logo: {
19+
src: './src/assets/lightbulb.svg',
20+
replacesTitle: false,
21+
},
22+
favicon: '/favicon.svg',
1223
components: {
1324
Footer: './src/components/CustomFooter.astro',
1425
},

‎apps/docs/components.json‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "default",
4+
"rsc": false,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "tailwind.config.mjs",
8+
"css": "src/styles/custom.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "src/components",
15+
"utils": "src/lib/utils",
16+
"ui": "src/components/ui"
17+
}
18+
}

‎apps/docs/package.json‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,21 @@
1010
"astro": "astro"
1111
},
1212
"dependencies": {
13+
"@astrojs/react": "^4.3.0",
1314
"@astrojs/starlight": "^0.35.2",
15+
"@astrojs/tailwind": "^6.0.2",
16+
"@tailwindcss/postcss": "^4.1.12",
1417
"astro": "^5.6.1",
18+
"class-variance-authority": "^0.7.1",
19+
"clsx": "^2.1.1",
1520
"iconify-icon": "^3.0.0",
16-
"sharp": "^0.34.2"
21+
"lucide-react": "^0.542.0",
22+
"next-themes": "^0.4.6",
23+
"react": "^19.1.1",
24+
"react-dom": "^19.1.1",
25+
"sharp": "^0.34.2",
26+
"shiki": "^3.12.2",
27+
"tailwind-merge": "^3.3.1",
28+
"tailwindcss": "^3.4.0"
1729
}
1830
}

‎apps/docs/postcss.config.mjs‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import tailwindcss from 'tailwindcss';
2+
3+
export default {
4+
plugins: [tailwindcss()],
5+
};

‎apps/docs/public/favicon.svg‎

Lines changed: 7 additions & 1 deletion
Loading

‎apps/docs/src/assets/lightbulb.svg‎

Lines changed: 5 additions & 0 deletions
Loading

‎apps/docs/src/components/ActionButton.astro‎

Lines changed: 30 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,42 @@
11
---
2+
import { cn } from "../lib/utils";
3+
24
export interface Props {
35
href: string;
4-
variant?: 'primary' | 'secondary' | 'outline';
6+
variant?: 'default' | 'secondary' | 'outline' | 'ghost';
7+
size?: 'default' | 'sm' | 'lg';
58
icon?: string;
69
target?: '_blank' | '_self';
710
class?: string;
811
}
912
10-
const { href, variant = 'primary', icon, target = '_self', class: className } = Astro.props;
13+
const { href, variant = 'default', size = 'default', icon, target = '_self', class: className } = Astro.props;
14+
15+
const variantClasses = {
16+
default: "bg-primary text-primary-foreground hover:bg-primary/90",
17+
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
18+
outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
19+
ghost: "hover:bg-accent hover:text-accent-foreground",
20+
};
21+
22+
const sizeClasses = {
23+
default: "h-10 px-4 py-2",
24+
sm: "h-9 rounded-md px-3 text-sm",
25+
lg: "h-11 rounded-md px-8 text-lg",
26+
};
1127
---
1228

13-
<a href={href} target={target} class={`action-button ${variant} ${className || ''}`}>
29+
<a
30+
href={href}
31+
target={target}
32+
class={cn(
33+
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
34+
variantClasses[variant],
35+
sizeClasses[size],
36+
className
37+
)}
38+
>
1439
{icon && <iconify-icon icon={icon} width="20" height="20"></iconify-icon>}
1540
<slot />
16-
{target === '_blank' && <iconify-icon icon="lucide:external-link" width="16" height="16" class="external-icon"></iconify-icon>}
17-
</a>
18-
19-
<style>
20-
.action-button {
21-
display: inline-flex;
22-
align-items: center;
23-
gap: 0.5rem;
24-
padding: 0.75rem 1.5rem;
25-
border-radius: 0.75rem;
26-
font-weight: 600;
27-
text-decoration: none;
28-
transition: all 0.3s ease;
29-
position: relative;
30-
overflow: hidden;
31-
border: 2px solid transparent;
32-
}
33-
34-
.action-button::before {
35-
content: '';
36-
position: absolute;
37-
top: 0;
38-
left: -100%;
39-
width: 100%;
40-
height: 100%;
41-
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
42-
transition: left 0.5s ease;
43-
}
44-
45-
.action-button:hover::before {
46-
left: 100%;
47-
}
48-
49-
.primary {
50-
background: var(--sl-color-accent);
51-
color: white;
52-
}
53-
54-
.primary:hover {
55-
background: var(--sl-color-accent-high);
56-
transform: translateY(-2px);
57-
box-shadow: 0 10px 20px var(--sl-color-accent-low);
58-
}
59-
60-
.secondary {
61-
background: var(--sl-color-gray-5);
62-
color: var(--sl-color-text);
63-
}
64-
65-
.secondary:hover {
66-
background: var(--sl-color-gray-4);
67-
transform: translateY(-2px);
68-
}
69-
70-
.outline {
71-
background: transparent;
72-
color: var(--sl-color-accent);
73-
border-color: var(--sl-color-accent);
74-
}
75-
76-
.outline:hover {
77-
background: var(--sl-color-accent);
78-
color: white;
79-
transform: translateY(-2px);
80-
}
81-
82-
.external-icon {
83-
opacity: 0.7;
84-
}
85-
86-
@media (max-width: 768px) {
87-
.action-button {
88-
padding: 0.625rem 1.25rem;
89-
font-size: 0.875rem;
90-
}
91-
}
92-
</style>
41+
{target === '_blank' && <iconify-icon icon="lucide:external-link" width="16" height="16" class="ml-1 opacity-70"></iconify-icon>}
42+
</a>

‎apps/docs/src/components/FeatureCard.astro‎

Lines changed: 13 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
---
2+
import { cn } from "../lib/utils";
3+
24
export interface Props {
35
icon: string;
46
title: string;
@@ -10,115 +12,19 @@ export interface Props {
1012
const { icon, title, subtitle, highlight = false, class: className } = Astro.props;
1113
---
1214

13-
<div class={`feature-card ${highlight ? 'highlight' : ''} ${className || ''}`}>
14-
<div class="card-icon">
15+
<div class={cn(
16+
"rounded-lg border bg-card text-card-foreground shadow-sm p-6 h-full flex flex-col transition-all duration-300 hover:shadow-lg hover:-translate-y-1",
17+
highlight && "border-primary bg-gradient-to-br from-primary/5 to-background",
18+
className
19+
)}>
20+
<div class="flex h-16 w-16 items-center justify-center rounded-lg bg-primary text-primary-foreground mb-6 flex-shrink-0">
1521
<iconify-icon icon={icon} width="32" height="32"></iconify-icon>
1622
</div>
17-
<div class="card-content">
18-
<h3 class="card-title">{title}</h3>
19-
{subtitle && <p class="card-subtitle">{subtitle}</p>}
20-
<div class="card-description">
23+
<div class="flex-1 flex flex-col">
24+
<h3 class="text-xl font-semibold leading-none tracking-tight mb-2">{title}</h3>
25+
{subtitle && <p class="text-sm text-primary font-medium uppercase tracking-wide mb-4">{subtitle}</p>}
26+
<div class="flex-1 text-muted-foreground leading-relaxed">
2127
<slot />
2228
</div>
2329
</div>
24-
</div>
25-
26-
<style>
27-
.feature-card {
28-
background: var(--sl-color-gray-6);
29-
border: 2px solid var(--sl-color-gray-5);
30-
border-radius: 1rem;
31-
padding: 2rem;
32-
transition: all 0.3s ease;
33-
height: 100%;
34-
display: flex;
35-
flex-direction: column;
36-
position: relative;
37-
overflow: hidden;
38-
}
39-
40-
.feature-card::before {
41-
content: '';
42-
position: absolute;
43-
top: 0;
44-
left: 0;
45-
right: 0;
46-
height: 4px;
47-
background: var(--sl-color-accent);
48-
opacity: 0;
49-
transition: opacity 0.3s ease;
50-
}
51-
52-
.feature-card:hover {
53-
border-color: var(--sl-color-accent);
54-
transform: translateY(-4px);
55-
box-shadow: 0 20px 40px var(--sl-color-accent-low);
56-
}
57-
58-
.feature-card:hover::before {
59-
opacity: 1;
60-
}
61-
62-
.feature-card.highlight {
63-
border-color: var(--sl-color-accent);
64-
background: linear-gradient(135deg, var(--sl-color-accent-low), var(--sl-color-gray-6));
65-
}
66-
67-
.feature-card.highlight::before {
68-
opacity: 1;
69-
}
70-
71-
.card-icon {
72-
display: flex;
73-
align-items: center;
74-
justify-content: center;
75-
width: 64px;
76-
height: 64px;
77-
background: var(--sl-color-accent);
78-
border-radius: 1rem;
79-
color: white;
80-
margin-bottom: 1.5rem;
81-
flex-shrink: 0;
82-
}
83-
84-
.card-content {
85-
flex: 1;
86-
display: flex;
87-
flex-direction: column;
88-
}
89-
90-
.card-title {
91-
font-size: 1.25rem;
92-
font-weight: 600;
93-
margin: 0 0 0.5rem 0;
94-
color: var(--sl-color-text);
95-
}
96-
97-
.card-subtitle {
98-
font-size: 0.875rem;
99-
color: var(--sl-color-accent);
100-
font-weight: 500;
101-
margin: 0 0 1rem 0;
102-
text-transform: uppercase;
103-
letter-spacing: 0.05em;
104-
}
105-
106-
.card-description {
107-
flex: 1;
108-
color: var(--sl-color-gray-2);
109-
line-height: 1.6;
110-
}
111-
112-
.card-description :global(ul) {
113-
margin: 0;
114-
padding-left: 1.5rem;
115-
}
116-
117-
.card-description :global(li) {
118-
margin-bottom: 0.5rem;
119-
}
120-
121-
.card-description :global(strong) {
122-
color: var(--sl-color-text);
123-
}
124-
</style>
30+
</div>

0 commit comments

Comments
 (0)