Add profile pictures to table of contents

Author: UnsignedArduino

src/components/AwesomeArcadeList/Extension/extensionTableOfContents.tsx

@@ -2,6 +2,7 @@ import { Extension } from "@/scripts/FetchListsFromCMS/types";
 import React from "react";
 import Link from "next/link";
 import { smoothScrollHash } from "@/components/Linkable/Header";
+import { AvatarImageRenderer } from "@/components/Blog/Elements";
 
 export function ExtensionTableOfContents({
   list,
@@ -13,6 +14,10 @@ export function ExtensionTableOfContents({
       {list.map((ext) => (
         <li key={ext.repo}>
           <Link href={`#${ext.repo}`} onClick={smoothScrollHash}>
+            <AvatarImageRenderer
+              url={`https://github.com/${ext.author}.png?size=16`}
+              name={ext.author}
+            />{" "}
             {ext.repo}
           </Link>
         </li>

src/components/AwesomeArcadeList/Tool/toolTableOfContents.tsx

@@ -2,6 +2,7 @@ import { Tool } from "@/scripts/FetchListsFromCMS/types";
 import React from "react";
 import Link from "next/link";
 import { smoothScrollHash } from "@/components/Linkable/Header";
+import { AvatarImageRenderer } from "@/components/Blog/Elements";
 
 export function ToolTableOfContents({
   list,
@@ -10,10 +11,14 @@ export function ToolTableOfContents({
 }): React.ReactNode {
   return (
     <ul>
-      {list.map((ext) => (
-        <li key={ext.repo}>
-          <Link href={`#${ext.repo}`} onClick={smoothScrollHash}>
-            {ext.repo}
+      {list.map((tool) => (
+        <li key={tool.repo}>
+          <Link href={`#${tool.repo}`} onClick={smoothScrollHash}>
+            <AvatarImageRenderer
+              url={`https://github.com/${tool.author}.png?size=16`}
+              name={tool.author}
+            />{" "}
+            {tool.repo}
           </Link>
         </li>
       ))}