fix(src): components and ci (#1164)

Author: dineshpinto

.eslintignore

@@ -1,5 +1,5 @@
 .docusaurus
 .vscode
 /build
-/node-modules
+/node_modules
 /docgen/**

.eslintrc.js

@@ -24,6 +24,15 @@ module.exports = {
       "warn",
       { prefer: "type-imports" },
     ],
+    "@typescript-eslint/ban-ts-comment": [
+      "error",
+      {
+        "ts-expect-error": "allow-with-description",
+        "ts-ignore": true,
+        "ts-nocheck": true,
+        "ts-check": true,
+      },
+    ],
   },
   overrides: [
     {

.github/workflows/check-external-links.yml

@@ -34,7 +34,7 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Comment on PR if broken links found
-        if: ${{ always() && steps.lychee.outputs.exit_code != 0 }}
+        if: ${{ steps.lychee.outputs.exit_code && steps.lychee.outputs.exit_code != '0' }}
         uses: thollander/actions-comment-pull-request@v3
         with:
           message: |
@@ -49,5 +49,5 @@ jobs:
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
       - name: Fail if broken links found
-        if: ${{ steps.lychee.outputs.exit_code != 0 }}
+        if: ${{ failure() || (steps.lychee.outputs.exit_code && steps.lychee.outputs.exit_code != '0') }}
         run: exit 1

.gitignore

@@ -22,6 +22,7 @@ yarn-error.log*
 .vscode
 .idea
 .lycheecache
+.eslintcache
 
 flare-smart-contracts-v2/
 flare-smart-contracts/

package.json

@@ -18,7 +18,7 @@
     "format": "prettier --write . && prettier --write --plugin=prettier-plugin-solidity 'examples/developer-hub-solidity/**/*.sol' && npm run format --prefix examples/developer-hub-javascript",
     "format:diff": "prettier --list-different .",
     "format:check": "prettier --check \"**/*.{js,jsx,ts,tsx,md,mdx}\"",
-    "lint": "npx eslint ."
+    "lint": "npx eslint . --cache --cache-location .eslintcache"
   },
   "dependencies": {
     "@docusaurus/core": "^3.9.2",

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 && (