User Guide
Project Structure.mdx
An overview of the file structure of a project.
In your team, you can have any number of projects: one for your website, blog, marketing experiment, documentation, 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
By default, only pages are visible in your sidebar, so that you can stay focused on the content:
The checkmark indicates that the page is public.
Your pages are simply files that exist in a special pages folder within your project. To view all your project's files, tap on Pages at the bottom of the sidebar, and select the Source view.
This will reveal the full project file tree:
In addition to the pages folder, the project contains:
- A
componentsfolder, in which you can conveniently put your JSX components. Note that this is not a requirement: your components can live anywhere, including within pages themselves. See below for how components can be imported from other files. - A
stylesfolder, containing a file namedmain.css, which is your project's global stylesheet. Read more about this in the Main CSS article. - A
templatesfolder, containing your project's templates. Read more about this in the Templates article. - A
motif.jsonfile, 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.jsfile, which is where your Tailwind configuration is defined. Read more about this in the Tailwind Config article.
File 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"
© 2023 101 Inc. All rights reserved.