feat(website): Phase 2 — Polish & Complete documentation site by afucher · Pull Request #114 · AstroDraw/AstroChart

afucher · 2026-03-31T21:35:31Z

Summary

[Phase 2] Theme customization and logo design #99 Theme & Logo — Replace placeholder logo with a proper astrological wheel SVG (12 division marks, dual rings, crosshair axes, currentColor for light/dark); apply indigo accent palette to custom.css with full light/dark mode variants; wire customCss into astro.config.mjs
[Phase 2] Write remaining documentation pages #100 Remaining Docs — Enrich 9 stub pages with full, accurate content sourced directly from settings.ts: custom-settings, custom-symbols, click-events, multiple-charts, api/settings (all ~100 settings), frameworks/vue, frameworks/angular, changelog, contributing
[Phase 2] Gallery page and advanced demo features #98 Gallery & Advanced Demos — Add aspects mode to ChartDemo, create gallery.mdx with 4 live demos, add Examples sidebar group in astro.config.mjs
Fix — Animation demo was crashing with "Data is not set" (transit.animate() requires a target data object); add animateTargetData and wire it with a forward/back toggle
Fix — Gallery/guide code snippets were hard to read; replace light #f5f5f5 pre background with dark #1e1e2e and explicit #cdd6f4 text color

Test plan

🤖 Generated with eca

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 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>

Copilot

Pull request overview

This PR continues Phase 2 of the Astro/Starlight documentation site by polishing the site theme/branding, adding a gallery of live demos, and expanding multiple guide/API pages with richer content and examples.

Changes:

Added an indigo light/dark theme (via Starlight customCss) and replaced the placeholder logo with a zodiac wheel SVG.
Expanded docs content across guides (settings, symbols, multiple charts, frameworks) and added a new Gallery page with live ChartDemo instances.
Enhanced the ChartDemo component to support an “aspects” demo mode and fixed the animation demo by introducing a target transit dataset.

Reviewed changes

Copilot reviewed 14 out of 15 changed files in this pull request and generated 13 comments.

Show a summary per file

File	Description
website/astro.config.mjs	Wires `customCss` and adds an “Examples → Gallery” sidebar group.
website/src/styles/custom.css	Defines the indigo palette and chart demo container styling.
website/public/img/logo.svg	Replaces the placeholder logo with a wheel-style SVG logo.
website/src/data/demoData.ts	Adds `animateTargetData` used by the animation demo toggle.
website/src/components/ChartDemo.astro	Adds `aspects` mode, toggled animation target data, and improves code snippet styling.
website/src/content/docs/gallery.mdx	New gallery page with four live demos.
website/src/content/docs/guides/custom-settings.md	Expands the custom settings guide with categorized tables and examples.
website/src/content/docs/guides/custom-symbols.md	Expands custom symbols documentation and examples.
website/src/content/docs/guides/click-events.md	Expands click interaction guide (but currently documents a non-existent API).
website/src/content/docs/guides/multiple-charts.md	Expands guidance for rendering multiple charts and per-instance settings.
website/src/content/docs/guides/frameworks/vue.md	Adds Vue 2/3 patterns and SSR notes (but includes an invalid type import).
website/src/content/docs/guides/frameworks/angular.md	Adds Angular lifecycle, SSR, and performance notes (minor snippet inconsistencies).
website/src/content/docs/api/settings.md	Expands the complete settings reference table and examples.
website/src/content/docs/changelog.md	Reworks changelog structure and content (but includes several factual inconsistencies).
website/src/content/docs/contributing.md	Expands contribution workflow, testing, and website dev instructions.

Comments suppressed due to low confidence (1)

website/src/components/ChartDemo.astro:51

The animate code snippet still uses transit.animate() with no arguments, which will throw because Transit.animate requires (data, duration, isReverse, callback). Update the snippet to demonstrate passing a target AstroData (and any other required args) to match the working demo code.

    return `import { Chart } from 'astrochart'

const chart = new Chart('chart', 600, 600)
const transit = chart.radix(radixData).transit(transitData)
transit.animate()`
  }

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-04-01T00:51:00Z

