Skip to content
Cosmic Themes

File Structure

The source files have the following setup. There will be additional components and pages that will vary depending on the theme.

  • src/assets/ - Images and other assets
  • src/components/ - Individual components used throughout the site
  • src/config/ - Configuration files for site data
  • src/content/ - Content collections
  • src/js/ - JS utility functions
  • src/layouts/ - Astro layouts, used for multiple pages
  • src/pages/ - Pages / routes of the site. If you see something like [slug].astro, that means it is a dynamic route, and likely pulled from content collections.
  • src/styles/ - Global styles

Code Tree

There is a code tree like this included in the README.md of each theme.

.
├── .tours/
│   └── code-intro.tour
├── .vscode/
│   └── extensions.json
├── public/
│   ├── favicons/
│   │   └── favicon.ico
│   └── robots.txt
├── src/
│   ├── assets/
│   │   └── images/
│   ├── components/
│   │   ├── Component/
│   │   │   ├── ComponentVariant1.astro
│   │   │   ├── ComponentVariant2.astro
│   ├── config/
│   │   └── navData.json.ts
│   ├── content/
│   │   ├── (content collections)
│   │   └── config.ts
│   ├── js/
│   │   └── (various JS utility functions)
│   ├── layouts/
│   │   ├── BaseHead.astro
│   │   └── BaseLayout.astro
│   ├── pages/
│   │   ├── (website pages)
│   │   ├── 404.astro
│   │   ├── index.astro
│   │   └── rss.xml.ts
│   └── styles/
│       └── global.scss
├── .gitignore
├── .prettierrc.mjs
├── astro.config.mjs
├── keystatic.config.tsx
├── netlify.toml
├── package.json
├── package-lock.json
├── README.md
├── tailwind.config.cjs
└── tsconfig.json