-
Notifications
You must be signed in to change notification settings - Fork 72
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Gatsby Head API support? #150
Comments
A workaround that I found, that does not use 'useTranslation' export const Head = ({ data }: HeadProps<any>) => {
const locales = data.locales.edges[0].node.data;
let obj: any = undefined;
if (locales) {
obj = JSON.parse(locales);
}
return <title>{ obj?.title }</title>;
}; |
@h600878 thank you for this workaround ... I'm hoping the useTranslation will be fixed with the Head API though ... it will be more readable, and we can use the entire message as keys (nice feature of gatsby-plugin-react-i18next) |
I hope the usei18next will be work on the Head API soon. |
@h600878 thank you so much for your snippet! |
BTW, when using templated strings such as: {
"welcome_message": "Welcome, {{name}}!"
} It helps to use: String.prototype.format = function () {
var i = 0, args = arguments
return this.replace(/{{.*}}/g, function () {
return typeof args[i] != 'undefined' ? args[i++] : ''
})
} So, for instance: return <title>{ obj?.welcome_message.format('Bob') }</title>; Outputs:
Note: the |
Are there any current plans to support the Gatsby Head API in the future? What is the specific problem that this is not supported? As it is now, almost no i18n SEO support is possible 😕. @h600878's solution is more of a hack than a solution... |
true! |
The problem is the "place" where the I18next react context is declared, right? For declaration the
Is it an option to just use |
For me the problem was not using the Head API inside a "Page" i.e. a file under /pages. Read "Usage Notes" carefully https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-head/#usage-notes |
Can we also handle |
If you have multiple namespaces, quite hacky but works. you can use this:
|
Is it possible to use translations with Gatsby's Head API?
I tried to just use the
useTranslation
hook, but it doesn't seem to find any translations:For example:
That just resulted in the page title getting set to
home.title
even though the page itself got the correct translation…The text was updated successfully, but these errors were encountered: