Folder structure

Content lives in content/, the site’s code in src/, the admin’s configuration in tina/. Knowing those three folders is enough to start.

The whole tree

The template’s root folder

content/            Content, one copy per language (vi, en)
  pages/vi/, en/      Pages
  menus/              Header and footer menus
  chrome/             Header, footer, announcement bar
  schemes/            Colour schemes
  theme.json          Brand name, logo, fonts, contact details
  seo.json            Site-wide SEO and trackers
public/
  uploads/            The site's images (the admin uploads here)
  samples/            The engine's sample photos
  variants/           Smaller copies for phones (made by pnpm images)
src/
  pages/              Routes: public pages, English copies, sitemap, robots.txt
  sections/           One folder per section
  components/         Shared components
  layouts/  lib/  styles/
tina/
  config.ts           Admin configuration
  collections/        The admin's collections and their fields
  tina-lock.json      The admin's schema; TinaCloud reads it, always commit it
spec/                 How each section behaves, in words
scripts/              Check scripts and tests
vendor/               The modified TinaCMS packages
dist/                 Build output (generated, not committed)

Folders inside content/ vary by template: one with a blog has posts/, one with a shop has products/ and categories/.

Two versions of a page

The same file name in vi/ and en/ makes two translations of one page: content/pages/vi/gioi-thieu.json is /gioi-thieu/, content/pages/en/gioi-thieu.json is /en/gioi-thieu/. home.json is that language’s home page. The language switch finds the other version by file name.

A section in src/sections

One section’s folder

src/sections/<name>/
  schema.ts       The section's fields in the admin
  <Name>.tsx      Its markup (React, rendered to HTML at build time)
  <name>.css      Its own styles
  client.ts       Browser behaviour, when it needs any
  examples.json   Sample data for the /design page

Note

After adding or renaming a section folder, run pnpm registry to update the list of sections. Never edit registry.ts, registry.react.ts or sections.css by hand.

Images

The site’s images live in public/uploads/ and are referenced as /uploads/…. Smaller copies for phones live in public/variants/, made by pnpm images (see 2.3 Images).