Skip to content

Commit 7274348

Browse files
afuchereca-agent
afucher
and
eca-agent
authored
[Phase 1] Create custom landing page (#106)
* [Phase 1] Create custom landing page Implement comprehensive landing page for AstroChart with all required sections: Hero Section: - Tagline: "A free and open-source JavaScript library for generating SVG astrology charts" - npm install snippet - "Get Started" CTA → /installation - "View on GitHub" link Version Badge: - Dynamically reads version from package.json at build time - Displays as "v3.0.2" - Links to /changelog Live Demo Section: - Side-by-side radix and transit chart demos using ChartDemo component - Collapsible code example showing usage - Interactive charts powered by pure SVG Feature Cards: - Pure SVG: crisp, scalable vector graphics - Zero Dependencies: pure vanilla JavaScript - Fully Customizable: control all visual settings - TypeScript-first: full type definitions included Sponsorship Section: - Ko-fi button with coffee emoji - GitHub Sponsors button with heart emoji - Gradient background styling Mobile Responsive: - Works on 320px–1920px viewports - Grid layouts adjust to single column on mobile - Sponsor buttons stack vertically on narrow screens Build verified: 25 pages built successfully with no errors Closes #95 🤖 Generated with [eca](https://eca.dev) Co-Authored-By: eca <git@eca.dev> * fix sponsor link --------- Co-authored-by: eca <git@eca.dev>
1 parent 2bd70cf commit 7274348

1 file changed

Lines changed: 271 additions & 34 deletions

File tree

‎website/src/pages/index.astro‎

Lines changed: 271 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,25 @@
33
// Uses StarlightPage with splash template to keep the header/footer from Starlight
44
55
import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
6+
import ChartDemo from '../components/ChartDemo.astro'
7+
import { readFileSync } from 'node:fs'
8+
import { resolve } from 'node:path'
9+
10+
// Read version from package.json at build time
11+
const packageJsonPath = resolve(process.cwd(), '../package.json')
12+
const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
13+
const version = packageJson.version
614
---
715

816
<StarlightPage frontmatter={{
917
title: 'AstroChart',
10-
description: 'Pure SVG astrology charts for the web',
18+
description: 'A free and open-source JavaScript library for generating SVG astrology charts',
1119
template: 'splash',
1220
hero: {
13-
tagline: 'A lightweight, zero-dependency library for rendering interactive SVG astrology charts directly in web browsers.',
21+
tagline: 'A free and open-source JavaScript library for generating SVG astrology charts',
1422
actions: [
15-
{ text: 'Get Started', link: '/introduction', icon: 'right-arrow', variant: 'primary' },
16-
{ text: 'View on GitHub', link: 'https://github.com/AstroDraw/AstroChart', icon: 'github', variant: 'secondary' }
23+
{ text: 'Get Started', link: '/installation', icon: 'right-arrow', variant: 'primary' },
24+
{ text: 'View on GitHub', link: 'https://github.com/AstroDraw/AstroChart', icon: 'external', variant: 'secondary' }
1725
]
1826
}
1927
}}>
@@ -25,46 +33,92 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
2533
<pre><code>npm install @astrodraw/astrochart</code></pre>
2634
</div>
2735

36+
<!-- Version Badge -->
37+
<div class="version-badge">
38+
<a href="/changelog">v{version}</a>
39+
</div>
40+
41+
<!-- Live Demo Section -->
42+
<section class="demo-section">
43+
<h2>See It In Action</h2>
44+
<p class="demo-intro">Interactive astrology charts powered by pure SVG</p>
45+
46+
<div class="demo-container">
47+
<div class="demo-item">
48+
<h3>Radix Chart</h3>
49+
<ChartDemo id="demo-radix" height={400} mode="radix" showCode={false} />
50+
</div>
51+
52+
<div class="demo-item">
53+
<h3>Transit Chart</h3>
54+
<ChartDemo id="demo-transit" height={400} mode="transit" showCode={false} />
55+
</div>
56+
</div>
57+
58+
<details class="demo-code">
59+
<summary>Show Code Example</summary>
60+
<pre><code>import &#123; Chart &#125; from '@astrodraw/astrochart'
61+
62+
// Create a new chart
63+
const chart = new Chart('chart', 600, 600)
64+
65+
// Render radix (birth) chart
66+
chart.radix(&#123;
67+
planets: &#123;
68+
Sun: [12.45, 0],
69+
Moon: [145.67, 0],
70+
// ... more planets
71+
&#125;,
72+
cusps: [315.45, 35.67, 65.23, /* ... 12 total */]
73+
&#125;)
74+
75+
// Add transit ring
76+
chart.transit(transitData)</code></pre>
77+
</details>
78+
</section>
79+
2880
<!-- Features Section -->
2981
<section class="features">
3082
<h2>Why AstroChart?</h2>
3183
<div class="feature-grid">
3284
<div class="feature-card">
33-
<h3>⚡ Zero Dependencies</h3>
34-
<p>Pure SVG and vanilla JavaScript. No React, Vue, or other frameworks required.</p>
35-
</div>
36-
<div class="feature-card">
37-
<h3>🎨 Fully Customizable</h3>
38-
<p>Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings.</p>
39-
</div>
40-
<div class="feature-card">
41-
<h3>📱 Responsive</h3>
42-
<p>Charts scale perfectly to any container size and work on all modern browsers.</p>
85+
<h3>📊 Pure SVG</h3>
86+
<p>Renders crisp, scalable vector graphics that look perfect at any size. No canvas, no images—just clean SVG code.</p>
4387
</div>
4488
<div class="feature-card">
45-
<h3>🔧 Framework Agnostic</h3>
46-
<p>Use as a standalone library or integrate with React, Vue, Angular, or any other framework.</p>
89+
<h3>⚡ Zero Dependencies</h3>
90+
<p>Pure vanilla JavaScript with no external dependencies. Lightweight, fast, and works anywhere.</p>
4791
</div>
4892
<div class="feature-card">
49-
<h3>📊 Complete API</h3>
50-
<p>Render radix charts, transit rings, aspects, animations, and click events with ease.</p>
93+
<h3>🎨 Fully Customizable</h3>
94+
<p>Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings objects.</p>
5195
</div>
5296
<div class="feature-card">
53-
<h3>✅ TypeScript Support</h3>
54-
<p>Full type definitions included. Write safe, maintainable code with IDE autocompletion.</p>
97+
<h3>✅ TypeScript-first</h3>
98+
<p>Built with TypeScript. Full type definitions included for safe, maintainable code with IDE autocompletion.</p>
5599
</div>
56100
</div>
57101
</section>
58102

103+
<!-- Sponsorship Section -->
104+
<section class="sponsorship">
105+
<h2>Support AstroChart</h2>
106+
<p>AstroChart is free and open-source. If you find it useful, consider supporting its development!</p>
107+
108+
<div class="sponsor-buttons">
109+
<a href="https://ko-fi.com/afucher" target="_blank" rel="noopener noreferrer" class="sponsor-btn kofi">
110+
<span>☕</span> Support on Ko-fi
111+
</a>
112+
<a href="https://github.com/sponsors/afucher" target="_blank" rel="noopener noreferrer" class="sponsor-btn github">
113+
<span>💖</span> GitHub Sponsors
114+
</a>
115+
</div>
116+
</section>
117+
59118
<!-- CTA Footer -->
60119
<section class="cta-footer">
61120
<h2>Ready to get started?</h2>
62-
<p>Check out the <a href="/quickstart">Quick Start guide</a> to render your first chart in minutes.</p>
63-
<p class="version-info">
64-
<strong>Version:</strong> 3.0.2 ·
65-
<a href="/changelog">Changelog</a> ·
66-
<a href="/contributing">Contributing</a>
67-
</p>
121+
<p>Check out the <a href="/installation">Installation guide</a> to add AstroChart to your project, or explore the <a href="/quickstart">Quick Start</a> to render your first chart in minutes.</p>
68122
</section>
69123

70124
</div>
@@ -99,6 +153,109 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
99153
font-family: var(--sl-font-mono, 'Courier New', monospace);
100154
}
101155

156+
/* Version Badge */
157+
.version-badge {
158+
text-align: center;
159+
margin: 1rem auto 3rem;
160+
}
161+
162+
.version-badge a {
163+
display: inline-block;
164+
padding: 0.375rem 0.75rem;
165+
background: var(--sl-color-accent);
166+
color: white;
167+
font-weight: 600;
168+
font-size: 0.875rem;
169+
border-radius: 0.375rem;
170+
text-decoration: none;
171+
transition: opacity 0.2s ease;
172+
}
173+
174+
.version-badge a:hover {
175+
opacity: 0.9;
176+
}
177+
178+
/* Demo Section */
179+
.demo-section {
180+
margin: 4rem 0;
181+
padding: 2rem;
182+
background: var(--sl-color-bg-nav);
183+
border-radius: 1rem;
184+
border: 1px solid var(--sl-color-border);
185+
}
186+
187+
.demo-section h2 {
188+
font-size: 2rem;
189+
text-align: center;
190+
margin: 0 0 0.5rem 0;
191+
color: var(--sl-color-white);
192+
}
193+
194+
.demo-intro {
195+
text-align: center;
196+
color: var(--sl-color-gray-2);
197+
margin: 0 0 2rem 0;
198+
font-size: 1.1rem;
199+
}
200+
201+
.demo-container {
202+
display: grid;
203+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
204+
gap: 2rem;
205+
margin-bottom: 2rem;
206+
}
207+
208+
.demo-item h3 {
209+
text-align: center;
210+
margin: 0 0 1rem 0;
211+
font-size: 1.2rem;
212+
color: var(--sl-color-white);
213+
}
214+
215+
.demo-code {
216+
margin-top: 2rem;
217+
border-top: 1px solid var(--sl-color-border);
218+
padding-top: 1.5rem;
219+
}
220+
221+
.demo-code summary {
222+
cursor: pointer;
223+
font-weight: 600;
224+
color: var(--sl-color-accent);
225+
padding: 0.5rem;
226+
text-align: center;
227+
list-style: none;
228+
}
229+
230+
.demo-code summary::-webkit-details-marker {
231+
display: none;
232+
}
233+
234+
.demo-code summary::before {
235+
content: '▼ ';
236+
display: inline-block;
237+
transition: transform 0.2s;
238+
}
239+
240+
.demo-code[open] summary::before {
241+
transform: rotate(180deg);
242+
}
243+
244+
.demo-code pre {
245+
background: #1e1e1e;
246+
padding: 1.5rem;
247+
border-radius: 0.5rem;
248+
overflow-x: auto;
249+
margin-top: 1rem;
250+
font-size: 0.875rem;
251+
line-height: 1.6;
252+
}
253+
254+
.demo-code code {
255+
color: #d4d4d4;
256+
font-family: var(--sl-font-mono, 'Courier New', monospace);
257+
}
258+
102259
/* Features Section */
103260
.features {
104261
margin: 4rem 0;
@@ -142,14 +299,74 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
142299
font-size: 0.95rem;
143300
}
144301

302+
/* Sponsorship Section */
303+
.sponsorship {
304+
text-align: center;
305+
padding: 3rem 2rem;
306+
background: linear-gradient(135deg, var(--sl-color-bg-nav) 0%, var(--sl-color-bg-sidebar) 100%);
307+
border-radius: 1rem;
308+
border: 1px solid var(--sl-color-border);
309+
margin: 4rem 0;
310+
}
311+
312+
.sponsorship h2 {
313+
font-size: 1.75rem;
314+
margin: 0 0 1rem 0;
315+
color: var(--sl-color-white);
316+
}
317+
318+
.sponsorship p {
319+
color: var(--sl-color-gray-2);
320+
margin: 0 0 2rem 0;
321+
font-size: 1.05rem;
322+
}
323+
324+
.sponsor-buttons {
325+
display: flex;
326+
gap: 1rem;
327+
justify-content: center;
328+
flex-wrap: wrap;
329+
}
330+
331+
.sponsor-btn {
332+
display: inline-flex;
333+
align-items: center;
334+
gap: 0.5rem;
335+
padding: 0.875rem 1.75rem;
336+
border-radius: 0.5rem;
337+
font-weight: 600;
338+
font-size: 1rem;
339+
text-decoration: none;
340+
transition: transform 0.2s ease, box-shadow 0.2s ease;
341+
}
342+
343+
.sponsor-btn:hover {
344+
transform: translateY(-2px);
345+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
346+
}
347+
348+
.sponsor-btn.kofi {
349+
background: #FF5E5B;
350+
color: white;
351+
}
352+
353+
.sponsor-btn.github {
354+
background: #6e5494;
355+
color: white;
356+
}
357+
358+
.sponsor-btn span {
359+
font-size: 1.2rem;
360+
}
361+
145362
/* CTA Footer */
146363
.cta-footer {
147364
text-align: center;
148365
padding: 3rem 2rem;
149366
background: var(--sl-color-bg-nav);
150367
border-radius: 1rem;
151368
border: 1px solid var(--sl-color-border);
152-
margin: 4rem 0;
369+
margin: 4rem 0 2rem;
153370
}
154371

155372
.cta-footer h2 {
@@ -160,6 +377,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
160377
.cta-footer p {
161378
color: var(--sl-color-gray-2);
162379
margin: 0.5rem 0;
380+
font-size: 1.05rem;
163381
}
164382

165383
.cta-footer a {
@@ -172,20 +390,39 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
172390
text-decoration: underline;
173391
}
174392

175-
.version-info {
176-
font-size: 0.9rem;
177-
margin-top: 1.5rem !important;
178-
color: var(--sl-color-gray-3) !important;
179-
}
180-
181393
/* Responsive */
182394
@media (max-width: 768px) {
395+
.demo-container {
396+
grid-template-columns: 1fr;
397+
}
398+
183399
.feature-grid {
184400
grid-template-columns: 1fr;
185401
}
186402

187-
.features h2 {
403+
.features h2,
404+
.demo-section h2 {
188405
font-size: 1.5rem;
189406
}
407+
408+
.sponsor-buttons {
409+
flex-direction: column;
410+
align-items: stretch;
411+
}
412+
413+
.sponsor-btn {
414+
justify-content: center;
415+
}
416+
}
417+
418+
@media (max-width: 320px) {
419+
.landing-content {
420+
padding: 0 1rem;
421+
}
422+
423+
.install-snippet pre {
424+
font-size: 0.875rem;
425+
padding: 0.5rem 1rem;
426+
}
190427
}
191428
</style>

0 commit comments

Comments
 (0)