Kibble comes with additional options for configuring your site.

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: that 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 a 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 to view the content.
The content comes from a dataSource. Datasources 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 datasource is an index datasource, 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 datasources:

  • 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 about the 
  • partialTemplatePath -
  • datasource - the type of data that this route will show.
  • pageSize - if the datasource 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 are some additional configuration 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?