Syncing the Title of .mdx file with the folder Name

.github/pull_request_template.md

@@ -0,0 +1,33 @@
+
+<!-- In order to keep off topic discussion to a minimum, it helps if the "work to be done" is already agreed on. -->
+<!-- Ideally, a GitHub Issue with the label `Status: Consensus` will have been concluded, and linked to in this PR. -->
+<!--
+Thanks for submitting a pull request! Please provide enough information so that others can review your pull request.
+-->
+
+**What kind of change does this PR introduce?**
+
+<!-- E.g. a bugfix, feature, refactoring, etc… -->
+
+**Issue Number:**
+<!-- Pick one of the below options.  Please remove those which don't apply. -->
+-  Closes #___ <!-- Replace ___ with the issue number this PR resolves -->
+-  Related to #___ <!-- Use when the PR doesn't completely resolve an issue -->
+-  Others? <!-- Add any additional notes or references here -->
+
+**Screenshots/videos:**
+
+<!--Add screenshots or videos wherever possible.-->
+
+**If relevant, did you update the documentation?**
+
+<!--Add link to it-->
+
+**Summary**
+
+<!-- Explain the motivation for making this change. What existing problem does the pull request solve? -->
+<!-- Try to link to an open issue for more information. -->
+
+**Does this PR introduce a breaking change?**
+
+<!-- If this PR introduces a breaking change, please describe the impact and a migration path for existing applications. -->

.github/workflows/link-checker.yml

@@ -0,0 +1,94 @@
+name: Link Checker
+
+on:
+  repository_dispatch:
+  workflow_dispatch:
+  schedule: 
+    - cron: '0 0 1 * *' # Run at midnight on the first of every month
+
+jobs: 
+  linkChecker:
+    name: Check and report broken links
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Repository  
+        uses: actions/checkout@v4
+        with:
+          submodules: 'recursive'
+
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+
+      # Replace corepack with direct PNPM installation
+      - name: Install pnpm
+        run: npm install -g pnpm
+
+      - name: Get Token 
+        uses: actions/create-github-app-token@v1
+        id: get_workflow_token
+        with:
+          app-id: ${{ vars.APP_ID }}
+          private-key: ${{ secrets.PRIVATE_KEY }}
+
+      - name: Install Dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Serve App Locally
+        run: pnpm run dev &
+
+      - name: Wait for App to Start
+        run: sleep 20
+
+      # This will restore the lychee cache
+      - name: Restore lychee cache
+        uses: actions/cache@v4
+        with:
+          path: .lycheecache
+          key: cache-lychee-${{ github.sha }}
+          restore-keys: cache-lychee-
+
+      # This will run the link checker on all markdown files in the pages directory      
+      - name: Link Checker
+        id: lychee
+        uses: lycheeverse/lychee-action@v1
+        with:
+          args: --base https://tour.json-schema.org  --verbose --no-progress --accept 200,204,429,403  './content/**/*.mdx' --cache --max-cache-age 1d  https://tour.json-schema.org 
+          token: ${{secrets.GITHUB_TOKEN}}
+
+      - name: Install Octokit
+        run: pnpm add @octokit/[email protected] 
+
+      # This will create an issue with the link checker report if it does not exist, otherwise it will update the existing issue.
+
+      - name: Create Issue
+        if: env.lychee_exit_code != 0
+        uses: actions/github-script@v7
+        env:
+          AUTH_TOKEN: ${{ steps.get_workflow_token.outputs.token }}
+        with:
+          script: |
+            const { Octokit } = require("@octokit/core");
+            const octokit = new Octokit({ auth: process.env.AUTH_TOKEN });
+            const allIssues = await octokit.request('GET /repos/{owner}/{repo}/issues', {
+              owner: context.repo.owner,
+              repo: context.repo.repo
+            });
+
+            const existingIssue = allIssues.data.find(issue => issue.title === 'Link Checker Report');
+            if (existingIssue) {
+              await octokit.request('PATCH /repos/{owner}/{repo}/issues/{issue_number}', {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: existingIssue.number,
+                body: '## Link Checker Report\n\n' + require('fs').readFileSync('./lychee/out.md', 'utf8')
+              });
+            } else {
+              await octokit.request('POST /repos/{owner}/{repo}/issues', {
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                title: 'Link Checker Report',
+                body: '## Link Checker Report\n\n' + require('fs').readFileSync('./lychee/out.md', 'utf8')
+              });
+            }

