### Install Node.js using Homebrew

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Installs Node.js version 18 using Homebrew. Ensure Homebrew is installed first.

```bash
brew install n
sudo n 18
```

--------------------------------

### Start Local Development Server

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Runs the local build server with hot module reloading and an eslint watcher for development.

```bash
npm run dev
```

--------------------------------

### GraphQL Query Example

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This is an example of a GraphQL query to retrieve information about cards, including their names, set codes, types, text, and pricing details. It demonstrates filtering, pagination, and ordering.

```APIDOC
## GraphQL Query Example

### Description
This example demonstrates how to query for card data, specifying filters, pagination, and sorting. It retrieves the name, setCode, type, text, and detailed pricing information for cards matching the criteria.

### Query
```GraphQL
query {
  cards(
    filter: { name_eq: "Phelddagrif" }
    page: { take: 100, skip: 0 }
    order: { order: ASC }
  ) {
    name
    setCode
    type
    text
    prices {
      provider
      date
      cardType
      listType
      price
    }
  }
}
```
```

--------------------------------

### Commit Message Conventions

Source: https://github.com/mtgjson/mtgjson-website/blob/main/CONTRIBUTING.md

Examples of conventional commit messages for pull requests and commits.

```text
feat(theme): added logic to a component
```

```text
fix(style): fixed issues with styling
```

```text
chore(deps): bump dependencies
```

--------------------------------

### GraphQL Query for Cards

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This example demonstrates how to query for card information, including name, set code, type, text, and pricing details. It shows filtering by name, pagination, and ordering.

```GraphQL
query {
  cards(
    filter: { name_eq: "Phelddagrif" }
    page: { take: 100, skip: 0 }
    order: { order: ASC }
  ) {
    name
    setCode
    type
    text
    prices {
      provider
      date
      cardType
      listType
      price
    }
  }
}
```

--------------------------------

### Markdown Property Field Example

Source: https://github.com/mtgjson/mtgjson-website/blob/main/CONTRIBUTING.md

Example of how to define a property field in Markdown for documentation, including deprecated and optional badges.

```markdown
> ### artist <DocBadge type="danger" text="deprecated" /><DocBadge type="warning" text="optional" />
>
> The name of the artist that illustrated the card art.
>
> **Type:** `string`
> **Introduced:** `v4.0.0`
```

--------------------------------

### GraphQL HTTP Headers Authorization

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This example shows how to include an authorization header in your HTTP request to authenticate with the MTGGraphQL API. An access token is required for authorization.

```APIDOC
## GraphQL HTTP Headers Authorization

### Description
To authorize your requests to the MTGGraphQL API, you need to include an `Authorization` header with your access token. This is typically provided as a Bearer token.

### HTTP Headers
```JSON
{
  "authorization": "Bearer <Access Token>"
}
```

### Note
If you do not have an access token, please contact support via Discord or ensure you are a Patreon subscriber.
```

--------------------------------

### GraphQL HTTP Headers Authorization

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This example shows the required JSON format for HTTP headers to authorize requests to the MTGGraphQL API using an access token.

```JSON
{
  "authorization": "Bearer <Access Token>"
}
```

--------------------------------

### Query Cards by Name

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This snippet demonstrates how to query for cards by their name using the GraphQL API. It includes filtering, pagination, and ordering options, along with a detailed example response structure.

```APIDOC
## Query cards

### Description
Retrieves a list of cards based on specified filters, pagination, and ordering.

### Method
POST

### Endpoint
https://graphql.mtgjson.com/

### Parameters
#### Query Parameters
- **query** (string) - Required - The GraphQL query string.

#### Request Body
(Not applicable for GraphQL queries sent via POST body)

### Request Example
```graphql
query {
  cards(
    filter: { name_eq: "Phelddagrif" }
    page: { take: 100, skip: 0 }
    order: { order: ASC }
  ) {
    name
    setCode
    type
    text
    prices {
      provider
      date
      cardType
      listType
      price
    }
  }
}
```

### Response
#### Success Response (200)
- **data** (object) - The main data object containing the query results.
  - **cards** (array) - An array of card objects matching the query.
    - **name** (string) - The name of the card.
    - **setCode** (string) - The set code the card belongs to.
    - **type** (string) - The type of the card.
    - **text** (string) - The rules text of the card.
    - **prices** (array) - An array of price objects for the card.
      - **provider** (string) - The source of the price data.
      - **date** (string) - The date the price was recorded.
      - **cardType** (string) - The type of the card (e.g., normal, foil).
      - **listType** (string) - The type of price list (e.g., buylist, retail).
      - **price** (number) - The price of the card.

#### Response Example
```json
{
  "data": {
    "cards": [
      {
        "name": "Phelddagrif",
        "setCode": "ALL",
        "type": "Legendary Creature — Phelddagrif",
        "text": "{G}: Phelddagrif gains trample until end of turn. Target opponent creates a 1/1 green Hippo creature token.\n{W}: Phelddagrif gains flying until end of turn. Target opponent gains 2 life.\n{U}: Return Phelddagrif to its owner's hand. Target opponent may draw a card.",
        "prices": [
          {
            "provider": "cardkingdom",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "buylist",
            "price": 5.5
          },
          {
            "provider": "cardkingdom",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 9.99
          }
        ]
      }
    ]
  }
}
```
```

