Skip to content

[Phase 1] Create custom landing page #106

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
afucher merged 2 commits into from
Mar 31, 2026
+271 −34
Merged

[Phase 1] Create custom landing page #106

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c354c5e
[Phase 1] Create custom landing page
afucher Mar 30, 2026
d658096
fix sponsor link
afucher Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
305 changes: 271 additions & 34 deletions website/src/pages/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,17 +3,25 @@
// Uses StarlightPage with splash template to keep the header/footer from Starlight

import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
import ChartDemo from '../components/ChartDemo.astro'
import { readFileSync } from 'node:fs'
import { resolve } from 'node:path'

// Read version from package.json at build time
const packageJsonPath = resolve(process.cwd(), '../package.json')
const packageJson = JSON.parse(readFileSync(packageJsonPath, 'utf-8'))
const version = packageJson.version
---

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

<!-- Version Badge -->
<div class="version-badge">
<a href="/changelog">v{version}</a>
</div>

<!-- Live Demo Section -->
<section class="demo-section">
<h2>See It In Action</h2>
<p class="demo-intro">Interactive astrology charts powered by pure SVG</p>

<div class="demo-container">
<div class="demo-item">
<h3>Radix Chart</h3>
<ChartDemo id="demo-radix" height={400} mode="radix" showCode={false} />
</div>

<div class="demo-item">
<h3>Transit Chart</h3>
<ChartDemo id="demo-transit" height={400} mode="transit" showCode={false} />
</div>
</div>

<details class="demo-code">
<summary>Show Code Example</summary>
<pre><code>import &#123; Chart &#125; from '@astrodraw/astrochart'

// Create a new chart
const chart = new Chart('chart', 600, 600)

// Render radix (birth) chart
chart.radix(&#123;
planets: &#123;
Sun: [12.45, 0],
Moon: [145.67, 0],
// ... more planets
&#125;,
cusps: [315.45, 35.67, 65.23, /* ... 12 total */]
&#125;)

// Add transit ring
chart.transit(transitData)</code></pre>
</details>
</section>

<!-- Features Section -->
<section class="features">
<h2>Why AstroChart?</h2>
<div class="feature-grid">
<div class="feature-card">
<h3>⚡ Zero Dependencies</h3>
<p>Pure SVG and vanilla JavaScript. No React, Vue, or other frameworks required.</p>
</div>
<div class="feature-card">
<h3>🎨 Fully Customizable</h3>
<p>Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings.</p>
</div>
<div class="feature-card">
<h3>📱 Responsive</h3>
<p>Charts scale perfectly to any container size and work on all modern browsers.</p>
<h3>📊 Pure SVG</h3>
<p>Renders crisp, scalable vector graphics that look perfect at any size. No canvas, no images—just clean SVG code.</p>
</div>
<div class="feature-card">
<h3>🔧 Framework Agnostic</h3>
<p>Use as a standalone library or integrate with React, Vue, Angular, or any other framework.</p>
<h3>⚡ Zero Dependencies</h3>
<p>Pure vanilla JavaScript with no external dependencies. Lightweight, fast, and works anywhere.</p>
</div>
<div class="feature-card">
<h3>📊 Complete API</h3>
<p>Render radix charts, transit rings, aspects, animations, and click events with ease.</p>
<h3>🎨 Fully Customizable</h3>
<p>Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings objects.</p>
</div>
<div class="feature-card">
<h3>✅ TypeScript Support</h3>
<p>Full type definitions included. Write safe, maintainable code with IDE autocompletion.</p>
<h3>✅ TypeScript-first</h3>
<p>Built with TypeScript. Full type definitions included for safe, maintainable code with IDE autocompletion.</p>
</div>
</div>
</section>

<!-- Sponsorship Section -->
<section class="sponsorship">
<h2>Support AstroChart</h2>
<p>AstroChart is free and open-source. If you find it useful, consider supporting its development!</p>

<div class="sponsor-buttons">
<a href="https://ko-fi.com/afucher" target="_blank" rel="noopener noreferrer" class="sponsor-btn kofi">
<span>☕</span> Support on Ko-fi
</a>
<a href="https://github.com/sponsors/afucher" target="_blank" rel="noopener noreferrer" class="sponsor-btn github">
<span>💖</span> GitHub Sponsors
</a>
</div>
</section>

<!-- CTA Footer -->
<section class="cta-footer">
<h2>Ready to get started?</h2>
<p>Check out the <a href="/quickstart">Quick Start guide</a> to render your first chart in minutes.</p>
<p class="version-info">
<strong>Version:</strong> 3.0.2 ·
<a href="/changelog">Changelog</a> ·
<a href="/contributing">Contributing</a>
</p>
<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>
</section>

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

/* Version Badge */
.version-badge {
text-align: center;
margin: 1rem auto 3rem;
}

.version-badge a {
display: inline-block;
padding: 0.375rem 0.75rem;
background: var(--sl-color-accent);
color: white;
font-weight: 600;
font-size: 0.875rem;
border-radius: 0.375rem;
text-decoration: none;
transition: opacity 0.2s ease;
}

.version-badge a:hover {
opacity: 0.9;
}

/* Demo Section */
.demo-section {
margin: 4rem 0;
padding: 2rem;
background: var(--sl-color-bg-nav);
border-radius: 1rem;
border: 1px solid var(--sl-color-border);
}

.demo-section h2 {
font-size: 2rem;
text-align: center;
margin: 0 0 0.5rem 0;
color: var(--sl-color-white);
}

.demo-intro {
text-align: center;
color: var(--sl-color-gray-2);
margin: 0 0 2rem 0;
font-size: 1.1rem;
}

.demo-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 2rem;
margin-bottom: 2rem;
}

