[WIP] I18n translations to EN and PT-BR #22
Conversation
|
@thiagobutignon is attempting to deploy a commit to the Amantus Machina Team on Vercel. A member of the Team first needs to authorize it. |
![vercel[bot]](https://avatars.githubusercontent.com/in/8329?s=60&v=4){kind=small}
There was a problem hiding this comment.
Additional Suggestion:
The canonical URL is hardcoded to the English home page, which is incorrect for localized pages and can cause SEO issues with duplicate content detection.
View Details
📝 Patch Details
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5000ebd..d066866 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,6 +10,19 @@ interface Props {
const { title, description = "Moltbot — The AI that actually does things. Your personal assistant on any platform." } = Astro.props;
const locale = getLocale();
+// Construct canonical URL: use locale to prepend path if not default locale
+let canonicalUrl = Astro.url.href;
+// For non-default locales, prepend the locale to the pathname
+if (locale !== 'en') {
+ const urlObj = new URL(Astro.url.href);
+ const pathname = urlObj.pathname;
+ // Only prepend if not already there
+ if (!pathname.startsWith(`/${locale}/`)) {
+ const newPathname = pathname === '/' ? `/${locale}/` : `/${locale}${pathname}`;
+ urlObj.pathname = newPathname;
+ canonicalUrl = urlObj.href;
+ }
+}
---
<!doctype html>
@@ -22,13 +35,13 @@ const locale = getLocale();
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
- <link rel="canonical" href="https://molt.bot/" />
+ <link rel="canonical" href={canonicalUrl} />
<!-- Open Graph -->
<meta property="og:title" content={title} />
<meta property="og:description" content={description} />
<meta property="og:type" content="website" />
- <meta property="og:url" content="https://molt.bot/" />
+ <meta property="og:url" content={canonicalUrl} />
<meta property="og:image" content="https://molt.bot/og-image.png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Analysis
Hardcoded canonical URL causes SEO issues for localized pages
What fails: Every page in the site, including Portuguese translations at /pt-br/* paths, has a hardcoded canonical URL pointing to https://molt.bot/ (the English home page), which violates SEO best practices for localized content.
How to reproduce:
npm run build
grep 'canonical' dist/pt-br/index.html
grep 'canonical' dist/pt-br/integrations/index.htmlResult (before fix):
/pt-br/index.htmlhad<link rel="canonical" href="https://molt.bot/" />/pt-br/integrations/index.htmlhad<link rel="canonical" href="https://molt.bot/" />- All other pages also pointed to the same hardcoded URL
Expected (per Astro SEO documentation and Google's canonical URL guidelines):
/pt-br/index.htmlshould have<link rel="canonical" href="https://clawd.bot/pt-br/" />/pt-br/integrations/index.htmlshould have<link rel="canonical" href="https://clawd.bot/pt-br/integrations" />- Each localized page should have a canonical URL matching its own actual URL
Result (after fix):
- Canonical URLs are now dynamically generated based on the current page and locale
- Portuguese pages correctly include the
/pt-br/prefix in their canonical URLs - English pages remain at the root paths without the locale prefix (per
prefixDefaultLocale: falseconfig) - Open Graph
og:urlmeta tags are also dynamically set to match the canonical URL
| <a href="/" class={locale === 'en' ? 'active' : ''} aria-current={locale === 'en' ? 'page' : undefined}>EN</a> | ||
| <span class="separator">/</span> | ||
| <a href="/pt-br" class={locale === 'pt-br' ? 'active' : ''} aria-current={locale === 'pt-br' ? 'page' : undefined}>PT</a> |
There was a problem hiding this comment.
The language switcher links are hardcoded to / and /pt-br, causing users to lose their current page context when switching languages. For example, clicking the language switcher on /integrations takes you to /pt-br instead of /pt-br/integrations.
View Details
📝 Patch Details
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
index 5000ebd..7fdda83 100644
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -10,6 +10,18 @@ interface Props {
const { title, description = "Moltbot — The AI that actually does things. Your personal assistant on any platform." } = Astro.props;
const locale = getLocale();
+
+// Generate language-aware switcher URLs
+const currentPathname = Astro.url.pathname;
+
+// Remove locale prefix from current pathname
+const pathWithoutLocale = locale === 'pt-br'
+ ? currentPathname.replace(/^\/pt-br/, '') || '/'
+ : currentPathname;
+
+// Build new language URLs
+const enUrl = pathWithoutLocale === '/' ? '/' : pathWithoutLocale;
+const ptUrl = pathWithoutLocale === '/' ? '/pt-br' : `/pt-br${pathWithoutLocale}`;
---
<!doctype html>
@@ -109,9 +121,9 @@ const locale = getLocale();
<!-- Language Switcher -->
<div class="language-switcher">
- <a href="/" class={locale === 'en' ? 'active' : ''} aria-current={locale === 'en' ? 'page' : undefined}>EN</a>
+ <a href={enUrl} class={locale === 'en' ? 'active' : ''} aria-current={locale === 'en' ? 'page' : undefined}>EN</a>
<span class="separator">/</span>
- <a href="/pt-br" class={locale === 'pt-br' ? 'active' : ''} aria-current={locale === 'pt-br' ? 'page' : undefined}>PT</a>
+ <a href={ptUrl} class={locale === 'pt-br' ? 'active' : ''} aria-current={locale === 'pt-br' ? 'page' : undefined}>PT</a>
</div>
<style>
Analysis
Language switcher loses page context when switching languages
What fails: The language switcher in src/layouts/Layout.astro (lines 112-114) uses hardcoded URLs that always navigate to the home page instead of preserving the current page path when switching languages.
How to reproduce:
- Navigate to any non-home page (e.g.,
/integrations,/showcase) - Click the "PT" language switcher link
- You are taken to
/pt-br(home) instead of/pt-br/integrationsor/pt-br/showcase
Actual behavior: Clicking "PT" on /integrations navigates to /pt-br instead of /pt-br/integrations
Expected behavior: Language switcher should preserve the current page path while changing the language prefix, so /integrations + PT click = /pt-br/integrations
Root cause: Language switcher links were hardcoded as href="/" for EN and href="/pt-br" for PT, ignoring the current page pathname.
Fix applied: Modified src/layouts/Layout.astro to:
- Extract the current pathname using
Astro.url.pathname - Remove the locale prefix if present (for PT-BR pages)
- Build new URLs with the appropriate locale prefix for each language
- Updated the switcher links to use the computed
enUrlandptUrlvariables instead of hardcoded values
Verification: All pages now correctly preserve their path when switching languages:
/integrations+ PT =/pt-br/integrations✓/pt-br/integrations+ EN =/integrations✓/showcase+ PT =/pt-br/showcase✓/pt-br/showcase+ EN =/showcase✓
2 participants
I refactor the frontend to accept English and Brazilian Portuguese.
The used Paraglide.JS to do the translations and create a component to choose from EN to PT-BR. It's possible to translate to another languages later.