File Structure

Folex Theme Documentation

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

Directorythemes/
- DirectorythemeName/ (📌 Main theme folder)
  - …
changelog.html (🔗 Links to online changelog)
documentation.html (🔗 Links to online documentation)

Main Theme Directory Structure

Our themes follow a modular structure for easy customization and scalability.

DirectorythemeName/
- Directorysrc/
  - tests / (Unit & integration tests)
  - Directoryassets/
    Directoryimages/
    …
  - Directoryconfig/ (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)
  - Directorycontent/ (Content collections, one folder per language)
    Directoryabout-us/ (About page content)
    …
    Directoryauthor/ (Blog author profiles)
    …
    Directoryblog/ (Blog posts)
    …
    Directorycontact/ (Contact page content)
    …
    Directoryfaq/ (FAQ page content)
    …
    Directoryhomepage/ (Homepage variants: digital agency, creative-agency, personal-portfolio, startup-agency)
    …
    Directorypages/ (Static pages: privacy-policy, terms-conditions, elements)
    …
    Directoryportfolio/ (Portfolio projects)
    …
    Directorypricing/ (Pricing page content)
    …
    Directorysections/ (Reusable page sections)
    …
    Directoryservices/ (Services)
    …
    Directoryteam/ (Team members)
    …
    _file_format.md (Frontmatter reference)
  - Directoryi18n/ (UI string translations)
    en.json (English)
    fr.json (French)
  - Directorylayouts/ (Page layouts & UI components)
    Directorycomponents/ (Reusable UI elements)
    Directorycards/
    …
    Directoryglobal/ (header, footer, logo)
    …
    Directorysections/ (homepage section components)
    …
    Directoryseo/
    …
    Directoryutilities/
    …
    Directorywidgets/ (contact form, subscription, offcanvas, search, etc.)
    …
    SinglePageLayout.astro
    Directoryhelpers/ (Icons.astro)
    …
    Directoryshortcodes/ (Custom MDX components: Accordion, Tabs, Notice, Testimonial, etc.)
    …
    Base.astro
  - Directorylib/ (Shared utilities & hooks)
    …
  - Directorypages/ (Dynamic & static pages)
    Directory[…lang]/ (Multi-language support)
    index.astro (Digital Agency homepage)
    creative-agency.astro
    personal-portfolio.astro
    startup-agency.astro
    about.astro
    contact.astro
    faq.astro
    pricing.astro
    Directoryblog/ (list, single, category, tag, pagination)
    …
    Directoryportfolio/ (masonry, gallery, slider, full-width, single)
    …
    Directoryservices/ (grid, two-column, accordion, single)
    …
    Directoryteam/ (list, single)
    …
    404.astro
    robot.txt.ts (robots.txt generator)
  - Directoryplugins/
    Directoryodometer/ (Number animations)
    …
  - Directorystyles/
    base.css
    safe.css
    buttons.css
    global.css
    utilities.css
    animation.css
    components.css
    navigation.css
    theme.css
  - Directorytypes/ (TypeScript definitions)
    …
  - content.config.ts (Content collection schemas)
  - env.d.ts (Env variable types)

Each folder under src/content/ contains an english/ and a french/ subfolder (one per enabled language). Add or edit content inside the language folder you want to update.

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.
- generate-multilingual-content.mjs → Scaffolds translated copies of your content folders.
- remove-multilingual.mjs → Removes all multilingual content & i18n files.
- remove-draft-from-sitemap.mjs → Removes pages with draft: true or excludeFromSitemap: true from the sitemap.
- toml-watcher.mjs → Compiles config.toml into a generated JSON config used at build time.

⚙️ 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 (under [settings]):
- blogFolder
- servicesFolder
- portfolioFolder
stickyHeader, pagination, contactFormProvider, and pageHeaderDefaultImage 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).
wrangler.toml / netlify.toml / vercel.json → Deployment configs for Cloudflare Pages, Netlify, and Vercel. Folex ships preconfigured for Cloudflare Pages.

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