.demo-item h3 {
text-align: center;
margin: 0 0 1rem 0;
font-size: 1.2rem;
color: var(--sl-color-white);
}

.demo-code {
margin-top: 2rem;
border-top: 1px solid var(--sl-color-border);
padding-top: 1.5rem;
}

.demo-code summary {
cursor: pointer;
font-weight: 600;
color: var(--sl-color-accent);
padding: 0.5rem;
text-align: center;
list-style: none;
}

.demo-code summary::-webkit-details-marker {
display: none;
}

.demo-code summary::before {
content: '▼ ';
display: inline-block;
transition: transform 0.2s;
}

.demo-code[open] summary::before {
transform: rotate(180deg);
}

.demo-code pre {
background: #1e1e1e;
padding: 1.5rem;
border-radius: 0.5rem;
overflow-x: auto;
margin-top: 1rem;
font-size: 0.875rem;
line-height: 1.6;
}

.demo-code code {
color: #d4d4d4;
font-family: var(--sl-font-mono, 'Courier New', monospace);
}

/* Features Section */
.features {
margin: 4rem 0;
Expand Down Expand Up @@ -142,14 +299,74 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
font-size: 0.95rem;
}

/* Sponsorship Section */
.sponsorship {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, var(--sl-color-bg-nav) 0%, var(--sl-color-bg-sidebar) 100%);
border-radius: 1rem;
border: 1px solid var(--sl-color-border);
margin: 4rem 0;
}

.sponsorship h2 {
font-size: 1.75rem;
margin: 0 0 1rem 0;
color: var(--sl-color-white);
}

.sponsorship p {
color: var(--sl-color-gray-2);
margin: 0 0 2rem 0;
font-size: 1.05rem;
}

.sponsor-buttons {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}

.sponsor-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.75rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 1rem;
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.sponsor-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sponsor-btn.kofi {
background: #FF5E5B;
color: white;
}

.sponsor-btn.github {
background: #6e5494;
color: white;
}

.sponsor-btn span {
font-size: 1.2rem;
}

/* CTA Footer */
.cta-footer {
text-align: center;
padding: 3rem 2rem;
background: var(--sl-color-bg-nav);
border-radius: 1rem;
border: 1px solid var(--sl-color-border);
margin: 4rem 0;
margin: 4rem 0 2rem;
}

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

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

.version-info {
font-size: 0.9rem;
margin-top: 1.5rem !important;
color: var(--sl-color-gray-3) !important;
}

/* Responsive */
@media (max-width: 768px) {
.demo-container {
grid-template-columns: 1fr;
}

.feature-grid {
grid-template-columns: 1fr;
}

.features h2 {
.features h2,
.demo-section h2 {
font-size: 1.5rem;
}

.sponsor-buttons {
flex-direction: column;
align-items: stretch;
}

.sponsor-btn {
justify-content: center;
}
}

@media (max-width: 320px) {
.landing-content {
padding: 0 1rem;
}

.install-snippet pre {
font-size: 0.875rem;
padding: 0.5rem 1rem;
}
}
</style>
Loading