style fixes and improvements

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: {},
+	},
 })

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",

packages/website/src/components/app-footer.astro

@@ -1,9 +1,14 @@
 ---
 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">
+<footer class={twMerge("text-xs opacity-75", Astro.props.class)}>
 	<address class="not-italic">
 		&copy; {new Date().getFullYear()} itsMapleLeaf
 	</address>

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

packages/website/src/components/layout.astro

@@ -4,7 +4,6 @@ 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"
 ---
 

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" />

packages/website/src/pages/guides/[slug].astro

@@ -25,16 +25,18 @@ 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"
+			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="w-48 sticky top-24 hidden md:block">
+			<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="mt-3 flex flex-col gap-2 items-start">
+				<ul class="flex flex-col items-start gap-2">
 					{
 						guides.map((guide) => (
 							<li>
@@ -49,15 +51,45 @@ const { Content } = await Astro.props.guide.render()
 						))
 					}
 				</ul>
+				<AppFooter class="mt-auto" />
 			</nav>
-      <section
+			<article class="-mt-8 min-w-0 max-w-none flex-1 pb-8">
-        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>
+			</article>
 		</main>
-    <div class="py-2">
+		<AppFooter class="mx-auto mb-4 text-center md:hidden" />
-      <AppFooter />
-    </div>
 	</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>

packages/website/src/pages/index.astro

@@ -13,18 +13,18 @@ import MainNavigation from "~/components/main-navigation.astro"
 		style={{ backgroundImage: `url(${dotsBackgroundUrl})` }}
 	>
 	</div>
-  <div class="flex flex-col relative min-w-0 min-h-screen pb-4 gap-4">
+	<div class="relative flex min-h-screen min-w-0 flex-col gap-4 pb-4">
 		<header class="container">
 			<MainNavigation />
 		</header>
-    <div class="flex flex-col gap-4 my-auto px-4">
+		<div class="my-auto flex flex-col gap-4 px-4">
-      <AppLogo class="w-full max-w-lg mx-auto" />
+			<AppLogo class="mx-auto w-full max-w-lg" />
 
-      <div class="max-w-md w-full mx-auto isolate">
+			<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">
+			<p class="-mb-1 text-center text-lg font-light">
 				Create interactive Discord messages with React.
 			</p>
 
@@ -47,7 +47,7 @@ import MainNavigation from "~/components/main-navigation.astro"
 			</div>
 		</div>
 
-    <div class="text-center">
+		<div class="container text-center">
 			<AppFooter />
 		</div>
 	</div>

packages/website/src/styles/prism-theme.css

@@ -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;
-}

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;
+	}
+}

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

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'}

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],
+	plugins: [],
-} satisfies Config
+}