Add new & updated badges to functions in See Also

Author: FileEX

web/src/components/SeeAlsoSection.astro

@@ -1,34 +1,68 @@
 ---
-import type { SeeAlsoLinkGroup } from '@src/utils/general';
+import type { SeeAlsoLinkGroup } from "@src/utils/general";
+import { Badge } from "@astrojs/starlight/components";
 
 export interface Props {
   seeAlsoLinks: SeeAlsoLinkGroup[];
   currentId: string;
 }
 
 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" },
+};
 ---
 
-{seeAlsoLinks.length > 0 && (
-  <div class="see-also-section" data-pagefind-ignore>
-    <h4>See Also</h4>
-    {seeAlsoLinks.map((group) => (
-      <div class="see-also-group">
-        <h5>{group.title}</h5>
-        <ul>
-          {group.links.map((link) => (
-            <li>
-              {link.name === currentId ? (
-                <strong>{link.name.replace(/_/g, ' ')}</strong>
-              ) : (
-                <a target={link.newTab ? '_blank' : '_self'}
-                   rel={link.newTab ? 'noopener noreferrer' : undefined}
-                 href={link.link}>{link.name.replace(/_/g, ' ')}</a>
-              )}
-            </li>
-          ))}
-        </ul>
-      </div>
-    ))}
-  </div>
-)}
+{
+  seeAlsoLinks.length > 0 && (
+    <div class="see-also-section" data-pagefind-ignore>
+      <h4>See Also</h4>
+      {seeAlsoLinks.map((group) => (
+        <div class="see-also-group">
+          <h5>{group.title}</h5>
+          <ul>
+            {group.links.map((link) => (
+              <li>
+                {link.name === currentId ? (
+                  <strong>{link.name.replace(/_/g, " ")}</strong>
+                ) : (
+                  <a
+                    target={link.newTab ? "_blank" : "_self"}
+                    rel={link.newTab ? "noopener noreferrer" : undefined}
+                    href={link.link}
+                  >
+                    {link.name.replace(/_/g, " ")}
+                  </a>
+                )}
+
+                {link.badge &&
+                  (() => {
+                    const config = badgeConfig[link.badge] ?? {
+                      text: link.badge,
+                      variant: "default",
+                    };
+
+                    return (
+                      <Badge
+                        text={config.text}
+                        variant={config.variant}
+                        size="medium"
+                        style="font-weight: bold;"
+                      />
+                    );
+                  })()}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ))}
+    </div>
+  )
+}

web/src/styles/custom.css

@@ -40,6 +40,10 @@
     padding-top: 1.5rem;
 }
 
+.see-also-section .see-also-group ul li .sl-badge {
+  margin-left: 0.5rem;
+}
+
 :root[data-theme='dark'] .sl-badge {
   color: #fff;
 }

web/src/utils/general.ts

@@ -1,6 +1,6 @@
 import { marked } from 'marked';
 import path from 'path';
-import { getFunctionsByCategory, getFunctionsByTypeByCategory } from '@src/utils/functions';
+import { getFunctionInfo, getFunctionsByCategory, getFunctionsByTypeByCategory } from '@src/utils/functions';
 import { getEventsByCategory, getEventsByTypeByCategory } from '@src/utils/events';
 import { getElementsByCategory, getElementCategory } from '@src/utils/elements';
 
@@ -36,6 +36,7 @@ type SeeAlsoLink = {
   name: string;
   link: string;
   newTab?: boolean;
+  badge?: string;
 };
 
 export type SeeAlsoLinkGroup = {
@@ -144,7 +145,22 @@ export function getSeeAlsoLinksFromList(seeAlsoList: string[]): SeeAlsoLinkGroup
 
     const title = makeTitle(subType, category, type);
     if (!groupedMap.has(title)) groupedMap.set(title, []);
-    const links = items.map((i: any) => ({ name: i.id, link: `/reference/${i.id}` }));
+    const links = items.map((i: any) => {
+      let badge: string | undefined;
+
+      if (i.collection === 'functions')
+      {
+        const funcInfo = getFunctionInfo(i.data);
+        badge = funcInfo.version?.added ? `new` : (funcInfo.version?.updated ? `updated` : undefined);
+      }
+
+      return {
+        name: i.id,
+        link: `/reference/${i.id}`,
+        badge: badge,
+      };
+    });
+
     groupedMap.get(title)!.push(...links);
   }