feat(website): Phase 2 — Polish & Complete documentation site (#114)

* feat(website): Phase 2 — Polish & Complete documentation site

Issue #99 — Theme customization and logo design:
- Replace placeholder logo.svg with proper astrological wheel SVG (12
  division marks, dual rings, crosshair axes, planet dots, currentColor)
- Apply indigo accent palette to custom.css (light + dark mode variants)
- Wire customCss into astro.config.mjs so theme is applied site-wide
- Improve .chart-demo container styling (rounded corners, shadow, padding)

Issue #100 — Enrich remaining documentation pages:
- custom-settings.md: full settings table grouped by category, 5+ examples
- custom-symbols.md: complete CUSTOM_SYMBOL_FN docs with 3 examples
- click-events.md: ADD_CLICK_AREA flag, on() API, full event handler example
- multiple-charts.md: unique IDs, 4 multi-chart examples, independent state
- api/settings.md: comprehensive reference for all ~100 settings from source
- guides/frameworks/vue.md: Vue 3 Composition API, Vue 2, Nuxt SSR examples
- guides/frameworks/angular.md: ViewChild, ngOnDestroy, NgZone, SSR guard
- changelog.md: real version history (v3.0.0–v3.0.2) in Keep a Changelog format
- contributing.md: website dev, code style table, PR branch conventions

Issue #98 — Gallery page and advanced demo features:
- Add 'aspects' mode to ChartDemo.astro (renders chart.radix().aspects())
- Create gallery.mdx with 4 live demos: radix, transit, aspects, animate
- Add 'Examples' sidebar group in astro.config.mjs between Guides and API

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

* fix(website): animation error and gallery code snippet readability

Fix animation demo crashing with "Data is not set":
- Transit.animate() requires (data, duration, isReverse, callback) — was
  called with no arguments, causing validate() to throw on undefined data
- Add animateTargetData to demoData.ts (planets shifted ~30–90° from the
  initial transit so movement is clearly visible)
- Pass animateTargetData via define:vars to the inline script
- Button now toggles forward/back between transitData and animateTargetData
- Duration passed as 2 (seconds, the library multiplies by 1000 internally)

Fix gallery/guide code snippet hard to read in dark mode:
- Replace light #f5f5f5 pre background with dark #1e1e2e (Catppuccin Mocha)
- Set explicit code color #cdd6f4 (light lavender) for contrast on both
  light and dark mode
- Add a subtle border so the block has definition on any background

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

* fix(website): address Copilot review — factual errors and broken examples

- changelog: replace '— Current' header with real release dates (3.0.2:
  2023-08-17, 3.0.1: 2023-07-20, 3.0.0: 2023-07-10)
- changelog: remove false claim that AstroData/AspectData/Dignity are
  exported from the package entry point (only Chart, AspectCalculator,
  and Settings are)
- changelog: add real 3.0.2 fix: SNode and Fortune symbol positions
- changelog: correct ADD_CLICK_AREA entry — remove mention of the
  non-existent radix.on() event API
- click-events: rewrite guide to use real DOM addEventListener pattern
  with predictable element IDs ({chartId}-radix-planets-{Name} /
  {chartId}-radix-cusps-{index}) instead of fictional radix.on() API
- custom.css: rename .chart-demo selectors to .chart-demo-wrapper to
  match the class actually used by ChartDemo.astro (dead CSS fix)
- vue.md: replace broken `import type { AstroData }` (not exported) with
  derived type: Parameters<InstanceType<typeof Chart>['radix']>[0]
- ChartDemo.astro: fix package name in all 4 code snippets
  ('astrochart' → '@astrodraw/astrochart')
- ChartDemo.astro: fix animate snippet — replace no-arg transit.animate()
  call with a valid call showing all required parameters

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

* fix(website): address remaining Copilot review comments (8, 9, 10)

- angular.md: remove OnChanges/SimpleChanges from Basic Component
  import — they are unused in that snippet and belong only in the
  follow-up Re-rendering section where they are explicitly introduced
- ChartDemo.astro: fix animation toggle passing isReverse: false on
  every click — change hardcoded false to !isForward so the second
  click correctly reverses the animation
- vue.md: replace hardcoded container IDs (astrochart-root,
  astrochart-instance) with per-instance unique IDs generated via
  Math.random() in all three examples (Vue 3 Composition API, Vue 3
  with Settings Prop, Vue 2 Options API), matching the pattern already
  used in the Angular example

🤖 Generated with [eca](https://eca.dev)

Co-Authored-By: eca <git@eca.dev>

---------

Co-authored-by: eca <git@eca.dev>

Author: afucher

website/astro.config.mjs

@@ -14,6 +14,7 @@ export default defineConfig({
         src: './public/img/logo.svg',
         alt: 'AstroChart Logo'
       },
+      customCss: ['./src/styles/custom.css'],
       social: [
         { icon: 'github', label: 'GitHub', href: 'https://github.com/AstroDraw/AstroChart' }
       ],
@@ -46,6 +47,12 @@ export default defineConfig({
             }
           ]
         },
+        {
+          label: 'Examples',
+          items: [
+            { label: 'Gallery', slug: 'gallery' }
+          ]
+        },
         {
           label: 'API Reference',
           items: [

website/public/img/logo.svg

@@ -12,11 +12,11 @@
 export interface Props {
   id: string
   height?: number
-  mode?: 'radix' | 'transit' | 'animate'
+  mode?: 'radix' | 'transit' | 'animate' | 'aspects'
   showCode?: boolean
 }
 
-import { defaultRadixData, defaultTransitData } from '../data/demoData'
+import { defaultRadixData, defaultTransitData, animateTargetData } from '../data/demoData'
 
 const {
   id,
@@ -28,21 +28,30 @@ const {
 // Generate code snippet based on mode
 const getCodeSnippet = () => {
   if (mode === 'radix') {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 chart.radix(data)`
   } else if (mode === 'transit') {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 chart.radix(radixData).transit(transitData)`
+  } else if (mode === 'aspects') {
+    return `import { Chart } from '@astrodraw/astrochart'
+
+const chart = new Chart('chart', 600, 600)
+chart.radix(data).aspects()`
   } else {
-    return `import { Chart } from 'astrochart'
+    return `import { Chart } from '@astrodraw/astrochart'
 
 const chart = new Chart('chart', 600, 600)
 const transit = chart.radix(radixData).transit(transitData)
-transit.animate()`
+
+// animate(targetData, durationSeconds, isReverse, onComplete)
+transit.animate(newTransitData, 2, false, () => {
+  console.log('animation complete')
+})`
   }
 }
 
@@ -79,6 +88,7 @@ const codeSnippet = getCodeSnippet()
     chartHeight: height,
     radixData: defaultRadixData,
     transitData: defaultTransitData,
+    animateTargetData: animateTargetData,
     baseUrl: import.meta.env.BASE_URL
   }}
 >
@@ -95,13 +105,19 @@ const codeSnippet = getCodeSnippet()
           chart.radix(radixData)
         } else if (chartMode === 'transit') {
           chart.radix(radixData).transit(transitData)
+        } else if (chartMode === 'aspects') {
+          chart.radix(radixData).aspects()
         } else if (chartMode === 'animate') {
           const transit = chart.radix(radixData).transit(transitData)
+          var isForward = true
 
           const animateBtn = document.getElementById(chartId + '-animate-btn')
           if (animateBtn) {
             animateBtn.addEventListener('click', function () {
-              transit.animate()
+              var target = isForward ? animateTargetData : transitData
+              transit.animate(target, 2, !isForward, function () {
+                isForward = !isForward
+              })
             })
           }
         }
@@ -183,16 +199,18 @@ const codeSnippet = getCodeSnippet()
   }
 
   .code-snippet pre {
-    background: #f5f5f5;
+    background: #1e1e2e;
     padding: 1rem;
     border-radius: 0.5rem;
     overflow-x: auto;
     margin-top: 0.5rem;
     font-size: 0.875rem;
     line-height: 1.5;
+    border: 1px solid rgba(255, 255, 255, 0.08);
   }
 
   .code-snippet code {
     font-family: 'Courier New', monospace;
+    color: #cdd6f4;
   }
 </style>