Language Support

Multi-language support is built into Kibble and Relish. Languages are defined in the kibble.json file and language translations are stored in language files.

Note: many language entries will be used by Relish (the javascript library), so it is recommended to keep those files as complete as possible.

Language-specific sites are rendered into specific URLs using the pattern

https://store.shift72.com/[language prefix]/ 

A defaultLanguage is also provided, which is available without a prefix.

File: kibble.json 

{
  ...
  "defaultLanguage": "en",
  "languages": {
    "en": "en_US",
    "fr": "fr_FR"
  },
  ...
}

This will create paths for the following homepages:
https://store.shift72.com/ - home page in English
https://store.shift72.com/fr/ - home page in French

Example language file.
File: en_US.all.json 

{
  "settings_title": { "other": "Settings" },
  "signin_page_header": { "other": "Sign In" },
  "en": { "other": "English" },
  "fr": { "other": "French" },
  "tvseason":  { "other": "{{.ShowInfo.Title}} - Season - {{.Season.SeasonNumber}}" },
  "seasons":{
    "one": "one season",
    "other": "{{.Count}} seasons"
  },
  "shopping_info_rental_period_duration": {
    "one": "{{.Count}} day",
    "other": "{{.Count}} days"
  },
  "shopping_info_watch_window_duration": {
    "one": "One hour",
    "other": "{{.Count}} hours"
  },
...
}

Some translation entries will use a count parameter to determine if the entry should be pluralised or not.

File: settings.html.jet

<h3>{{i18n("settings_title")}}</h3>

Translates to

<h3>Settings</h3>

Routes

Routes control how content is arranged on your site. Routes control the URL that a user would need to navigate to view the content.

The content comes from a data source. Data sources come in two varieties, the first referred to by its singular name generates a new file for every item. E.g. Film will generate a page for every Film in the system, this will be used to generate a film detail page.

The second data source is an index data source, e.g. FilmIndex. This is used to provide a paginated list of films useful for generating a paginated list of content, like a table of contents.

Here is a list of data sources:

  • Film - films
  • FilmIndex
  • Page - content pages
  • PageIndex
  • Bundle - bundle promotions
  • BundleIndex
  • Collection - collections of films and tv seasons
  • CollectionIndex
  • TVShow - tv-shows
  • TVShowIndex
  • TVSeason - tv seasons
  • TVSeasonIndex

File: kibble.json 

{
  ...
  "routes": [
    {
      "name": "filmItem",
      "urlPath": "/film/:slug/",
      "templatePath": "templates/film/item.jet",
      "partialUrlPath": "/partials/film/:filmID.html",
      "partialTemplatePath": "templates/film/partial.jet",
      "datasource": "Film",
      "pageSize": 0
    },
    ...

  ]
}

Routes have a name, this can be used to specify links between pages.

  • name  - a name can be used to link between content
  • urlPath  - this is where the page will be created, language prefixes such as /fr come before this path.
  • templatePath - this is the template to use to display the content.
  • partialUrlPath - partial URLs are used to provide a little HTML snippet
  • partialTemplatePath - Datasource - the type of data that this route will show
  • datasource - the type of data that this route will show.
  • pageSize - if the data source supported pagination this will be the size of each of the pages.

Miscellaneous

Kibble avoids if possible opinions on how you should manage your site. We tend to use npm and sass where possible, but you don't have to. 

Here is some additional configurations that you can use to manage your site.

siteRootPath - directory to search for templates.
liveReload - configures which paths to not reload if changed. Useful if you change the build process.

File: kibble.json 

{
  ...
  "siteRootPath": "site",
  "liveReload": {
    "ignoredPaths": [
      "styles"
    ]
  },
  ...
}
Did this answer your question?