chore: docs site (#405)

.github/problemMatchers/eslint.json

@@ -0,0 +1,22 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "eslint-stylish",
+			"pattern": [
+				{
+					"regexp": "^([^\\s].*)$",
+					"file": 1
+				},
+				{
+					"regexp": "^\\s+(\\d+):(\\d+)\\s+(error|warning|info)\\s+(.*)\\s\\s+(.*)$",
+					"line": 1,
+					"column": 2,
+					"severity": 3,
+					"message": 4,
+					"code": 5,
+					"loop": true
+				}
+			]
+		}
+	]
+}

.github/problemMatchers/tsc.json

@@ -0,0 +1,17 @@
+{
+	"problemMatcher": [
+		{
+			"owner": "tsc",
+			"pattern": [
+				{
+					"regexp": "^(?:\\s+\\d+\\>)?([^\\s].*)\\((\\d+|\\d+,\\d+|\\d+,\\d+,\\d+,\\d+)\\)\\s*:\\s+(error|warning|info)\\s+(\\w{1,2}\\d+)\\s*:\\s*(.*)$",
+					"file": 1,
+					"location": 2,
+					"severity": 3,
+					"code": 4,
+					"message": 5
+				}
+			]
+		}
+	]
+}

.github/workflows/check-website.yml

@@ -0,0 +1,40 @@
+name: Website build check
+
+on:
+  push:
+    branches:
+      - '**'
+  pull_request:
+
+jobs:
+  build_website:
+    name: 'Website build'
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Project
+        uses: actions/checkout@v2
+
+      - name: Add problem matcher
+        run: echo "::add-matcher::.github/problemMatchers/eslint.json" && echo "::add-matcher::.github/problemMatchers/tsc.json"
+
+      - name: Check for any website changes
+        id: website_files_changed
+        uses: tj-actions/changed-files@v18.7
+        with:
+          files: website/**/*
+
+      - name: Install common dependencies
+        if: steps.website_files_changed.outputs.any_changed == 'true'
+        run: npm ci
+
+      - name: Install website dependencies
+        if: steps.website_files_changed.outputs.any_changed == 'true'
+        run: pushd website && npm ci && popd
+
+      - name: Check lint on discord-api-types/website
+        if: steps.website_files_changed.outputs.any_changed == 'true'
+        run: pushd website && npm run test:lint && popd
+
+      - name: Run build on website
+        if: steps.website_files_changed.outputs.any_changed == 'true'
+        run: pushd website && NODE_OPTIONS=--max_old_space_size=4096 npm run build && popd

.github/workflows/cicd.yml

@@ -14,15 +14,20 @@ jobs:
       - name: Checkout Project
         uses: actions/checkout@v2
 
+      - name: Add problem matcher
+        run: echo "::add-matcher::.github/problemMatchers/eslint.json" && echo "::add-matcher::.github/problemMatchers/tsc.json"
+
       - name: Use Node.js v16
         uses: actions/setup-node@v2
         with:
           node-version: 16
+          cache: npm
+          registry-url: https://registry.npmjs.org/
 
-      - name: Install Dependencies
+      - name: Install dependencies
         run: npm ci
 
-      - name: Run ESLint
+      - name: Check lint on discord-api-types
         run: npm run test:lint
 
       - name: Run TSC

.github/workflows/create-pr-for-release-and-publish.yml

@@ -30,6 +30,9 @@ jobs:
       - name: Install dependencies
         run: npm ci --ignore-scripts
 
+      - name: Install website dependencies
+        run: pushd website && npm ci --ignore-scripts && popd
+
       - name: Set Git User and Email
         run: |
           git config user.name "github-actions[bot]"
@@ -44,7 +47,7 @@ jobs:
         run: |
           git checkout -b "chore/release/$(jq --raw-output '.version' package.json)"
 
-          # Run changelog generation and deno scripts
+          # Run changelog generation, deno script, website version bump
           npm run ci:pr
 
           # Add all changes, commit and push

.prettierignore

@@ -1 +1,10 @@
+
+# Node modules
+node_modules/
+
+# Generated data
 deno/
+
+website/versioned_docs/
+website/.docusaurus/
+website/build

README.md

@@ -1,5 +1,7 @@
 # Discord API Types
 