website/src/styles/custom.css

 /* Chart demo containers */
 .chart-demo {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
+  background: #ffffff;


The new .chart-demo styles don’t appear to apply anywhere: there are no uses of a chart-demo class in website/src (the ChartDemo component uses chart-demo-wrapper). Either update the component markup to use chart-demo or update these selectors so the intended styling actually takes effect.

Copilot · 2026-04-01T00:51:01Z

website/src/components/ChartDemo.astro

            animateBtn.addEventListener('click', function () {
-              transit.animate()
+              var target = isForward ? animateTargetData : transitData
+              transit.animate(target, 2, false, function () {


The demo toggle intends to animate forward and then back, but transit.animate(target, 2, false, ...) always passes isReverse: false. On the second click this will typically animate the long way around (forward through ~360°) instead of reversing back. Use isForward (or similar) to set isReverse appropriately when toggling back.

Suggested change

transit.animate(target, 2, false, function () {

transit.animate(target, 2, !isForward, function () {

website/src/content/docs/guides/click-events.md

Copilot · 2026-04-01T00:51:01Z

website/src/content/docs/guides/click-events.md

+const chart = new Chart('chart', 600, 600, { ADD_CLICK_AREA: true })
+const radix = chart.radix(data)
+
+// Planet click — show a tooltip or highlight
+radix.on('click:planet', (name, event) => {
+  event.stopPropagation()
+  alert(`You clicked: ${name}`)
+})
+
+// Cusp click — display house info
+radix.on('click:cusp', (index, event) => {
+  event.stopPropagation()
+  console.log(`House ${index + 1} cusp starts at ${data.cusps[index]}°`)
 })


The “Full Working Example” also uses radix.on(...), which isn’t supported by the current library implementation. Please update this example to use DOM event listeners on the generated SVG elements/click areas (which are what ADD_CLICK_AREA actually enables).

website/src/content/docs/guides/frameworks/vue.md

Copilot · 2026-04-01T00:51:03Z

website/src/content/docs/changelog.md

+- Minor SVG attribute type-coercion fixes for strict browser environments
+
+### Changed
+- Improved TypeScript type exports — `AstroData`, `AspectData`, `Dignity`, and `Settings` interfaces are now all publicly exported from the package entry point


The changelog claims AstroData, AspectData, Dignity, and Settings are exported from the package entry point, but dist/project/src/index.d.ts (and project/src/index.ts) only export Chart, AspectCalculator, and Settings. Please correct the entry for 3.0.2 to match actual exports (or update the package exports if that change is intended).

Suggested change

- Improved TypeScript type exports — `AstroData`, `AspectData`, `Dignity`, and `Settings` interfaces are now all publicly exported from the package entry point

- Improved TypeScript type declarations for the main public API (`Chart`, `AspectCalculator`, and `Settings`)

website/src/content/docs/changelog.md

Copilot · 2026-04-01T00:51:03Z

website/src/content/docs/contributing.md

 ```

-## Code Style
+> **Node version:** Use Node 24. If `npm` commands fail, run `nvm use 24` first.


This doc requires “Node 24” but the repo’s root package.json doesn’t declare an engines.node range (and there’s no .nvmrc). To avoid confusing contributors on other LTS versions, consider either adding an explicit engines/.nvmrc to make this requirement enforceable, or rephrasing this as a tested/recommended Node version.

Suggested change

> **Node version:** Use Node 24. If `npm` commands fail, run `nvm use 24` first.

> **Node version:** AstroChart is tested with Node 24 (current LTS). Other active LTS versions may work, but if `npm` commands fail, try `nvm use 24` first.

Copilot · 2026-04-01T00:51:03Z

website/src/components/ChartDemo.astro

+  } else if (mode === 'aspects') {
+    return `import { Chart } from 'astrochart'
+
+const chart = new Chart('chart', 600, 600)
+chart.radix(data).aspects()`


In the newly added aspects code snippet, the import path is import { Chart } from 'astrochart', but the published package name in this repo is @astrodraw/astrochart. Please update this (and keep the other mode snippets consistent) so copy/paste works for npm users.

website/src/content/docs/changelog.md

…ples - 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>

- 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>

afucher and others added 2 commits March 31, 2026 17:12

afucher requested a review from Copilot April 1, 2026 00:44

Copilot started reviewing on behalf of afucher April 1, 2026 00:44 View session

Copilot AI reviewed Apr 1, 2026

View reviewed changes

afucher and others added 2 commits April 1, 2026 15:14

afucher merged commit 57c497f into main Apr 1, 2026
4 checks passed

afucher deleted the phase-2/polish-and-complete branch April 1, 2026 18:31

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

feat(website): Phase 2 — Polish & Complete documentation site#114
afucher merged 4 commits intomainfrom
phase-2/polish-and-complete

afucher commented Mar 31, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Copilot AI Apr 1, 2026

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	transit.animate(target, 2, false, function () {
	transit.animate(target, 2, !isForward, function () {

	- Improved TypeScript type exports — `AstroData`, `AspectData`, `Dignity`, and `Settings` interfaces are now all publicly exported from the package entry point
	- Improved TypeScript type declarations for the main public API (`Chart`, `AspectCalculator`, and `Settings`)

	> Node version: Use Node 24. If `npm` commands fail, run `nvm use 24` first.
	> Node version: AstroChart is tested with Node 24 (current LTS). Other active LTS versions may work, but if `npm` commands fail, try `nvm use 24` first.

Uh oh!

Conversation

afucher commented Mar 31, 2026

Summary

Test plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants