From 0dad3c9ecd4740428cc2646627d5246d5f017cc6 Mon Sep 17 00:00:00 2001
From: itsMapleLeaf <19603573+itsMapleLeaf@users.noreply.github.com>
Date: Wed, 16 Aug 2023 20:33:53 -0500
Subject: [PATCH] style fixes and improvements

---
 packages/website/astro.config.mjs             |   5 +
 packages/website/package.json                 |   3 +-
 .../website/src/components/app-footer.astro   |  21 +--
 .../src/components/landing-animation.tsx      |   2 +-
 packages/website/src/components/layout.astro  |  57 ++++----
 packages/website/src/env.d.ts                 |   2 +-
 .../website/src/pages/guides/[slug].astro     | 118 ++++++++++------
 packages/website/src/pages/index.astro        |  56 ++++----
 packages/website/src/styles/prism-theme.css   | 133 ------------------
 packages/website/src/styles/tailwind.css      |  12 ++
 packages/website/tailwind.config.ts           |   7 +
 pnpm-lock.yaml                                |   7 +
 tailwind.config.ts                            |   6 +-
 13 files changed, 181 insertions(+), 248 deletions(-)
 delete mode 100644 packages/website/src/styles/prism-theme.css
 create mode 100644 packages/website/tailwind.config.ts

diff --git a/packages/website/astro.config.mjs b/packages/website/astro.config.mjs
index 42267c2..0e0e154 100644
--- a/packages/website/astro.config.mjs
+++ b/packages/website/astro.config.mjs
@@ -1,3 +1,5 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
 import prefetch from "@astrojs/prefetch"
 import react from "@astrojs/react"
 import tailwind from "@astrojs/tailwind"
@@ -12,4 +14,7 @@ export default defineConfig({
 		react(),
 		prefetch(),
 	],
+	markdown: {
+		shikiConfig: {},
+	},
 })
diff --git a/packages/website/package.json b/packages/website/package.json
index 7c59d2a..0f4efe5 100644
--- a/packages/website/package.json
+++ b/packages/website/package.json
@@ -22,7 +22,8 @@
 		"clsx": "^2.0.0",
 		"reacord": "workspace:*",
 		"react": "^18.2.0",
