Motif Config

Configure your project's template mappings, head items and tracking IDs.

This is your project's main configuration file. It is a JSON file, and includes information such as head data and template mappings. It can be accessed via the project settings (hit ,) → GeneralOpen motif.json. Alternatively, you can find it at the top level of your project source tree.

Here is an example Motif configuration:

{
  "gaMeasurementId": "G-12345678",
  "templates": {
    "welcome": "home",
    "blog": "blog-index",
    "blog/**/*": "blog",
    "releases/*": "release-note",
    "**/*": ""
  },
  "head": [
    "<meta name='og:title' content='My project' />",
    "<meta name='og:description' content='My personal project on Motif' />",
    "<link rel='preconnect' href='https://fonts.googleapis.com' />",
    "<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />",
    "<link href='https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700;900&display=swap' rel='stylesheet' />"
  ]
}

Supported keys

gaMeasurementId and gaTrackingId

{
  "gaMeasurementId": "G-12345678"
}

Google Analytics tracking IDs, as explained in the Google Analytics guide, to set up analytics tracking for your public pages.

templates

{
  "templates": {
    "welcome": "home",
    "blog": "blog-index",
    "blog/**/*": "blog",
    "releases/*": "release-note",
    "**/*": ""
  }
}

This is a mapping between your pages, and the templates that should be used. It is automatically generated if you set a template via the page's document bar, but you can also edit it manually, for instance to set up automatic mapping rules that we describe below.

The template value (e.g. home or blog-index) must correspond to the name of the file in the templates folder.

templates
home
blog-index
blog
release

Mappings are determined using a glob syntax, where:

  • * means all files in a given folder. E.g. blog/* means any files in the blog folder (but not in any of its subfolders)
  • **/* means all files in a given folder and subfolders of any depth. E.g. blog/**/* includes all files in the "Blog" folder and its subfolders.

In the above example, the mappings are:

"welcome": "home"

This entry indicates that the page named "Welcome" should use the home template.

"blog": "blog-index"

This entry endicates that the "Index" page in the "Blog" folder (which has the path /blog by convention) should use the blog-index template.

"blog/**/*": "blog"

This entry endicates that any other files in the "Blog" folder, including its subfolders, should use the blog template.

"releases/*": "release-note"

This entry endicates that all files directly in the "Releases" folder, but not in any of its subfolders, should use the release-note template.

"**/*": ""

This entry indicates that all other files should not use a temlpate.

The most specific rule takes precendence. For instance, in the above example, "welcome" takes precedence over blog/**/*, which takes precedence over "**/*".

head

{
  "head": [
    "<meta name='og:title' content='My project' />",
    "<meta name='og:description' content='My personal project on Motif' />",
    "<link rel='preconnect' href='https://fonts.googleapis.com' />",
    "<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin />",
    "<link href='https://fonts.googleapis.com/css2?family=Merriweather:wght@400;500;600;700;900&display=swap' rel='stylesheet' />"
  ]
}

This is a list of tags to inject in the <head> section of all your pages. This is where you load fonts, set Open Graph metadata, or load a custom stylesheet. Any HTML tags can be used.

Copyright © 2022 Motif Land Inc. All rights reserved. This website is built with Motif.