👋 Welcome to the JSON Schema website

This repository contains the sources of JSON Schema website:

It's powered by Next.js,
It uses Tailwind CSS framework,
It's build and deployed with Netlify.

Run locally

Requirements

Use the following tools to set up the project:

Node.js v20.9.0+

Cloning the repository

This project uses git submodules, so you will need to run the following commands to fully clone the repo.

git submodule init
git submodule update

Setup Enviroment Variables

Create a new .env file by copying the contents of the .env.example into .env file. Use this command:

cp .env.example .env

Open .env and fill in your actual values for each variable.
Save the file.
Ensure .env is in your .gitignore.

Setup Corepack

This project uses modern Yarn (yarn@4.4.0), which requires Corepack for proper setup and management of package managers. Corepack is a tool that comes with Node.js 14.19.0 and later, allowing for consistent package manager versions across your project.

What is Corepack?

Corepack is an experimental tool to help with managing versions of your package managers. It exposes binary proxies for each supported package manager that, when called, will identify whatever package manager is configured for the current project, download it if needed, and finally run it.

Installing Corepack

If you're using Node.js version 14.19.0 or later, Corepack is included but might need to be enabled. For Node.js 16.10 or later, Corepack is available by default but might still need to be enabled.

To enable Corepack, run:

corepack enable

If you're using an older version of Node.js or if the above command doesn't work, you can install Corepack globally using npm:

npm install -g corepack

Using Corepack with This Project

Once Corepack is enabled or installed, it will automatically use the correct version of Yarn specified in the project's package.json file. You don't need to manually install Yarn.

To use Yarn commands, simply run them as usual:

yarn install
yarn run build
yarn run dev

Corepack will ensure that the correct version of Yarn is used for these commands.

Updating Yarn Version

If you need to update the Yarn version used in the project:

Update the packageManager field in package.json:
```
{
  "packageManager": "yarn@x.y.z"
}
```
Run yarn set version x.y.z to update the local Yarn version.

Troubleshooting

If you encounter any issues with Yarn commands, try running:

corepack prepare

This will ensure that the correct version of Yarn is downloaded and prepared for use.

For more information about Corepack, refer to the official Node.js documentation.

Install dependencies

yarn

Run the development server

Run the development server on http://localhost:3000

yarn dev

Build static files

Build static files on /out folder

yarn build

Testing

Formatting

you can check code formatting using the following command:

yarn run format:check

you can format the code using the following command:

yarn run format:fix

Linting

you can check linting issues using the following command:

yarn run lint

you can fix linting issues using the following command:

yarn run lint:fix

Husky for git hooks

This project uses Husky to run checks for the formatting, linting, typecheck and build commands before committing the code.

pre-commit hook will run the following commands:

yarn run lint
yarn run typecheck
yarn run build

Run locally using Docker

If you are a Docker lover, you have the option to use it following these instructions.

Prerequisites:

install Docker

After cloning repository to your local, perform the following steps from the root of the repository.

Steps:

Build the Docker image:
```
  make install
```
Start the container:
```
  make run
```

Now you're running JSON Schema website in a development mode. Container is mapped with your local copy of the website. Whenever you make changes to the code, the website will refresh and changes visible in localhost:3000.

Project structure

This repository has the following structure:

  ├── .github                     # Definitions of GitHub workflows, pull request and issue templates
  ├── components                  # Various generic components such as "Button", "Figure", etc.
  ├── data                        # JSON Schema Implementations.
  ├── styles                      # Various CSS files
  ├── lib                         # Various JS code for preparing static data to render in pages
  ├── pages                       # Website's pages source. It includes raw markdown files and React page templates.
  │    ├── overview               # JSON Schema initiative docs
  │    ├── blog                   # Blog posts
  │    ├── learn                  # JSON Schema docs
  │    └── implementations        # Various pages to describe tools
  ├── public                      # Data for site metadata and static blog such as images
  ├── next.config.js              # Next.js configuration file

Contribute

Here are some areas where you can contribute to the website:

Blogs posts
Case Studies
Design
Documentation
Website enhancements
Add a new JSON Schema Implementation
JSON Schema Landscape

To figure out a good first issue to work on, join our Slack workspace and visit the #contribute channel. This channel is specifically designed for onboarding and supporting new contributors.

You should also check out our Contributing guidelines.