docs: fix/ui_and_hydration (#102)

This commit is contained in:
Kinfe Michael Tariku
2024-10-05 23:07:12 +03:00
committed by GitHub
parent e79cb72b59
commit 7cd1985d0e
5 changed files with 67 additions and 34 deletions

View File

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

View File

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

View File

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

View File

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

View File

@@ -28,22 +28,13 @@ export function ThemeToggle() {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuItem
data-umami-event="theme-toggle-light"
onClick={() => setTheme("light")}
>
<DropdownMenuItem onClick={() => setTheme("light")}>
Light
</DropdownMenuItem>
<DropdownMenuItem
data-umami-event="theme-toggle-dark"
onClick={() => setTheme("dark")}
>
<DropdownMenuItem onClick={() => setTheme("dark")}>
Dark
</DropdownMenuItem>
<DropdownMenuItem
data-umami-event="theme-toggle-system"
onClick={() => setTheme("system")}
>
<DropdownMenuItem 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"
onClick={() => {
setTheme("light");
}}
variant={"ghost"}
variant="ghost"
size="icon"
onClick={() => setTheme(theme === "light" ? "dark" : "light")}
>
<Sun className="w-4 h-4" />
</Button>
<Button
className="hidden dark:visible"
onClick={() => {
setTheme("dark");
}}
variant={"ghost"}
>
<MoonIcon className="w-4 h-4" />
<Sun className="h-4 w-4 dark:hidden" color="#000" />
<Moon className="hidden h-4 w-4 dark:block" />
<span className="sr-only">Toggle theme</span>
</Button>
</div>
);