{"id":15012891,"url":"https://github.com/json-schema-org/tour","last_synced_at":"2025-10-19T14:31:18.021Z","repository":{"id":237854626,"uuid":"795359528","full_name":"json-schema-org/tour","owner":"json-schema-org","description":"A tour of JSON Schema","archived":false,"fork":false,"pushed_at":"2024-05-18T08:28:48.000Z","size":739,"stargazers_count":5,"open_issues_count":11,"forks_count":1,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-05-22T23:29:03.754Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/json-schema-org.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"json-schema-org","patreon":null,"open_collective":"json-schema","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2024-05-03T05:36:25.000Z","updated_at":"2024-05-27T23:07:13.509Z","dependencies_parsed_at":"2024-05-27T23:06:55.944Z","dependency_job_id":"062a8e8d-2028-4c63-a466-4d81c8da8440","html_url":"https://github.com/json-schema-org/tour","commit_stats":null,"previous_names":["json-schema-org/tour"],"tags_count":0,"template":false,"template_full_name":"json-schema-org/repo-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-schema-org%2Ftour","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-schema-org%2Ftour/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-schema-org%2Ftour/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/json-schema-org%2Ftour/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/json-schema-org","download_url":"https://codeload.github.com/json-schema-org/tour/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219869258,"owners_count":16555574,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-09-24T19:43:22.942Z","updated_at":"2025-10-19T14:31:18.015Z","avatar_url":"https://github.com/json-schema-org.png","language":"TypeScript","funding_links":["https://github.com/sponsors/json-schema-org","https://opencollective.com/json-schema"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Tour of JSON Schema\n\nWelcome to the **Tour of JSON Schema** project! This repository hosts the codebase for an interactive learning platform designed to help users understand and master JSON Schema. You can access the live version of the project at [https://tour.json-schema.org](https://tour.json-schema.org).\n\n---\n\n## Table of Contents\n\n- [Tour of JSON Schema](#tour-of-json-schema)\n  - [Table of Contents](#table-of-contents)\n  - [Development Setup](#development-setup)\n    - [Prerequisites](#prerequisites)\n    - [Installation](#installation)\n    - [Figma Design](#figma-design)\n    - [Contributing](#contributing)\n  - [Content Creation](#content-creation)\n    - [Writing MDX](#writing-mdx)\n    - [VSCode Extensions](#vscode-extensions)\n    - [File Structure](#file-structure)\n  - [MDX Components Guide](#mdx-components-guide)\n    - [GoodToKnowBox](#goodtoknowbox)\n    - [CodeSnippet](#codesnippet)\n    - [SideEditorLink](#sideeditorlink)\n\n---\n\n## Development Setup\n\nThe project is built using **Next.js**, a React framework for building server-rendered applications. Below are the steps to set up your development environment:\n\n### Prerequisites\n\n- **Node.js**: Ensure you have Node.js installed (v20 or higher).\n- **pnpm**: The project uses `pnpm` as the package manager.\n\n### Installation\n\n1. Clone the repository:\n   ```bash\n   git clone https://github.com/json-schema-org/tour\n   cd tour-of-json-schema\n   ```\n\n2. Install dependencies:\n   ```bash\n   pnpm install\n   ```\n\n3. Start the development server:\n   ```bash\n   pnpm dev\n   ```\n\n   \u003e **Note**: Running `pnpm dev` will generate a file named `outline.json` in the `/content` directory. This file is used to dynamically generate the table of contents for the website.\n\n4. Run tests before pushing changes:\n   ```bash\n   pnpm test\n   ```\n\u003e [!CAUTION]\n\u003e Always run tests before submitting a pull request to ensure your changes do not introduce regressions.\n\n### Figma Design\n\nYou can view the Figma design for the project at [this link](https://www.figma.com/design/w8ow79jE7lJucJt2zZTbcz/Tour-of-JSON-Schema?node-id=2303-39\u0026t=CH9j0oDmVft8uTWX-0).\n\n### Contributing\n\nPlease Read the [Contributing Guide](CONTRIBUTING.md) for detailed instructions on how to contribute to the project.\n\n\n---\n\n## Content Creation\n\nThe content for the Tour of JSON Schema is written in **MDX**, a markdown format that supports JSX syntax. This allows us to embed React components directly into the documentation, making it highly interactive and engaging.\n\n### Writing MDX\n\nMDX combines the simplicity of Markdown with the power of React. Here are some resources to get started:\n- [MDX Documentation](https://mdxjs.com/)\n- [GitHub Markdown Guide](https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax)\n\n### VSCode Extensions\n\nFor a smoother development experience, we recommend installing the following extensions in Visual Studio Code:\n\n- **MDX**: Provides syntax highlighting and IntelliSense for MDX files.\n  - Marketplace Link: [MDX Extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)\n- **Prettier**: Automatically formats your MDX files on save.\n  - Marketplace Link: [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)\n\n### File Structure\n\nThe content is organized in the `/content` directory with the following structure:\n\n```\n├── 01-introduction\n│   ├── index.mdx                # Overview of the section\n│   ├── 01-welcome\n│       ├── instructions.mdx     # Instructions for the step\n│       ├── code.ts              # Template code and validation logic\n│   ├── 02-what-is-json-schema\n│       ├── instructions.mdx\n│       ├── code.ts\n├── 02-types\n│   ├── index.mdx\n│   ├── 01-primitive-types\n│       ├── instructions.mdx\n│       ├── code.ts\n│   ├── 02-arrays\n│       ├── instructions.mdx\n│       ├── code.ts\n```\n\n- Each section (e.g., `01-introduction`) has an `index.mdx` file that serves as an overview.\n- Each step within a section contains:\n  - `instructions.mdx`: The content displayed to the user.\n  - `code.ts`: Contains template code and logic to validate user-provided schemas.\n\n---\n\n## MDX Components Guide\n\nThe project includes custom React components to enhance the interactivity and readability of the content. Below is a guide to the available components:\n\n### GoodToKnowBox\n\nA styled box for displaying tips, notes, or additional information.\n\n**Props:**\n- `title` (optional): The title of the box. Defaults to \"Good to know\".\n- `children`: The content of the box.\n\n**Example:**\n```md\n\u003cGoodToKnowBox title=\"Pro Tip\"\u003e\n  Use `$ref` to reuse schema definitions and keep your JSON Schema DRY.\n\u003c/GoodToKnowBox\u003e\n```\n\n---\n\n### CodeSnippet\n\nA code block with syntax highlighting and optional line highlighting.\n\n**Props:**\n- `highlightLineStart`: The starting line number to highlight.\n- `highlightLineEnd` (optional): The ending line number to highlight. Defaults to `highlightLineStart`.\n- `startingLineNumber` (optional): The starting line number for the code block. Defaults to `1`.\n- `showLineNumbers` (optional): Whether to display line numbers. Defaults to `true`.\n\n**Example:**\n```md\n\u003cCodeSnippet highlightLineStart={3} highlightLineEnd={5}\u003e\n{\n  \"type\": \"object\",\n  \"properties\": {\n    \"name\": { \"type\": \"string\" },\n    \"age\": { \"type\": \"integer\" }\n  }\n}\n\u003c/CodeSnippet\u003e\n```\n\n---\n\n### SideEditorLink\n\nA link that focuses the editor on the right side of the screen.\n\n**Props:**\n- `text` (optional): Custom text for the link. Defaults to \"side editor\".\n\n**Example:**\n```md\n\u003cSideEditorLink text=\"Open the editor to try this example\" /\u003e\n```\n---\n\nThank you for contributing to the **Tour of JSON Schema** project! Together, we can make JSON Schema more accessible and easier to learn for everyone.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-schema-org%2Ftour","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjson-schema-org%2Ftour","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjson-schema-org%2Ftour/lists"}