BREAKING: pkg_family is changed to pkg_id

- removed all mention of family in ui, family now only exists as
  variables
- in load.mjs, instead of mapping through using family to generate the
  web page it uses pkg_id
- family page now shows mapping through Package ID
- minor UI fix

Author: Tamrakar182

web/load.mjs

@@ -26,23 +26,17 @@ const run = async (url, branch, arch) => {
 
     if (!data.pkg_webpage) {
       console.log(
-        `⚠️ Auto guessed pkg_webpage for ${branch}-${arch}/${data.pkg_family}/${
-          data.pkg_name || data.pkg
-        }`
+        `⚠️ Auto guessed pkg_webpage for ${branch}-${arch}/${data.pkg_id}/${data.pkg_name || data.pkg}`
       );
-      data.pkg_webpage = `https://pkgs.pkgforge.dev/repo/${branch}/${arch}/${
-        data.pkg_family
-      }/${data.pkg_name || data.pkg}`;
+      data.pkg_webpage = `https://pkgs.pkgforge.dev/repo/${branch}/${arch}/${data.pkg_id}/${data.pkg_name || data.pkg}`;
     }
 
-    const [, , , , , category, pkg_family, pkg] = data.pkg_webpage.split("/");
-
-    const key = `${category}/${pkg_family || data.pkg_family}`;
+    const key = `${data.category}/${data.pkg_id}`;
 
     if (familyMap[key]) {
-      familyMap[key].push([pkg, data.pkg_webpage]);
+      familyMap[key].push([data.pkg_name || data.pkg, data.pkg_webpage]);
     } else {
-      familyMap[key] = [[pkg, data.pkg_webpage]];
+      familyMap[key] = [[data.pkg_name || data.pkg, data.pkg_webpage]];
     }
   });
 
