cworld1 · agsoto · Nov 11, 2025 · Nov 11, 2025 · Nov 13, 2025 · Nov 21, 2025
diff --git a/astro.config.ts b/astro.config.ts
@@ -5,6 +5,7 @@ import { defineConfig, fontProviders } from 'astro/config'
 import rehypeKatex from 'rehype-katex'
 import remarkMath from 'remark-math'
 
+const DEFAULT_LOCALE = 'en'
 // Local integrations
 import rehypeAutolinkHeadings from './src/plugins/rehype-auto-link-headings.ts'
 // Shiki
@@ -22,6 +23,10 @@ import {
 } from './src/plugins/shiki-official/transformers.ts'
 import config from './src/site.config.ts'
 
+// Others
+// import { visualizer } from 'rollup-plugin-visualizer'
+
+
 // https://astro.build/config
 export default defineConfig({
   // [Basic]
@@ -35,9 +40,12 @@ export default defineConfig({
 
   // [Adapter]
   // https://docs.astro.build/en/guides/deploy/
-  adapter: vercel(),
-  output: 'server',
-  // Local (standalone)
+  // 1. Vercel (serverless)
+  // adapter: vercel(),
+  output: 'static',
+  // 2. Vercel (static)
+  // adapter: vercelStatic(),
+  // 3. Local (standalone)
   // adapter: node({ mode: 'standalone' }),
   // output: 'server',
 
@@ -128,5 +136,28 @@ export default defineConfig({
         subsets: ['latin']
       }
     ]
+  },
+  i18n: {
+    locales: [DEFAULT_LOCALE, 'zh', 'es'],
+    defaultLocale: DEFAULT_LOCALE,
+    fallback: {
+      // es: DEFAULT_LOCALE,
+      // zh: DEFAULT_LOCALE
+    },
+    routing: {
+      fallbackType: 'rewrite'
+    }
+  },
+  vite: {
+    plugins: [
+      //   visualizer({
+      //     emitFile: true,
+      //     filename: 'stats.html'
+      //   })
+    ],
+    optimizeDeps: {
+      // Prebundle CommonJS-only browser build to fix default export error
+      include: ['picocolors']
+    }
   }
 })
diff --git a/packages/pure/components/basic/Footer.astro b/packages/pure/components/basic/Footer.astro
@@ -1,6 +1,9 @@
 ---
+import { getRelativeLocaleUrl } from 'astro:i18n'
 import config from 'virtual:config'
 
+import { isAbsoluteUrl } from 'astro-pure/utils'
+
 import { Icon } from '../user'
 
 const footerConf = config.footer
@@ -10,7 +13,7 @@ let social = footerConf.social || {}
 if (!social.rss)
   social.rss = {
     label: 'RSS',
-    url: '/rss.xml'
+    url: getRelativeLocaleUrl(Astro.currentLocale as string, '/rss.xml')
   }
 
 const footerLink1 = footerConf.links?.filter(({ pos }) => pos === 1) || []
@@ -20,50 +23,73 @@ const footerLink1 = footerConf.links?.filter(({ pos }) => pos === 1) || []
   <div class='border-t pt-5'>
     <div class='flex items-center gap-y-3 max-sm:flex-col sm:justify-between sm:gap-y-0'>
       <div class='flex items-center gap-x-4 gap-y-2 text-muted-foreground max-sm:flex-col'>
-        { /* Position 1 */
-          footerLink1.length > 0 && (
-            <div>
-              {footerLink1.map(({ title, link, style }, index) => (
+        <slot name="footer-links">
+          { /* Position 1 */
+            footerLink1.length > 0 && (
+              <div>
+                {footerLink1.map(({ title, link, style }, index) => (
+                  <>
+                    <!- prettier-ignore -->
+                    <a
+                      href={
+                        isAbsoluteUrl(link)
+                          ? link
+                          : getRelativeLocaleUrl(Astro.currentLocale as string, link)
+                      }
+                      target='_blank'
+                      class={style}
+                    >
+                      {title}
+                    </a>
+                    {index < footerLink1.length - 1 && <span class='mx-1'>•</span>}
+                  </>
+                ))}
+              </div>
+            )
+          }
+          {/* Position 2 */}
+          <div>
+            {config.footer.year}
+            {config.author}
+            {
+              footerConf.links && footerConf.links.length > 0 && (
                 <>
-                  <!- prettier-ignore -->
-                  <a href={link} target='_blank' class={style}>{title}</a>
-                  {index < footerLink1.length - 1 && <span class='mx-1'>•</span>}
+                  &
+                  <span>
+                    {footerConf.links
+                      .filter(({ pos }) => pos === 2)
+                      .map(({ title, link, style }) => (
+                        <span>
+                          <a
+                            href={
+                              isAbsoluteUrl(link)
+                                ? link
+                                : getRelativeLocaleUrl(Astro.currentLocale as string, link)
+                            }
+                            target='_blank'
+                            class={style}
+                          >
+                            {title}
+                          </a>
+                        </span>
+                      ))}
+                  </span>
                 </>
-              ))}
-            </div>
-          )
-        }
-        {/* Position 2 */}
-        <div>
-          {config.footer.year}
-          {config.author}
+              )
+            }
+          </div>
+
           {
-            footerConf.links && footerConf.links.length > 0 && (
-              <>
+            footerConf.credits && (
+              <span>
+                <a href='https://github.com/withastro/astro' target='_blank'>Astro</a>
                 &
-                <span>
-                  {footerConf.links
-                    .filter(({ pos }) => pos === 2)
-                    .map(({ title, link, style }) => (
-                      <span>
-                        <a href={link} target='_blank' class={style}>{title}</a>
-                      </span>
-                    ))}
-                </span>
-              </>
+                <a href='https://github.com/cworld1/astro-theme-pure' target='_blank'>Pure</a>
+                theme powered
+              </span>
             )
           }
-        </div>
-        {
-          footerConf.credits && (
-            <span>
-              <a href='https://github.com/withastro/astro' target='_blank'>Astro</a>
-              &
-              <a href='https://github.com/cworld1/astro-theme-pure' target='_blank'>Pure</a>
-              theme powered
-            </span>
-          )
-        }
+        </slot>
       </div>
 
       {/* Social Brands */}

diff --git a/packages/pure/components/basic/Header.astro b/packages/pure/components/basic/Header.astro
@@ -1,19 +1,27 @@
 ---
+import { getRelativeLocaleUrl } from 'astro:i18n'
 import config from 'virtual:config'
-
+import { isAbsoluteUrl } from 'astro-pure/utils'
+import { resolveMenu } from '../../utils/locale'
 import { Icon } from '../user'
+import LanguageSwitch from './LanguageSwitch.astro'
+
+const menu = resolveMenu(config.header.menu, Astro.currentLocale, Astro.url?.pathname)
+
+const currentLocale = Astro.currentLocale as string
 ---
 
-<header-component
+<header-component current-locale={currentLocale}
   class='group sticky top-4 z-50 max-md:z-30 mb-12 flex items-center justify-between rounded-xl border border-transparent max-sm:py-1 sm:rounded-2xl'
 >
-  <a
-    class='z-30 text-xl font-medium group-[.not-top]:ms-2 sm:group-[.not-top]:ms-3'
-    style='transition:margin-inline 0.3s'
-    href='/'
+  <slot name='branding'>
+    <a
+      class='z-30 text-xl font-medium group-[.not-top]:ms-2 sm:group-[.not-top]:ms-3'
+      style='transition:margin-inline 0.3s'
+      href={getRelativeLocaleUrl(Astro.currentLocale as string)}
     aria-label='Brand'>{config.title}</a
   >
-
+  </slot>
   <div class='flex items-center gap-x-2'>
     {/* Menu links */}
     <div
@@ -22,18 +30,27 @@ import { Icon } from '../user'
     >
       <div class='flex flex-col items-center justify-center overflow-hidden sm:flex-row'>
         {
-          config.header.menu.map((item) => (
+          menu.map((item) => (
             <a
-              href={item.link}
+              href={
+                isAbsoluteUrl(item.link)
+                  ? item.link
+                  : getRelativeLocaleUrl(Astro.currentLocale as string, item.link)
+              }
               class='w-full flex-none grow py-2 text-right font-medium transition-none hover:text-primary sm:w-fit sm:px-3'
               aria-label='Nav menu item'
             >
               {item.title}
             </a>
           ))
         }
+        <slot name='extra-actions' />
         <div class='flex w-full grow flex-row justify-end gap-x-3 sm:w-fit sm:gap-x-5'>
-          <a class='px-1 py-2 transition-none sm:px-2' href='/search' title='Search'>
+          <a
+            class='px-1 py-2 transition-none sm:px-2'
+            href={getRelativeLocaleUrl(Astro.currentLocale as string, '/search')}
+            title='Search'
+          >
             <span class='sr-only'>Search</span>
             <Icon name='search' class='size-5' />
           </a>
@@ -43,25 +60,27 @@ import { Icon } from '../user'
 
     {/* buttons */}
     <div class='z-30 flex gap-x-4 group-[.not-top]:gap-x-2' style='transition:gap 0.3s'>
-      <button
-        id='toggleDarkMode'
-        class='group/dark box-content size-5 rounded-md border p-1.5 transition-colors hover:bg-border sm:group-[.not-top]:rounded-xl'
-      >
-        <span class='sr-only'>Dark Theme</span>
-        <Icon class='system size-5 group-hover/dark:text-primary' name='computer' />
-        <Icon class='light hidden size-5 group-hover/dark:text-primary' name='sun' />
-        <Icon class='dark hidden size-5 group-hover/dark:text-primary' name='moon' />
-      </button>
-      <button
-        id='toggleMenu'
-        class='rounded-md border p-1.5 transition-colors hover:bg-border sm:hidden sm:group-[.not-top]:rounded-xl'
-      >
-        <span class='sr-only'>Menu</span>
-        <Icon class='size-5' name='menu' />
-      </button>
+      <slot name='extra-buttons'>
+        <LanguageSwitch />
+        <button
+          id='toggleDarkMode'
+          class='group/dark box-content size-5 rounded-md border p-1.5 transition-colors hover:bg-border sm:group-[.not-top]:rounded-xl'
+        >
+          <span class='sr-only'>Dark Theme</span>
+          <Icon class='system size-5 group-hover/dark:text-primary' name='computer' />
+          <Icon class='light hidden size-5 group-hover/dark:text-primary' name='sun' />
+          <Icon class='dark hidden size-5 group-hover/dark:text-primary' name='moon' />
+        </button>
+        <button
+          id='toggleMenu'
+          class='rounded-md border p-1.5 transition-colors hover:bg-border sm:hidden sm:group-[.not-top]:rounded-xl'
+        >
+          <span class='sr-only'>Menu</span>
+          <Icon class='size-5' name='menu' />
+        </button>
+      </slot>
     </div>
   </div>
-</header-component>
 
 {/* Use inline to load icon quicker firstly */}
 <script is:inline>
@@ -71,10 +90,13 @@ import { Icon } from '../user'
   }
 </script>
 <script>
-  import { setTheme, showToast } from '../../utils'
-
+  import { setTheme, showToast, useTranslations } from '../../utils'
+  
   class HeaderComponent extends HTMLElement {
     connectedCallback() {
+      const currentLocale = this.getAttribute('current-locale') || 'en'
+      const { t } = useTranslations('common', currentLocale)
+
       // Header
       let preScrollY = window.scrollY
       this.classList.toggle('not-top', preScrollY > 20)
@@ -94,7 +116,7 @@ import { Icon } from '../user'
         // document.dispatchEvent(toggleDarkModeEvent)
         const newTheme = setTheme(undefined, true)
         darkModeBtn.dataset.theme = newTheme
-        showToast({ message: `Set theme to ${newTheme}` })
+        showToast({ message: `${t('theme.set_message')} ${t('theme.' + newTheme)}` })
       })
 
       // Menu
@@ -206,3 +228,4 @@ import { Icon } from '../user'
     }
   }
 </style>
+</header-component>