martin/ProxmoxVE
1
0
Fork 0
mirror of https://github.com/community-scripts/ProxmoxVE synced 2025-01-10 19:05:09 +00:00
Code Issues Actions 8 Packages Projects Releases Wiki Activity

Use static assets instead of fetching from github (#156)
Some checks are pending
Deploy Next.js site to Pages / build (push) Waiting to run
Details
Deploy Next.js site to Pages / deploy (push) Blocked by required conditions
Details

Browse Source
This commit is contained in:
Håvard Gjøby Thom 2024-11-09 20:06:54 +01:00 committed by GitHub
parent 2af11d145f
commit d199762427
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
18 changed files with 136 additions and 107 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/public/json Symbolic link
View File

@ -0,0 +1 @@
../../json

53
frontend/src/app/api/categories/route.ts
View File

@ -1,26 +1,30 @@
import { basePath } from "@/config/siteConfig";
import { Category, Script } from "@/lib/types";
import { Metadata, Script } from "@/lib/types";
import { promises as fs } from "fs";
import { NextResponse } from "next/server";
import path from "path";
export const dynamic = "force-static";
const fetchCategories = async (): Promise<Category[]> => {
const response = await fetch(
`https://raw.githubusercontent.com/community-scripts/${basePath}/refs/heads/main/json/metadata.json`,
);
const data = await response.json();
return data.categories;
const jsonDir = "public/json";
const metadataFileName = "metadata.json";
const encoding = "utf-8";
const getMetadata = async () => {
const filePath = path.resolve(jsonDir, metadataFileName);
const fileContent = await fs.readFile(filePath, encoding);
const metadata: Metadata = JSON.parse(fileContent);
return metadata;
};
const fetchScripts = async (): Promise<Script[]> => {
const response = await fetch(
`https://api.github.com/repos/community-scripts/${basePath}/contents/json`,
);
const files: { download_url: string }[] = await response.json();
const getScripts = async () => {
const filePaths = (await fs.readdir(jsonDir))
.filter((fileName) => fileName !== metadataFileName)
.map((fileName) => path.resolve(jsonDir, fileName));
const scripts = await Promise.all(
files.map(async (file) : Promise<Script> => {
const response = await fetch(file.download_url);
const script = await response.json();
filePaths.map(async (filePath) => {
const fileContent = await fs.readFile(filePath, encoding);
const script: Script = JSON.parse(fileContent);
return script;
}),
);
@ -29,11 +33,18 @@ const fetchScripts = async (): Promise<Script[]> => {
export async function GET() {
try {
const categories = await fetchCategories();
const scripts = await fetchScripts();
for (const category of categories) {
category.scripts = scripts.filter((script) => script.categories.includes(category.id));
}
const metadata = await getMetadata();
const scripts = await getScripts();
const categories = metadata.categories
.map((category) => {
category.scripts = scripts.filter((script) =>
script.categories.includes(category.id),
);
return category;
})
.sort((a, b) => a.sort_order - b.sort_order);
return NextResponse.json(categories);
} catch (error) {
console.error(error as Error);

5
frontend/src/app/layout.tsx
View File

@ -2,11 +2,11 @@ import Footer from "@/components/Footer";
import Navbar from "@/components/Navbar";
import { ThemeProvider } from "@/components/theme-provider";
import { Toaster } from "@/components/ui/sonner";
import { analytics, basePath } from "@/config/siteConfig";
import "@/styles/globals.css";
import { Inter } from "next/font/google";
import React from "react";
import { NuqsAdapter } from "nuqs/adapters/next/app";
import { analytics, basePath } from "@/config/siteConfig";
import React from "react";
const inter = Inter({ subsets: ["latin"] });
@ -65,7 +65,6 @@ export default function RootLayout({
data-website-id={analytics.token}
></script>
<link rel="manifest" href="manifest.webmanifest" />
<link rel="preconnect" href={process.env.NEXT_PUBLIC_POCKETBASE_URL} />
<link rel="preconnect" href="https://api.github.com" />
</head>
<body className={inter.className}>

15
frontend/src/app/page.tsx
View File

@ -1,17 +1,24 @@
"use client";
import AnimatedGradientText from "@/components/ui/animated-gradient-text";
import Particles from "@/components/ui/particles";
import { Button } from "@/components/ui/button";
import { CardFooter } from "@/components/ui/card";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
DialogTrigger,
} from "@/components/ui/dialog";
import Particles from "@/components/ui/particles";
import { Separator } from "@/components/ui/separator";
import { basePath } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import { ArrowRightIcon, ExternalLink } from "lucide-react";
import { useTheme } from "next-themes";
import Link from "next/link";
import { useEffect, useState } from "react";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
import { CardFooter } from "@/components/ui/card";
import { FaGithub } from "react-icons/fa";
import { basePath } from "@/config/siteConfig";
function CustomArrowRightIcon() {
return <ArrowRightIcon className="h-4 w-4" width={1} />;

4
frontend/src/app/scripts/_components/ScriptItem.tsx
View File

@ -52,7 +52,9 @@ function ScriptItem({
<div className="ml-4 flex flex-col justify-between">
<div className="flex h-full w-full flex-col justify-between">
<div>
<h1 className="text-lg font-semibold">{item.name} {getDisplayValueFromType(item.type)}</h1>
<h1 className="text-lg font-semibold">
{item.name} {getDisplayValueFromType(item.type)}
</h1>
<p className="w-full text-sm text-muted-foreground">
Date added: {extractDate(item.date_created)}
</p>

15
frontend/src/app/scripts/_components/ScriptItems/DefaultPassword.tsx
View File

@ -1,10 +1,11 @@
import handleCopy from "@/components/handleCopy";
import { Button } from "@/components/ui/button";
import { Separator } from "@/components/ui/separator";
import handleCopy from "@/components/handleCopy";
import { Script } from "@/lib/types";
export default function DefaultPassword({ item }: { item: Script }) {
const hasDefaultLogin = item.default_credentials.username && item.default_credentials.password;
const hasDefaultLogin =
item.default_credentials.username && item.default_credentials.password;
return (
<div>
@ -25,7 +26,10 @@ export default function DefaultPassword({ item }: { item: Script }) {
variant={"secondary"}
size={"null"}
onClick={() =>
handleCopy("username", item.default_credentials.username ?? "")
handleCopy(
"username",
item.default_credentials.username ?? "",
)
}
>
{item.default_credentials.username}
@ -37,7 +41,10 @@ export default function DefaultPassword({ item }: { item: Script }) {
variant={"secondary"}
size={"null"}
onClick={() =>
handleCopy("password", item.default_credentials.password ?? "")
handleCopy(
"password",
item.default_credentials.password ?? "",
)
}
>
{item.default_credentials.password}

3
frontend/src/app/scripts/_components/ScriptItems/DefaultSettings.tsx
View File

@ -44,7 +44,8 @@ export default function DefaultSettings({ item }: { item: Script }) {
CPU: {defaultAlpineSettings?.resources.cpu}vCPU
</p>
<p className="text-sm text-muted-foreground">
RAM: {getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
RAM:{" "}
{getDisplayValueFromRAM(defaultAlpineSettings?.resources.ram ?? 0)}
</p>
<p className="text-sm text-muted-foreground">
HDD: {defaultAlpineSettings?.resources.hdd}GB

8
frontend/src/app/scripts/_components/ScriptItems/InstallCommand.tsx
View File

@ -6,7 +6,7 @@ import { getDisplayValueFromType } from "../ScriptInfoBlocks";
const getInstallCommand = (scriptPath?: string) => {
return `bash -c "$(wget -qLO - https://github.com/community-scripts/${basePath}/raw/main/${scriptPath})"`;
}
};
export default function InstallCommand({ item }: { item: Script }) {
const alpineScript = item.install_methods.find(
@ -14,7 +14,7 @@ export default function InstallCommand({ item }: { item: Script }) {
);
const defaultScript = item.install_methods.find(
(method) => method.type === "default"
(method) => method.type === "default",
);
const renderInstructions = (isAlpine = false) => (
@ -60,7 +60,9 @@ export default function InstallCommand({ item }: { item: Script }) {
</TabsList>
<TabsContent value="default">
{renderInstructions()}
<CodeCopyButton>{getInstallCommand(defaultScript?.script)}</CodeCopyButton>
<CodeCopyButton>
{getInstallCommand(defaultScript?.script)}
</CodeCopyButton>
</TabsContent>
<TabsContent value="alpine">
{renderInstructions(true)}

19
frontend/src/app/scripts/_components/ScriptItems/InterFaces.tsx
View File

@ -1,8 +1,8 @@
import { Button, buttonVariants } from "@/components/ui/button";
import handleCopy from "@/components/handleCopy";
import { buttonVariants } from "@/components/ui/button";
import { Script } from "@/lib/types";
import { cn } from "@/lib/utils";
import { ClipboardIcon } from "lucide-react";
import { Script } from "@/lib/types";
const CopyButton = ({
label,
@ -11,7 +11,12 @@ const CopyButton = ({
label: string;
value: string | number;
}) => (
<span className={cn(buttonVariants({size: "sm", variant: "secondary"}), "flex items-center gap-2")}>
<span
className={cn(
buttonVariants({ size: "sm", variant: "secondary" }),
"flex items-center gap-2",
)}
>
{value}
<ClipboardIcon
onClick={() => handleCopy(label, String(value))}
@ -20,8 +25,7 @@ const CopyButton = ({
</span>
);
export default function InterFaces({item} : {item : Script}) {
export default function InterFaces({ item }: { item: Script }) {
return (
<div className="flex flex-col gap-2">
{item.interface_port !== null ? (
@ -29,10 +33,7 @@ export default function InterFaces({item} : {item : Script}) {
<h2 className="mr-2 text-end text-lg font-semibold">
{"Default Interface:"}
</h2>{" "}
<CopyButton
label="default interface"
value={item.interface_port}
/>
<CopyButton label="default interface" value={item.interface_port} />
</div>
) : null}
</div>

11
frontend/src/app/scripts/_components/Sidebar.tsx
View File

@ -17,15 +17,16 @@ const Sidebar = ({
<div className="flex items-end justify-between pb-4">
<h1 className="text-xl font-bold">Categories</h1>
<p className="text-xs italic text-muted-foreground">
{items.reduce(
(acc, category) => acc + category.scripts.length,
0,
)}{" "}
{items.reduce((acc, category) => acc + category.scripts.length, 0)}{" "}
Total scripts
</p>
</div>
<div className="rounded-lg">
<ScriptAccordion items={items} selectedScript={selectedScript} setSelectedScript={setSelectedScript} />
<ScriptAccordion
items={items}
selectedScript={selectedScript}
setSelectedScript={setSelectedScript}
/>
</div>
</div>
);

4
frontend/src/components/ui/codeblock.tsx
View File

@ -1,5 +1,6 @@
"use client";
import { basePath } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import { cva, type VariantProps } from "class-variance-authority";
import { Clipboard, Copy } from "lucide-react";
@ -8,7 +9,6 @@ import * as React from "react";
import { toast } from "sonner";
import { Button } from "./button";
import { Separator } from "./separator";
import { basePath } from "@/config/siteConfig";
const buttonVariants = cva(
"inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
@ -135,4 +135,4 @@ const CodeBlock = React.forwardRef<HTMLDivElement, CodeBlockProps>(
);
CodeBlock.displayName = "CodeBlock";
export { CodeBlock, buttonVariants };
export { buttonVariants, CodeBlock };

2
frontend/src/components/ui/navigation-menu.tsx
View File

@ -123,6 +123,6 @@ export {
NavigationMenuLink,
NavigationMenuList,
NavigationMenuTrigger,
NavigationMenuViewport,
navigationMenuTriggerStyle,
NavigationMenuViewport,
};

13
frontend/src/components/ui/star-on-github-button.tsx
View File

@ -1,10 +1,10 @@
import { basePath } from "@/config/siteConfig";
import { cn } from "@/lib/utils";
import Link from "next/link";
import { useEffect, useState } from "react";
import { FaGithub, FaStar } from "react-icons/fa";
import NumberTicker from "./number-ticker";
import { buttonVariants } from "./button";
import { basePath } from "@/config/siteConfig";
import NumberTicker from "./number-ticker";
export default function StarOnGithubButton() {
const [stars, setStars] = useState(0);
@ -12,9 +12,12 @@ export default function StarOnGithubButton() {
useEffect(() => {
const fetchStars = async () => {
try {
const res = await fetch(`https://api.github.com/repos/community-scripts/${basePath}`, {
next: { revalidate: 60 * 60 * 24 },
});
const res = await fetch(
`https://api.github.com/repos/community-scripts/${basePath}`,
{
next: { revalidate: 60 * 60 * 24 },
},
);
if (res.ok) {
const data = await res.json();

11
frontend/src/components/ui/theme-toggle.tsx
View File

@ -1,9 +1,14 @@
"use client";
import { useTheme } from "next-themes";
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./tooltip";
import { Button } from "./button";
import { MoonIcon, SunIcon } from "@radix-ui/react-icons";
import { useTheme } from "next-themes";
import { Button } from "./button";
import {
Tooltip,
TooltipContent,
TooltipProvider,
TooltipTrigger,
} from "./tooltip";
export function ThemeToggle() {
const { setTheme, theme: currentTheme } = useTheme();

25
frontend/src/lib/data.ts
View File

@ -1,23 +1,10 @@
import { Category } from "./types";
const sortCategories = (categories: Category[]) => {
return categories.sort((a, b) => {
if (a.name === "Proxmox VE Tools") {
return -1;
} else if (b.name === "Proxmox VE Tools") {
return 1;
} else if (a.name === "Miscellaneous") {
return 1;
} else if (b.name === "Miscellaneous") {
return -1;
} else {
return a.name.localeCompare(b.name);
}
});
};
export const fetchCategories = async (): Promise<Category[]> => {
export const fetchCategories = async () => {
const response = await fetch("api/categories");
const categories = await response.json();
return sortCategories(categories);
if (!response.ok) {
throw new Error(`Failed to fetch categories: ${response.statusText}`);
}
const categories: Category[] = await response.json();
return categories;
};

18
frontend/src/lib/types.ts
View File

@ -26,19 +26,21 @@ export type Script = {
username: string | null;
password: string | null;
};
notes: [{
text: string;
type: string;
}]
}
notes: [
{
text: string;
type: string;
},
];
};
export type Category = {
name: string;
id: number;
sort_order: number;
scripts: Script[];
}
};
export type ScriptList = {
export type Metadata = {
categories: Category[];
}
};

30
json/metadata.json
View File

@ -1,23 +1,23 @@
{
"categories":
[
{"name": "Miscellaneous", "id": 0, "sort_order": 99.0},
{"name": "Proxmox VE Tools", "id": 1, "sort_order": 1.0},
{"name": "Home Assistant", "id": 2, "sort_order": 2.0},
{"name": "AdBlocker - DNS", "id": 13, "sort_order": 2.0},
{"name": "Automation", "id": 3, "sort_order": 3.0},
{"name": "MQTT", "id": 4, "sort_order": 4.0},
{"name": "Dashboards", "id": 15, "sort_order": 4.0},
{"name": "Database", "id": 5, "sort_order": 5.0},
{"name": "Zigbee - Zwave", "id": 6, "sort_order": 6.0},
{"name": "Monitoring - Analytics", "id": 7, "sort_order": 7.0},
{"name": "Docker - Kubernetes", "id": 8, "sort_order": 8.0},
{"name": "Operating System", "id": 9, "sort_order": 9.0},
{"name": "TurnKey", "id": 10, "sort_order": 10.0},
{"name": "Server - Networking", "id": 11, "sort_order": 11.0},
{"name": "Media - Photo", "id": 12, "sort_order": 12.0},
{"name": "AdBlocker - DNS", "id": 13, "sort_order": 13.0},
{"name": "Document - Notes", "id": 14, "sort_order": 14.0},
{"name": "Dashboards", "id": 15, "sort_order": 15.0},
{"name": "File - Code", "id": 16, "sort_order": 16.0},
{"name": "NVR - DVR", "id": 17, "sort_order": 17.0}
{"name": "Docker - Kubernetes", "id": 8, "sort_order": 6.0},
{"name": "Document - Notes", "id": 14, "sort_order": 7.0},
{"name": "File - Code", "id": 16, "sort_order": 8.0},
{"name": "Home Assistant", "id": 2, "sort_order": 9.0},
{"name": "Media - Photo", "id": 12, "sort_order": 10.0},
{"name": "Monitoring - Analytics", "id": 7, "sort_order": 11.0},
{"name": "MQTT", "id": 4, "sort_order": 12.0},
{"name": "NVR - DVR", "id": 17, "sort_order": 13.0},
{"name": "Operating System", "id": 9, "sort_order": 14.0},
{"name": "Server - Networking", "id": 11, "sort_order": 15.0},
{"name": "TurnKey", "id": 10, "sort_order": 16.0},
{"name": "Zigbee - Zwave", "id": 6, "sort_order": 17.0},
{"name": "Miscellaneous", "id": 0, "sort_order": 99.0}
]
}