File Structure

Lumio Theme Documentation

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

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

Main Theme Directory Structure

Lumio follows a modular structure focused on content collections, reusable section components, and configurable JSON/TOML settings.

Directorylumio/
- Directorypublic/
  - Directoryimages/
    …
  - Directoryplyr/
    …
  - Directoryvideos/
    …
- Directoryscripts/
  - generate-favicons.mjs
  - generate-multilingual-content.mjs
  - remove-draft-from-sitemap.mjs
  - remove-multilingual.mjs
  - toml-watcher.mjs
- Directorysrc/
  - tests / (Unit tests)
  - Directoryassets/
    Directoryimages/
    …
  - Directoryconfig/ (Site-wide settings)
    config.toml
    fonts.json
    language.json
    menu.en.json
    menu.fr.json
    social.json
  - Directorycontent/ (Markdown/MDX content)
    Directoryabout/
    …
    Directoryblog/
    …
    Directorycase-studies/
    …
    Directorycontact/
    …
    Directoryfaq/
    …
    Directoryfeatures/
    …
    Directoryhomepage/
    …
    Directorypages/
    …
    Directorypricing/
    …
    Directorysections/
    …
    Directoryservices/
    …
    Directoryteam/
    …
    Directorytestimonial/
    …
    Directorywidgets/
    …
  - Directoryi18n/
    en.json
    fr.json
  - Directorylayouts/
    Directorycomponents/
    Directorycards/
    …
    Directoryglobal/
    …
    Directorysections/
    …
    Directoryseo/
    …
    Directorysocial/
    …
    Directoryutilities/
    …
    Directorywidgets/
    …
    Directoryhelpers/
    …
    Directoryshortcodes/
    …
    Base.astro
  - Directorylib/
    Directoryutils/
    …
  - Directorypages/
    Directory[…lang]/
    index.astro
    about.astro
    contact.astro
    faq.astro
    home-two.astro
    home-three.astro
    pricing.astro
    team.astro
    Directoryblog/
    …
    Directorycase-studies/
    …
    Directoryservices/
    …
    404.astro
    robots.txt.ts
  - Directoryplugins/
    Directoryodometer/
    …
    scroll-menu.ts
    sticky-sidebar.js
  - Directorystyles/
    animation.css
    base.css
    buttons.css
    components.css
    global.css
    navigation.css
    safe.css
    theme.css
    utilities.css
  - Directorytypes/
    …
  - content.config.ts
  - sections.schema.ts

Key Directories & Their Purpose

`/public`⟶ Static Assets

Stores direct public assets such as favicons, Open Graph images, videos, and player assets.
Files in this folder are available by URL, such as /images/og-image.jpg.

`/src/content`⟶ Editable Theme Content

Holds almost all user-editable content for pages and reusable sections.
Most multilingual content lives inside english/ and french/ subfolders.

`/src/layouts`⟶ Components, Sections, and Shortcodes

Lumio stores its UI components under src/layouts/components/.
The project uses path aliases like @/components/..., which map to src/layouts/components/....
MDX shortcodes live in src/layouts/shortcodes/.

`/scripts`⟶ Build Helpers

toml-watcher.mjs generates config output from config.toml.
generate-multilingual-content.mjs and remove-multilingual.mjs help manage language content.
generate-favicons.mjs creates favicon assets from the source logo.

⚙️ Key Configuration Files

`astro.config.mjs`- Astro Configuration

Configures Astro integrations, markdown plugins, sitemap generation, image behavior, i18n routing, and Tailwind.
Fonts are generated from src/config/fonts.json.

`src/config/config.toml`- Global Theme Settings

Main control file for site identity, SEO, contact info, content folders, forms, multilingual settings, navigation button, announcement bar, and copyright.

🔍 SEO & OpenGraph

[seo] controls author, keywords, robots, sitemap, and robots.txt behavior.
[opengraph] controls preview image, locale, and card metadata.

🎨 Theme & Content Settings

blogFolder
servicesFolder
caseStudiesFolder
stickyHeader
pagination
contactFormAction
contactFormProvider

🌎 Multilingual Settings

settings.multilingual.enable
settings.multilingual.defaultLanguage
settings.multilingual.disableLanguages
settings.multilingual.showDefaultLangInUrl

`src/content.config.ts`- Content Collections

Defines collections for pages, services, blog, case studies, team, testimonials, sections, and more.
Reuses schemas from src/sections.schema.ts.

Styling & Fonts

Theme tokens and design variables live in src/styles/theme.css.
Fonts are configured in src/config/fonts.json.

Other Important Files

package.json → Dependencies and npm scripts.
tsconfig.json → Path aliases such as @/components/*, @/shortcodes/*, and @/helpers/*.
vercel.json / netlify.toml / vercel.sh → Deployment configuration.

Now that you understand the structure, the next step is branding the site and configuring the logo.

File Structure

Main Theme Directory Structure

Key Directories & Their Purpose

/public⟶ Static Assets

/src/content⟶ Editable Theme Content

/src/layouts⟶ Components, Sections, and Shortcodes

/scripts⟶ Build Helpers