Motif on Discord

Motif config

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 ) → General → Open motif.json. Alternatively, you can find it at the top level of your project source tree.

Here is an example Motif configuration:

{
  "title": "Default title",
  "titleTemplate": "%s – Globex blog",
  "baseCanonicalUrl": "https://acme.com",
  "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' />"
  ],
  "sitemap": {
    "excludePaths": ["public-drafts/**/*"]
  }
}

Supported keys

title

{
  "title": "Default title"
}

If set, this title will be used for your pages whenever your pages don't specify a title entry in the metadata.

titleTemplate

{
  "titleTemplate": "%s - My blog"
}

A title template for your pages. The %s part will be replaced with your page's title. In the above example, all your pages' titles will have - My blog appended at the end.

baseCanonicalUrl

{
  "baseCanonicalUrl": "https://acme.com"
}

If set, each public page will include a canonical link tag of the form:

<link rel="canonical" href="<CANONICAL_URL>" />

where <CANONICAL_URL> is the canonical base URL followed by the page path.

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.

components
pages
styles
templates
blog-index
blog-post
home
motif.json
tailwind.config.js

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 template.

The most specific rule takes precedence. 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.

sitemap.excludePaths

{
  "sitemap": {
    "excludePaths": [
      "docs/do-not-index",
      "public-drafts/**/*"
    ]
  }
}

If you wish to exclude the paths of some public pages from the sitemap, you can do so by adding a sitemap.excludePaths entry and specify a list of paths, either explicitly, or using the glob pattern mentioned above.