Add badges to functions list

Author: FileEX

web/src/components/CategoryList.astro

@@ -2,6 +2,8 @@
 import { getFunctionInfo } from '@src/utils/functions';
 import { getEventTypePretty } from '@src/utils/events';
 import { Icon } from '@astrojs/starlight/components';
+import { badgeConfig } from "@src/utils/badges";
+import { Badge } from "@astrojs/starlight/components";
 
 interface Props {
   itemsByCategory: any;
@@ -134,14 +136,50 @@ function displayCategory(category: string) {
       <h4>{displayTitle(category)}
         <a href={`#${slugify(category)}`}><Icon size="1.5rem" name="external" class="mtainfoicon"/></a>
       </h4>
+
       <ul>
         {items
           .slice()
           .sort((a, b) => a.id.localeCompare(b.id))
-          .map(item => (
-          <li set:html={displayItem(item)}></li>
-        ))}
+          .map((item) => {
+            const isFunction = item.collection === "functions";
+            const funcInfo = isFunction ? getFunctionInfo(item.data) : null;
+
+            const badgeType = funcInfo?.version?.added ? "new" : funcInfo?.version?.updated ? "updated" : null;
+            const badge = badgeType ? badgeConfig[badgeType] : null;
+
+            return (
+              <li>
+                <a href={`/reference/${item.id}`}>{item.id}</a>
+
+                {what === "all_functions" && funcInfo && (
+                  <>
+                    (<span class={`side-${funcInfo.type}`}>{funcInfo.typePretty}</span>)
+                  </>
+                )}
+
+                {what === "all_events" && (
+                  <>
+                    {" "}
+                    (<span class={`side-${item.data.type}`}>
+                      {getEventTypePretty(item.data.type)}-side
+                    </span>)
+                  </>
+                )}
+
+                {badge && (
+                  <Badge
+                    text={badge.text}
+                    variant={badge.variant}
+                    size="medium"
+                    style="font-weight: bold;"
+                  />
+                )}
+              </li>
+            );
+          })}
       </ul>
+
     </section>
   ))}
 </section>

web/src/components/SeeAlsoSection.astro

@@ -1,5 +1,6 @@
 ---
 import type { SeeAlsoLinkGroup } from "@src/utils/general";
+import { getBadgeConfig } from "@src/utils/badges";
 import { Badge } from "@astrojs/starlight/components";
 
 export interface Props {
@@ -8,16 +9,6 @@ export interface Props {
 }
 
 const { seeAlsoLinks, currentId } = Astro.props;
-
-const badgeConfig: {
-  [key: string]: {
-    text: string;
-    variant: "note" | "danger" | "success" | "caution" | "tip" | "default";
-  };
-} = {
-  new: { text: "New", variant: "success" },
-  updated: { text: "Updated", variant: "caution" },
-};
 ---
 
 {
@@ -44,10 +35,7 @@ const badgeConfig: {
 
                 {link.badge &&
                   (() => {
-                    const config = badgeConfig[link.badge] ?? {
-                      text: link.badge,
-                      variant: "default",
-                    };
+                    const config = getBadgeConfig(link.badge) || {text: link.badge, variant: "default"};
 
                     return (
                       <Badge

web/src/utils/badges.ts

@@ -0,0 +1,31 @@
+export type BadgeVariant =
+  | "note"
+  | "danger"
+  | "success"
+  | "caution"
+  | "tip"
+  | "default";
+
+export type BadgeType = "new" | "updated";
+
+export const badgeConfig: Record<
+  BadgeType,
+  {
+    text: string;
+    variant: BadgeVariant;
+  }
+> = {
+  new: {
+    text: "New",
+    variant: "success",
+  },
+  updated: {
+    text: "Updated",
+    variant: "caution",
+  },
+};
+
+export function getBadgeConfig(type?: string) {
+  if (!type) return null;
+  return badgeConfig[type as BadgeType] ?? null;
+}