Skip to content

feat: localised page title#62

Open
maanlamp wants to merge 10 commits intomainfrom
feature/localised-page-titles
Open

feat: localised page title#62
maanlamp wants to merge 10 commits intomainfrom
feature/localised-page-titles

Conversation

@maanlamp
Copy link
Copy Markdown
Collaborator

@maanlamp maanlamp commented May 7, 2026

Closes #48.

Replaces hook-based title management with TanStack Router's head() API and adds full i18n URL routing.

Page titles
Page titles are now set via head() on each route and rendered by <HeadContent /> in the root layout. A makePageTitle helper (src/lib/title.ts) appends · Template to every title, with the app name and delimiter configurable at the top of that file.

Localised URL segments
Auth routes are translated per locale via urlPatterns in the Paraglide Vite plugin:

Route nl-NL en-US
/login /inloggen /login
/forgot-password /wachtwoord-vergeten /forgot-password

deLocalizeUrl/localizeUrl in router.tsx automatically map these to TanStack Router's internal paths.

Root route head

  • beforeLoad calls shouldRedirect() to redirect first-time visitors to their locale-specific URL.
  • head() injects <link rel="canonical"> pointing to the nl-NL (base locale) version of every page.

Visuals

image
Notice the tab is showing the English title, URL and content

@maanlamp maanlamp requested a review from publicJorn as a code owner May 7, 2026 11:37
@maanlamp maanlamp requested a review from Atchferox May 7, 2026 11:43
Comment thread src/routes/__root.tsx Outdated
Chippr-Wouter

This comment was marked as resolved.

@maanlamp

This comment was marked as resolved.

Comment thread src/components/header/app-header.tsx Outdated
Comment thread src/lib/title-state.tsx Outdated
Comment thread src/routes/_app/index.tsx
@maanlamp
Copy link
Copy Markdown
Collaborator Author

maanlamp commented May 8, 2026

Alright, thanks for the feedback everyone; message received 😅. I've removed all of the "fancy" stuff, and have just left the static translated page titles.

I did look into how translating the actual url works, and its... not great. What do we think? Also too much for this PR?

		plugins: [
			paraglideVitePlugin({
				project: "./project.inlang",
				outdir: "./src/lib/paraglide",
				strategy: ["url", "localStorage", "baseLocale"],
				emitTsDeclarations: true,
				urlPatterns: [
					{
						pattern: "/login",
						localized: [
							["en-US", "/login"],
							["nl-NL", "/inloggen"],
						],
					},
					{
						pattern: "/forgot-password",
						localized: [
							["en-US", "/forgot-password"],
							["nl-NL", "/wachtwoord-vergeten"],
						],
					},
				],
			}),
		]

@maanlamp maanlamp requested a review from publicJorn May 8, 2026 08:39
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should gitignore the .claude folder, and place the claude.md in the project root.

Comment thread vite.config.ts
Comment on lines +22 to +37
urlPatterns: [
{
pattern: "/login",
localized: [
["en-US", "/login"],
["nl-NL", "/inloggen"],
],
},
{
pattern: "/forgot-password",
localized: [
["en-US", "/forgot-password"],
["nl-NL", "/wachtwoord-vergeten"],
],
},
],
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels like a lot to maintain, maybe we should do something with this https://inlang.com/m/gerre34r/library-inlang-paraglideJs/tanstack-router#typesafe-translated-pathnames

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace custom title util with tanstack router static route data

4 participants