.github/workflows/nextjs.yml

@@ -56,7 +56,7 @@ jobs:
       - name: Setup pnpm 
         uses: pnpm/action-setup@v4
         with:
-          version: 8
+
           run_install: false
       - name: Setup Node
         uses: actions/setup-node@v4

CONTRIBUTING.md

@@ -1,3 +1,14 @@
+# Process to Open a Pull Request
+
+1. Find an issue that is open and has an [Available](https://github.com/json-schema-org/tour/issues?q=is%3Aissue+is%3Aopen+label%3A%22Status%3A+Available%22) tag.
+2. Ask for the issue to be assigned to you. (Please do not work on an issue that is not assigned to you)
+3. Once the issue is assigned to you, fork the repository.
+4. Create a new branch in your forked repository.
+5. Make the necessary changes in your forked repository.
+6. Create a pull request to the main repository.
+7. Wait for the review and approval of the pull request.
+
+
 # Guidelines for contributing to the JSON Schema project
 
 ## Issues
@@ -17,3 +28,4 @@ Most PRs, will be left open for a minimum of 14 days.  Minor fixes may be merged
 ## Conduct
 
 All official channels including the mailing list, GitHub organization, Slack server, and IRC channels, follow our [Code of Conduct](https://github.com/json-schema-org/.github/blob/main/CODE_OF_CONDUCT.md).
+

README.md

@@ -1,60 +1,105 @@
 # Tour of JSON Schema
 
-This repository contains the code for the Tour of JSON Schema project.
-https://tour.json-schema.org
+Welcome 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).
 
-# Development
+---
 
-The project is built using next.js.
+## Table of Contents
 
-After cloning the repository, run the following command to install the dependencies:
+- [Tour of JSON Schema](#tour-of-json-schema)
+  - [Table of Contents](#table-of-contents)
+  - [Development Setup](#development-setup)
+    - [Prerequisites](#prerequisites)
+    - [Installation](#installation)
+    - [Figma Design](#figma-design)
+    - [Contributing](#contributing)
+  - [Content Creation](#content-creation)
+    - [Writing MDX](#writing-mdx)
+    - [VSCode Extensions](#vscode-extensions)
+    - [File Structure](#file-structure)
+  - [MDX Components Guide](#mdx-components-guide)
+    - [GoodToKnowBox](#goodtoknowbox)
+    - [CodeSnippet](#codesnippet)
+    - [SideEditorLink](#sideeditorlink)
 
-```bash
-pnpm install
-```
+---
 
-To start the development server, run the following command:
+## Development Setup
 
-```bash
-pnpm dev
-```
+The project is built using **Next.js**, a React framework for building server-rendered applications. Below are the steps to set up your development environment:
 
-> when you run `pnpm dev`, a file named `outline.json` will be created in th `/content` directory. This file is used to generate the table of contents for the website.
+### Prerequisites
 
-(make sure you run tests before pushing your changes)
-To run the tests, run the following command:
+- **Node.js**: Ensure you have Node.js installed (v20 or higher).
+- **pnpm**: The project uses `pnpm` as the package manager.
 
-```bash 
-pnpm test
-```
+### Installation
 
+1. Clone the repository:
+   ```bash
+   git clone https://github.com/json-schema-org/tour
+   cd tour-of-json-schema
+   ```
 
-# Content
+2. Install dependencies:
+   ```bash
+   pnpm install
+   ```
 
-### Writing MDX
+3. Start the development server:
+   ```bash
+   pnpm dev
+   ```
 
-The content written in [MDX](https://mdxjs.com/), a markdown format that supports JSX syntax. This allows us to embed React components in the docs. See the [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) for a quick overview of markdown syntax.
+   > **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.
 
-### VSCode
+4. Run tests before pushing changes:
+   ```bash
+   pnpm test
+   ```
+> [!CAUTION]
+> Always run tests before submitting a pull request to ensure your changes do not introduce regressions.
 
-#### Extensions
+### Figma Design
 
-We recommend the following extensions for VSCode users:
+You 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&t=CH9j0oDmVft8uTWX-0).
 
-- [MDX](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx): Intellisense and syntax highlighting for MDX.
-- [Prettier](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode): Format MDX files on save.
+### Contributing
 
-## File Structure
+Please Read the [Contributing Guide](CONTRIBUTING.md) for detailed instructions on how to contribute to the project.
 
-the content of each step is stored in the `/content` directory with the following structure:
 
-```
+---
+
+## Content Creation
+
+The 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.
+
+### Writing MDX
 
+MDX combines the simplicity of Markdown with the power of React. Here are some resources to get started:
+- [MDX Documentation](https://mdxjs.com/)
+- [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)
+
+### VSCode Extensions
+
+For a smoother development experience, we recommend installing the following extensions in Visual Studio Code:
+
+- **MDX**: Provides syntax highlighting and IntelliSense for MDX files.
+  - Marketplace Link: [MDX Extension](https://marketplace.visualstudio.com/items?itemName=unifiedjs.vscode-mdx)
+- **Prettier**: Automatically formats your MDX files on save.
+  - Marketplace Link: [Prettier Extension](https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode)
+
+### File Structure
+
+The content is organized in the `/content` directory with the following structure:
+
+```
 ├── 01-introduction
-│   ├── index.mdx
+│   ├── index.mdx                # Overview of the section
 │   ├── 01-welcome
-│       ├── instructions.mdx
-│       ├── code.ts
+│       ├── instructions.mdx     # Instructions for the step
+│       ├── code.ts              # Template code and validation logic
 │   ├── 02-what-is-json-schema
 │       ├── instructions.mdx
 │       ├── code.ts
@@ -66,7 +111,72 @@ the content of each step is stored in the `/content` directory with the followin
 │   ├── 02-arrays
 │       ├── instructions.mdx
 │       ├── code.ts
+```
+
+- Each section (e.g., `01-introduction`) has an `index.mdx` file that serves as an overview.
+- Each step within a section contains:
+  - `instructions.mdx`: The content displayed to the user.
+  - `code.ts`: Contains template code and logic to validate user-provided schemas.
+
+---
+
+## MDX Components Guide
+
+The project includes custom React components to enhance the interactivity and readability of the content. Below is a guide to the available components:
+
+### GoodToKnowBox
+
+A styled box for displaying tips, notes, or additional information.
+
+**Props:**
+- `title` (optional): The title of the box. Defaults to "Good to know".
+- `children`: The content of the box.
+
+**Example:**
+```md
+<GoodToKnowBox title="Pro Tip">
+  Use `$ref` to reuse schema definitions and keep your JSON Schema DRY.
+</GoodToKnowBox>
+```
+
+---
+
+### CodeSnippet
+
+A code block with syntax highlighting and optional line highlighting.
+
+**Props:**
+- `highlightLineStart`: The starting line number to highlight.
+- `highlightLineEnd` (optional): The ending line number to highlight. Defaults to `highlightLineStart`.
+- `startingLineNumber` (optional): The starting line number for the code block. Defaults to `1`.
+- `showLineNumbers` (optional): Whether to display line numbers. Defaults to `true`.
+
+**Example:**
+```md
+<CodeSnippet highlightLineStart={3} highlightLineEnd={5}>
+{
+  "type": "object",
+  "properties": {
+    "name": { "type": "string" },
+    "age": { "type": "integer" }
+  }
+}
+</CodeSnippet>
+```
+
+---
+
+### SideEditorLink
+
+A link that focuses the editor on the right side of the screen.
+
+**Props:**
+- `text` (optional): Custom text for the link. Defaults to "side editor".
 
+**Example:**
+```md
+<SideEditorLink text="Open the editor to try this example" />
 ```
+---
 
-The instructions.mdx file holds the content the users sees, and the code.ts file holds template code and the logic to validate user provided schemas
+Thank you for contributing to the **Tour of JSON Schema** project! Together, we can make JSON Schema more accessible and easier to learn for everyone.

app/components/CertificateButton/CertificateButton.module.css

@@ -0,0 +1,12 @@
+.certificateButton {
+  font-size: small;
+  margin-right: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 8px 10px;
+  border-radius: 8px;
+  cursor: pointer;
+  font-weight: bold;
+}