From 2ba35bbee553c66f1a1ac6bee7eec3866aeae7d3 Mon Sep 17 00:00:00 2001 From: Bram Suurd <78373894+BramSuurdje@users.noreply.github.com> Date: Wed, 22 Jan 2025 20:36:51 +0100 Subject: [PATCH] Refactor various components and configuration for mobile responsiveness. (#1679) --- frontend/src/app/page.tsx | 207 ++++++++++++++--------------- frontend/src/components/Footer.tsx | 2 +- frontend/src/components/Navbar.tsx | 110 ++++++++------- frontend/src/config/siteConfig.tsx | 68 +++++----- 4 files changed, 191 insertions(+), 196 deletions(-) diff --git a/frontend/src/app/page.tsx b/frontend/src/app/page.tsx index c6fad745..69f8fb10 100644 --- a/frontend/src/app/page.tsx +++ b/frontend/src/app/page.tsx @@ -34,113 +34,104 @@ export default function Page() { }, [theme]); return ( -
- -
-
- - -
- -
- ❤️ - - Scripts by Tteck - - -
- - - - Thank You! - - 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! - - - - - - - -
+
+ +
+
+ + +
+ +
+ ❤️ + + Scripts by tteck + + +
+ + + + Thank You! + + 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! + + + + + + + +
-
-

- Make managing your Homelab a breeze -

-

- We are a community-driven initiative that simplifies the setup of - Proxmox Virtual Environment (VE). -
-
- Originally created by{" "} - - tteck - - , these scripts automate and streamline -
- the process of creating and configuring Linux containers (LXC) and - virtual machines (VMs) on Proxmox VE. -
-
- With 200+ scripts to help you manage your{" "} - Proxmox VE environment.
- Whether you're a seasoned user or a newcomer, we've got - you covered. -

-
-
- - - -
-
-
-
- ); +
+

+ Make managing your Homelab a breeze +

+
+

+ We are a community-driven initiative that simplifies the setup + of Proxmox Virtual Environment (VE). +

+

+ With 200+ scripts to help you manage your{" "} + Proxmox VE environment. Whether you're a seasoned + user or a newcomer, we've got you covered. +

+
+
+
+ + + +
+
+
+
+ ); } diff --git a/frontend/src/components/Footer.tsx b/frontend/src/components/Footer.tsx index 38a93803..56062d6f 100644 --- a/frontend/src/components/Footer.tsx +++ b/frontend/src/components/Footer.tsx @@ -5,7 +5,7 @@ export default function Footer() { return (
-
+
Website built by the community. The source code is avaliable on{" "} -
-
- - logo - Proxmox VE Helper-Scripts - -
- - - {navbarLinks.map(({ href, event, icon, text }) => ( - - - - - - - {text} - - - - ))} - -
-
-
- - ); + <> +
+
+ + logo + Proxmox VE Helper-Scripts + +
+ + + {navbarLinks.map(({ href, event, icon, text, mobileHidden }) => ( + + + + + + + {text} + + + + ))} + +
+
+
+ + ); } export default Navbar; diff --git a/frontend/src/config/siteConfig.tsx b/frontend/src/config/siteConfig.tsx index 5a8e2fa7..5cc75fe1 100644 --- a/frontend/src/config/siteConfig.tsx +++ b/frontend/src/config/siteConfig.tsx @@ -1,45 +1,51 @@ 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; const isMobile = typeof window !== "undefined" && window.innerWidth < 640; export const navbarLinks = [ - { - href: `https://github.com/community-scripts/${basePath}`, - event: "Github", - icon: , - text: "Github", - }, - { - href: `https://discord.gg/2wvnMDgdnU`, - event: "Discord", - icon: , - text: "Discord", - }, - { - href: `https://github.com/community-scripts/${basePath}/blob/main/CHANGELOG.md`, - event: "Change Log", - icon: , - text: "Change Log", - }, - !isMobile - ? { - href: `https://github.com/community-scripts/${basePath}/discussions`, - event: "Discussions", - icon: , - text: "Discussions", - } - : null, -].filter(Boolean) as { href: string; event: string; icon: React.ReactNode; text: string }[]; + { + href: `https://github.com/community-scripts/${basePath}`, + event: "Github", + icon: , + text: "Github", + }, + { + href: `https://discord.gg/2wvnMDgdnU`, + event: "Discord", + icon: , + text: "Discord", + }, + { + href: `https://github.com/community-scripts/${basePath}/blob/main/CHANGELOG.md`, + event: "Change Log", + icon: , + text: "Change Log", + mobileHidden: true, + }, + { + href: `https://github.com/community-scripts/${basePath}/discussions`, + event: "Discussions", + icon: , + text: "Discussions", + mobileHidden: true, + }, +].filter(Boolean) as { + href: string; + event: string; + icon: React.ReactNode; + text: string; + mobileHidden?: boolean; +}[]; export const mostPopularScripts = [ - "Proxmox VE Post Install", - "Docker", - "Home Assistant OS", + "Proxmox VE Post Install", + "Docker", + "Home Assistant OS", ]; export const analytics = {