Project structure

An overview of the file structure of a project.

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.

components
Icons.jsx
Navbar.tsx
data
authors.json
description.txt
pages
Blog
Posts
Draft.mdoc
My first post.mdoc
My second post.mdoc
Index
About
Index
styles
main.css
templates
blog-index
blog-post
motif.json
tailwind.config.js

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"