In your team, you can have any number of projects: one for your website, one for your blog, your marketing experiment, your documentation, your shared notes, and so on. Each project can be assigned a custom domain. In addition to your pages, a project contains templates, components, and configuration files.
In Motif, everything is a plain text file, and these can be organized in folders. A typical project looks as follows:
This folder is here for convenience, typically to hold your React components.
Again, this folder is here only for convenience, for instance to hold a JSON file with data used across the project, or a snippet in plain text.
This folder is mandatory, and holds all the pages in your project meant for publication. They are typically written in MDX or Markdoc. The location of the page determines its pubic URL. For instance, "My first post.mdoc" in the Blog/Posts folder is a Markdoc file (since it has the
mdoc extension), and its live URL will be your-website.com/blog/posts/my-first-post. By convention, if the page is named Index, it will be served at the base of the parent folder's path. So for instance, the Index page in the Blog folder will be served at your-website.com/blog. Notice the small checkmark on the page icon, indicating that the page is marked as public.
This folder holds a single file named
main.css, which contains global CSS styles for your project. Read more about this in the Main CSS article.
This folder contains your project templates. Read more about this in the Templates article.
This file holds your project configuration, such as the favicon, metadata tags, and font imports. Read more about this in the Motif Config article.
With the exception of the three project configuration files, every file that you create in your project is an MDX file, and can be imported from any other file using the standard import syntax for ES modules:
import Page from "@pages/welcome"
The import path of a file is determined by the folder in which it resides, and is prepended with an
@ symbol to distinguish it from external imports, such as
react. For instance, the
Navbar file in the
components folder can be imported using the syntax:
import Navbar from "@components/navbar"
File and folder names can include spaces and uppercase characters. However, the associated import path is obtained by replacing spaces with dashes, and all letters are lowercased. So if you have a file named Project Sidebar in a folder named My Components, its import syntax will look like:
import Sidebar from "@my-components/project-sidebar"