diff --git a/README.md b/README.md index 954a107..52c2571 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ There are two popular methods of internationalization in Sanity Studio: This plugin adds features to the Studio to improve handling **document-level translations**. -- A View Pane to create language versions of each Document +- A Language Selector to create and browse language-specific versions of each Document - Document Actions to update base and translated documents to ensure references stay in tact - Document Badges to highlight the language version of a document @@ -47,12 +47,12 @@ The plugin is now installed, but you will need to complete the following steps t ## Setup next steps -1. [Customise Desk Structure](docs/desk-structure.md) - To setup the 'Translations' View Pane on Documents -2. [Configuration options](docs/configuration-options.md) +1. [Configuration options](docs/configuration-options.md) To declare available Languages and other settings -3. [Activating internationalization on schema](docs/activating-internationalization-on-schema.md) +2. [Activating internationalization on schema](docs/activating-internationalization-on-schema.md) To enable all the above features on schema +3. [Customise Desk Structure](docs/desk-structure.md) + To filter documents down to the base language version ## Other documentation diff --git a/docs/activating-internationalization-on-schema.md b/docs/activating-internationalization-on-schema.md index 1a93ba0..d9e66ce 100644 --- a/docs/activating-internationalization-on-schema.md +++ b/docs/activating-internationalization-on-schema.md @@ -2,9 +2,17 @@ To enable document wide translations for a schemas you need to add the `i18n` key in a schema. -Adding `i18n: true` to a schema will use the defaults in your configuration file. +Adding `i18n: true` to a document schema will use the defaults in your configuration file. Example: -Alternatively you can set an object like `i18n: {...}` to override those defaults. +```js +export default { + type: 'document', + i18n: true, + // ... all other settings +} +``` + +Alternatively you can set an object like `i18n: {...}` to override your configuration file's defaults per-schema. - `base`: Override the globally configured base language ID. If there is no base language ID configured at all, the first language in the list will be used. - `referenceBehavior`: Can be `strong` (default), `weak` or `disabled`. This option defines how the translated documents are referenced in the parent document @@ -18,13 +26,12 @@ Alternatively you can set an object like `i18n: {...}` to override those default Consider setting [Initial Values](https://www.sanity.io/guides/getting-started-with-initial-values-for-new-documents) so that the base language value is already set on new documents. -## Example - ```js export default { type: 'document', - name: '...', - title: '...', + initialValue: { + __i18n_lang: 'en_US', + }, i18n: { base: 'en_US', languages: ['en_US', 'nl_NL'], @@ -34,11 +41,8 @@ export default { baseReference: '__i18n_base', }, }, - initialValue: { - __i18n_lang: 'en_US', - }, - fields: [], + // ... all other settings } ``` -With desk structure and your schema setup, you should now see the "Translations" View Pane in your Studio! +With Desk Structure and your Schema setup, you should now see the Language Selector above the document editor in your Studio. diff --git a/docs/desk-structure.md b/docs/desk-structure.md index 2ddc187..4d1f4ec 100644 --- a/docs/desk-structure.md +++ b/docs/desk-structure.md @@ -2,27 +2,17 @@ [See the Sanity docs on how to to setup Desk Structure](https://www.sanity.io/guides/getting-started-with-structure-builder) if you do not already have Desk Structure customised in your project. -Once your Studio has its own Desk Structure, you can configure the plugin in two ways: - -## Method 1: Default implementation - -Use this method if you don't already have a custom desk structure of your own. +Once your Studio has its own Desk Structure, you'll want to filter down any Lists for internationalized schema types to just base language documents: ```js -import * as Structure from '@sanity/document-internationalization/lib/structure' - -export default Structure.default -``` - -## Method 2: Manual implementation - -Use this method if you need to combine your own desk structure implementation with the plugin. - -```js -import * as Structure from '@sanity/document-internationalization/lib/structure' - -export default () => { - const items = Structure.getFilteredDocumentTypeListItems() - return S.list().id('__root__').title('Content').items(items) -} +S.listItem() + .title(`Lesson`) + .child( + S.documentList() + .title(`Lesson documents`) + .schemaType('lesson') + .filter('_type == "lesson" && __i18n_lang == $baseLanguage') + .params({baseLanguage: `en_US`}) + .canHandleIntent(S.documentTypeList('lesson').getCanHandleIntent()) + ) ``` diff --git a/docs/img/document-level-translation.gif b/docs/img/document-level-translation.gif index cdeed41..4c8b952 100644 Binary files a/docs/img/document-level-translation.gif and b/docs/img/document-level-translation.gif differ diff --git a/package.json b/package.json index 715a92e..d904f47 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sanity/document-internationalization", - "version": "0.3.0", + "version": "0.3.1", "license": "MIT", "engines": { "node": ">=14" diff --git a/src/constants/UiMessages.ts b/src/constants/UiMessages.ts index 05b9c64..f571b8f 100644 --- a/src/constants/UiMessages.ts +++ b/src/constants/UiMessages.ts @@ -13,7 +13,7 @@ export const UiMessages = { draft: 'Draft', missingTranslations: 'Following languages are missing some translations compared to the base language', - base: 'Base Translation', + base: 'Base', missing: 'Missing', deleteAll: { buttonTitle: 'Delete (incl. translations)', diff --git a/src/language-select/components/LanguageSelect/LanguageSelectList.tsx b/src/language-select/components/LanguageSelect/LanguageSelectList.tsx index 4e6ff29..362d6d9 100644 --- a/src/language-select/components/LanguageSelect/LanguageSelectList.tsx +++ b/src/language-select/components/LanguageSelect/LanguageSelectList.tsx @@ -17,6 +17,10 @@ const Divider = styled(Box)` border-bottom: 1px solid var(--card-shadow-outline-color); ` +const SelectorBox = styled(Box)` + minwidth: 250; +` + export const LanguageSelectList: React.FC = ({ draftLanguageObjects, publishedLanguageObjects, @@ -47,7 +51,7 @@ export const LanguageSelectList: React.FC = ({ }, [draftLanguageObjects, publishedLanguageObjects]) return ( - + {!!existingLanguageObjects.length && ( {UiMessages.languageSelect.listLabels.existing} @@ -75,6 +79,6 @@ export const LanguageSelectList: React.FC = ({ )} - + ) } diff --git a/src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx b/src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx index 05d6199..d1ecf1d 100644 --- a/src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx +++ b/src/language-select/components/LanguageSelect/LanguageSelectListItem.tsx @@ -28,17 +28,6 @@ const ListItemSpinner = styled(SpinnerIcon)` animation: ${rotate} 500ms linear infinite; ` -const ListItemBadge = styled(Text)` - margin-left: ${({theme}) => `${theme.sanity.space[2]}px`}; - margin-right: 35px; - margin-top: 1px; - - & > span { - display: inline-block; - vertical-align: middle; - } -` - const ListItemSplitButton = styled(Button)` display: none; flex-shrink: 0; @@ -207,11 +196,7 @@ export const LanguageSelectListItem: React.FC = ({status, language}) => { selected={language.isCurrentLanguage} icon={FlagIcon} iconRight={ - !!baseTranslationBadgeLabel && ( - - {baseTranslationBadgeLabel} - - ) + !!baseTranslationBadgeLabel && {baseTranslationBadgeLabel} } text={language.title} onClick={handleOpenClick} diff --git a/src/language-select/components/SingleFlag/SingleFlag.tsx b/src/language-select/components/SingleFlag/SingleFlag.tsx index c35dc61..e452312 100644 --- a/src/language-select/components/SingleFlag/SingleFlag.tsx +++ b/src/language-select/components/SingleFlag/SingleFlag.tsx @@ -14,9 +14,8 @@ type Props = { const FlagImageContainer = styled.span` display: block; - padding: 1px; font-size: 19px; - margin: 0px -0.05em 0px -0.1em; + transform: translateY(-1px); & img { display: block;