# File Structure

## **File Structure**

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

<FileTree>

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

</FileTree>

In the Tina edition, the main theme folder is `techlo-tina`.

---

### **Main Theme Directory Structure**
Techlo follows a modular structure focused on content collections, reusable section components, and configurable JSON and TOML settings. This is the Astro edition. The Tina and Sanity editions have the same layout, with the differences listed below.

<FileTree>

- techlo/
  - .cursor/
    - rules/
      - theme-architecture.mdc (AI: Cursor)
  - .github/
    - copilot-instructions.md (AI: GitHub Copilot)
  - .vscode/
  - .windsurf/
    - rules/
      - theme-architecture.md (AI: Windsurf)
  - public/
    - \_\_astro_font_generated\_\_/
    - images/
      - favicons/
      - gallery/
      - og-image.jpg
    - plyr/
    - videos/
    - .htaccess
    - \_headers
    - umami.is.js
  - scripts/
    - dev.mjs
    - generate-favicons.mjs
    - generate-multilingual-content.mjs
    - remove-draft-from-sitemap.mjs
    - remove-multilingual.mjs
    - toml-watcher.mjs
  - src/
    - assets/
      - images/
    - config/ (Site-wide settings)
      - config.toml
      - fonts.json
      - language.json
      - menu.ar.json
      - menu.en.json
      - menu.fr.json
      - social.json
    - content/ (Markdown and MDX content)
      - about-us/
      - author/
      - blog/
      - contact/
      - faq/
      - homepage/
      - pages/
      - pricing/
      - projects/
      - sections/
      - services/
      - team/
      - testimonials/
      - \_file_format.md
    - i18n/
      - ar.json
      - en.json
      - fr.json
    - layouts/
      - components/
        - cards/
        - global/
          - footer/
          - header/
        - sections/
        - utilities/
        - widgets/
      - helpers/
      - shortcodes/
      - Base.astro
    - lib/
      - integrations/
      - utils/
      - contentParser.astro
      - iconNames.ts
      - PageLoader.astro
      - shortcodes.ts
      - taxonomyParser.astro
    - pages/
      - [...lang]/
        - 404.astro
        - [page].astro
        - about.astro
        - contact.astro
        - faq.astro
        - home-three.astro
        - home-two.astro
        - index.astro
        - llms-full.txt.ts
        - llms.txt.ts
        - pricing.astro
        - testimonials.astro
        - blog/
        - projects/
        - services/
        - team/
      - 404.astro
      - [...path].md.ts
      - robots.txt.ts
    - plugins/
      - odometer/
      - fontTailwindPlugin.js
      - scroll-menu.ts
      - sticky-sidebar.js
    - styles/
      - animation.css
      - base.css
      - buttons.css
      - components.css
      - globals.css
      - navigation.css
      - rtl.css
      - safe.css
      - theme.css
      - utilities.css
    - types/
    - content.config.ts
    - env.d.ts
    - sections.schema.ts
  - .editorconfig
  - .gitignore
  - .markdownlint.json
  - .prettierrc
  - AGENTS.md (AI: the main instructions)
  - CHANGELOG.md
  - CLAUDE.md (AI: Claude Code)
  - GEMINI.md (AI: Gemini CLI)
  - README.md
  - SKILLS.md (AI: step-by-step recipes)
  - astro.config.mjs
  - netlify.toml
  - package-lock.json
  - package.json
  - tsconfig.json
  - vercel.json
  - vercel.sh
  - wrangler.toml

</FileTree>

<br />

Each folder under `src/content/` has an `english/`, a `french/`, and an `arabic/` subfolder. Add or edit content inside the language folder you want to update.

### What Differs By Edition
**Tina** has everything above except `scripts/dev.mjs`, and adds:

- `tina/`: the editor's setup. `tina/generated/collections.json` holds its forms.
- `scripts/tina/` and `scripts/cms/`: the commands behind `npm run dev`, `npm run tina:generate`, `npm run tina:audit`, and `npm run setup:tina`.
- `src/lib/tina/` and `src/layouts/components/tina/`: the live preview.
- `.env.example`, which lists the optional settings.

The listing files of the blog, projects, and services (`-index`), and the privacy policy and terms, are `.mdx` instead of `.md`, so the editor can show them.

