0.0.1 • Published 3 years ago
sanity2i18n v0.0.1
Sanity to i18n
Sanity to i18n
will pull data from Sanity according to your schema definition and will output an appropriate i18n in an opinionated way.
Useful for:
- Compile time applications
- Enable non developers to edit application texts
- Offline availability
Example
some-schema.js
{
name: 'loginScreen',
title: 'Login Screen',
type: 'document',
fields: [
{
name: 'title',
title: 'Title',
type: 'localeString'
},
{
name: 'confirmBtn',
title: 'Confirm Button',
type: 'localeString'
}
]
}
frontend.js
import sanity2i18n from 'sanity2i18n';
import i18next from 'i18next';
// load your envs
const envs = {
projectId: process.env.SANITY_PROJECT_ID,
dataset: process.env.SANITY_DATASET,
token: process.env.SANITY_TOKEN,
useCdn: false
};
// sanity2i18n() will fetch and parse your texts
const resources =
await sanity2i18n({
schemas: [ schema1, schema2, ... ],
languages: ['en', 'pt', ... ],
envs
});
// initialize i18next with the parsed resources
const t =
await i18next.init({
lng: 'en',
resources
});
const title = t('loginScreen.title');
const confirmBtn = t('loginScreen.confirmBtn');
Installation
Add the github package registry to your package-manager. For example, using yarn you would:
.yarnrc
registry=https://registry.yarnpkg.com/
"@mimoo-tech:registry" "https://npm.pkg.github.com"
Then run:
$ yarn add @mimoo-tech/sanity2i18n
Definitions
The parsing assumes a couple of opinionated definitions as shown bellow.
You should have the type localeString
defined as:
localeString.js
const supportedLanguages = [
{ id: 'en', title: 'English', isDefault: true },
{ id: 'pt', title: 'Portuguese' },
{ id: 'es', title: 'Spanish' }
]
export default {
name: 'localeString',
type: 'object',
fieldsets: [
{
title: 'Translations',
name: 'translations',
options: { collapsible: true }
}
],
fields: supportedLanguages.map(lang => (
{
title: lang.title,
name: lang.id,
type: 'string',
fieldset: lang.isDefault ? null : 'translations'
}
))
}
Schemas should have the following structure:
{
name: 'page1',
title: 'Page 1 Editor Name',
type: 'document',
fields: [
{
name: 'field1',
title: 'Field 1 Editor Name',
type: 'localeString'
},
{
name: 'field2',
title: 'Field 2 Editor Name',
type: 'localeString'
},
...
]
}
And after having the i18next object initialized you can recover the transation with:
const field1 = t('page1.field1');
const field2 = t('page1.field2');
Contributing
Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
Please make sure to update tests as appropriate.
License
0.0.1
3 years ago