fix(website): replace all hardcoded root-relative paths with BASE_URL / relative links

afucher · eca-agent · afucher · commit d661b4bd3eec · 2026-03-31T13:16:36.000-03:00
All paths were broken under base: '/AstroChart' because they resolved to the domain root instead of /AstroChart/... Scalable approach: the only place that ever needs to change is `base` in astro.config.mjs. All other files derive from it. website/src/utils/url.ts — new helper Exports `withBase(path)` which strips the trailing slash from import.meta.env.BASE_URL and prepends it to the given path. Single source of truth for all .astro runtime links. website/src/pages/index.astro Import and use `withBase()` for all 4 hardcoded root-relative paths: - hero action link: '/installation' - version badge: href="/changelog" - CTA footer: href="/installation", href="/quickstart" website/src/content/docs/** (21 files) Convert every absolute /docs/..., /api/..., /guides/... link to a relative path (e.g. ./quickstart, ../api/chart, ./frameworks/react). Relative links are resolved by Starlight against the current page URL and are therefore base-agnostic — no code or imports needed. 🤖 Generated with [eca](https://eca.dev) Co-Authored-By: eca <git@eca.dev>
diff --git a/website/src/content/docs/api/aspect-calculator.md b/website/src/content/docs/api/aspect-calculator.md
@@ -30,5 +30,5 @@ console.log(angle) // Aspect angle in degrees
 
 ## Next Steps
 
-- **[Radix Chart Guide](/docs/guides/radix-chart)** — See aspects in action
-- **[API Reference](/docs/api/chart)** — See all methods
+- **[Radix Chart Guide](../guides/radix-chart)** — See aspects in action
+- **[API Reference](./chart)** — See all methods
diff --git a/website/src/content/docs/api/chart.md b/website/src/content/docs/api/chart.md
@@ -66,6 +66,6 @@ chart.animate(newTransitData, 1000, false, () => {
 
 ## Next Steps
 
-- **[Radix Guide](/docs/guides/radix-chart)** — Learn about radix charts
-- **[Transit Guide](/docs/guides/transit-chart)** — Learn about transit charts
-- **[Settings Reference](/docs/api/settings)** — Customize chart appearance
+- **[Radix Guide](../guides/radix-chart)** — Learn about radix charts
+- **[Transit Guide](../guides/transit-chart)** — Learn about transit charts
+- **[Settings Reference](./settings)** — Customize chart appearance
diff --git a/website/src/content/docs/api/radix.md b/website/src/content/docs/api/radix.md
@@ -59,7 +59,7 @@ const transit = radix.transit(transitData)
 transit.aspects()
 ```
 
-See the [Transit API](/api/transit) for full details.
+See the [Transit API](./transit) for full details.
 
 ### `radix.addPointsOfInterest(points: Points): Radix`
 
@@ -77,13 +77,13 @@ radix.aspects()
 
 | Field | Type | Constraint |
 |-------|------|------------|
-| `planets` | `Record<string, number[]>` | Keys must be [valid planet names](/api/types#valid-planet-keys) |
+| `planets` | `Record<string, number[]>` | Keys must be [valid planet names](./types#valid-planet-keys) |
 | `cusps` | `number[]` | Exactly **12** degree values |
 
 Planet array: `[degrees, velocity]` — the second element is the astrological velocity; a negative value means the planet is retrograde.
 
 ## Next Steps
 
-- [Types reference](/api/types) — `AstroData`, valid planet keys, full example
-- [Transit API](/api/transit) — transit ring methods
-- [Radix Chart guide](/guides/radix-chart) — practical walkthrough
+- [Types reference](./types) — `AstroData`, valid planet keys, full example
+- [Transit API](./transit) — transit ring methods
+- [Radix Chart guide](../guides/radix-chart) — practical walkthrough
diff --git a/website/src/content/docs/api/settings.md b/website/src/content/docs/api/settings.md
@@ -44,5 +44,5 @@ chart.radix(data)
 
 ## Next Steps
 
-- **[Custom Settings Guide](/docs/guides/custom-settings)** — Learn more
-- **[Types Reference](/docs/api/types)** — See all type definitions
+- **[Custom Settings Guide](../guides/custom-settings)** — Learn more
+- **[Types Reference](./types)** — See all type definitions
diff --git a/website/src/content/docs/api/transit.md b/website/src/content/docs/api/transit.md
@@ -40,5 +40,5 @@ transit.animate(newTransitData, 1500)
 
 ## Next Steps
 
-- **[Transit Chart Guide](/docs/guides/transit-chart)** — Learn more
-- **[Animation Guide](/docs/guides/animation)** — Learn about animations
+- **[Transit Chart Guide](../guides/transit-chart)** — Learn more
+- **[Animation Guide](../guides/animation)** — Learn about animations
diff --git a/website/src/content/docs/api/types.md b/website/src/content/docs/api/types.md
@@ -92,7 +92,7 @@ const data = {
 ## Settings
 
 Partial settings object passed as an optional fourth argument to `new Chart()`.
-See the [Settings reference](/api/settings) for all available keys.
+See the [Settings reference](./settings) for all available keys.
 
 ```typescript
 interface Settings {
@@ -107,6 +107,6 @@ interface Settings {
 
 ## Next Steps
 
-- [Settings Reference](/api/settings) — all configurable settings
-- [Chart API](/api/chart) — `Chart` class methods
-- [Radix Chart guide](/guides/radix-chart) — practical walkthrough
+- [Settings Reference](./settings) — all configurable settings
+- [Chart API](./chart) — `Chart` class methods
+- [Radix Chart guide](../guides/radix-chart) — practical walkthrough
diff --git a/website/src/content/docs/api/zodiac.md b/website/src/content/docs/api/zodiac.md
@@ -38,5 +38,5 @@ const degrees = getZodiacDegrees('Aries') // 0
 
 ## Next Steps
 
-- **[Guides](/docs/guides/radix-chart)** — See zodiac in action
-- **[API Reference](/docs/api/chart)** — See all methods
+- **[Guides](../guides/radix-chart)** — See zodiac in action
+- **[API Reference](./chart)** — See all methods
diff --git a/website/src/content/docs/contributing.md b/website/src/content/docs/contributing.md
@@ -59,7 +59,7 @@ Feature requests are welcome! Please describe:
 ## Questions?
 
 - Open an issue on [GitHub](https://github.com/AstroDraw/AstroChart/issues)
-- Check the [Documentation](/docs/introduction)
+- Check the [Documentation](./introduction)
 - Review existing issues for similar questions
 
 ## License
diff --git a/website/src/content/docs/guides/animation.mdx b/website/src/content/docs/guides/animation.mdx
@@ -266,6 +266,6 @@ loop()
 
 ## Next Steps
 
-- **[Transit Charts](/docs/guides/transit-chart)** — Learn about transit rendering
-- **[Custom Settings](/docs/guides/custom-settings)** — Customize animation appearance
-- **[API Reference](/docs/api/transit)** — Full Transit API documentation
+- **[Transit Charts](./transit-chart)** — Learn about transit rendering
+- **[Custom Settings](./custom-settings)** — Customize animation appearance
+- **[API Reference](../api/transit)** — Full Transit API documentation
diff --git a/website/src/content/docs/guides/click-events.md b/website/src/content/docs/guides/click-events.md
@@ -34,5 +34,5 @@ Use these helper functions to identify clicked elements:
 
 ## Next Steps
 
-- **[Framework Integrations](/docs/guides/frameworks/react)** — Use with React, Vue, etc.
-- **[API Reference](/docs/api/chart)** — See all methods
+- **[Framework Integrations](./frameworks/react)** — Use with React, Vue, etc.
+- **[API Reference](../api/chart)** — See all methods
diff --git a/website/src/content/docs/guides/custom-settings.md b/website/src/content/docs/guides/custom-settings.md
@@ -23,5 +23,5 @@ chart.radix(data)
 
 ## Next Steps
 
-- **[Types Reference](/docs/api/types)** — See all available settings
-- **[Custom Symbols](/docs/guides/custom-symbols)** — Create custom symbols
+- **[Types Reference](../api/types)** — See all available settings
+- **[Custom Symbols](./custom-symbols)** — Create custom symbols
diff --git a/website/src/content/docs/guides/custom-symbols.md b/website/src/content/docs/guides/custom-symbols.md
@@ -28,5 +28,5 @@ chart.radix(data)
 
 ## Next Steps
 
-- **[Custom Settings](/docs/guides/custom-settings)** — Explore more settings
-- **[API Reference](/docs/api/chart)** — See all methods
+- **[Custom Settings](./custom-settings)** — Explore more settings
+- **[API Reference](../api/chart)** — See all methods
diff --git a/website/src/content/docs/guides/frameworks/angular.md b/website/src/content/docs/guides/frameworks/angular.md
@@ -52,5 +52,5 @@ export class AstroChartComponent {
 
 ## Next Steps
 
-- **[React Integration](/docs/guides/frameworks/react)** — Use with React
-- **[Vue Integration](/docs/guides/frameworks/vue)** — Use with Vue
+- **[React Integration](./react)** — Use with React
+- **[Vue Integration](./vue)** — Use with Vue
diff --git a/website/src/content/docs/guides/frameworks/react.md b/website/src/content/docs/guides/frameworks/react.md
@@ -52,5 +52,5 @@ export default function Page() {
 
 ## Next Steps
 
-- **[Vue Integration](/docs/guides/frameworks/vue)** — Use with Vue
-- **[Angular Integration](/docs/guides/frameworks/angular)** — Use with Angular
+- **[Vue Integration](./vue)** — Use with Vue
+- **[Angular Integration](./angular)** — Use with Angular
diff --git a/website/src/content/docs/guides/frameworks/vue.md b/website/src/content/docs/guides/frameworks/vue.md
@@ -53,5 +53,5 @@ const chartData = ref({})
 
 ## Next Steps
 
-- **[React Integration](/docs/guides/frameworks/react)** — Use with React
-- **[Angular Integration](/docs/guides/frameworks/angular)** — Use with Angular
+- **[React Integration](./react)** — Use with React
+- **[Angular Integration](./angular)** — Use with Angular
diff --git a/website/src/content/docs/guides/multiple-charts.md b/website/src/content/docs/guides/multiple-charts.md
@@ -30,5 +30,5 @@ HTML:
 
 ## Next Steps
 
-- **[Click Events](/docs/guides/click-events)** — Add interactivity
-- **[Framework Integrations](/docs/guides/frameworks/react)** — Use with React, Vue, etc.
+- **[Click Events](./click-events)** — Add interactivity
+- **[Framework Integrations](./frameworks/react)** — Use with React, Vue, etc.
diff --git a/website/src/content/docs/guides/radix-chart.mdx b/website/src/content/docs/guides/radix-chart.mdx
@@ -142,7 +142,7 @@ Aspects are calculated automatically using default orbs:
 - Trine: 8°
 - Opposition: 10°
 
-You can customize orbs via [Settings](/docs/api/settings).
+You can customize orbs via [Settings](../api/settings).
 
 ## Interactive Demo
 
@@ -168,8 +168,8 @@ Renders a radix chart and returns a `Radix` instance for further operations.
 
 ## Next Steps
 
-- **[Transit Charts](/docs/guides/transit-chart)** — Layer a transit ring over your radix
-- **[Animation](/docs/guides/animation)** — Animate transitions between states
-- **[Custom Settings](/docs/guides/custom-settings)** — Customize colors, fonts, and appearance
-- **[Custom Symbols](/docs/guides/custom-symbols)** — Replace symbols with custom SVG
-- **[Types Reference](/docs/api/types)** — Full type definitions
+- **[Transit Charts](./transit-chart)** — Layer a transit ring over your radix
+- **[Animation](./animation)** — Animate transitions between states
+- **[Custom Settings](./custom-settings)** — Customize colors, fonts, and appearance
+- **[Custom Symbols](./custom-symbols)** — Replace symbols with custom SVG
+- **[Types Reference](../api/types)** — Full type definitions
diff --git a/website/src/content/docs/guides/transit-chart.mdx b/website/src/content/docs/guides/transit-chart.mdx
@@ -145,7 +145,7 @@ const transit = radix.transit(transitData)
 transit = radix.transit(newTransitData)
 ```
 
-Or use `.animate()` for a smooth animation between transit states (see [Animation Guide](/docs/guides/animation)).
+Or use `.animate()` for a smooth animation between transit states (see [Animation Guide](./animation)).
 
 ## API Reference
 
@@ -176,7 +176,7 @@ You need an ephemeris calculator (Swiss Ephemeris, Skyfield, etc.). AstroChart o
 
 ## Next Steps
 
-- **[Animation](/docs/guides/animation)** — Animate transits over time
-- **[Radix Chart Guide](/docs/guides/radix-chart)** — Learn more about natal charts
-- **[Custom Settings](/docs/guides/custom-settings)** — Customize colors and appearance
-- **[API Reference](/docs/api/transit)** — Full Transit API documentation
+- **[Animation](./animation)** — Animate transits over time
+- **[Radix Chart Guide](./radix-chart)** — Learn more about natal charts
+- **[Custom Settings](./custom-settings)** — Customize colors and appearance
+- **[API Reference](../api/transit)** — Full Transit API documentation
diff --git a/website/src/content/docs/installation.md b/website/src/content/docs/installation.md
@@ -81,9 +81,9 @@ No additional `@types/` package needed.
 | Browsers (modern) | ✅ Supported |
 | IE11 | ⚠️ Requires polyfills |
 | Mobile browsers | ✅ Supported |
-| React | ✅ See [React guide](/docs/guides/frameworks/react) |
-| Vue | ✅ See [Vue guide](/docs/guides/frameworks/vue) |
-| Angular | ✅ See [Angular guide](/docs/guides/frameworks/angular) |
+| React | ✅ See [React guide](./guides/frameworks/react) |
+| Vue | ✅ See [Vue guide](./guides/frameworks/vue) |
+| Angular | ✅ See [Angular guide](./guides/frameworks/angular) |
 
 ## Verification
 
@@ -98,6 +98,6 @@ console.log('AstroChart version:', version)
 
 ## Next Steps
 
-- **[Quick Start](/docs/quickstart)** — Render your first chart
-- **[API Reference](/docs/api/chart)** — Learn all available methods
-- **[Guides](/docs/guides/radix-chart)** — Explore common use cases
+- **[Quick Start](./quickstart)** — Render your first chart
+- **[API Reference](./api/chart)** — Learn all available methods
+- **[Guides](./guides/radix-chart)** — Explore common use cases
diff --git a/website/src/content/docs/introduction.mdx b/website/src/content/docs/introduction.mdx
@@ -88,10 +88,10 @@ Here's a basic radix chart rendered with AstroChart:
 
 ## Next Steps
 
-- **[Installation Guide](/docs/installation)** — Detailed setup instructions for npm, CDN, and more
-- **[Quick Start Guide](/docs/quickstart)** — A step-by-step walkthrough with examples
-- **[Radix Chart Guide](/docs/guides/radix-chart)** — Learn how to render complete natal charts
-- **[API Reference](/docs/api/chart)** — Complete documentation of all classes and methods
+- **[Installation Guide](./installation)** — Detailed setup instructions for npm, CDN, and more
+- **[Quick Start Guide](./quickstart)** — A step-by-step walkthrough with examples
+- **[Radix Chart Guide](./guides/radix-chart)** — Learn how to render complete natal charts
+- **[API Reference](./api/chart)** — Complete documentation of all classes and methods
 
 ## Browser Support
 
@@ -105,8 +105,8 @@ AstroChart is released under the **MIT License**. See the [GitHub repository](ht
 
 ## Contributing
 
-Found a bug? Have a feature request? We'd love your help! See the [Contributing Guide](/docs/contributing) for instructions.
+Found a bug? Have a feature request? We'd love your help! See the [Contributing Guide](./contributing) for instructions.
 
 ---
 
-Ready to dive in? [Get started now](/docs/quickstart).
+Ready to dive in? [Get started now](./quickstart).
diff --git a/website/src/content/docs/quickstart.mdx b/website/src/content/docs/quickstart.mdx
@@ -127,11 +127,11 @@ Here's a live example you can interact with:
 
 ## Next Steps
 
-- **[Radix Chart Guide](/docs/guides/radix-chart)** — Learn more about radix charts and all available planets
-- **[Transit Charts](/docs/guides/transit-chart)** — Add a transit ring to overlay current positions
-- **[Animation](/docs/guides/animation)** — Animate chart transitions
-- **[Custom Settings](/docs/guides/custom-settings)** — Customize colors, fonts, and more
-- **[API Reference](/docs/api/chart)** — See all available methods and options
+- **[Radix Chart Guide](./guides/radix-chart)** — Learn more about radix charts and all available planets
+- **[Transit Charts](./guides/transit-chart)** — Add a transit ring to overlay current positions
+- **[Animation](./guides/animation)** — Animate chart transitions
+- **[Custom Settings](./guides/custom-settings)** — Customize colors, fonts, and more
+- **[API Reference](./api/chart)** — See all available methods and options
 
 ## Troubleshooting
 
@@ -146,5 +146,5 @@ Here's a live example you can interact with:
 
 **Need help?**
 - [Open an issue on GitHub](https://github.com/AstroDraw/AstroChart/issues)
-- Check the [API Reference](/docs/api/chart)
-- See [Common Guides](/docs/guides/radix-chart)
+- Check the [API Reference](./api/chart)
+- See [Common Guides](./guides/radix-chart)
diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro
@@ -6,6 +6,7 @@ import StarlightPage from '@astrojs/starlight/components/StarlightPage.astro'
 import ChartDemo from '../components/ChartDemo.astro'
 import { readFileSync } from 'node:fs'
 import { resolve } from 'node:path'
+import { withBase } from '../utils/url'
 
 // Read version from package.json at build time
 const packageJsonPath = resolve(process.cwd(), '../package.json')
@@ -20,7 +21,7 @@ const version = packageJson.version
   hero: {
     tagline: 'A free and open-source JavaScript library for generating SVG astrology charts',
     actions: [
-      { text: 'Get Started', link: '/installation', icon: 'right-arrow', variant: 'primary' },
+      { text: 'Get Started', link: withBase('/installation'), icon: 'right-arrow', variant: 'primary' },
       { text: 'View on GitHub', link: 'https://github.com/AstroDraw/AstroChart', icon: 'external', variant: 'secondary' }
     ]
   }
@@ -35,7 +36,7 @@ const version = packageJson.version
 
     <!-- Version Badge -->
     <div class="version-badge">
-      <a href="/changelog">v{version}</a>
+      <a href={withBase('/changelog')}>v{version}</a>
     </div>
 
     <!-- Live Demo Section -->
@@ -118,7 +119,7 @@ chart.transit(transitData)</code></pre>
     <!-- CTA Footer -->
     <section class="cta-footer">
       <h2>Ready to get started?</h2>
-      <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>
+      <p>Check out the <a href={withBase('/installation')}>Installation guide</a> to add AstroChart to your project, or explore the <a href={withBase('/quickstart')}>Quick Start</a> to render your first chart in minutes.</p>
     </section>
 
   </div>
diff --git a/website/src/utils/url.ts b/website/src/utils/url.ts
@@ -0,0 +1,11 @@
+/**
+ * Returns `import.meta.env.BASE_URL` without a trailing slash, so it can
+ * be safely concatenated with a leading-slash path:
+ *
+ *   withBase('/installation')  →  '/AstroChart/installation'
+ *
+ * The base itself comes from `base` in astro.config.mjs — the only place
+ * that ever needs to change when the deployment URL changes.
+ */
+export const withBase = (path: string): string =>
+  `${import.meta.env.BASE_URL.replace(/\/$/, '')}${path}`
