File Structure

File Structure

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 management)

      • Directoryabout/ (About page — english/ + french/)

        • …
      • Directoryauthor/ (Blog post authors)

        • …
      • Directoryblog/ (Blog posts — english/ + french/)

        • …
      • Directorycareer/ (Job openings)

        • …
      • Directorycase-studies/ (Portfolio / projects)

        • …
      • Directorycontact/ (Contact page content)

        • …
      • Directoryfaq/ (FAQ entries)

        • …
      • Directoryhomepage/ (Homepage — english/ + french/)

        • …
      • Directorypages/ (Static pages: elements, terms, privacy)

        • …
      • Directorypricing/ (Pricing plans)

        • …
      • Directorysections/ (Reusable sections — english/ + french/)

        • …
      • Directoryservices/ (Service entries)

        • …
      • Directoryteam/ (Team members)

        • …
      • Directorywidgets/ (Reusable widgets, e.g. cta-block)

        • …
      • _file_format.md (Frontmatter docs)
    • Directoryi18n/ (Translations)

      • en.json (English)
      • fr.json (French)
    • Directorylayouts/ (Page layouts & UI components)

      • Directorycomponents/ (Reusable UI elements)

        • Directorycards/

          • …
        • Directoryglobal/

          • …
        • Directorysections/

          • …
        • Directoryseo/

          • …
        • Directorysocial/

          • …
        • Directoryutilities/

          • …
        • Directorywidgets/

          • …
        • SinglePageLayout.astro
      • Directoryhelpers/

        • …
      • Directoryshortcodes/ (Custom MDX components)

        • …
      • Base.astro
    • Directorylib/ (Shared utilities & hooks)

      • …
    • Directorypages/ (Dynamic & static pages)

      • Directory[…lang]/ (Multi-language support)

        • index.astro (Homepage)
        • about.astro
        • contact.astro
        • Directoryblog/

          • …
        • (other theme-specific routes)
      • 404.astro
      • robots.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 settings)
    • env.d.ts (Env variable types)

---

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 in Looka’s [settings] block:
  • blogFolder (default "blog")
  • servicesFolder (default "services")
  • portfolioFolder (default "case-studies")
• 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).
• wrangler.toml / netlify.toml / vercel.json → Configuration for deployments (Looka ships with Cloudflare Pages, Netlify, and Vercel configs).

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