fix(error keys) | feature(added links for refernce)

Components/Toc.js

@@ -2,20 +2,14 @@ import React, { useEffect, useState } from "react";
 import Link from "next/link";
 
 function Toc({ headings }) {
-  // useEffect(() => {
-  //   const title = document.querySelectorAll("h2, h3");
-  //   console.log(title);
-  // }, []);
-
   const [active, setActive] = useState("");
-  // console.log(active);
 
   return (
     <nav className="sticky top-32 overflow-auto toc-inner">
       <ul>
         {headings.map((heading, index) => (
           <li
-            key={heading.id}
+            key={heading.uid}
             className="mt-4 text-lg text-gray-700 dark:text-gray-400"
             style={{
               paddingLeft: heading.level === 3 ? "1rem" : "",

Lib/GetHeadings.js

@@ -7,8 +7,13 @@ export async function getHeadings(source) {
 
   // Transform the string '## Some text' into an object
   // with the shape '{ text: 'Some text', level: 2 }'
+
+  let uid = 1000;
   return headingLines.map((raw) => {
-    const text = raw.replace(/^###*\s/, "").replace(/ *\{[^)]*\} */g, "").trim();
+    const text = raw
+      .replace(/^###*\s/, "")
+      .replace(/ *\{[^)]*\} */g, "")
+      .trim();
     // I only care about h2 and h3.
     // If I wanted more levels, I'd need to count the
     // number of #s.
@@ -19,7 +24,7 @@ export async function getHeadings(source) {
       .join("-");
 
     const level = raw.slice(0, 3) === "###" ? 3 : 2;
-
-    return { text, level, id };
+    uid++;
+    return { text, level, id, uid };
   });
 }

_content/BL-1002.md

@@ -111,4 +111,4 @@ return <div>{data}</div>;
 
 **References:**
 
-- Next.js:- https://nextjs.org/docs/getting-started
+- <a href="https://nextjs.org/docs/getting-started" target="_blank">Next.js</a>

_content/BL-1005.md

@@ -139,5 +139,5 @@ fun();
 
 **References:**
 
-- JavaScript Promise Tutorial:- https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/
-- Async/Await:- https://www.w3schools.com/js/js_async.asp
+- <a href="https://www.freecodecamp.org/news/javascript-promise-tutorial-how-to-resolve-or-reject-promises-in-js/" target="_blank">JavaScript Promise Tutorial</a>
+- <a href="https://www.w3schools.com/js/js_async.asp" target="_blank">Async/Await</a>

_content/BL-1008.md

@@ -120,4 +120,4 @@ All `thenable` callbacks of the promise are called first, then the setTimeout ca
 
 **References:**
 
-- Event Loop:- https://towardsdev.com/event-loop-in-javascript-672c07618dc9
+- <a href="https://towardsdev.com/event-loop-in-javascript-672c07618dc9" target="_blank">Event Loop</a>

_content/BL-1010.md

@@ -240,5 +240,5 @@ componentWillUnmount() {
 
 **References:**
 
-- React Lifecycle Methods A Deep Dive:- https://programmingwithmosh.com/javascript/react-lifecycle-methods/
-- React lifecycle methods: An approachable tutorial with examples:- https://blog.logrocket.com/react-lifecycle-methods-tutorial-examples
+- <a href="https://programmingwithmosh.com/javascript/react-lifecycle-methods" target="_blank">React Lifecycle Methods- A Deep Dive</a>
+- <a href="https://blog.logrocket.com/react-lifecycle-methods-tutorial-examples" target="_blank">React lifecycle methods: An approachable tutorial with examples</a>