fix(landing): stop mangling #hash fragments in localized links (#516)

This commit is contained in:
SnapOtter
2026-07-13 18:17:27 +08:00
committed by GitHub
parent 74e7d23aba
commit 5bd052286c
2 changed files with 31 additions and 3 deletions
+11 -3
View File
@@ -5,10 +5,18 @@ import { isRtl, LANDING_LOCALES } from "@/i18n";
/** Absolute site origin used for canonical + hreflang hrefs. */
export const SITE = "https://snapotter.com";
/** Prefix a path for a locale ("/faq" -> "/de/faq" for de, "/faq" for en). */
/**
* Prefix a path for a locale ("/faq" -> "/de/faq" for de, "/faq" for en).
* A trailing "#hash" is split off first and reattached untouched, since
* Astro's URL builder would otherwise treat it as part of the path and
* mangle it with a trailing slash (e.g. "/#pricing" -> "/#pricing/").
*/
export function localizeHref(locale: string, path: string): string {
const clean = path.startsWith("/") ? path.slice(1) : path;
return getRelativeLocaleUrl(locale, clean);
const hashIndex = path.indexOf("#");
const pathname = hashIndex === -1 ? path : path.slice(0, hashIndex);
const hash = hashIndex === -1 ? "" : path.slice(hashIndex);
const clean = pathname.startsWith("/") ? pathname.slice(1) : pathname;
return `${getRelativeLocaleUrl(locale, clean)}${hash}`;
}
/** Direction attribute for the current locale. */
+20
View File
@@ -127,4 +127,24 @@ test.describe("Cross-Page Navigation", () => {
const enterpriseCta = page.getByRole("link", { name: /Let.s talk/ }).first();
await expect(enterpriseCta).toHaveAttribute("href", "/contact");
});
test("navbar Pricing link scrolls to the pricing section", async ({ page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
const pricingLink = page.locator("nav").getByRole("link", { name: "Pricing" });
await expect(pricingLink).toHaveAttribute("href", "/#pricing");
await pricingLink.click();
await expect(page).toHaveURL(/\/#pricing$/);
await expect(page.locator("#pricing")).toBeInViewport();
});
test("navbar Enterprise link scrolls to the enterprise section", async ({ page }) => {
await page.goto("/");
await page.waitForLoadState("networkidle");
const enterpriseLink = page.locator("nav").getByRole("link", { name: "Enterprise" });
await expect(enterpriseLink).toHaveAttribute("href", "/#enterprise");
await enterpriseLink.click();
await expect(page).toHaveURL(/\/#enterprise$/);
await expect(page.locator("#enterprise")).toBeInViewport();
});
});