+[![discord-api-types](./website/static/svgs/logo_long_blurple.svg)](https://github.com/discordjs/discord-api-types)
+
 [![GitHub](https://img.shields.io/github/license/discordjs/discord-api-types)](https://github.com/discordjs/discord-api-types/blob/main/LICENSE.md)
 [![npm](https://img.shields.io/npm/v/discord-api-types?color=crimson&logo=npm)](https://www.npmjs.com/package/discord-api-types)
 [![deno](https://img.shields.io/npm/v/discord-api-types?color=blue&label=deno&logo=deno)](https://deno.land/x/discord_api_types)
@@ -94,4 +96,9 @@ The exports of each API version is split into three main parts:
 
 - There may be types exported that are identical for all versions. These will be exported as is and can be found in the `globals` file. They will still be prefixed accordingly as described above.
 
-**Warning**: This package documents just KNOWN (and documented) properties. Anything that isn't documented will NOT be added to this package (unless said properties are in an open Pull Request to Discord's [API Documentation repository](https://github.com/discord/discord-api-docs) or known through other means _and have received the green light to be used_). For clarification's sake, this means that properties that are only known through the process of data mining and have not yet been confirmed in a way as described will **NOT** be included.
+**A note about how types are documented**: This package will add types only for known and documented properties that are present in Discord's [API Documentation repository](https://github.com/discord/discord-api-docs),
+that are mentioned in an open pull request, or known through other means _and have received the green light to be used_.
+Anything else will not be documented (for example client only types).
+
+With that aside, we may allow certain types that are not documented in the [API Documentation repository](https://github.com/discord/discord-api-docs) on a case by case basis.
+They will be documented with an `@unstable` tag and are not subject with the same versioning rules.

deno/README.md

@@ -1,5 +1,7 @@
 # Discord API Types
 
+[![discord-api-types](./website/static/svgs/logo_long_blurple.svg)](https://github.com/discordjs/discord-api-types)
+
 [![GitHub](https://img.shields.io/github/license/discordjs/discord-api-types)](https://github.com/discordjs/discord-api-types/blob/main/LICENSE.md)
 [![npm](https://img.shields.io/npm/v/discord-api-types?color=crimson&logo=npm)](https://www.npmjs.com/package/discord-api-types)
 [![deno](https://img.shields.io/npm/v/discord-api-types?color=blue&label=deno&logo=deno)](https://deno.land/x/discord_api_types)
@@ -94,4 +96,9 @@ The exports of each API version is split into three main parts:
 
 - There may be types exported that are identical for all versions. These will be exported as is and can be found in the `globals` file. They will still be prefixed accordingly as described above.
 
-**Warning**: This package documents just KNOWN (and documented) properties. Anything that isn't documented will NOT be added to this package (unless said properties are in an open Pull Request to Discord's [API Documentation repository](https://github.com/discord/discord-api-docs) or known through other means _and have received the green light to be used_). For clarification's sake, this means that properties that are only known through the process of data mining and have not yet been confirmed in a way as described will **NOT** be included.
+**A note about how types are documented**: This package will add types only for known and documented properties that are present in Discord's [API Documentation repository](https://github.com/discord/discord-api-docs),
+that are mentioned in an open pull request, or known through other means _and have received the green light to be used_.
+Anything else will not be documented (for example client only types).
+
+With that aside, we may allow certain types that are not documented in the [API Documentation repository](https://github.com/discord/discord-api-docs) on a case by case basis.
+They will be documented with an `@unstable` tag and are not subject with the same versioning rules.

deno/payloads/common.ts

@@ -1,4 +1,4 @@
-import type { LocaleString } from '../v10.ts';
+import type { LocaleString } from '../rest/common.ts';
 
 /**
  * https://discord.com/developers/docs/topics/permissions#permissions-bitwise-permission-flags

package.json

@@ -94,7 +94,7 @@
 		"build:deno": "node ./scripts/deno.mjs",
 		"build:node": "tsc && run-p esm:*",
 		"changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
-		"ci:pr": "run-s changelog lint build:deno",
+		"ci:pr": "run-s changelog lint build:deno && node ./scripts/bump-website-version.mjs",
 		"clean:deno": "rimraf deno/",
 		"clean:node": "rimraf {gateway,payloads,rest,rpc,voice,utils}/**/*.{js,mjs,d.ts,*map} {globals,v*}.{js,mjs,d.ts,*map}",
 		"clean": "run-p clean:*",
@@ -106,11 +106,11 @@
 		"esm:utils": "gen-esm-wrapper ./utils/index.js ./utils/index.mjs",
 		"esm:versions": "node ./scripts/versions.mjs",
 		"esm:voice": "gen-esm-wrapper ./voice/index.js ./voice/index.mjs",
-		"lint": "prettier --write . && eslint --fix --ext mjs,ts {gateway,payloads,rest,rpc,voice,utils}/**/*.ts {globals,v*}.ts scripts/**/*.{mjs,ts}",
+		"lint": "prettier --write . && eslint --fix --ext mjs,ts {gateway,payloads,rest,rpc,voice,utils}/**/*.ts {globals,v*}.ts scripts/**/*.mjs",
 		"postpublish": "run-s clean:node build:deno",
 		"prepare": "is-ci || husky install",
 		"prepublishOnly": "run-s clean test:lint build:node",
-		"test:lint": "prettier --check . && eslint --ext mjs,ts {gateway,payloads,rest,rpc,voice,utils}/**/*.ts {globals,v*}.ts scripts/**/*.{mjs,ts}",
+		"test:lint": "prettier --check . && eslint --ext mjs,ts {gateway,payloads,rest,rpc,voice,utils}/**/*.ts {globals,v*}.ts scripts/**/*.mjs",
 		"pretest:types": "tsc",
 		"test:types": "node ./scripts/run-tsd.mjs",
 		"posttest:types": "npm run clean:node"
@@ -128,32 +128,37 @@
 		"{globals,v*}.{js,js.map,d.ts,d.ts.map,mjs}"
 	],
 	"devDependencies": {
-		"@commitlint/cli": "^16.2.3",
-		"@commitlint/config-angular": "^16.2.3",
+		"@babel/runtime-corejs3": "^7.18.0",
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-angular": "^17.0.0",
 		"@favware/npm-deprecate": "^1.0.4",
-		"@octokit/action": "^3.18.0",
-		"@octokit/webhooks-types": "^5.5.1",
+		"@octokit/action": "^3.18.1",
+		"@octokit/webhooks-types": "^5.6.0",
+		"@sapphire/prettier-config": "^1.4.3",
 		"@types/conventional-recommended-bump": "^6.1.0",
-		"@types/node": "^17.0.23",
-		"@typescript-eslint/eslint-plugin": "^5.18.0",
-		"@typescript-eslint/parser": "^5.18.0",
+		"@types/node": "^17.0.35",
+		"@typescript-eslint/eslint-plugin": "^5.26.0",
+		"@typescript-eslint/parser": "^5.26.0",
 		"conventional-changelog-cli": "^2.2.2",
 		"conventional-recommended-bump": "^6.1.0",
-		"eslint": "^8.12.0",
+		"eslint": "^8.16.0",
 		"eslint-config-marine": "^9.4.1",
 		"eslint-config-prettier": "^8.5.0",
 		"eslint-import-resolver-typescript": "^2.7.1",
-		"eslint-plugin-import": "^2.25.4",
+		"eslint-plugin-import": "^2.26.0",
+		"eslint-plugin-jsx-a11y": "^6.5.1",
+		"eslint-plugin-react": "^7.30.0",
+		"eslint-plugin-react-hooks": "^4.5.0",
 		"gen-esm-wrapper": "^1.1.3",
-		"husky": "^7.0.4",
+		"husky": "^8.0.1",
 		"is-ci": "^3.0.1",
-		"lint-staged": "^12.3.7",
+		"lint-staged": "^12.4.1",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.6.2",
 		"pretty-quick": "^3.1.3",
 		"rimraf": "^3.0.2",
 		"tsd": "^0.20.0",
-		"typescript": "^4.6.3"
+		"typescript": "^4.6.4"
 	},
 	"repository": {
 		"type": "git",

payloads/common.ts

@@ -1,4 +1,4 @@
-import type { LocaleString } from '../v10';
+import type { LocaleString } from '../rest/common';
 
 /**
  * https://discord.com/developers/docs/topics/permissions#permissions-bitwise-permission-flags

scripts/bump-website-version.mjs

@@ -0,0 +1,13 @@
+/* eslint-disable @typescript-eslint/restrict-template-expressions, @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access */
+import { execSync } from 'node:child_process';
+import { readFile } from 'node:fs/promises';
+
+const cwd = new URL('../website/', import.meta.url);
+const json = JSON.parse(await readFile(new URL('../package.json', import.meta.url), { encoding: 'utf8' }));
+
+console.log(`⌛ Creating website version for ${json.version}`);
+
+execSync(`npm run docusaurus docs:version ${json.version}`, { cwd, encoding: 'utf8' });
+execSync(`npm run docusaurus api:version ${json.version}`, { cwd, encoding: 'utf8' });
+
+console.log(`✅ Done! Website version created for ${json.version}`);

tsconfig.eslint.json

@@ -17,6 +17,7 @@
 		"voice/**/*.ts",
 		"scripts",
 		"deno",
-		"tests/**/*.ts"
+		"tests/**/*.ts",
+		"website"
 	]
 }

website/.editorconfig

@@ -0,0 +1,22 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.{js,mjs,ts}]
+indent_size = 4
+indent_style = tab
+block_comment_start = /*
+block_comment = *
+block_comment_end = */
+
+[*.{yml,yaml}]
+indent_size = 2
+indent_style = space
+
+[*.{md,rmd,mkd,mkdn,mdwn,mdown,markdown,litcoffee}]
+tab_width = 4
+trim_trailing_whitespace = false

website/.eslintignore

@@ -0,0 +1,13 @@
+# Node modules
+node_modules/
+
+# Submodules
+projects/
+
+# Generated data
+docs/Documentation/
+.docusaurus/
+
+src/index.d.ts
+
+docs/Guide/code/

website/.eslintrc

@@ -0,0 +1,141 @@
+{
+	"root": true,
+	"extends": ["marine/prettier/react", "plugin:import/typescript"],
+	"parserOptions": {
+		"ecmaVersion": 2020,
+		"sourceType": "module",
+		"ecmaFeatures": {
+			"jsx": true
+		},
+		"jsx": true,
+		"project": "./tsconfig.eslint.json"
+	},
+	"plugins": ["import", "jsx-a11y", "react", "react-hooks"],
+	"settings": {
+		"react": {
+			"version": "detect"
+		}
+	},
+	"overrides": [
+		{
+			"files": ["docusaurus.config.js", "babel.config.js", "sidebars.js"],
+			"rules": {
+				"@typescript-eslint/no-var-requires": "off",
+				"@typescript-eslint/ban-ts-comment": "off",
+				"@typescript-eslint/no-require-imports": "off"
+			}
+		}
+	],
+	"rules": {
+		"no-extra-label": "warn",
+		"no-iterator": "warn",
+		"no-label-var": "warn",
+		"no-labels": [
+			"warn",
+			{
+				"allowLoop": true,
+				"allowSwitch": true
+			}
+		],
+		"no-lone-blocks": "warn",
+		"no-loop-func": "warn",
+		"no-mixed-operators": [
+			"warn",
+			{
+				"groups": [
+					["&", "|", "^", "~", "<<", ">>", ">>>"],
+					["==", "!=", "===", "!==", ">", ">=", "<", "<="],
+					["&&", "||"],
+					["in", "instanceof"]
+				],
+				"allowSamePrecedence": false
+			}
+		],
+		"no-multi-str": "warn",
+		"rest-spread-spacing": ["warn", "never"],
+		"no-restricted-properties": [
+			"error",
+			{
+				"object": "require",
+				"property": "ensure",
+				"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+			},
+			{
+				"object": "System",
+				"property": "import",
+				"message": "Please use import() instead. More info: https://facebook.github.io/create-react-app/docs/code-splitting"
+			}
+		],
+		"getter-return": "warn",
+		"import/first": "error",
+		"import/no-amd": "error",
+		"import/no-webpack-loader-syntax": "error",
+		"react/forbid-foreign-prop-types": [
+			"warn",
+			{
+				"allowInPropTypes": true
+			}
+		],
+		"react/jsx-no-comment-textnodes": "warn",
+		"react/jsx-no-duplicate-props": "warn",
+		"react/jsx-no-target-blank": "warn",
+		"react/jsx-no-undef": "error",
+		"react/jsx-pascal-case": [
+			"warn",
+			{
+				"allowAllCaps": true,
+				"ignore": []
+			}
+		],
+		"react/jsx-uses-react": "warn",
+		"react/jsx-uses-vars": "warn",
+		"react/no-children-prop": "warn",
+		"react/no-access-state-in-setstate": "warn",
+		"react/no-danger": "error",
+		"react/no-danger-with-children": "warn",
+		"react/no-direct-mutation-state": "warn",
+		"react/no-is-mounted": "warn",
+		"react/no-this-in-sfc": "warn",
+		"react/no-typos": "error",
+		"react/react-in-jsx-scope": "error",
+		"react/require-render-return": "error",
+		"react/style-prop-object": "warn",
+		"react/void-dom-elements-no-children": "warn",
+		"react/jsx-filename-extension": [
+			"error",
+			{
+				"extensions": [".jsx", ".tsx"]
+			}
+		],
+		"jsx-a11y/accessible-emoji": "warn",
+		"jsx-a11y/alt-text": "warn",
+		"jsx-a11y/anchor-has-content": "warn",
+		"jsx-a11y/anchor-is-valid": [
+			"warn",
+			{
+				"aspects": ["noHref", "invalidHref"]
+			}
+		],
+		"jsx-a11y/aria-activedescendant-has-tabindex": "warn",
+		"jsx-a11y/aria-props": "warn",
+		"jsx-a11y/aria-proptypes": "warn",
+		"jsx-a11y/aria-role": [
+			"warn",
+			{
+				"ignoreNonDOM": true
+			}
+		],
+		"jsx-a11y/aria-unsupported-elements": "warn",
+		"jsx-a11y/heading-has-content": "warn",
+		"jsx-a11y/iframe-has-title": "warn",
+		"jsx-a11y/img-redundant-alt": "warn",
+		"jsx-a11y/no-access-key": "warn",
+		"jsx-a11y/no-distracting-elements": "warn",
+		"jsx-a11y/no-redundant-roles": "warn",
+		"jsx-a11y/role-has-required-aria-props": "warn",
+		"jsx-a11y/role-supports-aria-props": "warn",
+		"jsx-a11y/scope": "warn",
+		"react-hooks/exhaustive-deps": "warn",
+		"react-hooks/rules-of-hooks": "error"
+	}
+}

website/.gitignore

@@ -0,0 +1,33 @@
+# Dependencies
+node_modules/
+.pnp/
+
+# Yarn files
+.yarn/install-state.gz
+.yarn/build-state.yml
+
+# Production
+build/
+
+# Generated Files
+.docusaurus/
+.cache-loader/
+docs/Documentation/
+tsconfig.tsbuildinfo
+
+# misc
+.DS_Store
+Thumbs.db
+
+# Local env vars
+.env
+
+# IDE Settings
+.idea/
+.vs/
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log

website/.markdownlint-cli2.jsonc

@@ -0,0 +1,14 @@
+{
+	"config": {
+		"default": false,
+		"MD001": true,
+		"MD003": true,
+		"MD009": true,
+		"MD011": true,
+		"MD012": true,
+		"MD013": {
+			"line_length": 120
+		}
+	},
+	"globs": ["docs/**/*.{md,mdx}"]
+}

website/.prettierignore

@@ -0,0 +1,5 @@
+# Node modules
+node_modules/
+
+# Generated data
+.docusaurus/

website/.prettierrc.js

@@ -0,0 +1,17 @@
+const sapphirePrettierConfig = require('@sapphire/prettier-config');
+
+module.exports = {
+	...sapphirePrettierConfig,
+	overrides: [
+		...sapphirePrettierConfig.overrides,
+		{
+			files: ['README.md', 'docs/**/*.mdx', 'docs/**/*.md'],
+			options: {
+				tabWidth: 2,
+				useTabs: false,
+				printWidth: 120,
+				proseWrap: 'always'
+			}
+		}
+	]
+};

website/.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	"recommendations": [
+		"bierner.github-markdown-preview",
+		"christian-kohler.path-intellisense",
+		"davidanson.vscode-markdownlint",
+		"dbaeumer.vscode-eslint",
+		"esbenp.prettier-vscode",
+		"mdickin.markdown-shortcuts",
+		"silvenon.mdx",
+		"streetsidesoftware.code-spell-checker",
+		"usernamehw.errorlens"
+	]
+}

website/.vscode/settings.json

@@ -0,0 +1,19 @@
+{
+	"editor.detectIndentation": true,
+	"files.eol": "\n",
+	"files.associations": {
+		"*.mdx": "markdown"
+	},
+	"cSpell.language": "en-US",
+	"cSpell.maxNumberOfProblems": 8,
+	"cSpell.numSuggestions": 24,
+	"search.exclude": {
+		"**/.docusaurus/": true,
+		"**/.git/": true,
+		"**/.yarn": true,
+		"**/*.code-search": true,
+		"**/bower_components": true,
+		"**/node_modules": true,
+		"**/projects/": true
+	}
+}

website/LICENSE.md

@@ -0,0 +1,24 @@
+# The MIT License (MIT)
+
+Copyright © `2020` `The Sapphire Community and its contributors`
+
+Permission is hereby granted, free of charge, to any person
+obtaining a copy of this software and associated documentation
+files (the “Software”), to deal in the Software without
+restriction, including without limitation the rights to use,
+copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the
+Software is furnished to do so, subject to the following
+conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
+OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
+HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
+OTHER DEALINGS IN THE SOFTWARE.

website/README.md

@@ -0,0 +1,27 @@
+<div align="center">
+
+# Discord API Types Website
+
+**Source code for the Discord API Types website.**
+
+_Code is forked from the Sapphire Community's Website under the MIT license_
+
+[![GitHub](https://img.shields.io/github/license/sapphiredev/website)](https://github.com/discordjs/discord-api-types/blob/main/website/LICENSE.md)
+
+</div>
+
+## Running locally
+
+After forking/cloning this repo to a folder locally:
+
+1. Install dependencies with `npm ci`.
+2. Run `npm run start` to start the dev server
+
+## Special thanks
+
+This project is being hosted by the amazing team at [Vercel]. We use their service to ensure you always get the latest
+version of the documentation, as well as being able to preview builds internally. Thank you [Vercel]!
+
+[![Vercel](./static/powered-by-vercel.svg)][vercel]
+
+[vercel]: https://vercel.com?utm_source=sapphiredev&utm_campaign=oss

website/THIRD_PARTY_LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Facebook, Inc. and its affiliates.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

website/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+	presets: [require.resolve('@docusaurus/core/lib/babel/preset')]
+};

website/docs/Contributing.mdx

@@ -0,0 +1,11 @@
+---
+id: contributing_to_discord-api-types
+title: How to Contribute
+sidebar_position: 1
+---
+
+:::caution Keep in mind!
+
+This page is WIP. It will be built up to explain how you can contribute to Discord API Types, and what to keep in mind!
+
+:::

website/docs/Introduction.mdx

@@ -0,0 +1,167 @@
+---
+id: introduction_to_discord-api-types
+title: Introduction
+sidebar_position: 0
+---
+
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<div align="center">
+
+<img src="/svgs/logo_long_blurple.svg" className="markdown__logo" />
+
+[![Discord server](https://img.shields.io/discord/222078108977594368?color=5865F2&logo=discord&logoColor=white)](https://discord-api-types.dev/discord)
+[![Patreon Donate](https://img.shields.io/badge/patreon-donate-brightgreen.svg?label=Donate%20with%20Patreon&logo=patreon&colorB=F96854&link=https://www.patreon.com/vladfrangu)](https://www.patreon.com/vladfrangu)
+[![Ko-fi Donate](https://img.shields.io/badge/kofi-donate-brightgreen.svg?label=Donate%20with%20Ko-fi&logo=ko-fi&colorB=F16061&link=https://ko-fi.com/wolfgalvlad&logoColor=FFFFFF)](https://ko-fi.com/wolfgalvlad)
+[![GitHub Sponsors](https://img.shields.io/badge/patreon-donate-brightgreen.svg?label=Sponsor%20through%20GitHub&logo=github&colorB=F96854&link=https://github.com/sponsors/vladfrangu)](https://github.com/sponsors/vladfrangu)
+
+[![NPM version](https://img.shields.io/npm/v/discord-api-types?color=crimson&label=NPM%20Version&logo=npm)](https://www.npmjs.com/package/discord-api-types)
+[![NPM downloads](https://img.shields.io/npm/dt/discord-api-types.svg?label=NPM%20Downloads&logo=npm)](https://www.npmjs.com/package/discord-api-types)
+[![deno](https://img.shields.io/npm/v/discord-api-types?color=blue&label=deno&logo=deno)](https://deno.land/x/discord_api_types)
+
+</div>
+
+## About
+
+Discord API Types is a community-maintained project that brings API types for Discord's REST, Gateway and Voice APIs.
+
+## Installation
+
+Install with [npm](https://www.npmjs.com/) / [yarn](https://yarnpkg.com) / [pnpm](https://pnpm.js.org/):
+
+```bash npm2yarn2pnpm
+npm install discord-api-types
+```
+
+### Usage
+
+You can only import this module by specifying the API version you want to target. Append `/v*` to the import path, where
+the `*` represents the API version. Below are some examples
+
+<Tabs groupId="ts2esm2cjs">
+<TabItem value="javascript" label="JavaScript">
+
+```javascript
+/**
+ * @type {import('discord-api-types/v10').APIUser}
+ */
+```
+
+</TabItem>
+
+<TabItem value="esm" label="ESM">
+
+```javascript
+/**
+ * @type {import('discord-api-types/v10').APIUser}
+ */
+```
+
+</TabItem>
+
+<TabItem value="typescript" label="TypeScript">
+
+```typescript
+import { type APIUser } from 'discord-api-types/v10';
+```
+
+</TabItem>
+
+</Tabs>
+
+:::info
+
+You may also import just certain parts of the module that you need. The possible values are: `globals`, `gateway`,
+`gateway/v*`, `payloads`, `payloads/v*`, `rest`, `rest/v*`, `rpc`, `rpc/v*`, `utils`, `utils/v*`, `voice`, and
+`voice/v*`. Below is an example of importing directly from the gateway submodule
+
+```typescript ts2esm2cjs
+import { GatewayVersion } from 'discord-api-types/gateway/v10';
+
+console.log(`Let's connect to wss://gateway.discord.gg/?v=${GatewayVersion}`);
+```
+
+> _**Note:** The `v*` exports (`discord-api-type/v*`) include the appropriate version of `gateway`, `payloads`, `rest`,
+> `rpc`, and `utils` you specified, alongside the `globals` exports_
+
+:::
+
+### Deno
+
+We also provide typings compatible with the [deno](https://deno.land/) runtime. Here are 3 examples of how you can
+import them:
+
+<Tabs>
+<TabItem value="github" label="From GitHub">
+
+```typescript
+// Importing a specific API version
+import { APIUser } from 'https://raw.githubusercontent.com/discordjs/discord-api-types/main/deno/v10.ts';
+```
+
+</TabItem>
+
+<TabItem value="deno" label="From deno.land/x" default>
+
+```typescript
+// Importing a specific API version
+import { APIUser } from 'https://deno.land/x/discord_api_types/v10.ts';
+```
+
+</TabItem>
+
+<TabItem value="skypack" label="From skypack.dev">
+
+```typescript
+// Importing a specific API version
+import { APIUser } from 'https://cdn.skypack.dev/discord-api-types/v10?dts';
+```
+
+</TabItem>
+
+</Tabs>
+
+## Project Structure
+
+The exports of each API version is split into three main parts:
+
+- Everything exported with the `API` prefix represents a payload you may get from the REST API _or_ the Gateway.
+
+- Everything exported with the `Gateway` prefix represents data that ONLY comes from or is directly related to the
+  Gateway.
+
+- Everything exported with the `REST` prefix represents data that ONLY comes from or is directly related to the REST
+  API.
+
+  - For endpoint options, they will follow the following structure:
+    `REST<HTTP Method><Type><Query|(JSON|FormData)Body|Result>` where the type represents what it will return.
+
+    - For example, `RESTPostAPIChannelMessageJSONBody` or `RESTGetAPIGatewayBotInfoResult`.
+
+    - Some exported types (specifically OAuth2 related ones) may not respect this entire structure due to the nature of
+      the fields. They will start with either `RESTOAuth2` or with something similar to `REST<HTTP Method>OAuth2`
+
+  - If a type ends with `Result`, then it represents the expected result by calling its accompanying route.
+
+    - Types that are exported as `never` usually mean the result will be a `204 No Content`, so you can safely ignore
+      it. This does **not** account for errors.
+
+- Anything else that is miscellaneous will be exported based on what it represents (for example the `REST` route
+  object).
+
+- There may be types exported that are identical for all versions. These will be exported as is and can be found in the
+  `globals` file. They will still be prefixed accordingly as described above.
+
+:::danger A note about how types are documented
+
+This package will add types only for known and documented properties that are present in Discord's
+[API Documentation repository](https://github.com/discord/discord-api-docs), that are mentioned in an open pull request,
+or known through other means _and have received the green light to be used_. Anything else will not be documented (for
+example client only types).
+
+With that aside, we may allow certain types that are not documented in the
+[API Documentation repository](https://github.com/discord/discord-api-docs) on a case by case basis. They will be
+documented with an `@unstable` tag and are not subject with the same versioning rules.
+
+:::

website/docusaurus.config.js

@@ -0,0 +1,256 @@
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+
+const { join } = require('path');
+const { npm2yarn2pnpm } = require('@sapphire/docusaurus-plugin-npm2yarn2pnpm');
+const { ts2esm2cjs } = require('@sapphire/docusaurus-plugin-ts2esm2cjs');
+const lightCodeTheme = require('prism-react-renderer/themes/github');
+const darkCodeTheme = require('prism-react-renderer/themes/vsDark');
+
+/** @type {string[]} */
+const versions = require('./versions.json');
+
+const Description = "discord-api-types is a simple Node/Deno module that brings up to date typings for Discord's API";
+const BaseUrl = 'https://discord-api-types.dev';
+const Email = 'vlad@discord-api-types.dev';
+const Title = 'discord-api-types documentation';
+
+/** @type {import('@docusaurus/types').Config} */
+const config = {
+	title: 'discord-api-types documentation',
+	url: BaseUrl,
+	baseUrl: '/',
+	onBrokenLinks: 'throw',
+	onBrokenMarkdownLinks: 'throw',
+	onDuplicateRoutes: 'throw',
+	favicon: '/favicon.ico',
+	tagline: Description,
+	organizationName: 'discordjs',
+	projectName: 'discord-api-types',
+
+	themes: [],
+
+	plugins: [
+		'docusaurus-plugin-sass',
+		[
+			'@docusaurus/plugin-pwa',
+			{
+				offlineModeActivationStrategies: ['appInstalled', 'standalone', 'queryString'],
+				pwaHead: [
+					{
+						tagName: 'link',
+						rel: 'icon',
+						href: '/android-chrome-192x192.png'
+					},
+					{
+						tagName: 'link',
+						rel: 'manifest',
+						href: '/manifest.webmanifest'
+					},
+					{
+						tagName: 'meta',
+						name: 'theme-color',
+						content: '#2563EB'
+					}
+				]
+			}
+		],
+		[
+			'docusaurus-plugin-typedoc-api',
+			/** @type {Parameters<import('docusaurus-plugin-typedoc-api')['default']>[1]} */ ({
+				projectRoot: join(__dirname, '../'),
+				packages: [
+					{
+						path: './',
+						entry: {
+							globals: { path: 'globals.ts', label: 'Global Types' },
+							'gateway/common': { path: 'gateway/common.ts', label: 'Gateway - Common Types' },
+							'payloads/common': { path: 'payloads/common.ts', label: 'Payloads - Common Types' },
+							'rest/common': { path: 'rest/common.ts', label: 'REST - Common Types' },
+							'rpc/common': { path: 'rpc/common.ts', label: 'RPC - Common Types' },
+							v6: { path: 'v6.ts', label: 'API v6 - Deprecated' },
+							v8: { path: 'v8.ts', label: 'API v8 - Deprecated' },
+							v9: { path: 'v9.ts', label: 'API v9' },
+							v10: { path: 'v10.ts', label: 'API v10' },
+							'rpc/v8': { path: 'rpc/v8.ts', label: 'RPC v8' },
+							'rpc/v9': { path: 'rpc/v9.ts', label: 'RPC v9' },
+							'rpc/v10': { path: 'rpc/v10.ts', label: 'RPC v10' },
+							'voice/v4': { path: 'voice/v4.ts', label: 'Voice v4' },
+							'utils/v8': { path: 'utils/v8.ts', label: 'Utils v8' },
+							'utils/v9': { path: 'utils/v9.ts', label: 'Utils v9' },
+							'utils/v10': { path: 'utils/v10.ts', label: 'Utils v10' }
+						},
+						slug: 'discord-api-types'
+					}
+				]
+			})
+		]
+	],
+
+	presets: [
+		[
+			'@docusaurus/preset-classic',
+			/** @type {import('@docusaurus/preset-classic').Options} */
+			({
+				docs: {
+					sidebarPath: require.resolve('./sidebars.js'),
+					showLastUpdateAuthor: false,
+					showLastUpdateTime: false,
+					remarkPlugins: [npm2yarn2pnpm, ts2esm2cjs]
+				},
+				blog: false,
+				theme: {
+					customCss: [
+						require.resolve('./src/css/custom.scss'),
+						require.resolve('./src/css/tippy-discord.css'),
+						require.resolve('./src/css/discordjs.scss')
+					]
+				}
+			})
+		]
+	],
+
+	themeConfig:
+		/** @type {Partial<import('@docusaurus/preset-classic').ThemeConfig>} */
+		({
+			image: 'https://discord-api-types.dev/opengraph.png',
+			colorMode: {
+				defaultMode: 'dark',
+				respectPrefersColorScheme: true
+			},
+			metadata: [
+				// Tags from realfavicongenerator
+				{ name: 'apple-mobile-web-app-title', content: Title },
+				{ name: 'application-name', content: Title },
+				{ name: 'msapplication-TileColor', content: '#2563EB' },
+				{ name: 'msapplication-TileImage', content: '/mstile-144x144.png' },
+				{ name: 'theme-color', content: '#2563EB' },
+
+				{ name: 'apple-mobile-web-app-capable', content: 'yes' },
+				{ name: 'apple-mobile-web-app-status-bar-style', content: 'black' },
+				{ name: 'audience', content: 'all' },
+				{ name: 'author', content: `Vlad Frangu, ${Email}` },
+				{ name: 'coverage', content: 'Worldwide' },
+				{ name: 'description', content: Description },
+				{ name: 'designer', content: `Vlad Frangu, ${Email}` },
+				{ name: 'distribution', content: 'Global' },
+				{ name: 'googlebot', content: 'index,follow' },
+				{ name: 'HandheldFriendly', content: 'True' },
+				{ name: 'identifier-URL', content: BaseUrl },
+				{ name: 'keywords', content: 'discord, bot, discord api, documentation, guide, discord-api-types' },
+				{ name: 'msapplication-config', content: '/browserconfig.xml' },
+				{ name: 'owner', content: `Vlad Frangu, ${Email}` },
+				{ name: 'rating', content: 'safe for kids' },
+				{ name: 'reply-to', content: Email },
+				{ name: 'revisit-after', content: '7 days' },
+				{ name: 'robots', content: 'archive,follow,imageindex,index,odp,snippet,translate' },
+				{ name: 'shortlink', content: BaseUrl },
+				{ name: 'subject', content: 'Documentation website for discord-api-types' },
+				{ name: 'summary', content: Description },
+				{ name: 'target', content: 'all' },
+				{ name: 'twitter:card', content: 'summary' },
+				{ name: 'twitter:creator', content: '@WolfgalVlad' },
+				{ name: 'twitter:site', content: '@WolfgalVlad' },
+				{ name: 'url', content: BaseUrl },
+				{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
+				{ property: 'og:description', content: Description },
+				{ property: 'og:email', content: Email },
+				{ property: 'og:image:alt', content: 'OpenGraphImage' },
+				{ property: 'og:image:height', content: '512' },
+				{ property: 'og:image:width', content: '1024' },
+				{ property: 'og:locale', content: 'en_US' },
+				{ property: 'og:site_name', content: Title },
+				{ property: 'og:title', content: Title },
+				{ property: 'og:type', content: 'website' },
+				{ property: 'og:url', content: BaseUrl }
+			],
+			navbar: {
+				title: 'discord-api-types',
+				logo: {
+					alt: 'Discord API Types Logo',
+					src: 'svgs/logo_light.svg',
+					srcDark: 'svgs/logo_dark.svg'
+				},
+				items: [
+					{
+						to: '/',
+						label: 'Home',
+						position: 'left',
+						activeBaseRegex: '^/$'
+					},
+					{
+						to: 'docs/introduction_to_discord-api-types',
+						label: 'Introduction to the module',
+						position: 'left'
+					},
+					{
+						type: 'dropdown',
+						to: 'api',
+						label: 'API',
+						position: 'left',
+						items: [
+							{ label: versions.length === 0 ? 'Development Time' : '@next', to: versions.length === 0 ? 'api' : 'api/next' },
+							...versions.map((version, i) => ({
+								label: version,
+								to: i === 0 ? 'api' : `api/${version}`
+							}))
+						]
+					}
+				]
+			},
+			footer: {
+				style: 'dark',
+				logo: {
+					alt: 'Powered By Vercel',
+					src: '/powered-by-vercel.svg',
+					href: 'https://vercel.com/?utm_source=sapphiredev&utm_campaign=oss'
+				},
+				links: [
+					{
+						title: 'Donate',
+						items: [
+							{
+								label: 'Ko-fi',
+								href: 'https://discord-api-types.dev/kofi'
+							},
+							{
+								label: 'Patreon',
+								href: 'https://discord-api-types.dev/patreon'
+							},
+							{
+								label: 'GitHub Sponsors',
+								href: 'https://discord-api-types.dev/sponsor'
+							}
+						]
+					},
+					{
+						title: 'Our Platforms',
+						items: [
+							{
+								label: 'Discord Server',
+								href: 'https://discord-api-types.dev/discord'
+							},
+							{
+								label: 'GitHub Organization',
+								href: 'https://discord-api-types.dev/ghorg'
+							}
+						]
+					}
+				],
+				copyright: `Copyright © 2021 - ${new Date().getFullYear()} The discord.js Community and its contributors.`
+			},
+			prism: {
+				defaultLanguage: 'typescript',
+				theme: lightCodeTheme,
+				darkTheme: darkCodeTheme,
+				additionalLanguages: ['powershell', 'batch']
+			}
+			// algolia: {
+			// 	appId: 'TO_BE_DONE',
+			// 	apiKey: 'TO_BE_DONE',
+			// 	indexName: 'TO_BE_DONE',
+			// 	contextualSearch: false
+			// }
+		})
+};
+
+module.exports = config;

website/package.json

@@ -0,0 +1,103 @@
+{
+	"name": "discord-api-types-website",
+	"version": "1.0.0",
+	"description": "Website for discord-api-types, hosted on https://discord-api-types.dev",
+	"author": "Vlad Frangu <kingdgrizzle@gmail.com>",
+	"license": "MIT",
+	"private": true,
+	"scripts": {
+		"docusaurus": "docusaurus",
+		"start": "npm run clean && docusaurus start",
+		"build": "npm run clean && docusaurus build",
+		"swizzle": "docusaurus swizzle",
+		"deploy": "docusaurus deploy",
+		"clear": "docusaurus clear",
+		"serve": "docusaurus serve",
+		"write-translations": "docusaurus write-translations",
+		"write-heading-ids": "docusaurus write-heading-ids",
+		"typecheck": "tsc",
+		"lint": "eslint src --ext mjs,ts --fix",
+		"lint:no-fix": "eslint src --ext mjs,ts --fix",
+		"lint:md": "markdownlint-cli2-fix",
+		"lint:md-no-fix": "markdownlint-cli2",
+		"clean": "node scripts/clean.mjs",
+		"format": "prettier --write \"{src,static,scripts,docs}/**/*.{js,jsx,ts,tsx,css,scss,json,md,mdx,yml}\"",
+		"format:check": "prettier --check \"{src,static,scripts,docs}/**/*.{js,jsx,ts,tsx,css,scss,json,md,mdx,yml}\"",
+		"test:lint": "run-s lint:no-fix format:check lint:md-no-fix",
+		"vercel-build": "npm run build"
+	},
+	"dependencies": {
+		"@docusaurus/core": "2.0.0-beta.20",
+		"@docusaurus/plugin-pwa": "2.0.0-beta.20",
+		"@docusaurus/preset-classic": "2.0.0-beta.20",
+		"@docusaurus/theme-search-algolia": "2.0.0-beta.20",
+		"@heroicons/react": "^1.0.6",
+		"@mdx-js/react": "^1.6.22",
+		"@sapphire/docusaurus-plugin-npm2yarn2pnpm": "^1.1.0",
+		"@sapphire/docusaurus-plugin-ts2esm2cjs": "^1.1.0",
+		"@svgr/webpack": "^6.2.1",
+		"@tippyjs/react": "^4.2.6",
+		"clsx": "^1.1.1",
+		"docusaurus-plugin-sass": "^0.2.2",
+		"docusaurus-plugin-typedoc-api": "^1.11.0",
+		"prism-react-renderer": "^1.3.3",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
+		"sass": "^1.52.1",
+		"swr": "^1.3.0"
+	},
+	"devDependencies": {
+		"@commitlint/cli": "^17.0.0",
+		"@commitlint/config-conventional": "^17.0.0",
+		"@docusaurus/module-type-aliases": "2.0.0-beta.20",
+		"@sapphire/prettier-config": "^1.4.3",
+		"@sapphire/ts-config": "^3.3.4",
+		"@types/node": "^17.0.35",
+		"@types/react": "^18.0.9",
+		"@types/react-dom": "^18.0.4",
+		"@typescript-eslint/eslint-plugin": "^5.25.0",
+		"@typescript-eslint/parser": "^5.25.0",
+		"cross-env": "^7.0.3",
+		"cz-conventional-changelog": "^3.3.0",
+		"eslint": "^8.16.0",
+		"lint-staged": "^12.4.1",
+		"markdownlint": "^0.25.1",
+		"markdownlint-cli2": "^0.4.0",
+		"npm-run-all": "^4.1.5",
+		"prettier": "^2.6.2",
+		"pretty-quick": "^3.1.3",
+		"replace-in-file": "^6.3.2",
+		"rimraf": "^3.0.2",
+		"typedoc": "^0.22.15",
+		"typedoc-plugin-djs-links": "^1.0.4",
+		"typedoc-plugin-markdown": "^3.12.1",
+		"typedoc-plugin-mdn-links": "^1.0.6",
+		"typescript": "^4.6.4"
+	},
+	"browserslist": {
+		"production": [
+			">0.5%",
+			"not dead",
+			"not op_mini all"
+		],
+		"development": [
+			"last 1 chrome version",
+			"last 1 firefox version",
+			"last 1 safari version"
+		]
+	},
+	"homepage": "https://discord-api-types.dev",
+	"commitlint": {
+		"extends": [
+			"@commitlint/config-conventional"
+		]
+	},
+	"lint-staged": {
+		"*.{mjs,js,jsx,ts,tsx}": "eslint --fix --ext mjs,js,jsx,ts,tsx"
+	},
+	"config": {
+		"commitizen": {
+			"path": "./node_modules/cz-conventional-changelog"
+		}
+	}
+}

website/scripts/clean.mjs

@@ -0,0 +1,17 @@
+import { rm } from 'node:fs/promises';
+
+const rootDir = new URL('../', import.meta.url);
+const documentationDir = new URL('docs/Documentation/', rootDir);
+const docusaurusOutputDir = new URL('.docusaurus/', rootDir);
+const nodeModulesCacheDir = new URL('node_modules/.cache/', rootDir);
+const buildDir = new URL('build/', rootDir);
+
+/** @type {import('node:fs').RmOptions} */
+const rmOptions = { recursive: true, force: true };
+
+await Promise.all([
+	rm(docusaurusOutputDir, rmOptions), //
+	rm(documentationDir, rmOptions),
+	rm(nodeModulesCacheDir, rmOptions),
+	rm(buildDir, rmOptions)
+]);

website/sidebars.js

@@ -0,0 +1,8 @@
+module.exports = {
+	sidebar: [
+		{
+			type: 'autogenerated',
+			dirName: '.'
+		}
+	]
+};

website/src/components/Common/LoadingSkeleton.module.css

@@ -0,0 +1,28 @@
+.loadingSkeleton {
+	width: 315px;
+	height: 210px;
+	cursor: progress;
+	animation: loading 1.5s infinite;
+}
+
+.lightLoadingSkeleton {
+	background: linear-gradient(0.25turn, transparent, #fff, transparent), linear-gradient(#eee, #eee), linear-gradient(#eee, #eee),
+		linear-gradient(#eee, #eee), linear-gradient(#eee, #eee), linear-gradient(#eee, #eee);
+	background-repeat: no-repeat;
+	background-size: 315px 210px, 315px 30px, 315px 30px, 315px 30px, 315px 30px, 315px 30px;
+	background-position: -315px 0, 0 0, 0 45px, 0 90px, 0 135px, 0 180px;
+}
+
+.darkLoadingSkeleton {
+	background: linear-gradient(0.25turn, transparent, #444, transparent), linear-gradient(#333, #333), linear-gradient(#333, #333),
+		linear-gradient(#333, #333), linear-gradient(#333, #333), linear-gradient(#333, #333);
+	background-repeat: no-repeat;
+	background-size: 315px 210px, 315px 30px, 315px 30px, 315px 30px, 315px 30px, 315px 30px;
+	background-position: -315px 0, 0 0, 0 45px, 0 90px, 0 135px, 0 180px;
+}
+
+@keyframes loading {
+	to {
+		background-position: 315px 0, 0 0, 0 45px, 0 90px, 0 135px, 0 180px;
+	}
+}

website/src/components/Common/LoadingSkeleton.tsx

@@ -0,0 +1,20 @@
+import { useColorMode } from '@docusaurus/theme-common';
+import clsx from 'clsx';
+import React, { CSSProperties, FC, memo } from 'react';
+import styles from './LoadingSkeleton.module.css';
+
+const LoadingSkeleton: FC<CSSProperties> = (props) => {
+	const { colorMode } = useColorMode();
+
+	return (
+		<div
+			className={clsx(styles.loadingSkeleton, {
+				[styles.lightLoadingSkeleton]: colorMode !== 'dark',
+				[styles.darkLoadingSkeleton]: colorMode === 'dark'
+			})}
+			style={props}
+		/>
+	);
+};
+
+export default memo(LoadingSkeleton);

website/src/components/Docs/Link.module.css

@@ -0,0 +1,18 @@
+.linkIcon {
+	height: 15px;
+	margin-left: 2px;
+	margin-right: 8px;
+}
+
+.linkIconNoMarginRight {
+	margin-right: unset;
+}
+
+.link {
+	display: flex;
+	align-items: center;
+}
+
+.block {
+	display: block;
+}

website/src/components/Docs/OptionalPackageLink.tsx

@@ -0,0 +1,21 @@
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import React, { FC, ReactNode } from 'react';
+import styles from './Link.module.css';
+
+interface Props {
+	linkName: string;
+	href: string;
+	description: ReactNode;
+}
+
+const OptionalPackageLink: FC<Props> = ({ description, href, linkName }) => (
+	<span className={styles.block}>
+		<a href={href} className={styles.link}>
+			<strong>{linkName}</strong>
+			<ExternalLinkIcon className={styles.linkIcon} />
+		</a>
+		{description}
+	</span>
+);
+
+export default OptionalPackageLink;

website/src/components/Docs/RawContentCodeTabs.tsx

@@ -0,0 +1,31 @@
+import CodeBlock from '@theme/CodeBlock';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import React, { FC } from 'react';
+
+interface CodeblockProps {
+	readonly content: string;
+	readonly title?: string;
+}
+
+interface Props {
+	readonly jsCodeblockProps: CodeblockProps;
+	readonly esmCodeblockProps: CodeblockProps;
+	readonly tsCodeblockProps: CodeblockProps;
+}
+
+const RawContentCodeTabs: FC<Props> = ({ esmCodeblockProps, jsCodeblockProps, tsCodeblockProps }) => (
+	<Tabs groupId="language-choice">
+		<TabItem value="javascript" label="JavaScript" default>
+			<CodeBlock className="javascript">{jsCodeblockProps.content}</CodeBlock>
+		</TabItem>
+		<TabItem value="ESM" label="ESM">
+			<CodeBlock className="javascript">{esmCodeblockProps.content}</CodeBlock>
+		</TabItem>
+		<TabItem value="typescript" label="TypeScript">
+			<CodeBlock className="typescript">{tsCodeblockProps.content}</CodeBlock>
+		</TabItem>
+	</Tabs>
+);
+
+export default RawContentCodeTabs;

website/src/components/Docs/SimpleLink.tsx

@@ -0,0 +1,19 @@
+import { ExternalLinkIcon } from '@heroicons/react/outline';
+import clsx from 'clsx';
+import React, { FC } from 'react';
+import styles from './Link.module.css';
+
+interface Props {
+	linkName: string;
+	href: string;
+	noRightMargin: boolean;
+}
+
+const SimpleLink: FC<Props> = ({ href, linkName, noRightMargin = false }) => (
+	<a href={href} className={styles.link}>
+		{linkName}
+		<ExternalLinkIcon className={clsx(styles.linkIcon, { [styles.linkIconNoMarginRight]: noRightMargin })} />
+	</a>
+);
+
+export default SimpleLink;

website/src/components/Home/Features/Feature.module.css

@@ -0,0 +1,5 @@
+@media only screen and (max-width: 1024px) {
+	.feature {
+		margin-bottom: 2rem;
+	}
+}

website/src/components/Home/Features/Feature.tsx

@@ -0,0 +1,15 @@
+import clsx from 'clsx';
+import React, { FC, memo } from 'react';
+import styles from './Feature.module.css';
+import type { FeatureItem } from './Types';
+
+const Feature: FC<FeatureItem> = ({ title, description }) => (
+	<div className={clsx('col', 'col--4', styles.feature)}>
+		<div className="text--left padding-horiz--md">
+			<h3>{title}</h3>
+			<div>{description}</div>
+		</div>
+	</div>
+);
+
+export default memo(Feature);

website/src/components/Home/Features/Statistics.module.css

@@ -0,0 +1,15 @@
+.stars {
+	list-style-type: '✨ ';
+}
+
+.forks {
+	list-style-type: '🤖 ';
+}
+
+.contributors {
+	list-style-type: '👥 ';
+}
+
+.downloads {
+	list-style-type: '📥 ';
+}

website/src/components/Home/Features/Statistics.tsx

@@ -0,0 +1,43 @@
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+
+import useIsBrowser from '@docusaurus/useIsBrowser';
+import { formatNumber } from '@site/src/utils/Intl';
+import React, { FC, memo } from 'react';
+import useSWR from 'swr';
+import styles from './Statistics.module.css';
+import type { ContributorsData, NpmData, RepoData } from './Types';
+
+const Statistics: FC = () => {
+	const isBrowser = useIsBrowser();
+
+	const { data: repoData } = useSWR<RepoData>('https://api.github.com/repos/discordjs/discord-api-types', {
+		suspense: isBrowser
+	});
+
+	const { data: contributorsData } = useSWR<ContributorsData[]>('https://api.github.com/repos/discordjs/discord-api-types/contributors', {
+		suspense: isBrowser
+	});
+
+	const { data: npmData } = useSWR<NpmData>('https://api.npmjs.org/downloads/range/2020-01-01:2100-12-31/discord-api-types', {
+		suspense: isBrowser
+	});
+
+	return (
+		<ul>
+			{npmData && (
+				<li className={styles.downloads}>
+					{formatNumber(npmData.downloads.reduce((acc: number, curr) => (acc += curr.downloads), 0))}+ downloads
+				</li>
+			)}
+			{repoData && (
+				<>
+					<li className={styles.stars}>{formatNumber(repoData['stargazers_count'])}+ stars</li>
+					<li className={styles.forks}>{formatNumber(repoData['forks_count'])}+ forks</li>
+				</>
+			)}
+			{contributorsData && <li className={styles.contributors}>{formatNumber(contributorsData.length)}+ contributors</li>}
+		</ul>
+	);
+};
+
+export default memo(Statistics);

website/src/components/Home/Features/StatisticsFeature.tsx

@@ -0,0 +1,24 @@
+import BrowserOnly from '@docusaurus/BrowserOnly';
+import clsx from 'clsx';
+import React, { FC, memo, Suspense } from 'react';
+import Statistics from './Statistics';
+import LoadingSkeleton from '../../Common/LoadingSkeleton';
+
+const StatisticsFeature: FC = () => (
+	<div className={clsx('col col--4')}>
+		<div className="text--left padding-horiz--md">
+			<h3>Statistics</h3>
+			<div>
+				<BrowserOnly fallback={<LoadingSkeleton />}>
+					{() => (
+						<Suspense fallback={<LoadingSkeleton />}>
+							<Statistics />
+						</Suspense>
+					)}
+				</BrowserOnly>
+			</div>
+		</div>
+	</div>
+);
+
+export default memo(StatisticsFeature);

website/src/components/Home/Features/Types.d.ts

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react';
+
+export interface FeatureItem {
+	title: string;
+	description: ReactNode;
+}
+
+export interface NpmData {
+	start: string;
+	end: string;
+	package: string;
+	downloads: Array<{
+		downloads: number;
+		day: string;
+	}>;
+}
+
+export interface RepoData {
+	forks_count: number;
+	stargazers_count: number;
+}
+
+export interface ContributorsData {
+	avatar_url: string;
+	contributions: number;
+	events_url: string;
+	followers_url: string;
+	following_url: string;
+	gists_url: string;
+	gravatar_id: string;
+	html_url: string;
+	id: number;
+	login: string;
+	node_id: string;
+	organizations_url: string;
+	received_events_url: string;
+	repos_url: string;
+	site_admin: false;
+	starred_url: string;
+	subscriptions_url: string;
+	type: string;
+	url: string;
+}

website/src/components/Home/HeadTags.tsx

@@ -0,0 +1,28 @@
+import Head from '@docusaurus/Head';
+import React, { FC, memo } from 'react';
+
+const HeadTags: FC = () => (
+	<Head>
+		<meta httpEquiv="Content-Type" content="text/html; charset=UTF-8" />
+		<meta httpEquiv="Expires" content="1y" />
+		<meta httpEquiv="Pragma" content="1y" />
+		<meta httpEquiv="Cache-Control" content="1y" />
+		<meta httpEquiv="Page-Enter" content="RevealTrans(Duration=2.0,Transition=2)" />
+		<meta httpEquiv="Page-Exit" content="RevealTrans(Duration=3.0,Transition=12)" />
+		<link rel="canonical" href="https://discord-api-types.dev" />
+		<link rel="preconnect" href="https://fonts.googleapis.com" />
+		<link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
+		<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;700&display=swap" />
+		<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+		<link rel="icon" type="image/png" sizes="192x192" href="/android-chrome-192x192.png" />
+		<link rel="icon" type="image/png" sizes="194x194" href="/android-chrome-194x194.png" />
+		<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+		<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
+		<link rel="manifest" href="/manifest.webmanifest" />
+		<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#23529B" />
+		<link rel="shortcut icon" href="/favicon.ico" />
+		<link rel="apple-touch-startup-image" href="/apple-startup.png" />
+	</Head>
+);
+
+export default memo(HeadTags);

website/src/components/Home/HomePageHeader.module.css

@@ -0,0 +1,33 @@
+.heroBanner {
+	padding: 4rem 0;
+	text-align: center;
+	position: relative;
+	overflow: hidden;
+}
+
+@media screen and (max-width: 966px) {
+	.heroBanner {
+		padding: 2rem;
+	}
+}
+
+.logo {
+	margin-top: -4rem;
+	margin-bottom: -4rem;
+	max-height: 24rem;
+}
+
+.fontSemiTitle {
+	font-size: 2.5rem;
+}
+
+@media screen and (max-width: 966px) {
+	.logo {
+		padding-top: 4rem;
+		padding-bottom: 4rem;
+	}
+
+	.fontSemiTitle {
+		font-size: 1.5rem;
+	}
+}

website/src/components/Home/HomePageHeader.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import React, { FC, memo } from 'react';
+import styles from './HomePageHeader.module.css';
+import InstallTabs from './InstallButton/InstallTabs';
+
+const HomePageHeader: FC = () => (
+	<>
+		<header className={clsx('hero', styles.heroBanner)}>
+			<div className="container">
+				<img src="/svgs/logo_long_blurple.svg" alt="Discord API Types Logo" className={styles.logo}></img>
+				<h1 className={styles.fontSemiTitle}>In-depth typings you can use when working with Discord&#39;s API</h1>
+				<InstallTabs />
+			</div>
+		</header>
+	</>
+);
+
+export default memo(HomePageHeader);

website/src/components/Home/HomepageFeatures.module.css

@@ -0,0 +1,6 @@
+.features {
+	display: flex;
+	align-items: center;
+	padding: 2rem 0;
+	width: 100%;
+}

website/src/components/Home/HomepageFeatures.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * THIRD_PARTY_LICENSE file in the `website` directory of this source tree.
+ */
+import React, { FC } from 'react';
+import Feature from './Features/Feature';
+import StatisticsFeature from './Features/StatisticsFeature';
+import type { FeatureItem } from './Features/Types';
+import styles from './HomepageFeatures.module.css';
+
+const FeatureList: FeatureItem[] = [
+	{
+		title: 'About',
+		description: (
+			<>
+				discord-api-types is a simple module that helps you work with the data returned from Discord&#39;s API.
+				<br />
+				<br />
+				With this module, you&#39;re able to work with raw data while also making sure what you access exists, and what type it may be.
+			</>
+		)
+	},
+	{
+		title: 'Key Features',
+		description: (
+			<>
+				<ul>
+					<li>Supports both Node.js and Deno</li>
+					<li>Supports both CommonJS and ESM</li>
+					<li>Receives updates as fast as they are documented</li>
+				</ul>
+			</>
+		)
+	}
+];
+
+const HomePageFeatures: FC = () => (
+	<section className={styles.features}>
+		<div className="container">
+			<div className="row">
+				{FeatureList.map((props, idx) => (
+					<Feature key={idx} {...props} />
+				))}
+				<StatisticsFeature />
+			</div>
+		</div>
+	</section>
+);
+
+export default HomePageFeatures;

website/src/components/Home/InstallButton/InstallTabButton.module.css

@@ -0,0 +1,36 @@
+.button {
+	box-shadow: var(--discord_api_types-paper-drop-shadow-4);
+}
+
+@media screen and (max-width: 966px) {
+	.button {
+		--ifm-button-size-multiplier: 1.25;
+	}
+}
+
+.buttonContent {
+	display: flex;
+	align-items: center;
+}
+
+.copyIcon {
+	height: 20px;
+	margin-left: 8px;
+}
+
+.colorGreen {
+	color: #3ba55c;
+}
+
+html[data-theme='dark'] .button {
+	background-color: #23272a;
+	border-color: #23272a;
+}
+
+html[data-theme='dark'] .button:hover {
+	background-color: #4f545c29;
+}
+
+html[data-theme='dark'] .buttonContent {
+	color: #b9bbbe;
+}

website/src/components/Home/InstallButton/InstallTabButton.tsx

@@ -0,0 +1,41 @@
+import { ClipboardCopyIcon } from '@heroicons/react/outline';
+import Tippy from '@tippyjs/react';
+import clsx from 'clsx';
+import React, { FC, useState } from 'react';
+import styles from './InstallTabButton.module.css';
+
+interface Props {
+	installCommand: string;
+	handleClickInstallButton: () => void;
+}
+
+const InstallTabButton: FC<Props> = ({ installCommand, handleClickInstallButton }) => {
+	const [showTippy, setShowTippy] = useState(false);
+
+	const toggleTippy = () => {
+		setShowTippy(true);
+
+		setTimeout(() => {
+			setShowTippy(false);
+		}, 1000);
+	};
+
+	return (
+		<Tippy visible={showTippy} content="Copied!" placement="auto" arrow theme="discord">
+			<button
+				className={clsx('button', 'button--secondary', 'button--lg', styles.button)}
+				onClick={() => {
+					handleClickInstallButton();
+					toggleTippy();
+				}}
+			>
+				<div className={clsx(styles.buttonContent)}>
+					{installCommand}
+					<ClipboardCopyIcon className={styles.copyIcon} />
+				</div>
+			</button>
+		</Tippy>
+	);
+};
+
+export default InstallTabButton;

website/src/components/Home/InstallButton/InstallTabs.module.css

@@ -0,0 +1,9 @@
+.buttons {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.tabs {
+	justify-content: center;
+}

website/src/components/Home/InstallButton/InstallTabs.tsx

@@ -0,0 +1,51 @@
+import { npmToPnpm } from '@sapphire/docusaurus-plugin-npm2yarn2pnpm';
+import TabItem from '@theme/TabItem';
+import Tabs from '@theme/Tabs';
+import npmToYarn from 'npm-to-yarn';
+import React, { FC } from 'react';
+import InstallTabButton from './InstallTabButton';
+import styles from './InstallTabs.module.css';
+
+const InstallTabs: FC = () => {
+	const npmInstallCommand = 'npm install discord-api-types';
+	const yarnInstallCommand = npmToYarn(npmInstallCommand, 'yarn');
+	const pnpmInstallCommand = npmToPnpm(npmInstallCommand);
+
+	const handleClickInstallButton = async (command: string) => {
+		// eslint-disable-next-line @typescript-eslint/no-unsafe-member-access, @typescript-eslint/no-unsafe-call
+		await window.navigator.clipboard.writeText(command);
+	};
+
+	return (
+		<div className={styles.buttons}>
+			<Tabs groupId="npm2yarn2pnpm" className={styles.tabs}>
+				<TabItem value="npm" label="npm" default>
+					<InstallTabButton
+						installCommand={npmInstallCommand}
+						handleClickInstallButton={() => {
+							void handleClickInstallButton(npmInstallCommand);
+						}}
+					/>
+				</TabItem>
+				<TabItem value="yarn" label="yarn">
+					<InstallTabButton
+						installCommand={yarnInstallCommand}
+						handleClickInstallButton={() => {
+							void handleClickInstallButton(yarnInstallCommand);
+						}}
+					/>
+				</TabItem>
+				<TabItem value="pnpm" label="pnpm">
+					<InstallTabButton
+						installCommand={pnpmInstallCommand}
+						handleClickInstallButton={() => {
+							void handleClickInstallButton(pnpmInstallCommand);
+						}}
+					/>
+				</TabItem>
+			</Tabs>
+		</div>
+	);
+};
+
+export default InstallTabs;

website/src/css/custom.scss

@@ -0,0 +1,117 @@
+:root {
+	--ifm-color-primary: #2563eb;
+	--ifm-color-primary-dark: #1554e0;
+	--ifm-color-primary-darker: #1350d4;
+	--ifm-color-primary-darkest: #1042ae;
+	--ifm-color-primary-light: #3e75ed;
+	--ifm-color-primary-lighter: #4a7eee;
+	--ifm-color-primary-lightest: #7098f2;
+	--ifm-code-font-size: 95%;
+	--ifm-font-family-monospace: 'Fira Code', 'Meslo NGF', 'JetBrains Mono', 'Menlo', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono',
+		'Courier New', monospace;
+
+	--discord_api_types-paper-drop-shadow-4: rgb(0 0 0 / 20%) 0px 2px 4px -1px, rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+
+	/* discord.js themeing */
+	--ifm-link-color: hsl(235, 85%, 65%);
+	--ifm-footer-link-color: hsl(235, 85%, 82%);
+	--ifm-navbar-background-color: #4752c4;
+	--ifm-navbar-link-hover-color: #81d4fa;
+	--ifm-navbar-link-color: #f5f6f7;
+	--ifm-menu-link-sublist-icon-filter: invert(100%) sepia(94%) saturate(17%) hue-rotate(223deg) brightness(104%) contrast(98%);
+
+	@media screen and (max-width: 997px) {
+		--ifm-menu-color: var(--ifm-navbar-link-color);
+		--ifm-menu-color-active: var(--ifm-navbar-link-hover-color);
+		--ifm-menu-color-background-active: rgba(255, 255, 255, 0.05);
+	}
+}
+
+html[data-theme='dark'] {
+	--ifm-color-primary: #81d4fa;
+	--ifm-color-primary-dark: #5dc8f9;
+	--ifm-color-primary-darker: #4ac1f8;
+	--ifm-color-primary-darkest: #14aff6;
+	--ifm-color-primary-light: #a5e0fb;
+	--ifm-color-primary-lighter: #b8e7fc;
+	--ifm-color-primary-lightest: #eef9fe;
+	--discord_api_types-paper-drop-shadow-4: rgb(0 0 0 / 20%) 0px 2px 4px -1px, rgb(0 0 0 / 14%) 0px 4px 5px 0px, rgb(0 0 0 / 12%) 0px 1px 10px 0px;
+
+	/* discord.js themeing */
+	--ifm-background-color: #1d1d1d;
+	--ifm-navbar-background-color: #4752c4;
+	--ifm-link-color: hsl(235, 85%, 82%);
+}
+
+.docusaurus-highlight-code-line {
+	background-color: rgba(0, 0, 0, 0.1);
+	display: block;
+	margin: 0 calc(-1 * var(--ifm-pre-padding));
+	padding: 0 var(--ifm-pre-padding);
+}
+
+html[data-theme='dark'] .docusaurus-highlight-code-line {
+	background-color: rgba(0, 0, 0, 0.3);
+}
+
+.prism-code.language-typescript,
+.prism-code.language-javascript {
+	counter-reset: line-number;
+}
+
+.prism-code.language-typescript .token-line::marker,
+.prism-code.language-javascript .token-line::marker {
+	color: var(--ifm-color-gray-700);
+	content: counter(line-number);
+}
+
+.prism-code.language-typescript .token-line,
+.prism-code.language-javascript .token-line {
+	counter-increment: line-number;
+	display: list-item;
+	padding-left: var(--ifm-pre-padding);
+	margin-left: var(--ifm-global-spacing);
+}
+
+.footer--dark {
+	--tw-text-opacity: 1;
+	--ifm-footer-color: rgba(229, 231, 235, var(--tw-text-opacity));
+	--ifm-footer-title-color: rgba(229, 231, 235, var(--tw-text-opacity));
+
+	--ifm-footer-background-color: #4752c4;
+}
+
+footer > .container {
+	display: grid;
+	place-content: center;
+
+	> :first-child {
+		text-align: center;
+
+		> :last-child {
+			margin-bottom: calc(var(--ifm-spacing-vertical) * 0.5);
+		}
+	}
+}
+
+.footer__item {
+	padding: 0.5em 0;
+}
+
+.markdown__logo {
+	margin-top: -8rem;
+	margin-bottom: -8rem;
+}
+
+@media screen and (max-width: 966px) {
+	.markdown__logo {
+		padding-top: 6rem;
+		padding-bottom: 6rem;
+	}
+}
+
+.navbar__logo > img {
+	height: 64px;
+	width: 64px;
+	margin-top: -25%;
+}

website/src/css/discordjs.scss

@@ -0,0 +1,43 @@
+.navbar__inner {
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	max-width: 80rem;
+	margin-left: auto;
+	margin: auto;
+}
+
+@media (min-width: 640px) {
+	.navbar__inner {
+		padding-left: 1rem;
+		padding-right: 1rem;
+	}
+}
+
+@media (min-width: 1024px) {
+	.navbar__inner {
+		padding-left: 2rem;
+		padding-right: 2rem;
+	}
+}
+
+.main-wrapper > :not(.hero) {
+	max-width: 96rem;
+	width: 100%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+// Theme the theme switcher icon to always be white
+.navbar__items.navbar__items--right > :first-child,
+.navbar-sidebar__brand > :nth-child(2) {
+	color: #f5f6f7;
+
+	> :first-child:hover {
+		background: var(--ifm-color-gray-800);
+	}
+}
+
+.navbar-sidebar__back,
+.navbar__toggle {
+	color: #f5f6f7;
+}

website/src/css/tippy-discord.css

@@ -0,0 +1,29 @@
+.tippy-box[data-theme~='discord'] {
+	color: rgba(229, 231, 235, 1);
+	padding-left: 0.5rem;
+	padding-right: 0.5rem;
+	padding-top: 0.25rem;
+	padding-bottom: 0.25rem;
+	border-radius: 0.25rem;
+	background-color: #3ba55c;
+}
+
+.tippy-box[data-theme~='discord'] > .tippy-content {
+	font-weight: 600;
+}
+
+.tippy-box[data-theme~='discord'][data-placement^='top'] > .tippy-arrow::before {
+	border-top-color: rgba(59, 165, 92, 1);
+}
+
+.tippy-box[data-theme~='discord'][data-placement^='bottom'] > .tippy-arrow::before {
+	border-top-color: rgba(59, 165, 92, 1);
+}
+
+.tippy-box[data-theme~='discord'][data-placement^='left'] > .tippy-arrow::before {
+	border-top-color: rgba(59, 165, 92, 1);
+}
+
+.tippy-box[data-theme~='discord'][data-placement^='right'] > .tippy-arrow::before {
+	border-top-color: rgba(59, 165, 92, 1);
+}

website/src/index.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="node" />
+/// <reference types="@docusaurus/module-type-aliases" />
+/// <reference types="@docusaurus/theme-classic" />

website/src/pages/index.tsx

@@ -0,0 +1,49 @@
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import Layout from '@theme/Layout';
+import React, { useEffect } from 'react';
+import { SWRConfig } from 'swr';
+import HeadTags from '../components/Home/HeadTags';
+import HomePageHeader from '../components/Home/HomePageHeader';
+import HomePageFeatures from '../components/Home/HomepageFeatures';
+
+export default function Home(): JSX.Element {
+	const { siteConfig } = useDocusaurusContext();
+
+	useEffect(() => {
+		console.log('%cHold Up!', `color: #23529B; font-size: 72px; font-weight: bold; -webkit-text-stroke: 2px #23529B`);
+		console.log(
+			[
+				'%cIf someone told you to copy/paste something here,',
+				'it is likely that you are being tricked and/or scammed.',
+				'For more information check out\n\nhttps://en.wikipedia.org/wiki/Self-XSS'
+			].join(' '),
+			'font-size: 16px;'
+		);
+		console.log(
+			[
+				'%cWhile we do everything in our power to ensure your security,',
+				'pasting anything in here could give attackers access to your private information!'
+			].join(' '),
+			'font-size: 18px; font-weight: bold; color: red;'
+		);
+	}, []);
+
+	return (
+		<>
+			<HeadTags />
+			<Layout title="Home" description={siteConfig.tagline}>
+				<SWRConfig
+					value={{
+						// eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+						fetcher: (resource: string, init: RequestInit) => fetch(resource, init).then((res) => res.json())
+					}}
+				>
+					<HomePageHeader />
+					<main>
+						<HomePageFeatures />
+					</main>
+				</SWRConfig>
+			</Layout>
+		</>
+	);
+}

website/src/utils/Intl.ts

@@ -0,0 +1,5 @@
+const IntlFormatter = new Intl.NumberFormat('en-US', { maximumFractionDigits: 2 });
+
+export function formatNumber(number: number): string {
+	return IntlFormatter.format(number);
+}

website/static/_redirects

@@ -0,0 +1 @@
+/*    /index.html   200

website/static/browserconfig.xml

@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square70x70logo src="/mstile-70x70.png"/>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <square310x310logo src="/mstile-310x310.png"/>
+            <wide310x150logo src="/mstile-310x150.png"/>
+            <TileColor>#2563eb</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

website/static/manifest.webmanifest

@@ -0,0 +1,136 @@
+{
+	"$schema": "http://json.schemastore.org/web-manifest",
+	"background_color": "#2563eb",
+	"theme_color": "#2563eb",
+	"categories": ["discord", "bot", "framework", "documentation", "guide", "discord-api-types"],
+	"description": "discord-api-types is a simple Node/Deno module that brings up to date typings for Discord's API",
+	"dir": "auto",
+	"display": "minimal-ui",
+	"lang": "en-US",
+	"name": "discord-api-types",
+	"short_name": "discord-api-types",
+	"orientation": "portrait-primary",
+	"start_url": "/",
+	"scope": "/",
+	"icons": [
+		{
+			"src": "/android-chrome-36x36.png",
+			"sizes": "36x36",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-48x48.png",
+			"sizes": "48x48",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-72x72.png",
+			"sizes": "72x72",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-96x96.png",
+			"sizes": "96x96",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-144x144.png",
+			"sizes": "144x144",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-256x256.png",
+			"sizes": "256x256",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-512x512.png",
+			"sizes": "512x512",
+			"type": "image/png"
+		}
+	],
+	"shortcuts": [
+		{
+			"name": "discord-api-types homepage",
+			"short_name": "Homepage",
+			"description": "Go to the discord-api-types homepage",
+			"url": "/",
+			"icons": [
+				{
+					"src": "/android-chrome-96x96.png",
+					"sizes": "96x96",
+					"type": "image/png"
+				}
+			]
+		}
+	],
+	"splash_pages": {
+		"name": "discord-api-types",
+		"theme_color": "#2563eb",
+		"background_color": "#2563eb",
+		"icons": [
+			{
+				"src": "/android-chrome-36x36.png",
+				"sizes": "36x36",
+				"type": "image/png",
+				"purpose": "any badge"
+			},
+			{
+				"src": "/android-chrome-48x48.png",
+				"sizes": "48x48",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-72x72.png",
+				"sizes": "72x72",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-96x96.png",
+				"sizes": "96x96",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-144x144.png",
+				"sizes": "144x144",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-192x192.png",
+				"sizes": "192x192",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-256x256.png",
+				"sizes": "256x256",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-384x384.png",
+				"sizes": "384x384",
+				"type": "image/png"
+			},
+			{
+				"src": "/android-chrome-512x512.png",
+				"sizes": "512x512",
+				"type": "image/png"
+			},
+			{
+				"src": "/maskable_icon.png",
+				"sizes": "640x640",
+				"type": "image/png",
+				"purpose": "any maskable"
+			}
+		]
+	}
+}