@@ -62,11 +56,11 @@ const run = async (url, branch, arch) => {
     `./src/metadata_${branch}_${arch}.json`,
     JSON.stringify(
       response.map((data) => {
-        const [, , , , , category, pkg_family] = data.pkg_webpage.split("/");
+        const [, , , , , category] = data.pkg_webpage.split("/");
         return {
           "name": data.pkg_name || data.pkg,
           "pkg": data.pkg,
-          "family": pkg_family || data.pkg_id,
+          "family": data.pkg_id,
           "version": data.version,
           "sha": data.shasum,
           "type": data.pkg_type || "none",
@@ -76,7 +70,7 @@ const run = async (url, branch, arch) => {
           "id": "N/A",
           "Build Date": data.build_date,
           "url": data.pkg_webpage,
-          "familyUrl": `/${branch}/${category}/${pkg_family}`,
+          "familyUrl": `/${branch}/${category}/${data.pkg_id}`,
         };
       })
     )

web/src/components/app.tsx

@@ -346,9 +346,6 @@ function Show({ value, Key, props }: { value: any, props: AppProps, Key?: string
 export default function App({ data, logs: build, repo, downloadable = true }: AppProps) {
   const { copy, copied } = useClipboard();
 
-  // Thanks @Azathothas for forcing us to write this hellifying script
-  const [, , , , , , pkg_family, pkg] = data.pkg_webpage.split("/");
-
   return (
     <TooltipProvider delayDuration={0}>
       <div className="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3 px-5 mt-3 items-start pb-4">
@@ -360,10 +357,6 @@ export default function App({ data, logs: build, repo, downloadable = true }: Ap
           <FormulaLinks
             webpage_url={data.pkg_webpage}
             repo={repo}
-            arch={data.host}
-            family={pkg_family}
-            name={pkg}
-            download_url={downloadable ? data.download_url : "none"}
           />
           <Table className="border border-muted/70 mt-4 rounded-xl">
             <TableBody>

web/src/components/data-table-family.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 
-import type { ColumnDef, VisibilityState, SortingState, ColumnFiltersState } from "@tanstack/react-table";
+import type { ColumnDef, SortingState, ColumnFiltersState } from "@tanstack/react-table";
 import {
   flexRender,
   getCoreRowModel,
@@ -21,18 +21,11 @@ import {
 
 import { Input } from "@/components/ui/input"
 
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu"
 import { Button, buttonVariants } from "./ui/button";
 import { Label } from "./ui/label";
-import { CheckIcon, ChevronLeft, ChevronRight, ListTree, Search, SkipBack, SkipForward } from "lucide-react";
+import { CheckIcon, ChevronLeft, ChevronRight, Search, SkipBack, SkipForward } from "lucide-react";
 import { Popover, PopoverContent, PopoverTrigger } from "./ui/popover";
 import { cn } from "@/lib/utils";
-import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./ui/tooltip";
 
 interface DataTableProps<TData, TValue> {

web/src/components/data-table.tsx

@@ -77,8 +77,6 @@ const getColumnVis = () => {
   } catch (e) {
     return {
       sha: false,
-      id: false,
-      size: false,
     };
   }
 };
@@ -267,7 +265,7 @@ export function DataTable<TData>({
               <SelectGroup>
                 <SelectLabel>Filter among</SelectLabel>
                 <SelectItem value="name">Name</SelectItem>
-                <SelectItem value="family">Package Family</SelectItem>
+                <SelectItem value="family">Package ID</SelectItem>
                 <SelectItem value="category">Category</SelectItem>
               </SelectGroup>
             </SelectContent>

web/src/components/family.tsx

@@ -58,7 +58,7 @@ export default function App({ apps, name }: FamilyProps) {
       <div className="flex flex-col items-center my-4 space-y-2">
         <h1 className="text-2xl font-semibold flex items-center gap-2">
           <Package className="h-6 w-6" />
-          <span>{name} Family</span>
+          <span>{name}</span>
         </h1>
         <p className="text-muted-foreground">
           A collection of {apps.length} packages

web/src/components/formula-links.tsx

@@ -2,11 +2,7 @@ import { FileJson, DownloadCloud } from 'lucide-react';
 
 interface Props {
   webpage_url: string;
-  download_url: string;
-  family: string;
-  name: string;
   repo: string;
-  arch: string;
 }
 
 const FormulaLinks = ({ webpage_url, repo }: Props) => {

web/src/components/list.tsx

@@ -60,7 +60,7 @@ const columns: (page: string) => ColumnDef<ListItem>[] = (page) => ([
         <div
           className="flex"
         >
-          Package Family
+          Package ID
           <Button
             variant="ghost"
             size="sm"
@@ -148,13 +148,6 @@ const columns: (page: string) => ColumnDef<ListItem>[] = (page) => ([
       </>;
     },
   },
-  {
-    accessorKey: "id",
-    header: "ID",
-    cell: ({ row }) => {
-      return <span className="text-gray-500 dark:text-gray-400 font-mono text-sm">{row.getValue("id")}</span>
-    }
-  },
   {
     accessorKey: page != "soarpkgs" ? "Build Date" : "Package Type",
     header: ({ column }) => {

web/src/layouts/Layout.astro

@@ -15,9 +15,9 @@ import { SocialLink } from "@/components/social-link";
     <meta name="generator" content={Astro.generator} />
     <title>PkgForge Index</title>
   </head>
-  <body class="overflow-auto md:container">
+  <body class="overflow-auto">
     <nav
-      class="flex flex-row w-full h-16 px-3 text-center justify-between items-center"
+      class="flex flex-row w-full h-16 px-3 text-center justify-between items-center md:container"
     >
       <div class="flex flex-row space-x-2 items-center">
         <img id="secret" src="/favicon.svg" class="h-10 w-10" alt="Icon" />
@@ -32,8 +32,13 @@ import { SocialLink } from "@/components/social-link";
         <ModeToggle client:load />
       </div>
     </nav>
-    <Separator className="mb-4" />
-    <slot />
+
+    <Separator className="mb-4 md:container" />
+
+    <div class="md:container">
+      <slot />
+    </div>
+    
   </body>
 
   <script is:inline>