guildedts · itsbrunodev · Feb 19, 2023 · Feb 19, 2023 · Feb 19, 2023 · Feb 19, 2023
diff --git a/apps/website/index.d.ts b/apps/website/index.d.ts
@@ -0,0 +1,2 @@
+declare module '*.png';
+declare module '*.jpg';
diff --git a/apps/website/next.config.js b/apps/website/next.config.js
@@ -25,6 +25,11 @@ module.exports = {
 				destination: 'https://guilded.gg/guildedts',
 				permanent: false,
 			},
+			{
+				source: '/npm',
+				destination: 'https://npmjs.com/package/guilded.ts',
+				permanent: false,
+			},
 		];
 	},
 };
diff --git a/apps/website/package.json b/apps/website/package.json
@@ -19,18 +19,20 @@
 		"lint": "next lint"
 	},
 	"dependencies": {
-		"next": "^13.0.0",
+		"next": "^13.1.6",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
-		"react-icons": "^4.6.0"
+		"react-icons": "^4.7.1",
+		"react-syntax-highlighter": "^15.5.0"
 	},
 	"devDependencies": {
-		"@types/react": "18.0.27",
-		"@types/react-dom": "^18.0.7",
-		"autoprefixer": "^10.4.12",
-		"eslint-config-next": "^13.0.0",
-		"postcss": "^8.4.18",
-		"tailwindcss": "^3.2.1",
-		"typescript": "^4.8.4"
+		"@types/react": "18.0.28",
+		"@types/react-dom": "^18.0.11",
+		"@types/react-syntax-highlighter": "^15.5.6",
+		"autoprefixer": "^10.4.13",
+		"eslint-config-next": "^13.1.6",
+		"postcss": "^8.4.21",
+		"tailwindcss": "^3.2.7",
+		"typescript": "^4.9.5"
 	}
 }
diff --git a/apps/website/src/app/layout.tsx b/apps/website/src/app/layout.tsx
@@ -8,7 +8,7 @@ export default function Layout({ children }: React.PropsWithChildren) {
 			<body>
 				<div className="flex flex-col h-screen">
 					<Navbar />
-					<main className="p-6 flex-grow max-w-5xl w-full mx-auto">{children}</main>
+					<main className="p-6 flex-grow max-w-3xl w-full mx-auto">{children}</main>
 					<Footer />
 				</div>
 			</body>

diff --git a/apps/website/src/app/page.tsx b/apps/website/src/app/page.tsx
@@ -1,24 +1,49 @@
 import Image from 'next/image';
+
 import Command from 'components/Command';
 import ExternalLink from 'components/ExternalLink';
+import Syntax from 'components/Syntax';
+import Layout from 'components/Layout';
+
+const codeString = `import Client from "guilded.ts";
+
+const client = new Client({ token: "your-super-secret-token" });
+
+client.once("ready", () => console.log("Logged in!"));
+
+client.on("messageCreate", (message) => {
+	if (message.content === "!ping") {
+		return message.reply("Pong!")
+	}
+});
+
+client.login();`;
 
 export default function Page() {
 	return (
-		<div className="space-y-5">
+		<div className="space-y-10">
 			<div className="text-center">
-				<Image src="/banner.png" alt="Guilded.TS" width={1200} height={300} />
+				<Image
+					src="/banner.png"
+					alt="Guilded.TS"
+					width={1200}
+					height={300}
+					priority
+					draggable={false}
+				/>
 				<Command>npm install guilded.ts</Command>
 			</div>
-			<div>
-				<h1 className="text-4xl">About</h1>
+			<div className="space-y-5">
+				<h1 className="text-3xl font-bold">About</h1>
 				<p className="text-guilded-white text-lg">
 					Guilded.TS is a feature rich, fast and efficient Guilded API wrapper. Its main
 					goal is to be simple and easy to use. It is also inspired by{' '}
 					<ExternalLink href="https://discord.js.org">discord.js</ExternalLink> to make it
-					possible for users familier with it to create Guilded bots with as much ease as
+					possible for users familiar with it to create Guilded bots with as much ease as
 					possible.
 				</p>
 			</div>
+			<Syntax code={codeString} />
 		</div>
 	);
 }
diff --git a/apps/website/src/components/Command.tsx b/apps/website/src/components/Command.tsx
@@ -13,15 +13,20 @@ export default function Command({ children }: { children: string }) {
 	}
 
 	return (
-		<code className="text-lg space-x-3 inline-flex w-fit shadow-lg py-2 px-3">
+		<code
+			className="text-lg space-x-2 inline-flex w-fit shadow-lg py-4 px-5 cursor-pointer items-center"
+			onClick={handleCopy}
+		>
 			<span>{children}</span>
-			<button onClick={handleCopy}>
-				{copied ? (
-					<HiOutlineClipboardCheck className="text-green-600" />
-				) : (
-					<HiOutlineClipboardCopy />
-				)}
-			</button>
+			{copied ? (
+				<HiOutlineClipboardCheck
+					title="Copied!"
+					size={21}
+					className="text-guilded-gilded"
+				/>
+			) : (
+				<HiOutlineClipboardCopy title="Copy" size={21} />
+			)}
 		</code>
 	);
 }
