Skip to content

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

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 4 commits into from
Apr 1, 2026
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a227bdd
feat(website): Phase 2 — Polish & Complete documentation site
afucher Mar 31, 2026
14c5e65
fix(website): animation error and gallery code snippet readability
afucher Mar 31, 2026
04f7d2e
fix(website): address Copilot review — factual errors and broken exam…
afucher Apr 1, 2026
be6106c
fix(website): address remaining Copilot review comments (8, 9, 10)
afucher Apr 1, 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
7 changes: 7 additions & 0 deletions website/astro.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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' }
],
Expand Down Expand Up @@ -46,6 +47,12 @@ export default defineConfig({
}
]
},
{
label: 'Examples',
items: [
{ label: 'Gallery', slug: 'gallery' }
]
},
{
label: 'API Reference',
items: [
Expand Down
33 changes: 29 additions & 4 deletions website/public/img/logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 26 additions & 8 deletions website/src/components/ChartDemo.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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()`
Comment on lines +40 to +44
Copy link

Copilot AI Apr 1, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copilot uses AI. Check for mistakes.
} 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')
})`
}
}

Expand Down Expand Up @@ -79,6 +88,7 @@ const codeSnippet = getCodeSnippet()
chartHeight: height,
radixData: defaultRadixData,
transitData: defaultTransitData,
animateTargetData: animateTargetData,
baseUrl: import.meta.env.BASE_URL
}}
>
Expand All @@ -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
})
})
}
}
Expand Down Expand Up @@ -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>
Loading
Loading