Refactor various components and configuration for mobile responsiveness. (#1679)

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

View File

@ -61,7 +61,7 @@ export default function Page() {
`inline`,
)}
>
Scripts by Tteck
Scripts by tteck
</span>
</AnimatedGradientText>
</div>
@ -70,7 +70,7 @@ export default function Page() {
<DialogHeader>
<DialogTitle>Thank You!</DialogTitle>
<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
appreciated by the entire Proxmox community!
</DialogDescription>
@ -102,29 +102,20 @@ export default function Page() {
</Dialog>
<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
</h1>
<p className="max-w-2xl text-center text-lg leading-relaxed tracking-tight text-muted-foreground md:text-xl">
We are a community-driven initiative that simplifies the setup of
Proxmox Virtual Environment (VE).
<br />
<br />
Originally created by{" "}
<a href="https://github.com/tteck" target="_blank">
tteck
</a>
, these scripts automate and streamline
<br />
the process of creating and configuring Linux containers (LXC) and
virtual machines (VMs) on Proxmox VE.
<br />
<br />
With 200+ scripts to help you manage your{" "}
<b>Proxmox VE environment</b>.<br />
Whether you&#39;re a seasoned user or a newcomer, we&#39;ve got
you covered.
<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">
<p>
We are a community-driven initiative that simplifies the setup
of Proxmox Virtual Environment (VE).
</p>
<p>
With 200+ scripts to help you manage your{" "}
<b>Proxmox VE environment</b>. Whether you&#39;re a seasoned
user or a newcomer, we&#39;ve got you covered.
</p>
</div>
</div>
<div className="flex flex-row gap-3">
<Link href="/scripts">

View File

@ -5,7 +5,7 @@ export default function Footer() {
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="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{" "}
<Link
href={`https://github.com/community-scripts/${basePath}`}

View File

@ -9,12 +9,7 @@ import { navbarLinks } from "@/config/siteConfig";
import CommandMenu from "./CommandMenu";
import StarOnGithubButton from "./ui/star-on-github-button";
import { ThemeToggle } from "./ui/theme-toggle";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./ui/tooltip";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./ui/tooltip";
export const dynamic = "force-dynamic";
@ -39,27 +34,30 @@ function Navbar() {
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
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
height={18}
unoptimized
width={18}
alt="logo"
src="logo.png"
src="/ProxmoxVE/logo.png"
className=""
/>
<span className="hidden lg:block">Proxmox VE Helper-Scripts</span>
<span className="hidden md:block">Proxmox VE Helper-Scripts</span>
</Link>
<div className="flex gap-2">
<CommandMenu />
<StarOnGithubButton />
{navbarLinks.map(({ href, event, icon, text }) => (
{navbarLinks.map(({ href, event, icon, text, mobileHidden }) => (
<TooltipProvider key={event}>
<Tooltip delayDuration={100}>
<TooltipTrigger>
<TooltipTrigger
className={mobileHidden ? "hidden lg:block" : ""}
>
<Button variant="ghost" size={"icon"} asChild>
<Link
target="_blank"

View File

@ -1,7 +1,7 @@
import { OperatingSystem } from "@/lib/types";
import { MessagesSquare, Scroll } from "lucide-react";
import { FaDiscord, FaGithub } from "react-icons/fa";
import React from "react";
import { FaDiscord, FaGithub } from "react-icons/fa";
export const basePath = process.env.BASE_PATH;
@ -25,16 +25,22 @@ export const navbarLinks = [
event: "Change Log",
icon: <Scroll className="h-4 w-4" />,
text: "Change Log",
mobileHidden: true,
},
!isMobile
? {
{
href: `https://github.com/community-scripts/${basePath}/discussions`,
event: "Discussions",
icon: <MessagesSquare className="h-4 w-4" />,
text: "Discussions",
}
: null,
].filter(Boolean) as { href: string; event: string; icon: React.ReactNode; text: string }[];
mobileHidden: true,
},
].filter(Boolean) as {
href: string;
event: string;
icon: React.ReactNode;
text: string;
mobileHidden?: boolean;
}[];
export const mostPopularScripts = [
"Proxmox VE Post Install",