File Structure

Upstart Theme Documentation

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

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

Directoryupstart/
- 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/
    …
    Directoryfrench/
    …
    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
    fr.json
  - Directorylayouts/ (Page layouts & UI components)
    Directorycomponents/
    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
    globals.css
    theme.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 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.

`src/styles/theme.css`- Styling & Typography

@theme inline {
  /* Configure base font size, type scale, and font families in `src/config/fonts.json` */
  --leading-body: 1.8;
  --leading-inherit: inherit;

  /* Colors */
  --color-primary: #4f1ad6;
  --color-secondary: #b2a6f1;
  --color-accent: #1a122e;
  --color-body: #0e0c0c;
  --color-border-light: #242222;
  --color-theme-dark: #1a191c;

  --color-text-default: #c8c1c1;
  --color-dark: #000e30;
  --color-light: #fff6f6;

  /* Screen */
  --breakpoint-*: initial;
  --breakpoint-sm: 540px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1320px;

  /* Typography */
  --text-base: 1rem;
  --text-base-scale: 1.272;
  --text-base-sm: calc(var(--text-base) * 0.9);

  --text-h1: calc(var(--text-base) * pow(var(--text-base-scale), 6));
  --text-h2: calc(var(--text-base) * pow(var(--text-base-scale), 5));
  --text-h3: calc(var(--text-base) * pow(var(--text-base-scale), 4));
  --text-h4: calc(var(--text-base) * pow(var(--text-base-scale), 3));
  --text-h5: calc(var(--text-base) * pow(var(--text-base-scale), 2));
  --text-h6: calc(var(--text-base) * pow(var(--text-base-scale), 1));

  --text-h1-sm: calc(var(--text-h1) * 0.7);
  --text-h2-sm: calc(var(--text-h2) * 0.7);
  --text-h3-sm: calc(var(--text-h3) * 0.7);
  --text-h4-sm: calc(var(--text-h4) * 0.9);
  --text-h5-sm: calc(var(--text-h5) * 0.9);
  --text-h6-sm: calc(var(--text-h6) * 0.9);
}

Defines color schemes, font settings, and UI styles.

`src/config/fonts.json`- Font Family

{
  "fontFamily": [
    {
      "name": "Satoshi",
      "src": [
        {
          "style": "normal",
          "weight": "400",
          "path": "public/fonts/Satoshi-Regular.woff2"
        },
        {
          "style": "normal",
          "weight": "500",
          "path": "public/fonts/Satoshi-Medium.woff2"
        }
      ],
      "preload": false,
      "display": "swap",
      "cssVariable": "font-primary",
      "fallback": "sans-serif",
      "locallyHosted": false,
      "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
    },
    {
      "name": "Syne",
      "src": [
        {
          "style": "normal",
          "weight": "500"
        }
      ],
      "preload": true,
      "display": "swap",
      "cssVariable": "font-secondary",
      "provider": "google-fonts",
      "fallback": "sans-serif",
      "locallyHosted": true,
      "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
    },
    {
      "name": "Instrument Serif",
      "src": [
        {
          "style": "normal",
          "weight": "400"
        }
      ],
      "preload": true,
      "display": "swap",
      "cssVariable": "font-tertiary",
      "provider": "google-fonts",
      "fallback": "sans-serif",
      "locallyHosted": true,
      "__comment": "set locallyHosted: true if you want to download google fonts and hosted them locally automatically"
    }
  ]
}

List of font families including primary, secondary, etc.

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.

File Structure

Main Theme Directory Structure

Key Directories & Their Purpose

/public⟶ Static Assets

/src⟶ Main Codebase

/scripts⟶ Automation Scripts