Skip to content
This repository has been archived by the owner on Jan 11, 2023. It is now read-only.

Support for dynamically setting the lang attribute #1695

Closed
wants to merge 1 commit into from
Closed

Support for dynamically setting the lang attribute #1695

wants to merge 1 commit into from

Conversation

ehrencrona
Copy link
Contributor

@ehrencrona ehrencrona commented Jan 12, 2021 •
edited
Loading

Currently the lang attribute in the html tag is hard-coded in template.html. This makes it impossible to build multi-language sites with Sapper.

This PR allows routes to export a lang function in addition to preload. It gets the same path information as preload and returns a language code to use for the page. The most specific component wins.

See discussion in #576

I know Sapper is currently in maintenance mode and that this is tied up in the much larger internationalization question, but this feels like a fairly straightforward extension. At Hyperlab we are currently building two multi-language sites. Without the ability to determine the language dynamically we would need to fork Sapper.

Before submitting the PR, please make sure you do the following

  • It's really useful if your PR references an issue where it is discussed ahead of time. In many cases, features are absent for a reason. For large changes, please create an RFC: https://github.com/sveltejs/rfcs
  • This message body should clearly illustrate what problems it solves.
  • Ideally, include a test that fails without this PR but passes with it.

Tests

  • Run the tests with npm test and lint the project with npm run lint

@benmccann
Copy link
Member

There are three PRs open for dynamically updating the template (most recently #1642). I wonder if coming up with a good solution there might be a more generic solution to a wider class of issues

@benmccann
Copy link
Member

Actually, do we even need to do anything or is this already supported?

<svelte:head>
	<html lang="sw" />
</svelte:head>

@ehrencrona
Copy link
Contributor Author

@benmccann That will create an html tag inside head, but it's the very top-level html tag we want to modify. If it wasn't, it would indeed be easier.

@benmccann
Copy link
Member

Ah, you're right. I saw someone posted that as an example, so assumed it worked 😛 How about doing something like this?

onMount(() => {
  document.documentElement.lang = 'sw';
});

@ehrencrona
Copy link
Contributor Author

How about doing something like this?

onMount(() => {
  document.documentElement.lang = 'sw';
});

That will work on the client side, but for the benefit of Google indexing in the correct language we need to be able to serve the correct language from the server side.

I guess it would be another road towards implementing support, though, to offer a document object on the server side, which per se might not be unreasonable.

@pixelmund pixelmund mentioned this pull request Mar 24, 2021
Closed
5 tasks
@benmccann
Copy link
Member

Thanks for this PR!! I don't think we'll be adding anything new to Sapper at this point, but this now exists in SvelteKit! sveltejs/kit#670

@benmccann benmccann closed this Mar 25, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers
No reviews
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@ehrencrona @benmccann