File Structure

After unzipping the theme zip file, you will find the following folder and file structure:

• Directorythemes/

  • Directorylooka/ (📌 Main theme folder)

    • …
• changelog.html (🔗 Links to online changelog)
• documentation.html (🔗 Links to online documentation)

---

Main Theme Directory Structure

Our theme follows a modular structure for easy customization and scalability.

• Directorylooka/

  • Directory.vscode/ (⚙️ VSCode settings & extensions)

    • …
  • Directorypublic/ (🌍 Static assets: images, videos, fonts)

    • …
  • Directoryscripts/ (📜 Automation scripts)

    • …
  • Directorysrc/ (📌 Core source code)

    • __tests__ (🧪 Unit & integration tests)
    • Directoryassets/

      • Directoryimages/

        • …
    • Directoryconfig/ (⚙️ Site-wide settings)

      • config.toml (🌍 Global config)
      • language.json (🌎 Language settings)
      • menu.en.json (📄 English menu)
      • menu.fr.json (📄 French menu)
      • social.json (🔗 Social links)
      • theme.json (🎨 Theme settings)
    • Directorycontent/ (📑 Content management)

      • Directoryabout/ (ℹ️ About page)

        • Directoryenglish/ (🇬🇧 English version)

          • …
        • Directoryfrench/ (🇫🇷 French version)

          • …
      • Directoryhomepage/ (🏠 Homepage)

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

        • …
      • Directorysections/ (📌 Reusable sections: hero, testimonials)

        • …
      • Directorywidgets/ (🔹 Widget content: recent posts)

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

      • en.json (🇬🇧 English)
      • fr.json (🇫🇷 French)
    • Directorylayouts/ (📐 Page layouts & UI components)

      • Directorycomponents/ (🛠️ Reusable UI elements)

        • Directorybuttons/

          • …
        • Directorycards/

          • …
        • Directoryglobal/

          • …
        • Directorysections/

          • …
        • Directoryseo/

          • …
        • Directorysocial/

          • …
        • Directoryutilities/

          • …
        • Directorywidgets/

          • …
        • LayoutWrapper.astro
        • SinglePageLayout.astro
      • Directoryhelpers/

        • …
      • Directoryshortcodes/ (✂️ Custom MDX components)

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

      • …
    • Directorypages/ (📄 Dynamic & static pages)

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

        • Directorycareer/

          • …
        • Directoryservices/

          • …
        • about.astro
        • contact.astro
        • index.astro (🏠 Homepage)
      • 404.astro
      • robots.txt.ts (🤖 Robots.txt generator)
    • Directoryplugins/

      • Directoryodometer/ (📊 Number animations)

        • …
    • Directorystyles/

      • animation.scss
      • base.scss
      • components.scss
      • navigation.scss
      • utilities.scss
    • Directorytypes/ (💡 TypeScript definitions)

      • …
    • content.config.ts (📑 Content settings)
    • env.d.ts (🔐 Env variable types)
  • .editorconfig (✏️ Code style rules)
  • .gitignore (🚫 Ignore files in Git)
  • .markdownlint.json (✅ Markdown linting)
  • .prettierrc (🎨 Code formatting)
  • astro.config.mjs (🔧 Astro config)
  • netlify.toml (🚀 Netlify settings)
  • package.json (📦 Project dependencies & scripts)
  • postcss.config.js (🎨 PostCSS settings)
  • tailwind.config.js (🎨 Tailwind settings)
  • tsconfig.json (💡 TypeScript config)
  • vercel.json (🚀 Vercel settings)
  • vercel.sh (📜 Vercel deployment script)

---

Key Directories & Their Purpose

/public⟶ Static Assets

• Stores images, icons, fonts, and other static files.
• Files inside this folder are accessible via direct URLs (/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.
• robots_txt and sitemap settings for search engines.
• opengraph.image for social media previews.

🎨 Theme Customization

• blog_folder, services_folder, and portfolio_folder define content structure.
• sticky_header, brand_name, and pagination settings.

🌎 Multilingual Settings

• enable → Enables/disables multilingual support.
• default_language → Defines the primary language.
• disable_languages → Lists languages to - disable.

theme.json- Styling & Typography

• Defines color schemes, font settings, and UI styles.

🎨 Theme Colors

• theme_color.primary → Main brand color.
• theme_color.body → Background color.

🖋 Typography

• font_family.primary → Main font.
• font_size.base → Base font size.

Other Important Files

• package.json → Manages dependencies & npm scripts (npm run dev).
• tailwind.config.js & postcss.config.js → Customize Tailwind CSS & PostCSS.
• vercel.json / netlify.toml → Configuration for deployments.

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