[site/components][f]: basic tooltip on hover

site/components/Anchor.js

@@ -0,0 +1,25 @@
+import { useState, Fragment } from 'react';
+import { Tooltip } from './Tooltip';
+
+export const Anchor = (props) => {
+  const href = props.href;
+  if (
+    href &&
+    href.indexOf("http://") !== 0 &&
+    href.indexOf("http://") !== 0 &&
+    href.includes(".md")
+  ) {
+    return (
+          <Fragment key={href}>
+            <Tooltip
+              theme="light"
+              mouseEnterDelay="0.5"
+              value={href}
+            >
+              <a {...props} />
+            </Tooltip>
+          </Fragment>
+        );
+  }
+  return <a {...props} />;
+};

site/components/Content.js

@@ -0,0 +1,67 @@
+import { useState, useEffect } from 'react'
+import {unified} from 'unified'
+import rehypeParse from 'rehype-parse'
+import find from 'unist-util-find'
+import {toString} from 'hast-util-to-string'
+
+const textStyles = (theme) => ({
+  padding: '16px 22px',
+  fontSize: '11px',
+  background: theme === 'light' ? '#fff' : '#000',
+})
+
+const display = (data, theme) => {
+  return (
+    <div
+      style={{
+        color: theme === 'light' ? 'rgb(99, 98, 98)' : '#A8A8A8',
+      }}
+    >
+      <div style={textStyles(theme)}>{data}</div>
+      {/* <div style={footer(theme)}>{wikiLogo(theme)}</div> */}
+      {/* {arrow(theme)} */}
+    </div>
+  )
+}
+
+export const Content = (props) => {
+  const [state, setState] = useState({
+    data: "",
+    isLoaded: false,
+  })
+
+  useEffect(async () => {
+    // const path = `/concepts/${props.value}`;
+    // console.log(path)
+    const path = "http://localhost:3000/concepts/bitcoin";
+    fetch(path).then((response) => {
+      if (response.status !== 200) {
+        console.log(`Looks like there was a problem. Status Code: ${response.status}`)
+        return
+      }
+      response.text().then((data) => {
+        const hast = unified().use(rehypeParse).parse(data);
+        console.log(hast)
+        const article = find(hast, (node) => {
+          return node.tagName === "article"
+        })
+        const main = find(article, (node) => {
+          return node.tagName === "main"
+        })
+        const p = find(main, (node) => {
+          return node.tagName === "p"
+        })
+        // console.log(toString(p))
+        setState({
+          data: toString(p),
+          isLoaded: true,
+        })
+      })
+    })
+  }, [])
+
+  const { theme } = props
+  const { data, isLoaded } = state
+
+  return isLoaded ? display(data, theme) : <div />
+}

site/components/MDX.js

@@ -1,12 +1,14 @@
 import Head from 'next/head'
 import ReactPlayer from 'react-player/lazy'
-import { Paragraph } from './Link'
 import { NextSeo } from 'next-seo'
 import siteConfig from "../config/siteConfig"
+import { Paragraph } from './Paragraph'
+import { Anchor } from './Anchor'
 
 const components = {
   Head,
-  p: Paragraph
+  p: Paragraph,
+  a: Anchor
 }
 
 export default function MdxPage({ children, editUrl }) {

site/components/Paragraph.js

@@ -1,4 +1,3 @@
-import Link from "next/link";
 import ReactPlayer from "react-player";
 
 const videoLinks = [

site/components/Tooltip.js

@@ -0,0 +1,32 @@
+import Trigger from 'rc-trigger'
+import { Content } from './Content'
+
+const position = {
+  bottom: {
+    points: ['tc', 'bc'],
+    offset: [0, 10]
+  },
+  right: {
+    points: ['tl', 'tc'],
+    offset: [20, 0]
+  },
+  top: {
+    points: ['bc', 'tc'],
+    offset: [0, -10]
+  }
+}
+
+export const Tooltip = (props) => {
+  const { children, value, theme, mouseEnterDelay = 0.5 } = props;
+  return (
+    <Trigger
+      action={['hover']}
+      popup={<Content theme={theme} value={value} />}
+      mouseEnterDelay={mouseEnterDelay}
+      prefixCls='trigger'
+      popupAlign={position.bottom}
+    >
+    {children}
+    </Trigger>
+  )
+}

site/package.json

@@ -16,19 +16,23 @@
     "@tailwindcss/typography": "^0.5.2",
     "contentlayer": "^0.1.2",
     "gray-matter": "^4.0.3",
+    "hast-util-to-string": "^2.0.0",
     "next": "^12.1.0",
     "next-contentlayer": "^0.1.2",
     "next-seo": "^4.28.1",
     "next-themes": "^0.1.1",
+    "rc-trigger": "^5.2.18",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-player": "^2.10.0",
+    "rehype": "^12.0.1",
     "rehype-autolink-headings": "^6.1.1",
     "rehype-slug": "^5.0.1",
     "remark-gfm": "^3.0.0",
     "remark-slug": "^7.0.0",
     "remark-toc": "^8.0.0",
-    "remark-wiki-link-plus": "^1.0.0"
+    "remark-wiki-link-plus": "^1.0.0",
+    "unist-util-find": "^1.0.2"
   },
   "devDependencies": {
     "autoprefixer": "^10.2.6",

site/styles/global.css

@@ -27,3 +27,15 @@ body {
 .extra-small {
   font-size: 0.50rem;
 }
+
+/* TOOLTIP */
+.trigger {
+  position: absolute;
+  opacity: 1;
+  transition: 0.1s;
+
+}
+.trigger-hidden {
+  opacity: 0;
+  visibility: hidden;
+}