Structure
This guide will show you how ChaiDocs are organized and what the different files do.
ChaiDocs generally follow the same file and directory structure as other Astro projects. See Astro’s project structure documentation for more detail.
Project contents
The following is a basic structure of ChaiDocs.
Directorypublic/
- favicon.svg
Directorysrc/
Directoryassets/
Directorybranding/
- chai.svg
- chaidocs.png
Directorydocs/
Directoryweb-dev/
Directoryjavascript/
- lexical-scope.png
Directorywindows/
- file-explorer.png
- …
Directorycomponents/
Directorybranding/
- about-us.astro
- footer-links.astro
- footer.astro
Directorycode/
- code-tabs.astro
- button.astro
Directorycontent/
Directorydocs/
Directorycontribute/
- guidelines.mdx
Directory
Starter Kit/- components.mdx
Directoryweb-dev/
DirectoryHTML/
- …
DirectoryCSS/
- …
DirectoryJavascript/
- data-types.mdx
- 404.mdx
- index.mdx
- tracks.mdx
- content.config.ts
- astro.config.mjs
- package.json
- tsconfig.json
Files and directories
astro.config.mjs— The Astro configuration file.src/content.config.ts— Content collections configuration file.src/content/docs/— Content files. ChaiDocs turns each.mdor.mdxfile in this directory into a page on your site.src/— Other source code and files (components, styles, images, etc.) for your project.public/— Static assets (fonts, favicon, PDFs, etc.) that will not be processed by Astro.
Naming Conventions
- File Names: Use kebab-case for all file names.
- Component Names: Use PascalCase for component names.
- Variables and Functions: Use camelCase for variables and functions.
Note: Sidebar groups are autogenerated from the directory structure of the content/docs. Therefore, directory names use capitalized, spaced words which are then displayed as labels in the sidebar. For example, content/docs/contribute/Starter Kit/ will be displayed as Starter Kit in the sidebar.
Start your journey with ChaiCode
All of our courses are available on chaicode.com. Feel free to check them out.