--------------------------------

### Example JSON Response for Card Data

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/mtggraphql/index.md

This is a reduced payload representing the JSON response for a GraphQL query fetching card data. It includes details for 'Phelddagrif' cards from different sets and their pricing information.

```json
{
  "data": {
    "cards": [
      {
        "name": "Phelddagrif",
        "setCode": "ALL",
        "type": "Legendary Creature — Phelddagrif",
        "text": "{G}: Phelddagrif gains trample until end of turn. Target opponent creates a 1/1 green Hippo creature token.\n{W}: Phelddagrif gains flying until end of turn. Target opponent gains 2 life.\n{U}: Return Phelddagrif to its owner's hand. Target opponent may draw a card.",
        "prices": [
          {
            "provider": "cardkingdom",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "buylist",
            "price": 5.5
          },
          {
            "provider": "cardkingdom",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 9.99
          },
          {
            "provider": "cardmarket",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 8.95
          },
          {
            "provider": "tcgplayer",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 10.05
          },
          {
            "provider": "tcgplayer",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "buylist",
            "price": 7.54
          },
          {
            "provider": "cardsphere",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 10.25
          }
        ]
      },
      {
        "name": "Phelddagrif",
        "setCode": "ME1",
        "type": "Legendary Creature — Phelddagrif",
        "text": "{G}: Phelddagrif gains trample until end of turn. Target opponent creates a 1/1 green Hippo creature token.\n{W}: Phelddagrif gains flying until end of turn. Target opponent gains 2 life.\n{U}: Return Phelddagrif to its owner's hand. Target opponent may draw a card.",
        "prices": [
          {
            "provider": "cardhoarder",
            "date": "2023-08-15",
            "cardType": "normal",
            "listType": "retail",
            "price": 0.03
          },
          {
            "provider": "cardhoarder",
            "date": "2023-08-15",
            "cardType": "foil",
            "listType": "retail",
            "price": 1.82
          }
        ]
      }
    ]
  }
}
```

--------------------------------

### Build Static Project

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Builds the entire site as a static project. This is typically handled by GitHub Actions.

```bash
npm run build
```

--------------------------------

### Run Full Test Build

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Executes all tests and performs a full build of the project.

```bash
npm run test:full
```

--------------------------------

### Project Directory Structure

Source: https://github.com/mtgjson/mtgjson-website/blob/main/CONTRIBUTING.md

Overview of the MTGJSON website project's directory structure, including build utilities, documentation files, and VitePress configuration.

```sh
.\n├── util/ # Build utilities\n│   ├── check-version.js # Ensures the Node environment is correct\n│	  ├── generate-contributors.js # Utility to generate GitHub contributors JSON\n│   ├── generate-feeds.js # Utility to generate RSS and other feeds\n│   └── generate-types.js # Utility to generate TypeScript notations for documentation\n└── docs/ # Home directory, outputs to `/dist`\n 	  ├── **/**/index.md # Directories and their route entry point\n    ├── types.ts # An abstract of TypeScript types for MTGJSON files\n    ├── public/ # Public facing files\n    │	  ├── favicons/ # All favicon images\n    │   ├── images/ # All application images\n    │   │	  ├── assets/ # MTGJSON assets\n    │   │   ├── avatars/ # User/supporters avatars\n    │   │   └── icons/ # General icons\n    │   │\n    │   │ # Deprecated. To be removed\n    │   ├── static/ # Legacy path for MTGJSON documentation TypeScript Types\n    │   │   └── mtgjson-types.ts # All TypeScript Types for MTGJSON Data Models\n    │   │\n    │   └── types/ # Path to all MTGJSON documentation TypeScript Types\n    │       └── *.ts # All individual TseScript Types for MTGJSON Data Models\n    │\n    └── .vitepress/ # Main config and theme files for Vitepress\n        ├── config.js # Main VitePress configuration\n        ├── generatePages.js # Polyfill script to generate pages data for search\n        ├── generateSidebar.js # Polyfill script to generate the sidebar heirarchy\n        └── theme/ # Themeing for VitePress\n            ├── components/ # Vue components\n            │	  └── *.vue # Vue component\n            ├── layouts/ # Theme layout for all pages\n            │	  └── *.vue # Vue component\n            ├── static/ # Static data to power Vue components\n            │   └── *.json # JSON data\n            ├── styles/ # Visual styling\n            │	  └── *.scss # Global CSS\n            ├── helpers.ts # Helper functions\n            ├── index.ts # Theme config and enhancements\n            ├── store.ts # Pinia global state store\n            └── types.ts # TypeScript types, interfaces, etc.\n
```

