Code.org Marketing Websites

This directory contains packages and applications that power Code.org marketing sites.

Note: Code.org's learn platform (student experience, curriculum, teacher tools, etc.) is built on the Code.org Main Repository.

What's inside?

This directory uses Turborepo to manage the monorepo and uses the following package structure:

• apps: Applications or services (Contentful CMS, Storybook, etc.)
• packages: Libraries, build tools, configurations (Shared linter configs, component library, etc.)

Apps

Open source Code.org marketing applications:

• @code-dot-org/marketing: Code.org's multi-tenant marketing site (uses Contentful).
• @code-dot-org/design-system-storybook: A Storybook for the marketing component library (atomic, molecular) components. instance for the Code.org design system (@code-dot-org/component-library). Publicly available at https://code-dot-org.github.io/code-dot-org/marketing-component-library-storybook.

Packages

Publicly available packages:

• @code-dot-org/component-library: The Code.org Marketing Design System React component library.
• @code-dot-org/component-library-styles: Common Styles (variables, colors, mixins, typography styles, etc) of Code.org Marketing Design System (@code-dot-org/component-library). Based on Figma. Used by @code-dot-org/component-library, should also be used as a standalone package for styling components with Code.org's Marketing Design System styles.
• @code-dot-org/lint-config: Shared linters configuration for Code.org marketing projects (includes eslint, lint-staged, prettier, stylelint, typescript configs).
• @code-dot-org/fonts: Code.org's Marketing Design System fonts package.
• @code-dot-org/changelogs: Release-it configuration for changelogs automatic generation, package versioning, and publishing.

Getting Started

(!!!) If you're unable to find some information in this README.md, please refer to the documentation of package/app that you're working on. (e.g. go to packages/component-library/README.md, apps/marketing/README.md, etc)

Prerequisites

Ensure that corepack is enabled.

corepack enable

Initialize the frontend package:

yarn install

Build

Turborepo will automatically detect changed sub-directories and appropriately cache to avoid duplicate work.

To build all apps and packages, run the following command:

yarn build

Develop

To develop all apps and packages, run the following command:

yarn dev

To develop a specific set of apps and packages, use yarn workspace [workspace name] [command]. More information on this command here.

For example, to only run the design system storybook:

yarn workspace @code-dot-org/design-system-storybook dev

Formatting, Linting. (Prettier, ESLint, Stylelint)

To format all files in all packages and apps, run the following command:

yarn lint:fix

You can also run this command for some specific package or app using yarn workspace:

yarn lint:fix --filter @code-dot-org/component-library

OR

yarn workspace @code-dot-org/component-library lint:fix

Pre-release Testing

To run all tests that the pull-request quality checks do:

yarn release:dryrun

This command executes all lint, test, and build commands.

Visual Snapshot Testing (Eyes)

The design system uses Applitools Eyes via their Storybook integration to take a visual snapshot of a storybook component and compare it with baselines. Visual snapshots on pull requests and during the CI build.

To run visual snapshots locally, first obtain an Applitools API Key.

Then, assign the API key to frontend/.env in the APPLITOOLS_API_KEY key. (If this file does not exist, copy it from frontend/.env.example)

To run the visual tests:

yarn workspace @code-dot-org/design-system-storybook eyes-storybook

If differences are detected, follow the baseline update guide to resolve.

Cleaning

To remove build artifacts, use the following commmand:

yarn clean