lint: updates lint rules for no-unused-vars

.eslintrc.json

@@ -1,3 +1,23 @@
 {
-  "extends": "next/core-web-vitals"
+  "parser": "@typescript-eslint/parser",
+  "plugins": [
+    "@typescript-eslint"
+  ],
+  "extends": [
+    "next/core-web-vitals"
+  ],
+  "rules": {
+    "@typescript-eslint/no-unused-vars": [
+      "error",
+      {
+        "args": "all",
+        "argsIgnorePattern": "^_",
+        "caughtErrors": "all",
+        "caughtErrorsIgnorePattern": "^_",
+        "destructuredArrayIgnorePattern": "^_",
+        "varsIgnorePattern": "^_",
+        "ignoreRestSiblings": true
+      }
+    ]
+  }
 }

app/help/[article]/error.tsx

@@ -2,7 +2,6 @@
 
 export default function Error({
   error,
-  reset,
 }: {
   error: Error & { digest?: string };
   reset: () => void;

app/page.tsx

@@ -1,6 +1,4 @@
 import { readMD } from "@/actions/readMD";
-import { TTCMD } from "@/components/ttcmd";
-import { readFile } from "fs/promises";
 import { Suspense } from "react";
 import { HomeClient } from "./client";
 import { MDSkeletonLoader } from "@/components/loader";

lib/poppables/components/poppable-content.tsx

@@ -4,7 +4,6 @@ import {
   PropsWithChildren,
   SetStateAction,
   useCallback,
-  useEffect,
   useState,
 } from "react";
 import { bulkRound } from "../../utils/bulkRound";
@@ -24,7 +23,7 @@ interface IProps {
   setHover: Dispatch<SetStateAction<boolean>>;
 }
 
-type position = { top: number; left: number; width?: number };
+type position = { top: number; left: number; width?: number; };
 
 export const PoppableContent: FC<PropsWithChildren<IProps>> = (
   {
@@ -35,7 +34,6 @@ export const PoppableContent: FC<PropsWithChildren<IProps>> = (
     spacing = 10,
     setHover,
     isClosing,
-    isClosed,
   },
 ) => {
   const [popRef, setPopRef] = useState<HTMLDivElement>();
@@ -52,7 +50,7 @@ export const PoppableContent: FC<PropsWithChildren<IProps>> = (
       relHeight: number,
       popWidth: number,
       popHeight: number,
-      edge: edge,
+      _edge: edge,
       align: alignment,
     ): position => {
       const pos = {

lib/poppables/components/poppable.tsx

@@ -1,13 +1,6 @@
 "use client";
 
-import {
+import { FC, PropsWithChildren, ReactNode, useCallback, useState } from "react";
-  FC,
-  PropsWithChildren,
-  ReactNode,
-  useCallback,
-  useEffect,
-  useState,
-} from "react";
 import { PoppableContent } from "./poppable-content";
 import { useDebounce } from "../../../hooks/useDebounce";
 

lib/tcmd/TokenIdentifiers.tsx

@@ -3,48 +3,14 @@ import Link from "next/link";
 import { Fragment } from "react";
 import { Poppable } from "../poppables/components/poppable";
 import { Accordion, AccordionContent } from "../accordion";
-import { metadata } from "@/app/layout";
 
-type SearchFunction = (s: string, start: number, end: number) => {
+export const TokenRenderers = new Map<string, TokenRenderer<any>>();
-  start: number;
-  end: number;
-  text: string;
-  lastIndex: number;
-};
-
-type TokenIdentifier<M> = {
-  rx: RegExp;
-  parse: (s: string) => Token<M>;
-  search?: SearchFunction;
-};
-
-type TokenIdentifierMap = Map<
-  string,
-  TokenIdentifier<any>
->;
-
-export const TokenRenderers = new Map<
-  string,
-  TokenRenderer<any>
->();
-
-type IdentifierRegistration = <N = Record<string, string>>(
-  type: string,
-  match: RegExp,
-  parseFunction: (s: string, rx: RegExp) => IdentifiedToken<N>,
-  renderFunction: TokenRenderer<N>,
-  openTagRx?: RegExp,
-  closeTagRx?: RegExp,
-) => void;
 
 export function buildIdentifierMap(): [
   TokenIdentifierMap,
   IdentifierRegistration,
 ] {
-  const TokenIdentifiers = new Map<
+  const TokenIdentifiers = new Map<string, TokenIdentifier<any>>();
-    string,
-    TokenIdentifier<any>
-  >();
 
   function registerIdentifier<M>(
     type: string,
@@ -79,7 +45,7 @@ export function buildIdentifierMap(): [
 
         return { ...token, ...identifiedToken } as Token<M>;
       },
-      search: (openTagRx && closeTagRx)
+      search: openTagRx && closeTagRx
         ? (s, start, end) => {
           return search(
             s,
@@ -120,8 +86,11 @@ export const buildOnlyDefaultElements = () => {
     /(?<!\/)(?:\[\])+\n+((?:.|\n)*?)\n+\/\[\]/g,
     (s) => {
       const rx = /((?:\[\])+)\n+([\s\S]*)\n+\/\[\]/;
-      const [_, columns, content] = s.match(rx) ||
+      const [_, columns, content] = s.match(rx) || [
-        ["", "..", "Unable to parse grid"];
+        "",
+        "..",
+        "Unable to parse grid",
+      ];
       return {
         content,
         raw: s,
@@ -133,7 +102,7 @@ export const buildOnlyDefaultElements = () => {
       };
     },
     (token) => {
-      const { content, children, metadata, uuid } = token;
+      const { children, metadata } = token;
       return (
         <div
           style={{
@@ -141,11 +110,7 @@ export const buildOnlyDefaultElements = () => {
           } as React.CSSProperties}
           className="grid grid-cols-dynamic gap-x-8 gap-y-6 mb-6"
         >
-          {children?.map((c) => (
+          {children?.map((c) => <div key={c.uuid}>{c.render(c)}</div>)}
-            <div key={c.uuid}>
-              {c.render(c)}
-            </div>
-          ))}
         </div>
       );
     },
@@ -173,17 +138,14 @@ export const buildOnlyDefaultElements = () => {
       };
     },
     (token) => {
-      const { children, metadata, uuid } = token;
+      const { children, metadata } = token;
       return (
         <div
           data-block={!!metadata.isBlock}
           className="data-[block=false]:card mb-6"
         >
-          {children?.map((e) => (
+          {children?.map((e) => <Fragment key={e.uuid}>{e.render(e)}
-            <Fragment key={e.uuid}>
+          </Fragment>)}
-              {e.render(e)}
-            </Fragment>
-          ))}
         </div>
       );
     },
@@ -192,22 +154,26 @@ export const buildOnlyDefaultElements = () => {
   );
 
   // fenced code block
-  registerIdentifier("code", /`{3}\n+((?:.|\n)*?)\n+`{3}/g, (s, rx) => {
+  registerIdentifier(
+    "code",
+    /`{3}\n+((?:.|\n)*?)\n+`{3}/g,
+    (s, rx) => {
       return {
-      content: s.match(new RegExp(rx, ""))?.at(1) ||
+        content: s.match(new RegExp(rx, ""))?.at(1) || "Unable to parse code",
-        "Unable to parse code",
         raw: s,
         metadata: {},
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    (token) => {
       return (
         <pre className="whitespace-pre-wrap bg-black/20 p-2 rounded-md">
           {token.content}
         </pre>
       );
-  });
+    },
+  );
 
   // list
   registerIdentifier(
@@ -215,20 +181,18 @@ export const buildOnlyDefaultElements = () => {
     /^\s*-\s([\s\S]*?)\n\n/gm,
     (s, rx) => {
       return {
-        content: s.match(new RegExp(rx, ""))?.at(1) ||
+        content: s.match(new RegExp(rx, ""))?.at(1) || "Unable to parse list",
-          "Unable to parse list",
         raw: s,
         metadata: {
           initialDepth:
-            s.replace("\n", "").split("-").at(0)?.length.toString() ||
+            s.replace("\n", "").split("-").at(0)?.length.toString() || "1",
-            "1",
         },
         uuid: crypto.randomUUID(),
         rendersChildrenOnly,
       };
     },
     (token) => {
-      const { children, metadata, uuid } = token;
+      const { children, metadata } = token;
       return (
         <>
           <ul
@@ -237,10 +201,7 @@ export const buildOnlyDefaultElements = () => {
           >
             {children?.map((c) => {
               return (
-                <li
+                <li key={c.uuid} data-depth={metadata.initialDepth}>
-                  key={c.uuid}
-                  data-depth={metadata.initialDepth}
-                >
                   {c.children?.map((c: Token<any>) => (
                     <Fragment key={c.uuid}>{c.render(c)}</Fragment>
                   ))}
@@ -264,19 +225,15 @@ export const buildOnlyDefaultElements = () => {
         raw: s,
         metadata: {
           initialDepth:
-            s.replace("\n", "").split("-").at(0)?.length.toString() ||
+            s.replace("\n", "").split("-").at(0)?.length.toString() || "1",
-            "1",
         },
         uuid: crypto.randomUUID(),
       };
     },
     (token) => {
-      const { children, metadata, uuid } = token;
+      const { children, metadata } = token;
       return (
-        <li
+        <li data-depth={metadata.initialDepth} className="ml-2">
-          data-depth={metadata.initialDepth}
-          className="ml-2"
-        >
           {children?.map((c) => (
             <Fragment key={c.uuid}>
               (c.render(c))
@@ -288,7 +245,10 @@ export const buildOnlyDefaultElements = () => {
   );
 
   // heading
-  registerIdentifier("heading", /^#+\s(.*?)$/gm, (s, rx) => {
+  registerIdentifier(
+    "heading",
+    /^#+\s(.*?)$/gm,
+    (s, rx) => {
       const content = s.match(new RegExp(rx, ""))?.at(1) ||
         "Unable to parse heading";
       return {
@@ -301,7 +261,8 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    (token) => {
       return (
         <div
           // id={generateId(token.raw, usedIds)}
@@ -316,10 +277,14 @@ export const buildOnlyDefaultElements = () => {
           {token.content}
         </div>
       );
-  });
+    },
+  );
 
   // image
-  registerIdentifier("image", /\!\[(.*?)\]\((.*?)\)/g, (s, rx) => {
+  registerIdentifier(
+    "image",
+    /\!\[(.*?)\]\((.*?)\)/g,
+    (s, rx) => {
       const [_, title, src] = s.match(new RegExp(rx, ""))!;
 
       return {
@@ -332,7 +297,8 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    (token) => {
       const { metadata } = token;
       metadata.src = metadata.src as string;
       if (metadata.src.startsWith("<svg")) {
@@ -349,11 +315,16 @@ export const buildOnlyDefaultElements = () => {
       }
       // eslint-disable-next-line @next/next/no-img-element
       return <img src={metadata.src} alt={token.content} />;
-  });
+    },
+  );
 
   // anchor
-  registerIdentifier("anchor", /(?<![\!^])\[(.*?)\]\((.*?)\)/g, (s, rx) => {
+  registerIdentifier(
-    let preset, [_, title, href] = s.match(new RegExp(rx, ""))!;
+    "anchor",
+    /(?<![\!^])\[(.*?)\]\((.*?)\)/g,
+    (s, rx) => {
+      let preset,
+        [_, title, href] = s.match(new RegExp(rx, ""))!;
       const match = title.match(/`{3}(cta|button)?(.*)/);
 
       if (match) {
@@ -374,7 +345,8 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    (token) => {
       const { metadata } = token;
       return (
         <Link
@@ -385,7 +357,8 @@ export const buildOnlyDefaultElements = () => {
           {token.content}
         </Link>
       );
-  });
+    },
+  );
 
   // inline-code
   registerIdentifier(
@@ -411,25 +384,28 @@ export const buildOnlyDefaultElements = () => {
   );
 
   // bold
-  registerIdentifier("bold", /\*{2}(.*?)\*{2}/g, (s, rx) => {
+  registerIdentifier(
+    "bold",
+    /\*{2}(.*?)\*{2}/g,
+    (s, rx) => {
       return {
-      content: s.match(new RegExp(rx, "i"))?.at(1) ||
+        content: s.match(new RegExp(rx, "i"))?.at(1) || "Unable to parse bold",
-        "Unable to parse bold",
         raw: s,
         metadata: {},
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
-    return (
+    (token) => {
-      <span className="font-bold">
+      return <span className="font-bold">{token.content}</span>;
-        {token.content}
+    },
-      </span>
   );
-  });
 
   // italic
-  registerIdentifier("italic", /(?<!\*)\*([^\*]+?)\*(?!\*)/g, (s, rx) => {
+  registerIdentifier(
+    "italic",
+    /(?<!\*)\*([^\*]+?)\*(?!\*)/g,
+    (s, rx) => {
       return {
         content: s.match(new RegExp(rx, "i"))?.at(1) ||
           "Unable to parse italic",
@@ -438,16 +414,17 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
-    return (
+    (token) => {
-      <span className="italic">
+      return <span className="italic">{token.content}</span>;
-        {token.content}
+    },
-      </span>
   );
-  });
 
   // popover
-  registerIdentifier("popover", /\^\[(.*?)\]\<<(.*?)\>>/g, (s, rx) => {
+  registerIdentifier(
+    "popover",
+    /\^\[(.*?)\]\<<(.*?)\>>/g,
+    (s, rx) => {
       const [_, title, content] = s.match(new RegExp(rx, ""))!;
 
       return {
@@ -457,14 +434,14 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    (token) => {
       const { children, metadata, uuid } = token;
       return (
         <Poppable
           content={children?.map((c) => (
             <Fragment key={uuid}>{c.render(c)}</Fragment>
-        )) ||
+          )) || token.content}
-          token.content}
           preferredAlign="centered"
           preferredEdge="bottom"
           className="cursor-pointer mx-2"
@@ -474,7 +451,8 @@ export const buildOnlyDefaultElements = () => {
           </span>
         </Poppable>
       );
-  });
+    },
+  );
 
   registerIdentifier(
     "accordion",
@@ -490,17 +468,13 @@ export const buildOnlyDefaultElements = () => {
       };
     },
     (token) => {
-      const { children, metadata, uuid } = token;
+      const { children, metadata } = token;
       return (
         <div className="bg-black/20 p-1 accordion">
-          <Accordion
+          <Accordion title={metadata.title || "Expand"}>
-            title={metadata.title || "Expand"}
-          >
             <AccordionContent>
-              {children?.map((e, i) => (
+              {children?.map((e) => (
-                <Fragment key={e.uuid}>
+                <Fragment key={e.uuid}>{e.render(e)}</Fragment>
-                  {e.render(e)}
-                </Fragment>
               ))}
             </AccordionContent>
           </Accordion>
@@ -509,15 +483,19 @@ export const buildOnlyDefaultElements = () => {
     },
   );
 
-  registerIdentifier("p", /(?<=\n\n)([\s\S]*?)(?=\n\n)/g, (s) => {
+  registerIdentifier(
+    "p",
+    /(?<=\n\n)([\s\S]*?)(?=\n\n)/g,
+    (s) => {
       return {
         content: s.replace("\n", " "),
         raw: s,
         metadata: {},
         uuid: crypto.randomUUID(),
       };
-  }, (token) => {
+    },
-    const { children, uuid } = token;
+    (token) => {
+      const { children } = token;
 
       debugger;
 
@@ -525,17 +503,17 @@ export const buildOnlyDefaultElements = () => {
         <div className="p">
           {children?.map((e) => {
             console.log(e);
-          return (
+            return <Fragment key={e.uuid}>{e.render(e)}</Fragment>;
-            <Fragment key={e.uuid}>
-              {e.render(e)}
-            </Fragment>
-          );
           })}
         </div>
       );
-  });
+    },
+  );
 
-  registerIdentifier("hr", /^-{3,}$/gm, (s, rx) => {
+  registerIdentifier(
+    "hr",
+    /^-{3,}$/gm,
+    (s) => {
       return {
         content: s,
         raw: s,
@@ -543,11 +521,16 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    () => {
       return <div className="w-full border-b border-mixed-500 my-3"></div>;
-  });
+    },
+  );
 
-  registerIdentifier("comment", /<!--[\s\S]+?-->/g, (s, rx) => {
+  registerIdentifier(
+    "comment",
+    /<!--[\s\S]+?-->/g,
+    (s) => {
       return {
         content: "",
         metadata: { comment: s },
@@ -555,11 +538,16 @@ export const buildOnlyDefaultElements = () => {
         uuid: crypto.randomUUID(),
         rendersContentOnly,
       };
-  }, (token) => {
+    },
+    () => {
       return <></>;
-  });
+    },
+  );
 
-  registerIdentifier("frontmatter", /^---([\s\S]*?)---/g, (s, rx) => {
+  registerIdentifier(
+    "frontmatter",
+    /^---([\s\S]*?)---/g,
+    (s, rx) => {
       return {
         content: "",
         metadata: {
@@ -568,14 +556,25 @@ export const buildOnlyDefaultElements = () => {
         raw: "",
         uuid: "frontmatter",
       };
-  }, (token) => {
+    },
+    (token) => {
       return <>{token.raw}</>;
-  });
+    },
+  );
 
-  registerIdentifier("table", /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g, (s, rx) => {
+  registerIdentifier(
+    "table",
+    /^\|\s[\s\S]*?\|(?=(\n\n)|$)/g,
+    (s) => {
       const rowSections = s.split(/^\|[|-\s]+\|$/gm).map((s) =>
-      s.split("\n").filter((r) => !!r).map((r) =>
+        s
-        r.split("|").map((c) => c.trim()).filter((c) => !!c)
+          .split("\n")
+          .filter((r) => !!r)
+          .map((r) =>
+            r
+              .split("|")
+              .map((c) => c.trim())
+              .filter((c) => !!c)
           )
       );
 
@@ -613,7 +612,8 @@ export const buildOnlyDefaultElements = () => {
         },
         uuid: crypto.randomUUID(),
       };
-  }, (t) => {
+    },
+    (t) => {
       const { headerRows, bodyRows, footerRows, columns } = t.metadata;
 
       return (
@@ -626,8 +626,7 @@ export const buildOnlyDefaultElements = () => {
                     const child = t.children?.find((child) => child.raw === c);
                     return (
                       <th key={r.join() + i + c}>
-                      {child?.render(child) ||
+                        {child?.render(child) || c}
-                        c}
                       </th>
                     );
                   })}
@@ -643,8 +642,7 @@ export const buildOnlyDefaultElements = () => {
                     const child = t.children?.find((child) => child.raw === c);
                     return (
                       <td key={r.join() + i + c}>
-                      {child?.render(child) ||
+                        {child?.render(child) || c}
-                        c}
                       </td>
                     );
                   })}
@@ -660,8 +658,7 @@ export const buildOnlyDefaultElements = () => {
                     const child = t.children?.find((child) => child.raw === c);
                     return (
                       <td key={r.join() + i + c}>
-                      {child?.render(child) ||
+                        {child?.render(child) || c}
-                        c}
                       </td>
                     );
                   })}
@@ -671,7 +668,8 @@ export const buildOnlyDefaultElements = () => {
           )}
         </table>
       );
-  });
+    },
+  );
 
   return TokenIdentifiers;
 };
@@ -694,14 +692,16 @@ function findMatchingClosedParenthesis(
     const openingMatch = openRegex.exec(str);
     const closingMatch = closedRegex.exec(str);
 
-    if ((openingMatch && !closingMatch)) {
+    if (openingMatch && !closingMatch) {
       throw Error("Things have gone horribly wrong");
     }
 
     // if ((!openingMatch && closingMatch) || (!openingMatch && !closingMatch)) break;
 
     if (
-      openingMatch && closingMatch && openingMatch.index < closingMatch.index
+      openingMatch &&
+      closingMatch &&
+      openingMatch.index < closingMatch.index
     ) {
       openings++;
       lastOpeningSuccessIndex = openingMatch.index + openingMatch[0].length;
@@ -758,10 +758,11 @@ function search(
 
 // Finds a unique id for things like headings
 function generateId(t: string, usedIds: string[]) {
-  let id = t.toLowerCase().replace(/[^a-z\s]/ig, "").trim().replaceAll(
+  let id = t
-    " ",
+    .toLowerCase()
-    "-",
+    .replace(/[^a-z\s]/gi, "")
-  );
+    .trim()
+    .replaceAll(" ", "-");
   let idNum = 1;
   while (usedIds.includes(id)) {
     id = id.replace(/-[0-9]+$/g, "");

lib/tcmd/index.ts

@@ -118,7 +118,7 @@ function isAcceptableChild(parentType: string, childType: string): boolean {
   return acceptableChildren ? acceptableChildren.includes(childType) : true;
 }
 
-// Occasionally, some P blocks start exactly at the same point as another block (a side effect of needing to exclude preceding linebreaks from the regex while also having the only clear delineation being those linebreaks) so we just remove those P blocks so that when searching for a parent, it doesn't need to figure out if the P block is valid or not. This doesn't cause issues during rendering since each block handles its own container element
+// Occasionally, some P blocks start exactly at the same point as another block (a side effect of needing to exclude preceding line-breaks from the regex while also having the only clear delineation being those line-breaks) so we just remove those P blocks so that when searching for a parent, it doesn't need to figure out if the P block is valid or not. This doesn't cause issues during rendering since each block handles its own container element
 function filterOverlappingPBlocks(blocks: TokenMarker[]): TokenMarker[] {
   return blocks.filter((block) => {
     if (block.type !== "p") {

package.json

@@ -16,14 +16,15 @@
     "react-dom": "^18"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10.0.1",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.0",
     "postcss": "^8",
     "tailwindcss": "^3.3.0",
-    "eslint": "^8",
+    "typescript": "^5",
-    "eslint-config-next": "14.1.0"
+    "typescript-eslint": "^7.2.0"
   }
 }

types.d.ts

@@ -26,3 +26,31 @@ type TokenMarker<M = Record<string, string>> = {
 };
 
 type FrontMatter = Record<string, string>;
+
+type SearchFunction = (
+  s: string,
+  start: number,
+  end: number,
+) => {
+  start: number;
+  end: number;
+  text: string;
+  lastIndex: number;
+};
+
+type TokenIdentifier<M> = {
+  rx: RegExp;
+  parse: (s: string) => Token<M>;
+  search?: SearchFunction;
+};
+
+type TokenIdentifierMap = Map<string, TokenIdentifier<any>>;
+
+type IdentifierRegistration = <N = Record<string, string>>(
+  type: string,
+  match: RegExp,
+  parseFunction: (s: string, rx: RegExp) => IdentifiedToken<N>,
+  renderFunction: TokenRenderer<N>,
+  openTagRx?: RegExp,
+  closeTagRx?: RegExp,
+) => void;