File Structure

Looka Theme Documentation

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 Editor 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.css
    base.css
    buttons.css
    components.css
    main.css
    navigation.css
    safe.css
    utilities.css
  - 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)
- 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 → Array of fonts including primary, secondary, etc.
font_size.base → Base font size.

Other Important Files

package.json → Manages dependencies & npm scripts (npm run dev).
tailwind.config.js → Customize Tailwind CSS.
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.