fix(src): typos in components

Author: dineshpinto

src/components/RemixEmbed/index.tsx

@@ -1,11 +1,22 @@
-import React, { type JSX } from "react";
+import React, { type JSX, type ReactNode } from "react";
 import Link from "@docusaurus/Link";
 
-export default function RemixEmbed({ children, fileName }): JSX.Element {
+type RemixEmbedProps = {
+  children: ReactNode;
+  fileName: string;
+};
+
+const sanitizeFileName = (value: string) =>
+  encodeURIComponent(value).replace(/%2F/g, "/");
+
+export default function RemixEmbed({
+  children,
+  fileName,
+}: RemixEmbedProps): JSX.Element {
   const baseUrl = "https://remix.ethereum.org/";
   const githubUrl =
     "#url=https://github.com/flare-foundation/developer-hub/blob/main/examples/developer-hub-solidity/" +
-    fileName;
+    sanitizeFileName(fileName);
   const parameters =
     "&version=builtin&evmVersion=cancun&optimize=true&runs=200";
   return (

src/components/YouTubeEmbed/index.tsx

@@ -60,6 +60,10 @@ const YouTubeEmbed: React.FC<YouTubeEmbedProps> = ({
   useEffect(() => {
     if (isActivated) return;
     if (loadStrategy !== "onVisible") return;
+    if (typeof IntersectionObserver === "undefined") {
+      setIsActivated(true);
+      return;
+    }
 
     const el = containerRef.current;
     if (!el) return;

src/features/DeveloperTools/index.tsx

@@ -45,6 +45,13 @@ const CATEGORY_ORDER = [
   "Explorers",
 ] as const;
 
+const slugifyCategory = (value: string) =>
+  value
+    .toLowerCase()
+    .trim()
+    .replace(/[^a-z0-9]+/g, "-")
+    .replace(/^-+|-+$/g, "") || "category";
+
 function scrollToHash(hash: string) {
   const id = hash.replace(/^#/, "");
   if (!id) return;
@@ -186,7 +193,7 @@ const DeveloperTools: React.FC = () => {
       </div>
 
       {orderedCategories.map(([category, tools]) => {
-        const categoryId = CATEGORY_IDS[category] ?? category;
+        const categoryId = CATEGORY_IDS[category] ?? slugifyCategory(category);
 
         return (
           <div key={category} className={styles.categorySection}>

src/theme/DocCard/index.tsx

@@ -6,7 +6,6 @@ import {
   findFirstSidebarItemLink,
 } from "@docusaurus/plugin-content-docs/client";
 import { usePluralForm } from "@docusaurus/theme-common";
-import isInternalUrl from "@docusaurus/isInternalUrl";
 import { translate } from "@docusaurus/Translate";
 
 import type { Props } from "@theme/DocCard";
@@ -54,12 +53,10 @@ function CardContainer({
 
 function CardLayout({
   href,
-  // icon,
   title,
   description,
 }: {
   href: string;
-  // icon?: ReactNode;
   title: string;
   description?: string;
 }): JSX.Element {
@@ -71,7 +68,6 @@ function CardLayout({
           className={clsx("text--truncate", styles.cardTitle)}
           title={title}
         >
-          {/* {icon}  */}
           {title}
         </Heading>
         <svg
@@ -115,22 +111,17 @@ function CardCategory({
   return (
     <CardLayout
       href={href}
-      // @ts-expect-error: To make linter happy not sure whats wrong since code is swizzled from docosaurus theme
-      icon="🗃️"
       title={item.label}
       description={item.description ?? categoryItemsPlural(item.items.length)}
     />
   );
 }
 
 function CardLink({ item }: { item: PropSidebarItemLink }): JSX.Element {
-  const icon = isInternalUrl(item.href) ? "📄️" : "🔗";
   const doc = useDocById(item.docId ?? undefined);
   return (
     <CardLayout
       href={item.href}
-      // @ts-expect-error: To make linter happy not sure whats wrong since code is swizzled from docosaurus theme
-      icon={icon}
       title={item.label}
       description={item.description ?? doc?.description}
     />

src/theme/PaginatorNavLink/index.tsx

@@ -18,7 +18,7 @@ export default function PaginatorNavLink(props: Props): JSX.Element {
         <div
           className={clsx(
             styles.subLabel,
-            isNext ? styles.nextSubLabel : styles.prevSubLabe,
+            isNext ? styles.nextSubLabel : styles.prevSubLabel,
           )}
         >
           {!isNext && (