feat: favicon

packages/website/public/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>#090a16</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

packages/website/public/safari-pinned-tab.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
+ "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
+<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+ width="400.000000pt" height="400.000000pt" viewBox="0 0 400.000000 400.000000"
+ preserveAspectRatio="xMidYMid meet">
+<metadata>
+Created by potrace 1.14, written by Peter Selinger 2001-2017
+</metadata>
+<g transform="translate(0.000000,400.000000) scale(0.100000,-0.100000)"
+fill="#000000" stroke="none">
+<path d="M0 2000 l0 -2000 2000 0 2000 0 0 2000 0 2000 -2000 0 -2000 0 0
+-2000z m1305 795 c219 -47 373 -197 421 -411 24 -109 16 -315 -16 -399 l-23
+-61 -59 -11 c-110 -21 -182 -92 -203 -202 -11 -56 -11 -56 -68 -79 -76 -30
+-201 -42 -464 -42 l-223 0 0 610 0 610 283 0 c210 0 300 -4 352 -15z m890
+-585 c0 -543 -2 -601 -18 -659 -56 -198 -190 -334 -365 -370 -176 -37 -349 5
+-471 115 -48 44 -111 134 -111 161 0 6 19 14 43 18 23 4 73 18 110 32 l68 24
+50 -45 c56 -50 98 -66 175 -66 100 0 207 81 234 178 6 23 10 251 10 625 l0
+588 138 -3 137 -3 0 -595z m930 570 c93 -29 197 -84 252 -134 l44 -41 -61 -75
+c-34 -41 -67 -81 -74 -88 -10 -10 -25 -4 -78 32 -95 63 -154 81 -268 81 -79 0
+-103 -4 -142 -23 -62 -31 -90 -71 -96 -137 -8 -94 28 -137 168 -202 157 -73
+172 -80 240 -108 236 -97 341 -215 356 -400 16 -193 -82 -363 -258 -449 -91
+-45 -187 -66 -303 -66 -191 0 -390 74 -524 195 l-40 37 80 93 80 94 73 -53
+c168 -121 353 -155 491 -92 72 33 108 82 113 155 9 122 -37 162 -323 286 -258
+111 -350 179 -407 300 -69 148 -37 343 75 463 61 65 195 133 300 152 79 14
+222 4 302 -20z m-1367 -977 c45 -34 65 -69 70 -125 4 -61 -19 -106 -77 -145
+-90 -60 -226 3 -238 111 -3 24 -3 56 1 70 8 34 54 86 91 102 40 19 120 12 153
+-13z"/>
+<path d="M967 2543 c-4 -3 -7 -159 -7 -346 l0 -339 128 4 c101 3 136 8 172 24
+106 48 162 145 168 292 10 214 -69 334 -238 361 -73 12 -213 15 -223 4z"/>
+</g>
+</svg>

packages/website/public/site.webmanifest

@@ -0,0 +1,19 @@
+{
+	"name": "discord.js",
+	"short_name": "discord.js",
+	"icons": [
+		{
+			"src": "/android-chrome-192x192.png",
+			"sizes": "192x192",
+			"type": "image/png"
+		},
+		{
+			"src": "/android-chrome-384x384.png",
+			"sizes": "384x384",
+			"type": "image/png"
+		}
+	],
+	"theme_color": "#1a1b1e",
+	"background_color": "#1a1b1e",
+	"display": "standalone"
+}

packages/website/src/components/TableOfContentItems.tsx

@@ -1,4 +1,4 @@
-import { createStyles, Group, Text, Box } from '@mantine/core';
+import { createStyles, Group, Text, Box, Stack } from '@mantine/core';
 import { VscListSelection } from 'react-icons/vsc';
 import type { ApiClassJSON, ApiInterfaceJSON } from '~/DocModel/ApiNodeJSONEncoder';
 
