feat(#158): add support for multilingual content (#422)

* feat(#158): add multilingual support

* chore(#158): update multilingual support

* chore(#158): fix linting issues

* chore: add todo

* chore(#158): add multilingual router patch

* feat(#158): add prefix to getCollectionAll

* chore(#158): add multilingual examples

* feat(#158): add prefix support

* chore(#158): add prefix examples

* feat(#158): add prefix support to DruxtStore

* feat(#158): add langcode prop

* chore(#158): fix to stop error if missing data

* chore: update gitpod setup

* chore(#158): update router prefix support

* chore(#158): update druxt site example config

* feat(#158): add langcode and prefix support

* feat(#158): added langcode and prefix support

* chore(#158): update composer

* chore(#158): add example language block

* chore(#158): add prefix to vuex action

* chore(#158): update multilingual druxt-site

* chore(#158): update decoupled router patch

* chore(#158): update menu multilingual support

* chore(#138): added langcode routes

* chore(#158): update prefix

* chore(#158): update example components

* chore(#158): fix timing issue

* chore(#158): add prefix to collection store

* chore(#158): update router

* chore(#158): add prefix to dehydrateResources

* chore(#158): fix breadcrumb

* feat(#158): add langcode prop to DruxtModule

* feat(#158): add langcode to mixins

* feat(#158): add multilingual support to components

* feat(#158): add multilingual support

* chore(#158): update mulitlingual support

* feat(#158): add langcode component options

* chore(#158): reduce fetch flicker

* chore(#158): update tests

* fix(#158): fix missing langcode issues

* fix(#158): fix flicker refresh issue

* feat(#158): update breadcrumb multilingual support

* fix(#158): fix redirect

* feat(#158): remove prefix before path check

* chore(#158): fix router bloating

# Conflicts:
#	yarn.lock

* feat(#158): add langcode prefix to api proxy

* chore(#158): update getRedirect for langcode

* chore(#158): fix issue with API proxy

* chore(#158): update test coverage

* chore(#158): update client guide for multilingual

* chore(#158): update documentation

* chore(#158): fix langcode suffixed options

* chore(#158): fix breadcrumb block binding

* chore(#158): update component options docs

* chore(#158): add multilingual guide

* chore(#158): add multilingual to readme

* chore(#158): added mulilingual patches

Co-authored-by: Robert Edwards <r.edwards@ctidigital.com>
Co-authored-by: Romain Couturier <rcouturier@wedarecreate.com>

.changeset/chatty-insects-change.md

@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+Added language prefixes to API proxy support.

.changeset/dry-comics-tap.md

@@ -0,0 +1,5 @@
+---
+"druxt-router": minor
+---
+
+Added langcode support to the DruxtRouter.

.changeset/empty-suns-fold.md

@@ -0,0 +1,5 @@
+---
+"druxt-blocks": minor
+---
+
+Added multilingual support to the DruxtBlock and DruxtBlockRegion component.

.changeset/five-lemons-clean.md

@@ -0,0 +1,5 @@
+---
+"druxt-menu": minor
+---
+
+Added multilingual support to the DruxtMenu component.

.changeset/gentle-parents-unite.md

@@ -0,0 +1,5 @@
+---
+"druxt-blocks": minor
+---
+
+Add support for multilingual paths in DruxtBlockRegion.

.changeset/hip-carpets-study.md

@@ -0,0 +1,5 @@
+---
+"druxt-entity": minor
+---
+
+Added **langcode** prop to DruxtEntity and DruxtField components for multilingual support.

.changeset/honest-files-refuse.md

@@ -0,0 +1,11 @@
+---
+"druxt-blocks": minor
+"druxt-breadcrumb": minor
+"druxt-entity": minor
+"druxt-menu": minor
+"druxt-router": minor
+"druxt-site": minor
+"druxt-views": minor
+---
+
+Added langcode to component mixins.

.changeset/mean-jeans-crash.md

@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+Added multilingual support to the base DruxtModule component.

.changeset/new-horses-boil.md

@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+Added langcode prefix support to the DruxtStore.

.changeset/poor-paws-accept.md

@@ -0,0 +1,7 @@
+---
+"druxt-breadcrumb": minor
+"druxt-menu": minor
+"druxt-views": minor
+---
+
+Added multilingual support to Block components.

.changeset/rich-planes-shave.md

@@ -0,0 +1,5 @@
+---
+"druxt": minor
+---
+
+Added langcode suffixed component options for multilingual templates.

.changeset/swift-socks-lay.md

@@ -0,0 +1,5 @@
+---
+"druxt-breadcrumb": minor
+---
+
+Removed duplicate Home crumb when using a multilingual backend.

.changeset/tall-cameras-grow.md

@@ -0,0 +1,5 @@
+---
+"druxt-views": minor
+---
+
+Added langcode and prefix support to DruxtView component and Vuex store.

.gitpod.yml

@@ -19,7 +19,11 @@ tasks:
  cd $GITPOD_REPO_ROOT/docs && yarn
  cd $GITPOD_REPO_ROOT && yarn build:docs
  command: |
- cat .gitpod/WELCOME.md
+ # Start Drupal
+ cd $GITPOD_REPO_ROOT/examples/drupal/drupal-9 && ddev start -y && ddev drush uli
+
+ # Display welcome message
+ cd $GITPOD_REPO_ROOT && cat .gitpod/WELCOME.md
 
 # VScode xdebug extension
 vscode:

README.md

@@ -30,6 +30,7 @@
  - Support for [nuxt/axios](https://axios.nuxtjs.org/) and [nuxt/auth](https://auth.nuxtjs.org/).
 - Modular Vue.js component library system.
 - Slot and Wrapper theming system.
+- Support for multilingual content.
 - API and File proxy.
 
 Learn more at https://druxtjs.org

docs/content/guide/client.md

@@ -33,7 +33,7 @@ See the [API documentation](/api/packages/druxt/client) for more details.
 
 ## Getting a resource
 
-The `getResource` method requires the resource `type` and `id`, and has an optional `query` parameter.
+The `getResource` method requires the resource `type` and `id`, and has an optional `query` and `prefix` parameter.
 
 _Get a page._
 ```js
@@ -53,9 +53,21 @@ druxt.getResource(
 })
 ```
 
+_Get a translated page._
+```js
+druxt.getResource(
+ 'node--page',
+ 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd'
+ undefined,
+ 'es'
+).then(resource => {
+ // Do the thing.
+})
+```
+
 ## Getting a collection of resources
 
-The `getCollection` method requires the resource type, and has an optional `query` parameter.
+The `getCollection` method requires the resource type, and has an optional `query` and `prefix` parameter.
 
 _Get a collection of recipes._
 ```js
@@ -71,6 +83,18 @@ druxt.getCollection('node--recipe', 'page[limit]=5').then(collection => {
 })
 ```
 
+
+_Get the first 5 recipes in spanish._
+```js
+druxt.getCollection(
+ 'node--recipe',
+ 'page[limit]=5',
+ 'es'
+).then(collection => {
+ // Do the thing.
+})
+```
+
 ## Getting all collections of a resource
 
 The `getCollectionAll` takes the same parameters as the `getCollection` method, and will return an array of all collections.

docs/content/guide/multilingual.md

@@ -0,0 +1,88 @@
+---
+title: Multilingual content
+weight: -5
+---
+
+# Multilingual content
+
+Druxt has support for multilingual content in all modules and in various forms:
+- The DruxtClient and Store can fetch translated resources and collections
+- Druxt module components can specify language with the **langcode** prop
+- Theming can be done in language specific components
+
+* * *
+
+## Getting started
+
+The following Drupal patches are required to enable multilingual content in the JSON:API:
+
+- Decoupled Router: 
+ - Issue: https://www.drupal.org/project/decoupled_router/issues/3111456 
+ - Patch: https://git.drupalcode.org/project/decoupled_router/-/merge_requests/5.diff
+
+- Druxt (Decoupled View routes): 
+ - Issue: https://www.drupal.org/project/druxt/issues/3273228 
+ - Patch: https://git.drupalcode.org/project/druxt/-/merge_requests/9.diff
+
+- JSON:API Menu Items: 
+ - Issue: https://www.drupal.org/project/jsonapi_menu_items/issues/3192576 
+ - Patch: https://git.drupalcode.org/project/jsonapi_menu_items/-/merge_requests/7.diff
+
+### tl;dr
+
+Add the following to your composer.json patches:
+```json
+"drupal/druxt": {
+ "https://www.drupal.org/project/druxt/issues/3273228": "https://git.drupalcode.org/project/druxt/-/merge_requests/9.diff"
+},
+"drupal/decoupled_router": {
+ "https://www.drupal.org/project/decoupled_router/issues/3111456#comment-14093342": "https://git.drupalcode.org/project/decoupled_router/-/merge_requests/5.diff"
+},
+"drupal/jsonapi_menu_items": {
+ "https://www.drupal.org/project/jsonapi_menu_items/issues/3192576#comment-14473856": "https://git.drupalcode.org/project/jsonapi_menu_items/-/merge_requests/7.diff"
+}
+```
+
+* * *
+
+## Fetching a translated resource
+
+All DruxtClient and DruxtStore methods and actions have support for a langcode prefix, falling back to the default language, as determined by the Drupal backend.
+
+_Example: Fetching a spanish recipe from the DruxtStore_
+
+```js
+this.$store.dispatch('druxt/getResource', {
+ type: 'node--page',
+ id: 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd',
+ prefix: 'es'
+})
+```
+
+- See the [DruxtClient](/api/packages/druxt/client) and [DruxtStore](/api/packages/druxt/stores/druxt) API docs.
+
+* * *
+
+## Langcode prop
+
+DruxtModule components have a **langcode** prop to specify the language, as well as a computed **lang** prop containing the fallback languge if no langcode prop is provided.
+
+_Example: Rendering a DruxtEntity component in spanish_
+
+```jsx
+<DruxtEntity
+ type="node--page"
+ id="d8dfd355-7f2f-4fc3-a149-288e4e293bdd"
+ langcode="es"
+/>
+```
+
+- See the [DruxtModule](/api/packages/druxt/components/DruxtModule) component documentation.
+
+* * *
+
+## Language theme components
+
+All Druxt modules provide language specific theme component options, allowing for language specific customisations.
+
+_Example: `~/components/druxt/entity/node/page/Es.vue`_

docs/content/guide/proxy.md

@@ -1,6 +1,6 @@
 ---
 title: Proxy
-weight: -5
+weight: -4
 ---
 
 ### Druxt and Proxies

docs/content/guide/storybook.md

@@ -1,6 +1,6 @@
 ---
 title: Storybook
-weight: -5
+weight: -4
 ---
 
 > Druxt provides zero-config, auto generated Storybook integration with live data.

examples/drupal/drupal-9/composer.json

@@ -16,11 +16,14 @@
  ],
  "require": {
  "composer/installers": "^1.9",
+ "cweagans/composer-patches": "^1.7",
  "drupal-tome/tome_drush": "dev-master",
  "drupal/core-composer-scaffold": "^9.3",
  "drupal/core-project-message": "^9.3",
  "drupal/core-recommended": "^9.3",
- "drupal/druxt": "^1.0",
+ "drupal/decoupled_router": "2.0.3",
+ "drupal/druxt": "^1.1.1",
+ "drupal/jsonapi_hypermedia": "^1.6",
  "drupal/tome": "^1.6",
  "drush/drush": "^11.0"
  },
@@ -37,7 +40,9 @@
  "allow-plugins": {
  "composer/installers": true,
  "drupal/core-composer-scaffold": true,
- "drupal/core-project-message": true
+ "drupal/core-project-message": true,
+ "cweagans/composer-patches": true,
+ "dealerdirect/phpcodesniffer-composer-installer": true
  }
  },
  "extra": {
@@ -57,24 +62,16 @@
  "web/profiles/custom/{$name}": ["type:drupal-custom-profile"],
  "web/themes/custom/{$name}": ["type:drupal-custom-theme"]
  },
- "drupal-core-project-message": {
- "include-keys": ["homepage", "support"],
- "post-create-project-cmd-message": [
- "<bg=blue;fg=white> </>",
- "<bg=blue;fg=white> Congratulations, you’ve installed the Drupal codebase </>",
- "<bg=blue;fg=white> from the drupal/recommended-project template! </>",
- "<bg=blue;fg=white> </>",
- "",
- "<bg=yellow;fg=black>Next steps</>:",
-
- " * Install the site: https://www.drupal.org/docs/8/install",
- " * Read the user guide: https://www.drupal.org/docs/user_guide/en/index.html",
- " * Get support: https://www.drupal.org/support",
- " * Get involved with the Drupal community:",
- " https://www.drupal.org/getting-involved",
- " * Remove the plugin that prints this message:",
- " composer remove drupal/core-project-message"
- ]
+ "patches": {
+ "drupal/druxt": {
+ "https://www.drupal.org/project/druxt/issues/3273228": "https://git.drupalcode.org/project/druxt/-/merge_requests/9.diff"
+ },
+ "drupal/decoupled_router": {
+ "https://www.drupal.org/project/decoupled_router/issues/3111456#comment-14093342": "https://git.drupalcode.org/project/decoupled_router/-/merge_requests/5.diff"
+ },
+ "drupal/jsonapi_menu_items": {
+ "https://www.drupal.org/project/jsonapi_menu_items/issues/3192576#comment-14473856": "https://git.drupalcode.org/project/jsonapi_menu_items/-/merge_requests/7.diff"
+ }
  }
  }
 }