**Sanity** has no `src/content/`, no `src/i18n/`, and no `src/config/menu.*.json`, because that content lives in your Sanity project. It adds:

- `sanity.config.ts`, `sanity.cli.ts`, and `sanity/`: your Studio.
- `sanity/seed/demo-content.json`: the bundled sample content.
- `scripts/sanity/`: the commands behind `npm run setup`, `npm run dev:all`, and the preview server.
- `src/lib/sanity/`, `src/sanity-routes/`, and `src/middleware.ts`: reading content and showing drafts.
- `.env.example`, which explains every variable.

---

#### Key Directories & Their Purpose

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

- Stores direct public assets such as favicons, the gallery images, and the Open Graph image.
- Files in this folder are available by URL, such as `/images/og-image.jpg`.

##### `/src/content` ⟶ Editable Theme Content

- Holds almost all user-editable content for pages and reusable sections.
- Multilingual content lives inside `english/`, `french/`, and `arabic/` subfolders.

##### `/src/layouts` ⟶ Components, Sections, and Shortcodes

- Techlo stores its UI components under `src/layouts/components/`.
- The project uses path aliases like `@/components/...`, which map to `src/layouts/components/...`.
- MDX shortcodes live in `src/layouts/shortcodes/`.

##### `/scripts` ⟶ Build Helpers

- `dev.mjs` runs `npm run dev`.
- `toml-watcher.mjs` generates config output from `config.toml`.
- `generate-multilingual-content.mjs` and `remove-multilingual.mjs` help manage language content.
- `generate-favicons.mjs` creates favicon assets from the source logo.
- `remove-draft-from-sitemap.mjs` strips draft pages out of the generated sitemap during build.

---

#### ⚙️ Key Configuration Files

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

- Configures Astro integrations, markdown plugins, sitemap generation, image behavior, i18n routing, and Tailwind CSS 4.
- Fonts are generated from `src/config/fonts.json`.

##### `src/config/config.toml` - Global Theme Settings

- Main control file for **site identity, SEO, contact info, content folders, forms, multilingual settings, navigation button, smooth scroll, animation, Ask AI links, the theme credit, and copyright**.

###### 🔍 SEO & OpenGraph

- `[seo]` controls author, keywords, and robots.
- `[seo.robotsTxt]` controls `robots.txt`, including the AI crawler switches.
- `[seo.ai]` controls `llms.txt`, `llms-full.txt`, and the Markdown copies of pages.
- `[seo.sitemap]` controls the sitemap.
- `[opengraph]` controls preview image, locale, and card metadata.

###### 🎨 Theme & Content Settings

- `blogFolder`
- `servicesFolder`
- `projectsFolder`
- `stickyHeader`
- `blogPagination` / `pagination`
- `contactFormAction`
- `contactFormProvider`
- `settings.smoothScroll`
- `settings.animation`
- `settings.pageActions`
- `settings.themeCredit`

###### 🌎 Multilingual Settings

- `settings.multilingual.enable`
- `settings.multilingual.defaultLanguage`
- `settings.multilingual.disableLanguages`
- `settings.multilingual.showDefaultLangInUrl`

##### `src/content.config.ts` - Content Collections

- Defines collections for pages, services, blog, projects, team, testimonials, sections, and more.
- Reuses schemas from `src/sections.schema.ts`.

##### Styling & Fonts

- **Theme tokens and design variables** live in `src/styles/theme.css`.
- **Fonts** are configured in `src/config/fonts.json`.

#### Other Important Files

- **`package.json`** → Dependencies and npm scripts.
- **`tsconfig.json`** → Path aliases such as `@/components/*`, `@/shortcodes/*`, and `@/helpers/*`.
- **`vercel.json` / `vercel.sh` / `netlify.toml` / `wrangler.toml`** → Deployment configuration.
- **`AGENTS.md`, `SKILLS.md`, `CLAUDE.md`, `GEMINI.md`, `.github/copilot-instructions.md`, `.cursor/rules/theme-architecture.mdc`, `.windsurf/rules/theme-architecture.md`** → Instructions for AI coding assistants.

<br />

Now that you understand the structure, the next step is branding the site and configuring the logo.