docs: update formidable-oss-badges package and usage (#305)

* update oss-badge package in docs

* fix breaking changes

* fix the need to cast a variable

Author: JDMathew

website/package.json

@@ -22,7 +22,7 @@
     "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
-    "formidable-oss-badges": "^1.7.0",
+    "formidable-oss-badges": "^1.7.2",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

website/src/components/landing/landing-featured-projects.tsx

@@ -1,7 +1,7 @@
 import {
   FeaturedBadge,
   ProjectBadge,
-  FeaturedBadgeNames,
+  FeaturedBadgeName,
 } from 'formidable-oss-badges';
 import React from 'react';
 
@@ -19,7 +19,7 @@ export const DEFAULT_BADGE_COLOR_OPTIONS = [
   '#166BFF',
 ];
 
-function isFeaturedBadgeName(value: string): value is FeaturedBadgeNames {
+function isFeaturedBadgeName(name: string): name is FeaturedBadgeName {
   return [
     'envy',
     'figlog',
@@ -32,7 +32,7 @@ function isFeaturedBadgeName(value: string): value is FeaturedBadgeNames {
     'nuka',
     'owl',
     'groqd',
-  ].includes(value);
+  ].includes(name);
 }
 
 export const LandingFeaturedProjects = <Name extends string>({
@@ -42,7 +42,7 @@ export const LandingFeaturedProjects = <Name extends string>({
 }: {
   heading: string;
   projects: {
-    name: FeaturedBadgeNames | Name;
+    name: FeaturedBadgeName | Name;
     link: string;
     description: string;
     title?: string;
@@ -53,35 +53,38 @@ export const LandingFeaturedProjects = <Name extends string>({
     {showDivider && <Divider />}
     <h2 className="my-8 text-4xl font-semibold">{heading}</h2>
     <div className="grid grid-cols-2 gap-8">
-      {projects.map(({ name, link, description, title }) => (
-        <a
-          href={link}
-          key={link}
-          className="col-span-2 sm:col-span-1 block grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white">
-          {isFeaturedBadgeName(name.toLocaleLowerCase()) ? (
-            <FeaturedBadge
-              name={name as FeaturedBadgeNames}
-              isHoverable
-              className="col-span-1"
-            />
-          ) : (
-            <ProjectBadge
-              color={
-                DEFAULT_BADGE_COLOR_OPTIONS[Math.floor(Math.random() * 5) + 1]
-              }
-              isHoverable
-              abbreviation={name.charAt(0).toUpperCase() + name.slice(1, 2)}
-              description={name}
-            />
-          )}
-          <span className="flex flex-col col-span-1 lg:col-span-2">
-            <span className="text-xl font-semibold capitalize">
-              {title || name}
+      {projects.map(({ name, link, description, title }) => {
+        const lowerCaseName = name.toLocaleLowerCase();
+        return (
+          <a
+            href={link}
+            key={link}
+            className="col-span-2 sm:col-span-1 block grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white">
+            {isFeaturedBadgeName(lowerCaseName) ? (
+              <FeaturedBadge
+                name={lowerCaseName}
+                isHoverable
+                className="col-span-1"
+              />
+            ) : (
+              <ProjectBadge
+                color={
+                  DEFAULT_BADGE_COLOR_OPTIONS[Math.floor(Math.random() * 5) + 1]
+                }
+                isHoverable
+                abbreviation={name.charAt(0).toUpperCase() + name.slice(1, 2)}
+                description={name}
+              />
+            )}
+            <span className="flex flex-col col-span-1 lg:col-span-2">
+              <span className="text-xl font-semibold capitalize">
+                {title || name}
+              </span>
+              <span className="text-sm ">{description}</span>
             </span>
-            <span className="text-sm ">{description}</span>
-          </span>
-        </a>
-      ))}
+          </a>
+        );
+      })}
     </div>
 
     <div className="my-8 pt-8 align-center">

website/yarn.lock

@@ -6753,13 +6753,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"formidable-oss-badges@npm:^1.7.0":
-  version: 1.7.0
-  resolution: "formidable-oss-badges@npm:1.7.0"
+"formidable-oss-badges@npm:^1.7.2":
+  version: 1.7.2
+  resolution: "formidable-oss-badges@npm:1.7.2"
   peerDependencies:
     react: ">= 18.0.0"
     react-dom: ">= 18.0.0"
-  checksum: a4ff18f5bce95155ae62d3438411dad329395b022f6d5eaa1a869c9ee30101eb2138aad59a2813000561c98a6f5bf426cdb7afc5d781d0b6d4c0ff80ec48207a
+  checksum: 822f7855e9b91145f10761a9823ea84b26db9540959b5cec0c414996402d72a12a6016fa52616a29cbf9a5f54fb2b51bb6da22acb7f73fb872bff5248c3251e2
   languageName: node
   linkType: hard
 
@@ -13144,7 +13144,7 @@ __metadata:
     autoprefixer: ^10.4.19
     clsx: ^2.1.1
     docusaurus-plugin-image-zoom: ^2.0.0
-    formidable-oss-badges: ^1.7.0
+    formidable-oss-badges: ^1.7.2
     postcss: ^8.4.39
     prism-react-renderer: ^2.3.1
     react: ^18.3.1