diff --git a/apps/website/src/components/Footer.tsx b/apps/website/src/components/Footer.tsx
@@ -1,13 +1,16 @@
 import Link from 'next/link';
+
 import IconLinks from './IconLinks';
 
 export default function Footer() {
 	return (
-		<footer className="flex flex-col items-center gap-3 leading-none bg-guilded-grey-dark p-5 border-t-4 border-guilded-gilded">
-			<Link className="font-semibold" href="/">
-				Guilded.TS
-			</Link>
-			<p>The feature rich Guilded API wrapper</p>
+		<footer className="flex flex-col items-center gap-6 leading-none bg-guilded-grey-dark border-t border-t-border p-8">
+			<div className="flex flex-col items-center gap-2">
+				<Link className="font-semibold" href="/">
+					Guilded.TS
+				</Link>
+				<p>The feature rich Guilded API wrapper</p>
+			</div>
 			<IconLinks />
 		</footer>
 	);

diff --git a/apps/website/src/components/Head.tsx b/apps/website/src/components/Head.tsx
@@ -0,0 +1,15 @@
+import Head from 'next/head';
+
+export default function CustomHead() {
+	return (
+		<Head>
+			<title>Guilded.TS</title>
+			<meta
+				name="description"
+				content="A feature rich NPM package for interacting with the Guilded API."
+			/>
+			<link rel="icon" href="/logo.png" />
+			<meta content="minimum-scale=1, initial-scale=1, width=device-width" name="viewport" />
+		</Head>
+	);
+}
diff --git a/apps/website/src/components/IconLinks.tsx b/apps/website/src/components/IconLinks.tsx
@@ -1,7 +1,9 @@
-import { SiGithub, SiGuilded } from 'react-icons/si';
+import { SiGithub, SiGuilded, SiNpm } from 'react-icons/si';
 import { IconType } from 'react-icons';
+import Link from 'next/link';
 
 const Links: Record<string, [href: string, Icon: IconType]> = {
+	NPM: ['/npm', SiNpm],
 	GitHub: ['/github', SiGithub],
 	'Support Server': ['/support', SiGuilded],
 };
@@ -10,7 +12,7 @@ export default function IconLinks() {
 	return (
 		<div className="flex items-center space-x-3 text-2xl">
 			{Object.entries(Links).map(([name, [href, Icon]], index) => (
-				<a
+				<Link
 					key={index}
 					href={href}
 					title={name}
@@ -19,7 +21,7 @@ export default function IconLinks() {
 					className="text-white hover:scale-110 transition ease-in-out"
 				>
 					<Icon />
-				</a>
+				</Link>
 			))}
 		</div>
 	);

diff --git a/apps/website/src/components/Layout.tsx b/apps/website/src/components/Layout.tsx
@@ -0,0 +1,14 @@
+import Footer from 'components/Footer';
+import Navbar from 'components/Navbar';
+import CustomHead from 'components/Head';
+
+export default function Layout({ children }: React.PropsWithChildren) {
+	return (
+		<div className="flex flex-col h-screen">
+			<CustomHead />
+			<Navbar />
+			<main className="p-6 flex-grow max-w-3xl w-full mx-auto">{children}</main>
+			<Footer />
+		</div>
+	);
+}
diff --git a/apps/website/src/components/NavExternalLink.tsx b/apps/website/src/components/NavExternalLink.tsx
@@ -13,7 +13,7 @@ export default function NavExternalLink({
 			href={href}
 			target="_blank"
 			rel="noreferrer"
-			className="rounded-md hover:bg-guilded-grey-dark py-2 px-3 flex items-center space-x-2 transition ease-in-out duration-300"
+			className="rounded-md hover:bg-guilded-grey-darkest py-2 px-3 flex items-center space-x-2 transition ease-in-out duration-300"
 			onClick={onClick}
 		>
 			<span>{children}</span>

diff --git a/apps/website/src/components/NavLink.tsx b/apps/website/src/components/NavLink.tsx
@@ -11,7 +11,7 @@ export default function NavLink({
 	return (
 		<Link
 			href={href}
-			className="block hover:bg-guilded-grey-dark py-2 px-3 rounded-md transition ease-in-out duration-300"
+			className="block hover:bg-guilded-grey-darkest py-2 px-3 rounded-md transition ease-in-out duration-300"
 			onClick={onClick}
 		>
 			{children}

diff --git a/apps/website/src/components/Navbar.tsx b/apps/website/src/components/Navbar.tsx
@@ -1,9 +1,10 @@
 'use client';
 
 import { useState } from 'react';
+import { HiOutlineMenu, HiOutlineX } from 'react-icons/hi';
+
 import NavLink from 'components/NavLink';
 import NavExternalLink from 'components/NavExternalLink';
-import { HiOutlineMenu, HiOutlineX } from 'react-icons/hi';
 import IconLinks from './IconLinks';
 
 const Links: Record<string, string> = {
@@ -18,7 +19,7 @@ export default function Navbar() {
 	const [isOpened, setIsOpened] = useState(false);
 
 	return (
-		<header className="sticky bg-guilded-grey-darkest p-3 shadow-xl border-b-4 border-guilded-gilded">
+		<header className="sticky bg-guilded-grey-dark p-3 shadow-xl border-t-4 border-guilded-gilded border-b border-b-border">
 			<nav className="hidden max-w-7xl mx-auto justify-between md:flex">
 				<div className="flex space-x-3">
 					{Object.entries(Links).map(([name, href], index) => (
@@ -34,8 +35,8 @@ export default function Navbar() {
 				</div>
 				<IconLinks />
 			</nav>
-			<nav className="max-w-xl mx-auto block space-y-3 md:hidden">
-				<div className="flex justify-between">
+			<nav className="max-w-3xl mx-auto block space-y-3 md:hidden">
+				<div className="flex justify-between h-10">
 					<button onClick={() => setIsOpened(!isOpened)} className="align-middle">
 						{isOpened ? (
 							<HiOutlineX className="h-6 w-6" />

diff --git a/apps/website/src/components/Syntax.tsx b/apps/website/src/components/Syntax.tsx
@@ -0,0 +1,42 @@
+'use client';
+
+import { useState } from 'react';
+import { HiOutlineClipboardCopy, HiOutlineClipboardCheck } from 'react-icons/hi';
+
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/prism-light';
+import ts from 'react-syntax-highlighter/dist/cjs/languages/prism/typescript';
+import { oneDark } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+SyntaxHighlighter.registerLanguage('typescript', ts);
+
+export default function Syntax({ code }: { code: string }) {
+	const [copied, setCopied] = useState(false);
+
+	function handleCopy() {
+		navigator.clipboard.writeText(code);
+		setCopied(true);
+		setTimeout(() => setCopied(false), 1000);
+	}
+
+	return (
+		<div className="shadow-lg relative">
+			<button
+				className="absolute top-3 right-3 bg-guilded-grey-light hover:bg-guilded-grey-lightest p-1.5 rounded-md transition ease-in-out"
+				onClick={handleCopy}
+			>
+				{copied ? (
+					<HiOutlineClipboardCheck
+						title="Copied!"
+						size={22}
+						className="text-guilded-gilded"
+					/>
+				) : (
+					<HiOutlineClipboardCopy title="Copy" size={22} />
+				)}
+			</button>
+			<SyntaxHighlighter language="typescript" style={oneDark}>
+				{code}
+			</SyntaxHighlighter>
+		</div>
+	);
+}
diff --git a/apps/website/src/styles.css b/apps/website/src/styles.css
@@ -2,13 +2,37 @@
 @tailwind components;
 @tailwind utilities;
 
+::-webkit-scrollbar {
+	z-index: 99999;
+	width: 11px;
+	height: 11px;
+}
+
+::-webkit-scrollbar-track {
+	background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+	border-radius: 20px;
+	background: rgb(255, 255, 255, 0.2);
+	background-clip: content-box;
+	border: 3px solid transparent;
+}
+
+::-webkit-scrollbar-thumb:hover {
+	border-radius: 20px;
+	background: rgb(255, 255, 255, 0.25);
+	background-clip: content-box;
+	border: 3px solid transparent;
+}
+
 @layer base {
 	body {
 		@apply bg-guilded-grey-lightest text-white;
 	}
 
 	a {
-		@apply hover:brightness-90;
+		@apply hover:brightness-110;
 	}
 
 	a,
@@ -30,7 +54,7 @@
 	}
 
 	h1 {
-		@apply text-4xl mb-8;
+		@apply text-4xl;
 	}
 
 	h2 {
@@ -49,7 +73,8 @@
 		@apply text-lg;
 	}
 
-	code {
-		@apply text-guilded-white bg-guilded-grey-dark rounded-md p-1;
+	code,
+	pre {
+		@apply text-guilded-white bg-guilded-grey-dark rounded-md !important;
 	}
 }
diff --git a/apps/website/tailwind.config.js b/apps/website/tailwind.config.js
@@ -14,6 +14,7 @@ module.exports = {
 					},
 					white: '#ececee',
 				},
+				border: '#ffffff2a',
 				typescript: {
 					blue: '#3178c6',
 				},

diff --git a/apps/website/tsconfig.json b/apps/website/tsconfig.json
@@ -12,6 +12,6 @@
 		"baseUrl": "src",
 		"plugins": [{ "name": "next" }]
 	},
-	"include": ["src", ".next/types/**/*.ts"],
+	"include": ["src", ".next/types/**/*.ts", "index.d.ts"],
 	"exclude": ["node_modules"]
 }
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		declare module '*.png';
		declare module '*.jpg';