[site/components][f]: definitions preview on hover

site/components/Content.js

@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react'
+import { useRouter } from 'next/router'
 import {unified} from 'unified'
 import rehypeParse from 'rehype-parse'
 import find from 'unist-util-find'
@@ -10,6 +11,7 @@ const textStyles = (theme) => ({
   background: theme === 'light' ? '#fff' : '#000',
 })
 
+
 const display = (data, theme) => {
   return (
     <div
@@ -24,17 +26,31 @@ const display = (data, theme) => {
   )
 }
 
+const getAbsolutePath = ({ currentPath, basePath, relativePath }) => {
+  console.log({ currentPath, basePath, relativePath });
+  const absolutePath = currentPath.slice(1).split("/")
+  absolutePath.pop(); // remove current page name
+  absolutePath.unshift(basePath);
+  absolutePath.push(relativePath);
+  console.log(absolutePath);
+  return absolutePath.join("/");
+}
+
 export const Content = (props) => {
   const [state, setState] = useState({
     data: "",
     isLoaded: false,
   })
 
+  const router = useRouter();
+
   useEffect(async () => {
-    // const path = `/concepts/${props.value}`;
-    // console.log(path)
-    const path = "http://localhost:3000/concepts/bitcoin";
-    fetch(path).then((response) => {
+    const basePath = "http://localhost:3000";
+    const currentPath = router.asPath;
+    const relativePath = props.value.split(".")[0]; // temp remove .md
+    const absolutePath = getAbsolutePath({ currentPath, basePath, relativePath });
+    console.log(absolutePath);
+    fetch(absolutePath).then((response) => {
       if (response.status !== 200) {
         console.log(`Looks like there was a problem. Status Code: ${response.status}`)
         return
@@ -51,7 +67,6 @@ export const Content = (props) => {
         const p = find(main, (node) => {
           return node.tagName === "p"
         })
-        // console.log(toString(p))
         setState({
           data: toString(p),
           isLoaded: true,