Folder Structure

The following highlights key files and folders you're likely to use in ChromeOS.dev's folder structure, with explanations following.

.
├── patches
├── functions
├── lib
│   ├── collections
│   ├── filters
│   ├── gulp
│   ├── helpers
│   ├── linting
│   │   └── schemas
│   ├── markdown
│   └── transforms
├── site
│   ├── _data
│   ├── _generated
│   │   └── _components
│   ├── _components
│   ├── _layouts
│   ├── {{langcode}}
│   │   └── {{langcode}}.11tydata.js
│   │   └── _data
│   ├── public
│   ├── js
│   │   ├── animation
│   │   ├── components
│   │   ├── lib
│   │   ├── worklets
│   │   ├── main.js
│   │   └── search-worker.js
│   ├── sass
│   │   ├── components
│   │   ├── globals
│   │   │   └── extends
│   │   ├── layouts
│   │   └── style.scss
│   ├── manifest.json
│   └── sw.json
├── tests
│   ├── fixture
│   ├── helpers
│   └── {{tests}}
├── .eleventy.js
├── vite.config.js
├── package.json
├── ava.config.cjs
├── vrt.js
└── firebase.json

1. functions
2. lib
3. site
4. tests
5. Config files

functions

The functions folder is home to our Firebase function code.

lib

The lib folder contains scripts that get used as part of our build process. Files in the collections and filters folders are automatically found and included in our Eleventy build process. The markdown folder includes our Markdown compiling configuration and project-specific plugins, the helpers folder contains shared functionality across our build process, the linting folder contains linting helpers, especially for our Markdown and Schema linting, and the transforms folder contains HTML transformations.

site

The site directory is where all source code for the website goes. It has the following primary folders:

• The _data directory is where global data files are stored.
• The _generated folder contains templates that get output multiple times based on variables using Eleventy's pagination functionality. This is especially used for generating localized versions of generic and data-drive pages (as opposed to content-drive pages) and shared components (in the _components folder) like the global header and footer
• The _components folder (called includes in Eleventy documentation) and the layouts in the _layouts folder contain reusable templating for 11ty. See Eleventy's Nunjucks documentation for more information on how they work together.
• There are folders named after ISO 639-1 language codes (such as en and es). These folders contain the internationalized content for that given language code. Each of these folders (in the tree named as {{langcode}}) must have a _data folder and corresponding {{langcode}}.11tydata.js file in order internationalization to properly work.
• manifest.json which is the site's web app manifest
• sw.js which is the Service Worker
• js contains the site's JavaScript
  • main.js which is the main JavaScript entry point for the site
  • search-worker.js which a web worker for offline search
  • animations folder holds Lottie animation information
  • components folder holds browser JavaScript components
  • lib folder holds helpers to use across browser JavaScript
  • worklets folder holds worklets, like those used in the CSS Paint API
• sass contains the site's styling
  • style.scss which is the main Sass entry point for the site
  • globals folder holds Sass shared across all files (but shouldn't write any CSS itself)
  • components folder holds individual component styling
  • layouts` folder holds styling for individual layouts. Components and layouts should match their corresponding templates

tests

The tests folder contains tests and test helpers. The fixture folder contains test fixtures to use throughout testing, the helpers folder contains code to help when testing. Other folders in the tests directory are for grouping of like tests together and are not significant to the overall test hierarchy.

Config files

Build system and test config files, .eleventy.js, vite.config.js, ava.config.cjs, vrt.js