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/
  - …
- Directorypublic/
  - …
- Directoryscripts/
  - …
- Directorysrc/
  - __tests__
  - Directoryassets/
    Directoryimages/
    …
  - Directoryconfig/
    config.toml
    language.json
    menu.en.json
    menu.fr.json
    social.json
    theme.json
  - Directorycontent/
    Directoryabout/
    Directoryenglish/
    …
    Directoryfrench/
    …
    Directoryhomepage/
    …
    Directorypages/
    …
    Directorysections/
    …
    Directorywidgets/
    …
    _file_format.md
  - Directoryi18n/
    en.json
    fr.json
  - Directorylayouts/
    Directorycomponents/
    Directorybuttons/
    …
    Directorycards/
    …
    Directoryglobal/
    …
    Directorysections/
    …
    Directoryseo/
    …
    Directorysocial/
    …
    Directoryutilities/
    …
    Directorywidgets/
    …
    BlogListPage.astro
    CareerSingle.astro
    CustomButton.astro
    CustomButtonContent.astro
    PortfolioSingle.astro
    SinglePageLayout.astro
    Directoryhelpers/
    …
    Directoryshortcodes/
    …
    Base.astro
  - Directorylib/
    …
  - Directorypages/
    Directory[…lang]/
    Directorycareer/
    …
    Directoryservices/
    …
    about.astro
    contact.astro
    index.astro
    404.astro
    robots.txt.ts
  - Directoryplugins/
    Directoryodometer/
    …
  - Directorystyles/
    animation.css
    base.css
    buttons.css
    components.css
    global.css
    navigation.css
    safe.css
    utilities.css
  - Directorytypes/
    …
  - content.config.ts
  - env.d.ts
- .editorconfig
- .gitignore
- .markdownlint.json
- .prettierrc
- astro.config.mjs
- netlify.toml
- package.json
- tsconfig.json
- vercel.json
- vercel.sh

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 excludeFromSitemap: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.
robotsTxt and sitemap settings for search engines.
opengraph.image for social media previews.

🎨 Theme Customization

blogFolder, servicesFolder, and portfolioFolder define content structure.
stickyHeader, brandName, and pagination settings.

🌎 Multilingual Settings

enable → Enables/disables multilingual support.
defaultLanguage → Defines the primary language.
disableLanguages → Lists languages to - disable.

`fonts.json`- Styling & Typography

Uses Google Fonts with local hosting enabled.

Other Important Files

package.json → Manages dependencies & npm scripts (npm run dev).
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.