fix(web): miscellaneous improvements (#416)

Co-authored-by: ImgBotApp <ImgBotHelp@gmail.com>

apps/web/next.config.mjs

@@ -10,6 +10,12 @@ const config = {
 	experimental: {
 		reactCompiler: true,
 	},
+	images: {
+		remotePatterns: [
+			{ protocol: "https", hostname: "pbs.twimg.com" },
+			{ protocol: "https", hostname: "abs.twimg.com" },
+		],
+	},
 	async rewrites() {
 		return [
 			{

apps/web/src/app/(home)/_components/icons.tsx

@@ -22,7 +22,7 @@ const PackageIcon = ({ pm, className }: { pm: string; className?: string }) => {
 					<path d="M10.749,10.75H2V2h8.749Z" style={{ fill: "#f9ad00" }} />
 					<path d="M30,20.375H21.251v-8.75H30Z" style={{ fill: "#f9ad00" }} />
 					<path d="M20.374,20.375h-8.75v-8.75h8.75Z" style={{ fill: "#fff" }} />
-					<path d="M20.374, 30h - 8.75V21.25h8.75Z" style={{ fill: "#fff" }} />
+					<path d="M20.374,30h-8.75V21.25h8.75Z" style={{ fill: "#fff" }} />
 					<path d="M30,30H21.251V21.25H30Z" style={{ fill: "#fff" }} />
 					<path d="M10.749,30H2V21.25h8.749Z" style={{ fill: "#fff" }} />
 				</svg>

apps/web/src/app/(home)/_components/npm-package.tsx

@@ -12,11 +12,12 @@ const NpmPackage = () => {
 			setVersionLoading(true);
 			try {
 				const res = await fetch(
-					"https://registry.npmjs.org/create-better-t-stack/latest",
+					"https://api.github.com/repos/AmanVarshney01/create-better-t-stack/releases",
 				);
 				if (!res.ok) throw new Error("Failed to fetch version");
 				const data = await res.json();
-				setVersion(data.version);
+				const latestVersion = data[0].tag_name.split("@")[1];
+				setVersion(latestVersion);
 			} catch (error) {
 				console.error("Error fetching NPM version:", error);
 				setVersion("?.?.?");

apps/web/src/app/(home)/_components/testimonials.tsx

@@ -2,7 +2,9 @@
 
 import { motion } from "framer-motion";
 import { Terminal } from "lucide-react";
-import { Tweet } from "react-tweet";
+import Image from "next/image";
+import { Suspense } from "react";
+import { Tweet, TweetSkeleton, type TwitterComponents } from "react-tweet";
 
 const TWEET_IDS = [
 	"1930194170418999437",
@@ -71,6 +73,11 @@ const TWEET_IDS = [
 	"1906570888897777847",
 ];
 
+export const components: TwitterComponents = {
+	AvatarImg: (props) => <Image {...props} unoptimized />,
+	MediaImg: (props) => <Image {...props} fill unoptimized />,
+};
+
 export default function Testimonials() {
 	const getResponsiveColumns = (numCols: number) => {
 		const columns: string[][] = Array(numCols)
@@ -129,7 +136,9 @@ export default function Testimonials() {
 				</div>
 				<div className="w-full min-w-0 overflow-hidden">
 					<div style={{ width: "100%", minWidth: 0, maxWidth: "100%" }}>
-						<Tweet id={tweetId} />
+						<Suspense fallback={<TweetSkeleton />}>
+							<Tweet id={tweetId} />
+						</Suspense>
 					</div>
 				</div>
 			</div>

bun.lock

@@ -14,7 +14,7 @@
     },
     "apps/cli": {
       "name": "create-better-t-stack",
-      "version": "2.26.3",
+      "version": "2.26.5",
       "bin": {
         "create-better-t-stack": "dist/index.js",
       },