Skip to content
New: Customize your theme with an AI assistant. Read the guide
Ultimate Astro Theme GuidesDocs
Log inBrowse Themes

File Structure

File Structure

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

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

In the Tina edition, the main theme folder is techlo-tina.

Main Theme Directory Structure

Techlo follows a modular structure focused on content collections, reusable section components, and configurable JSON and TOML settings. This is the Astro edition. The Tina and Sanity editions have the same layout, with the differences listed below.

  • Directorytechlo/
    • Directory.cursor/
      • Directoryrules/
        • theme-architecture.mdc (AI: Cursor)
    • Directory.github/
      • copilot-instructions.md (AI: GitHub Copilot)
    • Directory.vscode/
      • …
    • Directory.windsurf/
      • Directoryrules/
        • theme-architecture.md (AI: Windsurf)
    • Directorypublic/
      • Directory__astro_font_generated__/
        • …
      • Directoryimages/
        • Directoryfavicons/
          • …
        • Directorygallery/
          • …
        • og-image.jpg
      • Directoryplyr/
        • …
      • Directoryvideos/
        • …
      • .htaccess
      • _headers
      • umami.is.js
    • Directoryscripts/
      • dev.mjs
      • generate-favicons.mjs
      • generate-multilingual-content.mjs
      • remove-draft-from-sitemap.mjs
      • remove-multilingual.mjs
      • toml-watcher.mjs
    • Directorysrc/
      • Directoryassets/
        • Directoryimages/
          • …
      • Directoryconfig/ (Site-wide settings)
        • config.toml
        • fonts.json
        • language.json
        • menu.ar.json
        • menu.en.json
        • menu.fr.json
        • social.json
      • Directorycontent/ (Markdown and MDX content)
        • Directoryabout-us/
          • …
        • Directoryauthor/
          • …
        • Directoryblog/
          • …
        • Directorycontact/
          • …
        • Directoryfaq/
          • …
        • Directoryhomepage/
          • …
        • Directorypages/
          • …
        • Directorypricing/
          • …
        • Directoryprojects/
          • …
        • Directorysections/
          • …
        • Directoryservices/
          • …
        • Directoryteam/
          • …
        • Directorytestimonials/
          • …
        • _file_format.md
      • Directoryi18n/
        • ar.json
        • en.json
        • fr.json
      • Directorylayouts/
        • Directorycomponents/
          • Directorycards/
            • …
          • Directoryglobal/
            • Directoryfooter/
              • …
            • Directoryheader/
              • …
          • Directorysections/
            • …
          • Directoryutilities/
            • …
          • Directorywidgets/
            • …
        • Directoryhelpers/
          • …
        • Directoryshortcodes/
          • …
        • Base.astro
      • Directorylib/
        • Directoryintegrations/
          • …
        • Directoryutils/
          • …
        • contentParser.astro
        • iconNames.ts
        • PageLoader.astro
        • shortcodes.ts
        • taxonomyParser.astro
      • Directorypages/
        • Directory[…lang]/
          • 404.astro
          • [page].astro
          • about.astro
          • contact.astro
          • faq.astro
          • home-three.astro
          • home-two.astro
          • index.astro
          • llms-full.txt.ts
          • llms.txt.ts
          • pricing.astro
          • testimonials.astro
          • Directoryblog/
            • …
          • Directoryprojects/
            • …
          • Directoryservices/
            • …
          • Directoryteam/
            • …
        • 404.astro
        • […path].md.ts
        • robots.txt.ts
      • Directoryplugins/
        • Directoryodometer/
          • …
        • fontTailwindPlugin.js
        • scroll-menu.ts
        • sticky-sidebar.js
      • Directorystyles/
        • animation.css
        • base.css
        • buttons.css
        • components.css
        • globals.css
        • navigation.css
        • rtl.css
        • safe.css
        • theme.css
        • utilities.css
      • Directorytypes/
        • …
      • content.config.ts
      • env.d.ts
      • sections.schema.ts
    • .editorconfig
    • .gitignore
    • .markdownlint.json
    • .prettierrc
    • AGENTS.md (AI: the main instructions)
    • CHANGELOG.md
    • CLAUDE.md (AI: Claude Code)
    • GEMINI.md (AI: Gemini CLI)
    • README.md
    • SKILLS.md (AI: step-by-step recipes)
    • astro.config.mjs
    • netlify.toml
    • package-lock.json
    • package.json
    • tsconfig.json
    • vercel.json
    • vercel.sh
    • wrangler.toml

Each folder under src/content/ has an english/, a french/, and an arabic/ subfolder. Add or edit content inside the language folder you want to update.

What Differs By Edition

Tina has everything above except scripts/dev.mjs, and adds:

  • tina/: the editor’s setup. tina/generated/collections.json holds its forms.
  • scripts/tina/ and scripts/cms/: the commands behind npm run dev, npm run tina:generate, npm run tina:audit, and npm run setup:tina.
  • src/lib/tina/ and src/layouts/components/tina/: the live preview.
  • .env.example, which lists the optional settings.

The listing files of the blog, projects, and services (-index), and the privacy policy and terms, are .mdx instead of .md, so the editor can show them.

Sanity has no src/content/, no src/i18n/, and no src/config/menu.*.json, because that content lives in your Sanity project. It adds:

  • sanity.config.ts, sanity.cli.ts, and sanity/: your Studio.
  • sanity/seed/demo-content.json: the bundled sample content.
  • scripts/sanity/: the commands behind npm run setup, npm run dev:all, and the preview server.
  • src/lib/sanity/, src/sanity-routes/, and src/middleware.ts: reading content and showing drafts.
  • .env.example, which explains every variable.

Key Directories & Their Purpose

/public⟶ Static Assets
  • Stores direct public assets such as favicons, the gallery images, and the Open Graph image.
  • 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.
  • Multilingual content lives inside english/, french/, and arabic/ subfolders.
/src/layouts⟶ Components, Sections, and Shortcodes
  • Techlo 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
  • dev.mjs runs npm run dev.
  • 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.
  • remove-draft-from-sitemap.mjs strips draft pages out of the generated sitemap during build.

⚙️ Key Configuration Files

astro.config.mjs- Astro Configuration
  • Configures Astro integrations, markdown plugins, sitemap generation, image behavior, i18n routing, and Tailwind CSS 4.
  • 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, smooth scroll, animation, Ask AI links, the theme credit, and copyright.
🔍 SEO & OpenGraph
  • [seo] controls author, keywords, and robots.
  • [seo.robotsTxt] controls robots.txt, including the AI crawler switches.
  • [seo.ai] controls llms.txt, llms-full.txt, and the Markdown copies of pages.
  • [seo.sitemap] controls the sitemap.
  • [opengraph] controls preview image, locale, and card metadata.
🎨 Theme & Content Settings
  • blogFolder
  • servicesFolder
  • projectsFolder
  • stickyHeader
  • blogPagination / pagination
  • contactFormAction
  • contactFormProvider
  • settings.smoothScroll
  • settings.animation
  • settings.pageActions
  • settings.themeCredit
🌎 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, projects, 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 / vercel.sh / netlify.toml / wrangler.toml → Deployment configuration.
  • AGENTS.md, SKILLS.md, CLAUDE.md, GEMINI.md, .github/copilot-instructions.md, .cursor/rules/theme-architecture.mdc, .windsurf/rules/theme-architecture.md → Instructions for AI coding assistants.

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

Type something to search...
to navigateto selectESC to close