Skip to content

[project-structure] update FileTree example to show content collections #9572

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sarah11918 merged 3 commits into from
Oct 7, 2024
Merged

[project-structure] update FileTree example to show content collections #9572

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7135c44
update filetree to show collections
sarah11918 Oct 5, 2024
1ea60fa
Merge branch 'main' into project-structure
sarah11918 Oct 5, 2024
71b7c4d
Merge branch 'main' into project-structure
sarah11918 Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 19 additions & 13 deletions src/content/docs/en/basics/project-structure.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,14 +32,20 @@ A common Astro project directory might look like this:
- components/
- Header.astro
- Button.jsx
- content/
- config.ts
- posts/
- post1.md
- post2.md
- post3.md
- layouts/
- PostLayout.astro
- pages/
- posts/
- post1.md
- post2.md
- post3.md
- index.astro
- [post].astro
- about.astro
- **index.astro**
- rss.xml.js
- styles/
- global.css
- astro.config.mjs
Expand All @@ -66,6 +72,14 @@ Some files (like Astro components) are not even sent to the browser as written b
While this guide describes some popular conventions used in the Astro community, the only directories reserved by Astro are `src/pages/` and `src/content/`. You are free to rename and reorganize any other directories in a way that works best for you.
:::

### `src/pages`

Pages routes are created for your site by adding [supported file types](/en/basics/astro-pages/#supported-page-files) to this directory.

:::caution
`src/pages` is a **required** sub-directory in your Astro project. Without it, your site will have no pages or routes!
:::

### `src/components`

**Components** are reusable units of code for your HTML pages. These could be [Astro components](/en/basics/astro-components/), or [UI framework components](/en/guides/framework-components/) like React or Vue. It is common to group and organize all of your project components together in this folder.
Expand All @@ -74,22 +88,14 @@ This is a common convention in Astro projects, but it is not required. Feel free

### `src/content`

The `src/content/` directory is reserved to store [content collections](/en/guides/content-collections/) and an optional collections configuration file. No other files are allowed inside this folder.
The `src/content/` directory is reserved to store [content collections](/en/guides/content-collections/) and a configuration file. No other files are allowed inside this folder.

### `src/layouts`

[Layouts](/en/basics/layouts/) are Astro components that define the UI structure shared by one or more [pages](/en/basics/astro-pages/).

Just like `src/components`, this directory is a common convention but not required.

### `src/pages`

[Pages](/en/basics/astro-pages/) are a special kind of component used to create new pages on your site. A page can be an Astro component, or a Markdown file that represents some page of content for your site.

:::caution
`src/pages` is a **required** sub-directory in your Astro project. Without it, your site will have no pages or routes!
:::

### `src/styles`

It is a common convention to store your CSS or Sass files in a `src/styles` directory, but this is not required. As long as your styles live somewhere in the `src/` directory and are imported correctly, Astro will handle and optimize them.
Expand Down