-		"react-dom": "^18.2.0"
+		"react-dom": "^18.2.0",
+		"tailwind-merge": "^1.14.0"
 	},
 	"devDependencies": {
 		"@astrojs/tailwind": "^4.0.0",
diff --git a/packages/website/src/components/app-footer.astro b/packages/website/src/components/app-footer.astro
index a2cf37a..eb665ef 100644
--- a/packages/website/src/components/app-footer.astro
+++ b/packages/website/src/components/app-footer.astro
@@ -1,14 +1,19 @@
 ---
 import { HeartIcon } from "@heroicons/react/20/solid"
+import { twMerge } from "tailwind-merge"
 import ExternalLink from "./external-link.astro"
+
+export interface Props {
+	class?: string
+}
 ---
 
-<footer class="container text-xs opacity-75">
-  <address class="not-italic">
-    &copy; {new Date().getFullYear()} itsMapleLeaf
-  </address>
-  <p>
-    Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
-    <ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
-  </p>
+<footer class={twMerge("text-xs opacity-75", Astro.props.class)}>
+	<address class="not-italic">
+		&copy; {new Date().getFullYear()} itsMapleLeaf
+	</address>
+	<p>
+		Coded with <HeartIcon className="inline w-4 align-sub" /> using{" "}
+		<ExternalLink class="link" href="https://astro.build">Astro</ExternalLink>
+	</p>
 </footer>
diff --git a/packages/website/src/components/landing-animation.tsx b/packages/website/src/components/landing-animation.tsx
index ceb3e66..a8caad2 100644
--- a/packages/website/src/components/landing-animation.tsx
+++ b/packages/website/src/components/landing-animation.tsx
@@ -125,7 +125,7 @@ export function LandingAnimation() {
 
 	return (
 		<div
-			className="pointer-events-none relative grid select-none gap-2"
+			className="animate-fade-in pointer-events-none relative grid select-none gap-2"
 			role="presentation"
 		>
 			<div
diff --git a/packages/website/src/components/layout.astro b/packages/website/src/components/layout.astro
index cece92a..7ccc140 100644
--- a/packages/website/src/components/layout.astro
+++ b/packages/website/src/components/layout.astro
@@ -4,41 +4,40 @@ import "@fontsource/rubik/variable.css"
 import packageJson from "reacord/package.json"
 import bannerUrl from "~/assets/banner.png"
 import faviconUrl from "~/assets/favicon.png"
-import "~/styles/prism-theme.css"
 import "~/styles/tailwind.css"
 ---
 
 <!DOCTYPE html>
 <html lang="en" class="bg-slate-900 text-slate-100">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+	<head>
+		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
 
-    <meta name="description" content={packageJson.description} />
-    <meta name="theme-color" content="#21754b" />
-    <meta property="og:url" content="https://reacord.mapleleaf.dev/" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="Reacord" />
-    <meta
-      property="og:description"
-      content="Create interactive Discord messages using React"
-    />
-    <meta property="og:image" content={bannerUrl} />
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta name="twitter:domain" content="reacord.mapleleaf.dev" />
-    <meta name="twitter:url" content="https://reacord.mapleleaf.dev/" />
-    <meta name="twitter:title" content="Reacord" />
-    <meta
-      name="twitter:description"
-      content="Create interactive Discord messages using React"
-    />
-    <meta name="twitter:image" content={bannerUrl} />
+		<meta name="description" content={packageJson.description} />
+		<meta name="theme-color" content="#21754b" />
+		<meta property="og:url" content="https://reacord.mapleleaf.dev/" />
+		<meta property="og:type" content="website" />
+		<meta property="og:title" content="Reacord" />
+		<meta
+			property="og:description"
+			content="Create interactive Discord messages using React"
+		/>
+		<meta property="og:image" content={bannerUrl} />
+		<meta name="twitter:card" content="summary_large_image" />
+		<meta name="twitter:domain" content="reacord.mapleleaf.dev" />
+		<meta name="twitter:url" content="https://reacord.mapleleaf.dev/" />
+		<meta name="twitter:title" content="Reacord" />
+		<meta
+			name="twitter:description"
+			content="Create interactive Discord messages using React"
+		/>
+		<meta name="twitter:image" content={bannerUrl} />
 
-    <title>Reacord</title>
+		<title>Reacord</title>
 
-    <link rel="icon" href={faviconUrl} />
-  </head>
-  <body>
-    <slot />
-  </body>
+		<link rel="icon" href={faviconUrl} />
+	</head>
+	<body>
+		<slot />
+	</body>
 </html>
diff --git a/packages/website/src/env.d.ts b/packages/website/src/env.d.ts
index 6811d7c..50cec09 100644
--- a/packages/website/src/env.d.ts
+++ b/packages/website/src/env.d.ts
@@ -1,3 +1,3 @@
+/// <reference types="astro/client" />
 // eslint-disable-next-line @typescript-eslint/triple-slash-reference
 /// <reference path="../.astro/types.d.ts" />
-/// <reference types="astro/client" />
diff --git a/packages/website/src/pages/guides/[slug].astro b/packages/website/src/pages/guides/[slug].astro
index b6752a1..ae0e639 100644
--- a/packages/website/src/pages/guides/[slug].astro
+++ b/packages/website/src/pages/guides/[slug].astro
@@ -7,15 +7,15 @@ import MainNavigation from "~/components/main-navigation.astro"
 import NavLink from "~/components/nav-link.astro"
 
 export interface Props {
-  guide: CollectionEntry<"guides">
+	guide: CollectionEntry<"guides">
 }
 
 export const getStaticPaths: GetStaticPaths = async () => {
-  const guides = await getCollection("guides")
-  return guides.map((guide) => ({
-    params: { slug: guide.slug },
-    props: { guide },
-  }))
+	const guides = await getCollection("guides")
+	return guides.map((guide) => ({
+		params: { slug: guide.slug },
+		props: { guide },
+	}))
 }
 
 const guides = await getCollection("guides")
@@ -23,41 +23,73 @@ const { Content } = await Astro.props.guide.render()
 ---
 
 <Layout>
-  <div class="isolate">
-    <header
-      class="bg-slate-700/30 shadow sticky top-0 backdrop-blur-sm transition z-10 flex"
-    >
-      <div class="container">
-        <MainNavigation />
-      </div>
-    </header>
-    <main class="container mt-8 flex items-start gap-4">
-      <nav class="w-48 sticky top-24 hidden md:block">
-        <h2 class="text-2xl">Guides</h2>
-        <ul class="mt-3 flex flex-col gap-2 items-start">
-          {
-            guides.map((guide) => (
-              <li>
-                <NavLink
-                  class="link data-[active]:link-active"
-                  href={`/guides/${guide.slug}`}
-                  rel="prefetch"
-                >
-                  {guide.data.title}
-                </NavLink>
-              </li>
-            ))
-          }
-        </ul>
-      </nav>
-      <section
-        class="prose prose-invert prose prose-invert prose-h1:font-light prose-h1:mb-4 prose-h1:text-3xl lg:prose-h1:text-4xl prose-h2:font-light prose-h3:font-light prose-p:my-3 prose-a:font-medium prose-a:text-emerald-400 hover:prose-a:no-underline prose-strong:font-medium prose-strong:text-emerald-400 prose-pre:font-monospace prose-pre:overflow-x-auto prose-code:before:hidden prose-code:after:hidden prose-code:text-slate-400 prose-li:mb-5 max-w-none pb-8 flex-1 min-w-0"
-      >
-        <Content />
-      </section>
-    </main>
-    <div class="py-2">
-      <AppFooter />
-    </div>
-  </div>
+	<div class="isolate">
+		<header
+			class="sticky top-0 z-10 flex bg-slate-700/30 shadow backdrop-blur-sm transition"
+		>
+			<div class="container">
+				<MainNavigation />
+			</div>
+		</header>
+		<main class="container mt-8 flex items-start gap-4">
+			<nav
+				class="sticky top-24 hidden h-[calc(100vh-theme(spacing.28))] w-48 flex-col gap-3 md:flex"
+			>
+				<h2 class="text-2xl">Guides</h2>
+				<ul class="flex flex-col items-start gap-2">
+					{
+						guides.map((guide) => (
+							<li>
+								<NavLink
+									class="link data-[active]:link-active"
+									href={`/guides/${guide.slug}`}
+									rel="prefetch"
+								>
+									{guide.data.title}
+								</NavLink>
+							</li>
+						))
+					}
+				</ul>
+				<AppFooter class="mt-auto" />
+			</nav>
+			<article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
+				<Content />
+			</article>
+		</main>
+		<AppFooter class="mx-auto mb-4 text-center md:hidden" />
+	</div>
 </Layout>
+
+<style>
+	article :global(:where(h1, h2, h3, h4, h5, h6)) {
+		@apply mb-3 mt-8 font-light;
+	}
+	article :global(h1) {
+		@apply text-3xl lg:text-4xl;
+	}
+	article :global(h2) {
+		@apply text-2xl;
+	}
+	article :global(h3) {
+		@apply text-xl;
+	}
+	article :global(p) {
+		@apply my-3;
+	}
+	article :global(a) {
+		@apply font-medium text-emerald-400 hover:no-underline;
+	}
+	article :global(strong) {
+		@apply font-medium text-emerald-400;
+	}
+	article :global(code) {
+		@apply rounded border border-slate-800 bg-slate-950 px-1 py-0.5 leading-none text-slate-300;
+	}
+	article :global(pre) {
+		@apply my-4 overflow-x-auto rounded-md border border-slate-800 !bg-slate-950 px-4 py-3 font-monospace;
+	}
+	article :global(pre code) {
+		@apply border-none bg-transparent p-0;
+	}
+</style>
diff --git a/packages/website/src/pages/index.astro b/packages/website/src/pages/index.astro
index 48ce1d9..47afa4a 100644
--- a/packages/website/src/pages/index.astro
+++ b/packages/website/src/pages/index.astro
@@ -8,32 +8,32 @@ import MainNavigation from "~/components/main-navigation.astro"
 ---
 
 <Layout>
-  <div
-    class="fixed inset-0 rotate-6 scale-125 opacity-20"
-    style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
-  >
-  </div>
-  <div class="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
-    <header class="container">
-      <MainNavigation />
-    </header>
-    <div class="flex flex-col gap-4 my-auto px-4">
-      <AppLogo class="w-full max-w-lg mx-auto" />
+	<div
+		class="fixed inset-0 rotate-6 scale-125 opacity-20"
+		style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
+	>
+	</div>
+	<div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
+		<header class="container">
+			<MainNavigation />
+		</header>
+		<div class="my-auto flex flex-col gap-4 px-4">
+			<AppLogo class="mx-auto w-full max-w-lg" />
 
-      <div class="max-w-md w-full mx-auto isolate">
-        <LandingAnimation client:only />
-      </div>
+			<div class="isolate mx-auto h-44 w-full max-w-md">
+				<LandingAnimation client:only />
+			</div>
 
-      <p class="text-center text-lg font-light -mb-1">
-        Create interactive Discord messages with React.
-      </p>
+			<p class="-mb-1 text-center text-lg font-light">
+				Create interactive Discord messages with React.
+			</p>
 
-      <div class="flex gap-4 self-center">
-        <a href="/guides/getting-started" class="button button-solid">
-          Get Started
-        </a>
+			<div class="flex gap-4 self-center">
+				<a href="/guides/getting-started" class="button button-solid">
+					Get Started
+				</a>
 
-        <!-- <UncontrolledModal
+				<!-- <UncontrolledModal
           button={(button) => (
             <button {...button} class={buttonClass({ variant: "semiblack" })}>
               Show Code
@@ -44,11 +44,11 @@ import MainNavigation from "~/components/main-navigation.astro"
             <LandingCode />
           </div>
         </UncontrolledModal> -->
-      </div>
-    </div>
+			</div>
+		</div>
 
-    <div class="text-center">
-      <AppFooter />
-    </div>
-  </div>
+		<div class="container text-center">
+			<AppFooter />
+		</div>
+	</div>
 </Layout>
diff --git a/packages/website/src/styles/prism-theme.css b/packages/website/src/styles/prism-theme.css
deleted file mode 100644
index 5d8461b..0000000
--- a/packages/website/src/styles/prism-theme.css
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Nord Theme Originally by Arctic Ice Studio
- * https://nordtheme.com
- *
- * Ported for PrismJS by Zane Hitchcoxc (@zwhitchcox) and Gabriel Ramos (@gabrieluizramos)
- */
-
-code[class*="language-"],
-pre[class*="language-"] {
-	color: #f8f8f2;
-	background: none;
-	/* font-family: "Fira Code", Consolas, Monaco, "Andale Mono", "Ubuntu Mono",
-    monospace; */
-	text-align: left;
-	white-space: pre;
-	word-spacing: normal;
-	word-break: normal;
-	word-wrap: normal;
-	line-height: 1.7;
-	-moz-tab-size: 4;
-	-o-tab-size: 4;
-	tab-size: 4;
-	-webkit-hyphens: none;
-	-moz-hyphens: none;
-	-ms-hyphens: none;
-	hyphens: none;
-}
-
-/* Code blocks */
-pre[class*="language-"] {
-	padding: 1em;
-	margin: 0.5em 0;
-	overflow: auto;
-	border-radius: 0.3em;
-}
-
-:not(pre) > code[class*="language-"],
-pre[class*="language-"] {
-	/* background: #2e3440; */
-	background: rgba(0, 0, 0, 0.3);
-}
-
-/* Inline code */
-:not(pre) > code[class*="language-"] {
-	padding: 0.1em;
-	border-radius: 0.3em;
-	white-space: normal;
-}
-
-.token.comment,
-.token.prolog,
-.token.doctype,
-.token.cdata {
-	color: #636f88;
-}
-
-.token.punctuation {
-	color: #81a1c1;
-}
-
-.namespace {
-	opacity: 0.7;
-}
-
-.token.property,
-.token.tag,
-.token.constant,
-.token.symbol,
-.token.deleted {
-	color: #81a1c1;
-}
-
-.token.number {
-	color: #b48ead;
-}
-
-.token.boolean {
-	color: #81a1c1;
-}
-
-.token.selector,
-.token.attr-name,
-.token.string,
-.token.char,
-.token.builtin,
-.token.inserted {
-	color: #a3be8c;
-}
-
-.token.operator,
-.token.entity,
-.token.url,
-.language-css .token.string,
-.style .token.string,
-.token.variable {
-	color: #81a1c1;
-}
-
-.token.atrule,
-.token.attr-value,
-.token.function,
-.token.class-name {
-	color: #88c0d0;
-}
-
-.token.keyword {
-	color: #81a1c1;
-}
-
-.token.regex,
-.token.important {
-	color: #ebcb8b;
-}
-
-.token.important,
-.token.bold {
-	font-weight: bold;
-}
-
-.token.italic {
-	font-style: italic;
-}
-
-.token.entity {
-	cursor: help;
-}
-
-.code-line.highlight-line {
-	background-color: rgba(255, 255, 255, 0.08);
-	padding: 0 1rem;
-	margin: 0 -1rem;
-	display: block;
-}
diff --git a/packages/website/src/styles/tailwind.css b/packages/website/src/styles/tailwind.css
index 360bc8f..62b1973 100644
--- a/packages/website/src/styles/tailwind.css
+++ b/packages/website/src/styles/tailwind.css
@@ -45,3 +45,15 @@
 		@apply bg-emerald-700 hover:bg-emerald-800;
 	}
 }
+
+@layer utilities {
+	@keyframes fade-in {
+		from {
+			opacity: 0;
+		}
+	}
+
+	.animate-fade-in {
+		animation: fade-in 0.5s;
+	}
+}
diff --git a/packages/website/tailwind.config.ts b/packages/website/tailwind.config.ts
new file mode 100644
index 0000000..4edaec4
--- /dev/null
+++ b/packages/website/tailwind.config.ts
@@ -0,0 +1,7 @@
+import { Config } from "tailwindcss"
+import config from "../../tailwind.config.ts"
+
+export default {
+	...config,
+	content: ["./src/**/*.{ts,tsx,md,astro}"],
+} satisfies Config
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bad6169..241edfe 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -180,6 +180,9 @@ importers:
       react-dom:
         specifier: ^18.2.0
         version: 18.2.0(react@18.2.0)
+      tailwind-merge:
+        specifier: ^1.14.0
+        version: 1.14.0
     devDependencies:
       '@astrojs/tailwind':
         specifier: ^4.0.0
@@ -6554,6 +6557,10 @@ packages:
       '@pkgr/utils': 2.4.2
       tslib: 2.6.1
 
+  /tailwind-merge@1.14.0:
+    resolution: {integrity: sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ==}
+    dev: false
+
   /tailwindcss@3.3.3:
     resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==}
     engines: {node: '>=14.0.0'}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 1c29e39..8478254 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,8 +1,6 @@
 import typography from "@tailwindcss/typography"
-import { type Config } from "tailwindcss"
 
 export default {
-	content: ["./packages/*/src/**/*.{ts,tsx,md,astro}"],
 	theme: {
 		fontFamily: {
 			sans: ["RubikVariable", "sans-serif"],
@@ -16,5 +14,5 @@ export default {
 	corePlugins: {
 		container: false,
 	},
-	plugins: [typography],
-} satisfies Config
+	plugins: [],
+}