@@ -68,18 +68,20 @@ export function TableOfContentItems({
 				<VscListSelection size={20} />
 				<Text>Table of content</Text>
 			</Group>
-			{propertyItems.length ? (
-				<>
-					<Text>Properties</Text>
-					{propertyItems}
-				</>
-			) : null}
-			{methodItems.length ? (
-				<>
-					<Text>Methods</Text>
-					{methodItems}
-				</>
-			) : null}
+			<Stack>
+				{propertyItems.length ? (
+					<Box>
+						<Text>Properties</Text>
+						{propertyItems}
+					</Box>
+				) : null}
+				{methodItems.length ? (
+					<Box>
+						<Text>Methods</Text>
+						{methodItems}
+					</Box>
+				) : null}
+			</Stack>
 		</Box>
 	);
 }

packages/website/src/pages/_app.tsx

@@ -1,7 +1,6 @@
 import { ColorScheme, ColorSchemeProvider, MantineProvider } from '@mantine/core';
 import { useColorScheme } from '@mantine/hooks';
 import type { AppProps } from 'next/app';
-import Head from 'next/head';
 import { useEffect, useState } from 'react';
 import { RouterTransition } from '~/components/RouterTransition';
 import '../styles/unocss.css';
@@ -18,40 +17,34 @@ export default function MyApp({ Component, pageProps }: AppProps) {
 	}, [preferredColorScheme]);
 
 	return (
-		<>
-			<Head>
-				<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
-			</Head>
-
-			<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
-				<MantineProvider
-					theme={{
-						fontFamily: 'Inter',
-						colorScheme,
-						colors: {
-							blurple: [
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-								'#5865F2',
-							],
-						},
-						primaryColor: 'blurple',
-					}}
-					withCSSVariables
-					withNormalizeCSS
-					withGlobalStyles
-				>
-					<RouterTransition />
-					<Component {...pageProps} />
-				</MantineProvider>
-			</ColorSchemeProvider>
-		</>
+		<ColorSchemeProvider colorScheme={colorScheme} toggleColorScheme={toggleColorScheme}>
+			<MantineProvider
+				theme={{
+					fontFamily: 'Inter',
+					colorScheme,
+					colors: {
+						blurple: [
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+							'#5865F2',
+						],
+					},
+					primaryColor: 'blurple',
+				}}
+				withCSSVariables
+				withNormalizeCSS
+				withGlobalStyles
+			>
+				<RouterTransition />
+				<Component {...pageProps} />
+			</MantineProvider>
+		</ColorSchemeProvider>
 	);
 }

packages/website/src/pages/_document.tsx

@@ -16,7 +16,18 @@ export default class _Document extends Document {
 	public override render() {
 		return (
 			<Html>
-				<Head />
+				<Head>
+					<meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
+					<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.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="/site.webmanifest" />
+					<link rel="mask-icon" href="/safari-pinned-tab.svg" color="#090a16" />
+					<meta name="apple-mobile-web-app-title" content="discord.js" />
+					<meta name="application-name" content="discord.js" />
+					<meta name="msapplication-TileColor" content="#090a16" />
+					<meta name="theme-color" content="#1a1b1e" />
+				</Head>
 				<body>
 					<Main />
 					<NextScript />

packages/website/src/pages/index.tsx

@@ -2,7 +2,6 @@ import { createStyles, Container, Title, Button, Group, Text, Center } from '@ma
 import Image from 'next/future/image';
 import Link from 'next/link';
 import codeSample from '../assets/code-sample.png';
-import vercelLogo from '../assets/powered-by-vercel.svg';
 
 const useStyles = createStyles((theme) => ({
 	inner: {
@@ -62,8 +61,6 @@ const useStyles = createStyles((theme) => ({
 	},
 
 	vercel: {
-		height: '100%',
-		maxWidth: 250,
 		paddingBottom: theme.spacing.xl * 4,
 	},
 }));
@@ -103,9 +100,11 @@ export default function IndexRoute() {
 					<Link href="https://vercel.com/?utm_source=discordjs&utm_campaign=oss" passHref>
 						<a title="Vercel">
 							<Image
-								// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-								src={vercelLogo}
+								src="/powered-by-vercel.svg"
 								alt="Vercel"
+								width={0}
+								height={0}
+								style={{ height: '100%', width: '100%', maxWidth: 250 }}
 								className={classes.vercel}
 							/>
 						</a>