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.
Project files
In Motif, everything is a plain text file, and these can be organized in folders. A typical project looks as follows:
Components
This folder is here for convenience, typically to hold your React components.
Data
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.
Pages
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.
Styles
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.
Templates
This folder contains your project templates. Read more about this in the Templates article.
motif.json
This file holds your project configuration, such as the favicon, metadata tags, and font imports. Read more about this in the Motif Config article.
- A tailwind.config.js file, which is where your Tailwind configuration is defined. Read more about this in the Tailwind Config article.
- A motif.json file, which is where your main project configuration is defined, such as the project's favicon, metadata tags, and font imports. Read more about this in the Motif Config article.
- A tailwind.config.js file, which is where your Tailwind configuration is defined. Read more about this in the Tailwind Config article.
Import paths
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"