TheWrightServer/ProxmoxVE
1
0
Fork 1
mirror of https://github.com/community-scripts/ProxmoxVE.git synced 2025-03-07 01:19:06 +00:00
Code Activity

Refactor various components and configuration for mobile responsiveness. ()

Browse Source
This commit is contained in:
Bram Suurd 2025-01-22 20:36:51 +01:00 committed by GitHub
parent 3b14ea76ad
commit 2ba35bbee5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 191 additions and 196 deletions
frontend/src
app
page.tsx
components
Footer.tsxNavbar.tsx
config
siteConfig.tsx

207
frontend/src/app/page.tsx

@ -34,113 +34,104 @@ export default function Page() {
}, [theme]); }, [theme]);
return ( return (
<div className="w-full mt-16"> <div className="w-full mt-16">
<Particles <Particles
className="absolute inset-0 -z-40" className="absolute inset-0 -z-40"
quantity={100} quantity={100}
ease={80} ease={80}
color={color} color={color}
refresh refresh
/> />
<div className="container mx-auto"> <div className="container mx-auto">
<div className="flex h-[80vh] flex-col items-center justify-center gap-4 py-20 lg:py-40"> <div className="flex h-[80vh] flex-col items-center justify-center gap-4 py-20 lg:py-40">
<Dialog> <Dialog>
<DialogTrigger> <DialogTrigger>
<div> <div>
<AnimatedGradientText> <AnimatedGradientText>
<div <div
className={cn( className={cn(
`absolute inset-0 block size-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`, `absolute inset-0 block size-full animate-gradient bg-gradient-to-r from-[#ffaa40]/50 via-[#9c40ff]/50 to-[#ffaa40]/50 bg-[length:var(--bg-size)_100%] [border-radius:inherit] [mask:linear-gradient(#fff_0_0)_content-box,linear-gradient(#fff_0_0)]`,
`p-px ![mask-composite:subtract]`, `p-px ![mask-composite:subtract]`,
)} )}
/> />
❤️ <Separator className="mx-2 h-4" orientation="vertical" /> ❤️ <Separator className="mx-2 h-4" orientation="vertical" />
<span <span
className={cn( className={cn(
`animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`, `animate-gradient bg-gradient-to-r from-[#ffaa40] via-[#9c40ff] to-[#ffaa40] bg-[length:var(--bg-size)_100%] bg-clip-text text-transparent`,
`inline`, `inline`,
)} )}
> >
Scripts by Tteck Scripts by tteck
</span> </span>
</AnimatedGradientText> </AnimatedGradientText>
</div> </div>
</DialogTrigger> </DialogTrigger>
<DialogContent> <DialogContent>
<DialogHeader> <DialogHeader>
<DialogTitle>Thank You!</DialogTitle> <DialogTitle>Thank You!</DialogTitle>
<DialogDescription> <DialogDescription>
A big thank you to Tteck and the many contributors who have A big thank you to tteck and the many contributors who have
made this project possible. Your hard work is truly made this project possible. Your hard work is truly
appreciated by the entire Proxmox community! appreciated by the entire Proxmox community!
</DialogDescription> </DialogDescription>
</DialogHeader> </DialogHeader>
<CardFooter className="flex flex-col gap-2"> <CardFooter className="flex flex-col gap-2">
<Button className="w-full" variant="outline" asChild> <Button className="w-full" variant="outline" asChild>
<a <a
href="https://github.com/tteck" href="https://github.com/tteck"
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center justify-center" className="flex items-center justify-center"
> >
<FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub <FaGithub className="mr-2 h-4 w-4" /> Tteck&apos;s GitHub
</a> </a>
</Button> </Button>
<Button className="w-full" asChild> <Button className="w-full" asChild>
<a <a
href={`https://github.com/community-scripts/${basePath}`} href={`https://github.com/community-scripts/${basePath}`}
target="_blank" target="_blank"
rel="noopener noreferrer" rel="noopener noreferrer"
className="flex items-center justify-center" className="flex items-center justify-center"
> >
<ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper <ExternalLink className="mr-2 h-4 w-4" /> Proxmox Helper
Scripts Scripts
</a> </a>
</Button> </Button>
</CardFooter> </CardFooter>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
<div className="flex flex-col gap-4"> <div className="flex flex-col gap-4">
<h1 className="max-w-2xl text-center text-5xl font-semibold tracking-tighter md:text-7xl"> <h1 className="max-w-2xl text-center text-3xl font-semibold tracking-tighter md:text-7xl">
Make managing your Homelab a breeze Make managing your Homelab a breeze
</h1> </h1>
<p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:text-xl"> <div className="max-w-2xl gap-2 flex flex-col text-center sm:text-lg text-sm leading-relaxed tracking-tight text-muted-foreground md:text-xl">
We are a community-driven initiative that simplifies the setup of <p>
Proxmox Virtual Environment (VE). We are a community-driven initiative that simplifies the setup
<br /> of Proxmox Virtual Environment (VE).
<br /> </p>
Originally created by{" "} <p>
<a href="https://github.com/tteck" target="_blank"> With 200+ scripts to help you manage your{" "}
tteck <b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
</a> user or a newcomer, we&#39;ve got you covered.
, these scripts automate and streamline </p>
<br /> </div>
the process of creating and configuring Linux containers (LXC) and </div>
virtual machines (VMs) on Proxmox VE. <div className="flex flex-row gap-3">
<br /> <Link href="/scripts">
<br /> <Button
With 200+ scripts to help you manage your{" "} size="lg"
<b>Proxmox VE environment</b>.<br /> variant="expandIcon"
Whether you&#39;re a seasoned user or a newcomer, we&#39;ve got Icon={CustomArrowRightIcon}
you covered. iconPlacement="right"
</p> className="hover:"
</div> >
<div className="flex flex-row gap-3"> View Scripts
<Link href="/scripts"> </Button>
<Button </Link>
size="lg" </div>
variant="expandIcon" </div>
Icon={CustomArrowRightIcon} </div>
iconPlacement="right" </div>
className="hover:" );
>
View Scripts
</Button>
</Link>
</div>
</div>
</div>
</div>
);
} }

