diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index b4df245..27b852f 100644 --- a/website/src/pages/index.astro +++ b/website/src/pages/index.astro @@ -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 --- @@ -25,46 +33,92 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro' 
npm install @astrodraw/astrochart
+ +
+ v{version} +
+ + +
+

See It In Action

+

Interactive astrology charts powered by pure SVG

+ +
+
+

Radix Chart

+ +
+ +
+

Transit Chart

+ +
+
+ +
+ Show Code Example + 
import { Chart } from '@astrodraw/astrochart'
+
+// Create a new chart
+const chart = new Chart('chart', 600, 600)
+
+// Render radix (birth) chart
+chart.radix({
+  planets: {
+    Sun: [12.45, 0],
+    Moon: [145.67, 0],
+    // ... more planets
+  },
+  cusps: [315.45, 35.67, 65.23, /* ... 12 total */]
+})
+
+// Add transit ring
+chart.transit(transitData)
+
+
+

Why AstroChart?

-

⚑ Zero Dependencies

-

Pure SVG and vanilla JavaScript. No React, Vue, or other frameworks required.

-
-
-

🎨 Fully Customizable

-

Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings.

-
-
-

πŸ“± Responsive

-

Charts scale perfectly to any container size and work on all modern browsers.

+

πŸ“Š Pure SVG

+

Renders crisp, scalable vector graphics that look perfect at any size. No canvas, no imagesβ€”just clean SVG code.

-

πŸ”§ Framework Agnostic

-

Use as a standalone library or integrate with React, Vue, Angular, or any other framework.

+

⚑ Zero Dependencies

+

Pure vanilla JavaScript with no external dependencies. Lightweight, fast, and works anywhere.

-

πŸ“Š Complete API

-

Render radix charts, transit rings, aspects, animations, and click events with ease.

+

🎨 Fully Customizable

+

Control colors, fonts, sizes, rendering modes, and add custom symbols with simple settings objects.

-

βœ… TypeScript Support

-

Full type definitions included. Write safe, maintainable code with IDE autocompletion.

+

βœ… TypeScript-first

+

Built with TypeScript. Full type definitions included for safe, maintainable code with IDE autocompletion.

+ +
+

Support AstroChart

+

AstroChart is free and open-source. If you find it useful, consider supporting its development!

+ + +
+

Ready to get started?

-

Check out the Quick Start guide to render your first chart in minutes.

-

- Version: 3.0.2 Β· - Changelog Β· - Contributing -

+

Check out the Installation guide to add AstroChart to your project, or explore the Quick Start to render your first chart in minutes.

@@ -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; @@ -142,6 +299,66 @@ 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; @@ -149,7 +366,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro' 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 { @@ -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 { @@ -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; + } }