--------------------------------

### Get Card Image URL using multiverseId

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/faq/index.md

Constructs the URL to fetch a card's image from Gatherer using its multiverseId. Ensure the multiverseId property is available in your code.

```TypeScript
// Assuming you have the multiverseId property available in your code...
const image: string = `https://gatherer.wizards.com/Handlers/Image.ashx?type=card&multiverseid=${multiverseId}`;
```

--------------------------------

### Run All Tests

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Executes all defined tests within the project to ensure functionality.

```bash
npm run test
```

--------------------------------

### Lint Project Files

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Manually lints the project files to check for any breaking changes or code style issues.

```bash
npm run lint
```

--------------------------------

### Get Set Image URL using setCode and rarity

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/faq/index.md

Generates URLs for set symbols from Scryfall and Gatherer using the setCode. For Gatherer, it also uses the first letter of the rarity to determine the symbol's color. Ensure setCode and rarity properties are available.

```TypeScript
// Assuming you have the setCode property available in your code...
// Scryfall
const scrylfallSetImage: string = `https://svgs.scryfall.io/sets/${setCode}.svg`;

// Gatherer
// Assuming you also have a rarity property available in your code....
const cardRarity: string = rarity.charAt(0);
// Gatherer only uses the first letter of a rarity as the parameter value
// "mythic" => "m", applies a red-ish color
// "rare" => "r", applies a gold-ish color
// "uncommon" => "u", applies a silver-ish color
// "common" => "c", applies a black color
// "special" => "s", applies a purple color. This is only available on some set codes, such as "TSP"
// "bonus" is a unique rarity that Gatherer does not parse
const gathererSetImage: string = `https://gatherer.wizards.com/Handlers/Image.ashx?type=symbol&set=${setCode}&rarity=${cardRarity}&size=large`;
```

--------------------------------

### Construct Scryfall Image Path

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/faq/index.md

Dynamically generates a URL to fetch card images from Scryfall. Requires the 'scryfallId' property of a card.

```TypeScript
const fileFace: string = 'front';
const fileType: string = 'large';
const fileFormat: string = 'jpg';
const fileName: string = scryfallId;
const dir1: string = fileName.charAt(0);
const dir2: string = fileName.charAt(1);
const image: string = `https://cards.scryfall.io/${fileType}/${fileFace}/${dir1}/${dir2}/${fileName}.${fileFormat}`;

```

--------------------------------

### AllPrintings.json File Model Structure

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/getting-started/index.md

This TypeScript structure illustrates the File Model for AllPrintings.json, showing the meta property and the data property keyed by a Set's code.

```TypeScript
{
  meta: Meta;
  data: Record<string, Set>;
}
```

--------------------------------

### Purge Node Packages and Cache

Source: https://github.com/mtgjson/mtgjson-website/blob/main/README.md

Cleans out all Node packages and the Vitepress cache to ensure a fresh environment.

```bash
npm run purge
```

--------------------------------

### BoosterPack TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/booster/booster-pack/index.md

Defines the structure for a booster pack configuration, including card slots and their weights.

```typescript
import {
  BoosterPack,
  BoosterPackContents,
} from "@/types/BoosterPack";

const exampleBoosterPack: BoosterPack = {
  contents: {
    "common": 100,
    "uncommon": 50,
    "rare": 10,
    "mythic": 1,
  },
  weight: 100,
};

const exampleBoosterPackContents: BoosterPackContents = {
  "common": 100,
  "uncommon": 50,
  "rare": 10,
  "mythic": 1,
};

```

--------------------------------

### BoosterConfig TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/booster/booster-config/index.md

Defines the structure for booster pack configurations within a set. This model includes properties for booster packs, total weight, optional product names, card sheets, and source set codes.

```typescript
import {
  BoosterPack,
  BoosterSheet,
} from "./Booster";

