Top Level Files

• gatsby-* - These are Gatsby configuration files.
• postcss.config.js - PostCSS is utilized as the processor for Tailwind CSS, and this is its configuration file.
• shop.config.ts - This serves as the main Clay configuration file.
• tailwind.config.js - This is the configuration file for Tailwind CSS, which includes the custom color palette amongst other settings.
• wrap-root-element.tsx - By default, Gatsby re-renders everything when transitioning between pages. In this file, we define the wrapPageElement function that is used in gatsby-browser.js and gatsby-ssr.tsx. This function wraps an element with the SiteLayout component, allowing it to persist across page transitions.

Other Important Files

• content_models/*.json - These are the content models defined and utilized by Clay.
• data/fetch-data.ts - This script fetches all backend data from Lana to data.json. It is a necessary step before you can start Gatsby in development mode. You can run it using the shortcut: npm run fetch-data.
• src/cmodel/cmodel.ts - This file is the result of running npm run generate-content-models. It contains generated types for content models.
• src/css/index.css - This is the main (and only) CSS file, containing Tailwind directives as well as a few additional hacks and modifications.

TypeScript Files

• src/components/* - These are low-code components. They are mostly self-contained and independent from the rest of the code, with minor exceptions. Most, if not all, components are mirrored in storybook.
• src/components/api/* - These components can use project-specific data structures and functions.
• src/components/icons/* - These are purely icon components (SVG in JSX).
• src/components/logos/* - These are purely logo components (SVG in JSX).
• src/components/graphic/* - These are purely graphic components (SVG in JSX). They are effectively larger vector images.
• src/data/* - These files define data types for Gatsby pages. Everything outputted by Gatsby is described here.
• src/layout/* - This is where the SiteLayout component is found. It's a top-level component that persists across page transitions.
• src/pages/404.tsx - This is the "Not Found" page.
• src/state/* - These files contain the website's global state.
• src/state/async/* - These files represent the website's Effector-based asynchronous state. Unlike the global state, this is loaded on-demand on the appropriate pages (with some parts always loaded from the SiteLayout).
• src/stories/* - These are the Storybook stories. Most, if not all, files here match low-code components.
• src/templates/* - These are Gatsby page templates. Templates for Product/Category/Home/Search/Page/Profile can be found here. All the files here are rendered by Gatsby as a "page".
• src/utils/* - This directory contains generic "utility" files with reusable TypeScript code.