# File Structure

## **File Structure**

After unzipping a theme, you will find a structure like this:

<FileTree>

- themes/
  - themeName/ (📌 Main theme folder)
- changelog.html (🔗 Links to online changelog)
- documentation.html (🔗 Links to online documentation)

</FileTree>

---

### **Main Theme Directory Structure**
Our themes follow a **modular structure** for easy customization and scalability.

<FileTree>

- themeName/
  - src/
    - __tests__/ (Unit & integration tests)
    - assets/
      - images/
    - config/ (Site-wide settings)
      - config.toml (Global config)
      - fonts.json (Font definitions)
      - language.json (Language settings)
      - menu.en.json (English menu)
      - menu.fr.json (French menu)
      - social.json (Social links)
    - content/ (Content management)
      - about/ (About page)
        - english/ (English version)
        - french/ (French version)
      - homepage/ (Homepage)
        - english/
        - french/
      - pages/ (Static pages: terms, privacy, etc.)
      - sections/ (Reusable sections)
        - english/
        - french/
      - _file_format.md (Frontmatter docs)
    - i18n/ (Translations)
      - en.json (English)
      - fr.json (French)
    - layouts/ (Page layouts & UI components)
      - components/ (Reusable UI elements)
        - cards/
        - global/
        - sections/
        - seo/
        - social/
        - utilities/
        - widgets/
        - SinglePageLayout.astro
      - helpers/
      - shortcodes/ (Custom MDX components)
      - Base.astro
    - lib/ (Shared utilities & hooks)
    - pages/ (Dynamic & static pages)
      - [...lang]/ (Multi-language support)
        - index.astro (Homepage)
        - about.astro
        - contact.astro
        - blog/
        - (other theme-specific routes)
      - 404.astro
      - robots.txt.ts (Robots.txt generator)
    - plugins/
      - odometer/ (Number animations)
    - styles/
      - base.css
      - safe.css
      - buttons.css
      - global.css
      - utilities.css
      - animation.css
      - components.css
      - navigation.css
      - theme.css
    - types/ (TypeScript definitions)
    - content.config.ts (Content settings)
    - env.d.ts (Env variable types)

</FileTree>

---

#### Key Directories & Their Purpose

##### `/public` ⟶ Static Assets

- Stores images, icons, fonts, and other static files.
- Files inside this folder are accessible via direct URLs (e.g., `/images/logo.svg`).

##### `/src` ⟶ Main Codebase

- Contains all Astro components, pages, content, and styles.
- Customize layouts, pages, and components here.

##### `/scripts` ⟶ Automation Scripts

- Optimizes workflows with utilities like:
  - `generate-favicons.mjs` → Generates favicons for all devices.
  - `remove-draft-from-sitemap.mjs` → Removes pages with `draft:true` or `exclude_from_sitemap:true`.
  - `remove-multilingual.mjs` → Removes all multilingual content & i18n files.

---

#### ⚙️ Key Configuration Files

##### `astro.config.mjs` - Astro Configuration

- Manages integrations, build settings, and markdown processing.
- For general site settings, modify `config.toml` instead.

##### `config.toml` - Global Settings

- Primary configuration file for theme settings.
- Controls **SEO, multilingual options, header navigation button, branding, and content structure**.

###### 🔍 SEO & OpenGraph

- `title`, `description`, and `keywords` for metadata.
- `seo.robotsTxt` and `seo.sitemap` settings for search engines.
- `opengraph.image` for social media previews.

###### 🎨 Theme & Content Settings

- Content folder keys vary by theme. Common ones include:
  - `blogFolder`
  - `integrationFolder`
  - `careerFolder`
- `stickyHeader`, `brandName`, and `pagination` settings.

###### 🌎 Multilingual Settings

- `settings.multilingual.enable` → Enables/disables multilingual support.
- `settings.multilingual.defaultLanguage` → Defines the primary language.
- `settings.multilingual.disableLanguages` → Lists languages to disable.
- `settings.multilingual.showDefaultLangInUrl` → Shows default language in URL when true.

##### Styling & Fonts

- **Colors and typography** live in `src/styles/theme.css`.
- **Fonts** are defined in `src/config/fonts.json` and loaded automatically.

#### Other Important Files

- **`package.json`** → Manages dependencies & npm scripts (`npm run dev`).
- **`vercel.json` / `netlify.toml`** → Configuration for deployments.

<br />

Now that you understand the project structure, it's time to customize the site's identity and logo.