# sanity-plugin-intl-input-manual-structure

> [![npm version](https://img.shields.io/npm/v/sanity-plugin-intl-input.svg?style=flat)](https://www.npmjs.com/package/sanity-plugin-intl-input)

Latest version **3.1.2** (published 2020-04-08) · MIT license · 0 weekly downloads

## Install

```sh
npm install sanity-plugin-intl-input-manual-structure
pnpm add sanity-plugin-intl-input-manual-structure
yarn add sanity-plugin-intl-input-manual-structure
bun add sanity-plugin-intl-input-manual-structure
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.2 |
| Published | 2020-04-08 |
| First published | 2020-04-08 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 4 |
| Unpacked size | 3.7 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 111 |
| Author | Liam Martens |
| Maintainers | liammartens |
| Keywords | sanity, cms, headless, realtime, content, sanity-plugin, i18n, localization |

## Links

- npm: https://www.npmjs.com/package/sanity-plugin-intl-input-manual-structure
- Repository: https://github.com/LiamMartens/sanity-plugin-intl-input
- Homepage: https://github.com/LiamMartens/sanity-plugin-intl-input#readme
- Issues: https://github.com/LiamMartens/sanity-plugin-intl-input/issues
- npm.io page: https://npm.io/package/sanity-plugin-intl-input-manual-structure

## Dependencies (4)

- [slugify](https://npm.io/package/slugify.md) ^1.4.0
- [classnames](https://npm.io/package/classnames.md) ^2.2.6
- [lodash.get](https://npm.io/package/lodash.get.md) ^4.4.2
- [regenerator-runtime](https://npm.io/package/regenerator-runtime.md) ^0.13.3

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 3.1.2 (latest) — 2020-04-08
- 3.1.1 — 2020-04-08
- 3.1.0 — 2020-04-08

## README

# Intl plugin for Sanity
[![npm version](https://img.shields.io/npm/v/sanity-plugin-intl-input.svg?style=flat)](https://www.npmjs.com/package/sanity-plugin-intl-input)

## What is this branch?
This is to solve a problem where you have conflicting desk structures.
### How to implement
```javascript
const {
    default: defaultStructure,
    getDefaultDocumentNode,
    getDocumentNodeViewsForSchemaType,
    getFilteredDocumentTypeListItems
} = require('sanity-plugin-intl-input/lib/structure');

// simpy re-exporting
module.exports.getDefaultDocumentNode = getDefaultDocumentNode;
module.exports.default = defaultStructure;

// or manual implementation
module.exports.getDefaultDocumentNode = (props) => {
    if (props.schemaType === 'myschema') {
        return S.document().views(getDocumentNodeViewsForSchemaType(props.schemaType));
    }
    return S.document();
};

module.exports.default = () => {
    const items = getFilteredDocumentTypeListItems();
    return S.list()
        .id('__root__')
        .title('Content')
        .items(items);
}
```

## Default solution
When you want to create translations in Sanity they suggest [following approach](https://www.sanity.io/docs/localization).  
This definitely works, but makes the UI very clunky as you get more fields that require translations.  

![Default Solution](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-intl-input/master/doc/img/default-solution.gif)  

## With intl-plugin
With the intl plugin you will get a cleaner UI for creating translatable documents as the translation is managed across multiple fields and it is even possible to manage document wide translations.  

### Simple translated object field
![Intl Plugin Input](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-intl-input/master/doc/img/intl-plugin.gif)  

### Document wide translation
![Intl Plugin Document Translation](https://raw.githubusercontent.com/LiamMartens/sanity-plugin-intl-input/master/doc/img/intl-plugin-document.gif)  

## How to install
1. Install the plugin using `npm`, `yarn` or the sanity cli
`yarn add sanity-plugin-intl-input`
`sanity install intl-input`
2. Add the plugin in the `sanity.json` of your project
```
{
  "root": true,
  "project": {
    "name": "..."
  },
  "plugins": [
    "...",
    "intl-input" // <--
  ]
}
```

## How to use
### Intl object input
Enable translations for your object type field which will contain all the translatable fields in your document type.  
```javascript
export default {
    type: 'document',
    name: '...',
    title: '...',
    fields: [{
        name: '...',
        title: '...',
        type: 'object',
        options: {
            i18n: true, // enables localization
            base: '', // (OPTIONAL) id of the base language (if not passed the first one is considered base language)
            languages: ['..', '..', ...], // <-- eg. ['en', 'nl']
            css: (classNames) => ``, // (OPTIONAL) function to apply additional CSS for theming purposes. The classNames argument is an object with the css module classnames.
            messages: { // (OPTIONAL) You can pass a messages object to override the default messsages shown
              loading: 'Loading languages...',
              missingTranslations: 'Missing translations message...',
            },
        },
        fields: []
    }]
}
```

### Intl for complete document
You can simply enable translations for your document type using the `i18n` parameter.
```javascript
export default {
    type: 'document',
    name: '...',
    title: '...',
    i18n: {
      base: '', // (OPTIONAL) id of the base language (if not passed the first one is considered base language)
      languages: ['..', '..', ...], // <-- eg. ['en', 'nl']
      messages: { // (OPTIONAL) You can pass a messages object to override the default messsages shown
        loading: 'Loading languages...',
        missing: 'Missing',
        draft: 'Draft',
        publishing: 'Publishing...',
        publish: 'Publish'
      },
    },
    fields: []
}
```

## Resulting data structure
### Intl object input
Your resulting object will not look much different than before apart from the fact that it will now group it's content within the langauge keys. eg:
```json
{
  "en": {
    "...": "..."
  },
  "fr": {
    "...": "..."
  }
}
```

### Document wide translations
Each document will have a new property called `__i18n_lang` which contains the name of the language of this document.
Secondly, the id will also contain a suffix as follows `xxx-xxx-xx__i18n_{lang}`.

## Advanced languages
You can also pass a language objects or a GROQ query to the languages option for more advanced language handling.

### Language objects
If you pass an object with `name` and `title` to the languages array you can separate the data key and the visualized language name in the UI.
Eg:
```
languages: [
  { name: 'en_us', title: 'English (US)' },
  { name: 'en_gb', title: 'English (UK)' }
]
```

### GROQ query
It is also possible to pass a GROQ query to the languages option to dynamically fetch the available languages.
Eg:
```
languages: {
  query: '*[_type=="language"]{_id,name}',
  // these are the object paths to get out of the results to use for name and title
  // it is also possible to pass a simple string which will then be used for both title and name
  value: {
    title: 'name',
    name: '_id'
  }
}
```

---
_Source: https://npm.io/package/sanity-plugin-intl-input-manual-structure · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._