2
frontend/src/components/Footer.tsx

@ -5,7 +5,7 @@ export default function Footer() {
return ( return (
<div className="supports-backdrop-blur:bg-background/90 mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg"> <div className="supports-backdrop-blur:bg-background/90 mt-auto flex border-t border-border bg-background/40 py-6 backdrop-blur-lg">
<div className="flex w-full justify-between"> <div className="flex w-full justify-between">
<div className="mx-6 w-full max-w-7xl text-sm text-muted-foreground"> <div className="mx-6 w-full max-w-7xl text-xs sm:text-sm text-muted-foreground">
Website built by the community. The source code is avaliable on{" "} Website built by the community. The source code is avaliable on{" "}
<Link <Link
href={`https://github.com/community-scripts/${basePath}`} href={`https://github.com/community-scripts/${basePath}`}

110
frontend/src/components/Navbar.tsx

@ -9,12 +9,7 @@ import { navbarLinks } from "@/config/siteConfig";
import CommandMenu from "./CommandMenu"; import CommandMenu from "./CommandMenu";
import StarOnGithubButton from "./ui/star-on-github-button"; import StarOnGithubButton from "./ui/star-on-github-button";
import { ThemeToggle } from "./ui/theme-toggle"; import { ThemeToggle } from "./ui/theme-toggle";
import { import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
export const dynamic = "force-dynamic"; export const dynamic = "force-dynamic";
@ -33,56 +28,59 @@ function Navbar() {
}; };
}, []); }, []);
return ( return (
<> <>
<div <div
className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${ className={`fixed left-0 top-0 z-50 flex w-screen justify-center px-4 xl:px-0 ${
isScrolled ? "glass border-b bg-background/50" : "" isScrolled ? "glass border-b bg-background/50" : ""
}`} }`}
> >
<div className="flex h-20 w-full max-w-7xl flex-row-reverse items-center justify-between sm:flex-row"> <div className="flex h-20 w-full max-w-7xl items-center justify-between sm:flex-row">
<Link <Link
href={"/"} href={"/"}
className="flex cursor-pointer flex-row-reverse items-center gap-2 font-semibold sm:flex-row" className="flex cursor-pointer w-full justify-center sm:justify-start flex-row-reverse items-center gap-2 font-semibold sm:flex-row"
> >
<Image <Image
height={18} height={18}
unoptimized unoptimized
width={18} width={18}
alt="logo" alt="logo"
src="logo.png" src="/ProxmoxVE/logo.png"
/> className=""
<span className="hidden lg:block">Proxmox VE Helper-Scripts</span> />
</Link> <span className="hidden md:block">Proxmox VE Helper-Scripts</span>
<div className="flex gap-2"> </Link>
<CommandMenu /> <div className="flex gap-2">
<StarOnGithubButton /> <CommandMenu />
{navbarLinks.map(({ href, event, icon, text }) => ( <StarOnGithubButton />
<TooltipProvider key={event}> {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
<Tooltip delayDuration={100}> <TooltipProvider key={event}>
<TooltipTrigger> <Tooltip delayDuration={100}>
<Button variant="ghost" size={"icon"} asChild> <TooltipTrigger
<Link className={mobileHidden ? "hidden lg:block" : ""}
target="_blank" >
href={href} <Button variant="ghost" size={"icon"} asChild>
data-umami-event={event} <Link
> target="_blank"
{icon} href={href}
<span className="sr-only">{text}</span> data-umami-event={event}
</Link> >
</Button> {icon}
</TooltipTrigger> <span className="sr-only">{text}</span>
<TooltipContent side="bottom" className="text-xs"> </Link>
{text} </Button>
</TooltipContent> </TooltipTrigger>
</Tooltip> <TooltipContent side="bottom" className="text-xs">
</TooltipProvider> {text}
))} </TooltipContent>
<ThemeToggle /> </Tooltip>
</div> </TooltipProvider>
</div> ))}
</div> <ThemeToggle />
</> </div>
); </div>
</div>
</>
);
} }
export default Navbar; export default Navbar;

68
frontend/src/config/siteConfig.tsx

@ -1,45 +1,51 @@
import { OperatingSystem } from "@/lib/types"; import { OperatingSystem } from "@/lib/types";
import { MessagesSquare, Scroll } from "lucide-react"; import { MessagesSquare, Scroll } from "lucide-react";
import { FaDiscord, FaGithub } from "react-icons/fa";
import React from "react"; import React from "react";
import { FaDiscord, FaGithub } from "react-icons/fa";
export const basePath = process.env.BASE_PATH; export const basePath = process.env.BASE_PATH;
const isMobile = typeof window !== "undefined" && window.innerWidth < 640; const isMobile = typeof window !== "undefined" && window.innerWidth < 640;
export const navbarLinks = [ export const navbarLinks = [
{ {
href: `https://github.com/community-scripts/${basePath}`, href: `https://github.com/community-scripts/${basePath}`,
event: "Github", event: "Github",
icon: <FaGithub className="h-4 w-4" />, icon: <FaGithub className="h-4 w-4" />,
text: "Github", text: "Github",
}, },
{ {
href: `https://discord.gg/2wvnMDgdnU`, href: `https://discord.gg/2wvnMDgdnU`,
event: "Discord", event: "Discord",
icon: <FaDiscord className="h-4 w-4" />, icon: <FaDiscord className="h-4 w-4" />,
text: "Discord", text: "Discord",
}, },
{ {
href: `https://github.com/community-scripts/${basePath}/blob/main/CHANGELOG.md`, href: `https://github.com/community-scripts/${basePath}/blob/main/CHANGELOG.md`,
event: "Change Log", event: "Change Log",
icon: <Scroll className="h-4 w-4" />, icon: <Scroll className="h-4 w-4" />,
text: "Change Log", text: "Change Log",
}, mobileHidden: true,
!isMobile },
? { {
href: `https://github.com/community-scripts/${basePath}/discussions`, href: `https://github.com/community-scripts/${basePath}/discussions`,
event: "Discussions", event: "Discussions",
icon: <MessagesSquare className="h-4 w-4" />, icon: <MessagesSquare className="h-4 w-4" />,
text: "Discussions", text: "Discussions",
} mobileHidden: true,
: null, },
].filter(Boolean) as { href: string; event: string; icon: React.ReactNode; text: string }[]; ].filter(Boolean) as {
href: string;
event: string;
icon: React.ReactNode;
text: string;
mobileHidden?: boolean;
}[];
export const mostPopularScripts = [ export const mostPopularScripts = [
"Proxmox VE Post Install", "Proxmox VE Post Install",
"Docker", "Docker",
"Home Assistant OS", "Home Assistant OS",
]; ];
export const analytics = { export const analytics = {