Additional Info

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/data/ - 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.

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

Other Useful Resources

• Recommended VSCode extensions
• Cool animation example using Animejs in Astro

Astro Notes

Astro looks for .astro or .md files in the src/pages/ directory. Each page is exposed as a route based on its file name.

There’s nothing special about src/components/, but that’s where we like to put any Astro/React/Vue/Svelte/Preact components.

Any static assets, like images, can be placed in the public/ directory. Cosmic Themes also frequently uses src/assets/ for images when using Astro asssets for image optimization.

Commands

All commands are run from the root of the project, from a terminal:

Astro Docs

Feel free to check out the Astro documentation.