📜 Astro Themes Documentation

// Directories

All themes follow a consistent directory structure and organizational philosophy to ensure clarity and ease of use.

The src directory is structured as follows:

• Assets - All static resources used throughout the theme, such as images and icons
• Components - Reusable code components available across the theme
• Content - Content collection data, organized as markdown file directories or JSON/YAML files
• Layouts - Files that define the structural templates for website pages
• Pages - Files that generate routes for the website
• Styles - All stylesheet files required by the theme

---

// File Tree

Each theme has its own completed file tree structure in the README.md file.

/
├── public/
│   └── favicon.svg
├── src/
│   ├── assets/ 
│   │   ├── section-name/
│   │   ├── images/
│   │   └── icons/
│   ├── components/
│   │   ├── elements/ 
│   │   ├── global/ 
│   │   └── sections/ 
│   │       ├── section-name/
│   │       ├── section-name/
│   │       ├── home/
│   ├── content/ 
│   ├── layouts/ 
│   │   └── Layout.astro
│   ├── pages/ 
│   │   ├── blog/
│   │   │   ├── [...page].astro
│   │   │   └── [slug].astro
│   │   ├── index.astro
│   │   ├── 404.astro
│   │   ├── privacy-policy.astro
│   ├── styles/
│   │   ├── global.css 
│   │   └── markdown.css 
│   └── content.config.ts
├── .gitignore
├── astro.config.ts
├── LICENSE
├── package-lock.json
├── README.md
└── tsconfig.json

---

// Assets

This directory contains all static resources used throughout the theme, typically organized into subdirectories such as images and icons. In themes with a large number of images, assets are further subdivided by the page section in which they are used.

---

// Components

Components are reusable code blocks that can be composed across the website. They are organized into three categories:

• Global — Components rendered on every page as part of the layout structure (e.g., Header, Footer, NavBar)
• Elements — Foundational building blocks used to compose larger components (e.g., Link, Text, Container, Heading)
• Sections — Section blocks that make up a page and can be reused in other pages if needed

---

// Content

The content directory holds all files containing data for content collections, as well as content for pages with substantial text. Files in this directory are typically written in Markdown, JSON, or YAML format.

---

// Layouts

This directory contains the Astro template files that define the structural layout of each page. Every theme includes at least one primary layout. Certain themes may include additional layout files to accommodate pages with distinct structural requirements.

---

// Pages

All website pages are defined in this directory. Each file corresponds to a route within the website. Pages associated with content collections make use of dynamic routing.

---

// Styles

All themes are styled using Tailwind CSS. This directory contains the following files:

• global.css — Handles necessary imports and customization of the theme’s Tailwind configuration
• markdown.css — Defines styles for the rendered body content of content collection Markdown files