File Structure

Stella Theme Documentation

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

Directorythemes/
- Directorystella/ (📌 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.

Directorystella/
- Directory.vscode/ (⚙️ VSCode Editor settings & extensions)
  - …
- Directorypublic/ (📁 Static assets: images, videos)
  - …
- Directoryscripts/ (📜 CLI scripts or automation)
  - …
- Directorysrc/ (📌 Core source code)
  - __tests__ (🧪 Unit & integration tests)
  - Directoryassets/
    Directoryimages/ (🖼️ Theme images)
    …
    Directoryfonts/ (🔤 Custom fonts)
    …
  - Directoryconfig/ (⚙️ Theme & site settings)
    fonts.json (🖌️ Fonts customization)
    menu.en.json (🇬🇧 Navigation)
    menu.fr.json (🇪🇸 Navigation)
    language.json (🌐 Language settings)
    social.json (🔗 Social links)
  - Directorycontent/ (📚 Page content)
    Directoryhomepage/
    Directoryenglish/
    …
    Directoryspanish/
    …
    Directoryabout/
    Directoryenglish/
    …
    Directoryspanish/
    …
    Directoryintegration/
    …
    Directorypages/ (Static: terms, privacy, etc.)
    …
    Directorysections/ (📌 Sectional content like hero, features, call to action)
    …
    Directorywidgets/ (🧩 Widget content: recent posts, contact info)
    …
    _file_format.md (📄 Frontmatter format reference)
  - Directoryi18n/ (🌐 Translations)
    en.json
    es.json
  - Directorylayouts/ (🧱 Page templates & layout components)
    Directorycomponents/
    Directorybuttons/
    …
    Directorycards/
    …
    Directorysections/
    …
    Directoryseo/
    …
    Directoryglobal/
    …
    Directorysocial/
    …
    Directorywidgets/
    …
    Directoryutilities/
    …
    SinglePageLayout.astro
    TeamSingle.astro
    ServicesSingle.astro
    Directoryhelpers/ (🛠️ Utility helpers)
    …
    Directoryshortcodes/ (✂️ MDX components / custom shortcodes)
    …
    Base.astro
  - Directorylib/ (📦 Shared logic, hooks)
    …
  - Directorypages/ (📄 Astro route pages)
    Directory[…lang]/
    Directoryservices/
    …
    Directoryblog/
    index.astro
    [slug].astro
    …
    about.astro
    [page].astro
    contact.astro
    index.astro
    404.astro
    robots.txt.ts
  - Directoryplugins/
    Directoryscroll-reveal/ (🎞️ Animations or effects)
    …
    Directoryodometer/ (🔢 Counters)
    …
  - Directorystyles/ (🎨 Global & component styles)
    global.css
    animations.css
    navigation.css
    utilities.css
    safe.css
  - Directorytypes/ (📘 TypeScript types)
    …
  - content.config.ts (🧭 Astro Content Collections config)
  - env.d.ts (🌍 Env variable types)
- .editorconfig (🔧 Code style)
- .gitignore
- .markdownlint.json
- .prettierrc
- astro.config.mjs
- netlify.toml
- pnpm-lock.yaml
- vercel.json
- tsconfig.json
- package.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).
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.