export interface BoosterConfig {
  booster: BoosterPack[];
  boosterTotalWeight: number;
  name?: string;
  sheets: Record<string, BoosterSheet>;
  sourceSetCodes: string[];
}
```

--------------------------------

### LeadershipSkills TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/leadership-skills/index.md

This TypeScript model defines the structure for leadership skills, indicating a card's legality as a commander in different formats. It includes boolean properties for brawl, commander, and oathbreaker formats.

```typescript
export interface LeadershipSkills {
  brawl?: boolean;
  commander?: boolean;
  oathbreaker?: boolean;
}
```

--------------------------------

### SealedProductSealed TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/sealed-product/sealed-product-sealed/index.md

Defines the structure for sealed product configurations, including count, name, set, and UUID.

```typescript
export interface SealedProductSealed {
  count?: number;
  name?: string;
  set?: string;
  uuid?: string;
}
```

--------------------------------

### SealedProduct TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/sealed-product/index.md

This snippet shows the TypeScript definition for the Sealed Product data model. It outlines all available properties and their types.

```typescript
/**
 * The Sealed Product Data Model describes the properties for the purchaseable product of a Set Data Model.
 */
export interface SealedProduct {
  /**
   * The number of cards in this product.
   */
  cardCount?: number;
  /**
   * The category of this product.
   */
  category?: string;
  /**
   * The contents of this product. See the Sealed Product Contents Data Model.
   */
  contents?: SealedProductContents;
  /**
   * The identifiers associated to a product. See the Identifiers Data Model.
   */
  identifiers: Identifiers;
  /**
   * The name of the product.
   */
  name: string;
  /**
   * The size of the product.
   */
  productSize?: number;
  /**
   * Links that navigate to websites where the product can be purchased. See the Purchase Urls Data Model.
   */
  purchaseUrls: PurchaseUrls;
  /**
   * The release date in ISO 8601 format for the product. Not included if the set was not formally released as a product.
   */
  releaseDate?: string;
  /**
   * The category subtype of this product.
   */
  subtype: string | null;
  /**
   * The universal unique identifier (v5) generated by MTGJSON.
   */
  uuid: string;
}

```

--------------------------------

### TypeScript DeckList Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/deck-list/index.md

This snippet displays the TypeScript definition for the DeckList data model. It outlines the structure and types for deck metadata.

```typescript
/**
 * The Deck List Data Model describes the meta data properties of an individual Deck.
 */
export interface DeckList {
  code?: string;
  fileName?: string;
  name?: string;
  releaseDate?: string;
  type?: string;
}

```

--------------------------------

### TypeScript Model for Sealed Product Pack

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/sealed-product/sealed-product-pack/index.md

This TypeScript model defines the structure for a sealed product pack. It includes properties for the pack's code and the set it belongs to.

```typescript
import { SealedProductPack } from "../types/SealedProductPack";

const examplePack: SealedProductPack = {
  code: "MKM",
  set: "MKM",
};

```

--------------------------------

### Booster TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/booster/index.md

Represents the structure of booster data, containing a record of BoosterConfig objects keyed by string identifiers.

```TypeScript
{
  data: Record<string, BoosterConfig>;
}
```

--------------------------------

### TypeScript Model for Source Products

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/source-products/index.md

This snippet shows the TypeScript definition for the Source Products data model. It includes properties for etched, foil, and non-foil cards, each containing an array of strings representing UUIDs.

```typescript
/**
 * The Source Products Data Model describes the uuids for the card version in a Sealed Product.
 *
 * @property {string[]} etched - A list of universal unique identifiers (v5) generated by MTGJSON for the Sealed Product the etched card is found in.
 * @property {string[]} foil - A list of universal unique identifiers (v5) generated by MTGJSON for the Sealed Product the foil card is found in.
 * @property {string[]} nonfoil - A list of universal unique identifiers (v5) generated by MTGJSON for the Sealed Product the non-foil card is found in.
 */
export interface SourceProducts {
  etched: string[];
  foil: string[];
  nonfoil: string[];
}
```

--------------------------------

### SealedProductOther TypeScript Model

Source: https://github.com/mtgjson/mtgjson-website/blob/main/docs/data-models/sealed-product/sealed-product-other/index.md

This TypeScript model defines the structure for the 'other' configurations within sealed products. It includes properties like 'name'.

```typescript
export interface SealedProductOther {
  name: string;
}
```