fix: relative paths in different environments

Author: ourai

astro.config.mjs

@@ -12,4 +12,9 @@ export default defineConfig({
     defaultLocale: 'en',
     locales: ['en', 'zh'],
   },
+  ...(process.env.NODE_ENV === 'production' ? {
+    site: 'https://openbuildxyz.github.io/',
+    base: 'eco',
+    trailingSlash: 'never',
+  } : undefined),
 });

src/components/Header.astro

@@ -10,19 +10,22 @@ interface Props {
 const { hideNavs = false } = Astro.props;
 const locale = (Astro.currentLocale || 'en') as 'en' | 'zh';
 const i18n = I18N_CONFIG[locale];
-const getLocaleUrl = getRelativeLocaleUrl.bind(null, locale);
+const baseUrl = import.meta.env.BASE_URL;
+const getLocaleUrl = (path: string) => getRelativeLocaleUrl(locale, path, baseUrl ? { prependWith: baseUrl } : undefined);
 ---
 
 <header>
   <nav>
     <h2><a href={getLocaleUrl('/')}>{i18n.site.title}</a></h2>
-    {hideNavs !== true && (
+    {hideNavs !== true ? (
       <div class="internal-links">
         <HeaderLink href={getLocaleUrl('/')}>{i18n.navs.home}</HeaderLink>
         <HeaderLink href={getLocaleUrl('/projects')}>{i18n.navs.projects}</HeaderLink>
         <HeaderLink href={getLocaleUrl('/contributing')}>{i18n.navs.contributing}</HeaderLink>
         <HeaderLink href={getLocaleUrl('/about')}>{i18n.navs.about}</HeaderLink>
       </div>
+    ) : (
+      <div style="min-height: 78px;"></div>
     )}
   </nav>
 </header>