docs: fix/ui_and_hydration (#102)

docs/app/changelogs/_logs/2024-08-09.tsx

@@ -0,0 +1,51 @@
+import { AnimatePresence } from "@/components/ui/fade-in";
+
+const ChangelogOne = () => {
+	return (
+		<AnimatePresence>
+			<div className="flex flex-col gap-4 items-start justify-center max-w-full md:max-w-2xl">
+				<img
+					src="https://camo.githubusercontent.com/3282afc585d07e52e883ac2345467841e5c9cbe3befdec9dd6f84c603748e0d4/68747470733a2f2f726573656e642e636f6d2f5f6e6578742f696d6167653f75726c3d253246737461746963253246706f737473253246776562686f6f6b732e6a706726773d36343026713d3735"
+					className="w-full h-[400px] rounded-lg"
+				/>
+				<div className="flex flex-col gap-2">
+					<h2 className="text-2xl font-bold tracking-tighter">
+						Commit message suggestions
+					</h2>
+					<hr className="h-px bg-gray-200 w-full" />
+				</div>
+				<p className="text-gray-300 text-[0.855rem]">
+					In the latest release, I've added support for commit message and
+					description suggestions via an integration with OpenAI. Commit looks
+					at all of your changes, and feeds that into the machine with a bit of
+					prompt-tuning to get back a commit message that does a surprisingly
+					good job at describing the intent of your changes. It's also been a
+					pretty helpful way to remind myself what the hell I was working on at
+					the end of the day yesterday when I get back to my computer and
+					realize I didn't commit any of my work.
+				</p>
+				<div className="flex flex-col gap-2">
+					<h4 className="text-xl tracking-tighter"> Improvement</h4>
+					<hr className="h-px bg-gray-200 w-full" />
+				</div>
+
+				<ul className="list-disc ml-10 text-[0.855rem]">
+					<li>
+						Added commit message and description suggestions powered by OpenAI
+					</li>
+					<li>
+						Started commit message and description suggestions powered by OpenAI
+					</li>
+
+					<li>
+						Restored message and description suggestions powered by OpenAI
+					</li>
+					<li>
+						Added commit message and description suggestions powered by OpenAI
+					</li>
+				</ul>
+			</div>
+		</AnimatePresence>
+	);
+};
+export default ChangelogOne;

docs/components/blocks/features.tsx

@@ -11,10 +11,10 @@ export function Features() {
 						className="relative bg-gradient-to-b dark:from-neutral-900 from-neutral-100 dark:to-neutral-950 to-white px-6 py-2 overflow-hidden"
 					>
 						<Grid size={i * 5 + 10} />
-						<p className="text-base font-bold text-neutral-800 dark:text-white relative z-20">
+						<p className="text-base font-bold text-neutral-800 dark:text-white relative z-0">
 							{feature.title}
 						</p>
-						<p className="text-neutral-600 dark:text-neutral-400 text-base font-normal relative z-20">
+						<p className="text-neutral-600 dark:text-neutral-400 text-base font-normal relative z-0">
 							{feature.description}
 						</p>
 					</div>

docs/components/landing/hero.tsx

@@ -113,7 +113,7 @@ export default function Hero() {
 							</p>
 							{
 								<>
-									<div className="mt-8 flex gap-4 font-sans md:justify-center lg:justify-start flex-col md:flex-row">
+									<div className="mt-8 flex w-fit gap-4 font-sans md:justify-center lg:justify-start flex-col md:flex-row">
 										<Link
 											href="/docs"
 											className="px-4 md:px-8 py-1.5  border-2 border-black dark:border-stone-100 uppercase bg-white text-black transition duration-200 text-sm shadow-[1px_1px_rgba(0,0,0),2px_2px_rgba(0,0,0),3px_3px_rgba(0,0,0),4px_4px_rgba(0,0,0),5px_5px_0px_0px_rgba(0,0,0)] dark:shadow-[1px_1px_rgba(255,255,255),2px_2px_rgba(255,255,255),3px_3px_rgba(255,255,255),4px_4px_rgba(255,255,255),5px_5px_0px_0px_rgba(255,255,255)] dark:hover:shadow-sm hover:shadow-sm"

docs/components/nav-mobile.tsx

@@ -57,7 +57,7 @@ export const NavbarMobileBtn: React.FC = () => {
 	const { toggleNavbar } = useNavbarMobile();
 
 	return (
-		<div className="flex pt-2 items-center ">
+		<div className="flex items-center ">
 			<MobileThemeToggle />
 			<button
 				className="text-muted-foreground overflow-hidden px-2.5 block md:hidden"
@@ -75,7 +75,7 @@ export const NavbarMobile = () => {
 	const { isOpen, toggleNavbar } = useNavbarMobile();
 
 	return (
-		<div className="fixed top-[50px]  left-0 z-30 px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-black md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
+		<div className="fixed top-[50px] z-40 left-0  px-4 mx-auto w-full h-auto backdrop-blur-lg dark:bg-transparent md:hidden transform-gpu [border:1px_solid_rgba(255,255,255,.1)] [box-shadow:0_-40px_80px_-20px_#8686f01f_inset]">
 			<AnimatePresence>
 				{isOpen && (
 					<FadeIn

docs/components/theme-toggler.tsx

@@ -20,7 +20,7 @@ export function ThemeToggle() {
 				<Button
 					variant="ghost"
 					size="icon"
-					className="border-l  ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
+					className="border-l ring-0 rounded-none h-14 w-14 hidden md:flex shrink-0"
 				>
 					<Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
 					<Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
@@ -28,22 +28,13 @@ export function ThemeToggle() {
 				</Button>
 			</DropdownMenuTrigger>
 			<DropdownMenuContent align="end">
-				<DropdownMenuItem
+				<DropdownMenuItem onClick={() => setTheme("light")}>
-					data-umami-event="theme-toggle-light"
-					onClick={() => setTheme("light")}
-				>
 					Light
 				</DropdownMenuItem>
-				<DropdownMenuItem
+				<DropdownMenuItem onClick={() => setTheme("dark")}>
-					data-umami-event="theme-toggle-dark"
-					onClick={() => setTheme("dark")}
-				>
 					Dark
 				</DropdownMenuItem>
-				<DropdownMenuItem
+				<DropdownMenuItem onClick={() => setTheme("system")}>
-					data-umami-event="theme-toggle-system"
-					onClick={() => setTheme("system")}
-				>
 					System
 				</DropdownMenuItem>
 			</DropdownMenuContent>
@@ -53,24 +44,15 @@ export function ThemeToggle() {
 export function MobileThemeToggle() {
 	const { theme, setTheme } = useTheme();
 	return (
-		<div className="md:hidden">
+		<div className="block md:hidden">
 			<Button
-				className="dark:hidden"
+				variant="ghost"
-				onClick={() => {
+				size="icon"
-					setTheme("light");
+				onClick={() => setTheme(theme === "light" ? "dark" : "light")}
-				}}
-				variant={"ghost"}
 			>
-				<Sun className="w-4 h-4" />
+				<Sun className="h-4 w-4 dark:hidden" color="#000" />
-			</Button>
+				<Moon className="hidden h-4 w-4 dark:block" />
-			<Button
+				<span className="sr-only">Toggle theme</span>
-				className="hidden dark:visible"
-				onClick={() => {
-					setTheme("dark");
-				}}
-				variant={"ghost"}
-			>
-				<MoonIcon className="w-4 h-4" />
 			</Button>
 		</div>
 	);