[site/components][s]: contentlayer data in tooltip

site/components/Anchor.js

@@ -1,38 +1,21 @@
-import { useRouter } from 'next/router'
-
 import { Tooltip } from './Tooltip';
 import siteConfig from '../config/siteConfig.js'
 
 /**
- * Component for adding previews on hover for specific anchor tags.
- * Note: currently tooltips will be displayed only for anchor tags pointing to concepts.
+ * Component for adding previews on hovering over anchor tags with relative paths
  */
 export const Anchor = (props) => {
-  const { href } = props;
-  const router = useRouter();
-
-  /* Check if the url is relative */
-  const urlIsRelative = (url) => {
-    return href &&
-      href.indexOf("http:") !== 0 &&
-      href.indexOf("https:") !== 0
+  /* Check if the path is relative */
+  const pathIsRelative = (path) => {
+    return path &&
+      path.indexOf("http:") !== 0 &&
+      path.indexOf("https:") !== 0 &&
+      path.indexOf("#") !== 0
   }
 
-  /* Return absolute path to raw markdown content
-   * Note: currently disabled for guide page due to non-standard relative paths in some anchors (TBD) */
-  const getRawMdContentUrl = (url, routerPath) => {
-    if (routerPath === '/guide' || !urlIsRelative(url)) {
-      return null
-    }
-    const currentPageMdUrl = [siteConfig.repoRawContentRoot, routerPath].join("");
-    return new URL(href, currentPageMdUrl).href;
-  }
-
-  const rawMdUrl = getRawMdContentUrl(href, router.asPath);
-
-  if (rawMdUrl && !rawMdUrl.includes("notes") && !rawMdUrl.includes("claims")) {
+  if (pathIsRelative(props.href)) {
     return (
-      <Tooltip {...props} absolutePath={rawMdUrl} render={ tooltipTriggerProps => (
+      <Tooltip {...props} render={ tooltipTriggerProps => (
         <a {...tooltipTriggerProps} />
       )}
       />

site/components/Tooltip.js

@@ -14,13 +14,14 @@ import {
   useRole,
 } from '@floating-ui/react-dom-interactions'
 import { motion, AnimatePresence } from 'framer-motion';
+import { allOtherPages } from 'contentlayer/generated';
 
 import documentExtract from '../utils/documentExtract'
 
 
 const tooltipBoxStyle = (theme) => ({
   height: 'auto',
-  maxWidth: '30rem',
+  maxWidth: '40rem',
   padding: '1rem',
   background: theme === 'light' ? '#fff' : '#000',
   color: theme === 'light' ? 'rgb(99, 98, 98)' : '#A8A8A8',
@@ -29,7 +30,7 @@ const tooltipBoxStyle = (theme) => ({
 })
 
 const tooltipBodyStyle = (theme) => ({
-  maxHeight: '3.6rem',
+  maxHeight: '4.8rem',
   position: 'relative',
   lineHeight: '1.2rem',
   overflow: 'hidden',
@@ -48,7 +49,8 @@ const tooltipArrowStyle = ({ theme, x, y, side }) => ({
   transform: "rotate(45deg)"
 })
 
-export const Tooltip = ({ absolutePath, render, ...props }) => {
+// export const Tooltip = ({ absolutePath, render, ...props }) => {
+export const Tooltip = ({ render, ...props }) => {
   const theme = 'light'; // temporarily hard-coded; light theme tbd in next PR
 
   const arrowRef = useRef(null);
@@ -104,15 +106,25 @@ export const Tooltip = ({ absolutePath, render, ...props }) => {
   const fetchTooltipContent = async () => {
     setTooltipContentLoaded(false);
 
-    const response = await fetch(absolutePath);
-    if (response.status !== 200) {
-      console.log(`Looks like there was a problem. Status Code: ${response.status}`)
-      return
+    let content;
+    // get tooltip content
+    try {
+      // create a temporary anchor tag to convert relative href to absolute path
+      const tempLink = document.createElement("a");
+      tempLink.href = props.href;
+      // not all notes documents are structured so that the first paragraph will be the content summary
+      // TBD check if the docs can be adjusted and if previews for notes are even required
+      if (tempLink.pathname.includes('notes')) {
+        return
+      }
+      const filePath = tempLink.pathname.slice(1) // remove slash from the beginning
+      const page = allOtherPages.find(p => p._raw.sourceFilePath === filePath)
+      content = documentExtract(page.body.raw);
+    } catch {
+      content = 'An error occured...'
     }
-    const md = await response.text();
-    const extract = documentExtract(md);
 
-    setTooltipContent(extract);
+    setTooltipContent(content);
     setTooltipContentLoaded(true);
   }
 

site/styles/global.css

@@ -33,7 +33,7 @@ body {
   content: "";
   position: absolute;
   right: 0;
-  top: 2.4rem; /* multiple of $line-height used on the tooltip body */
+  top: 3.6rem; /* multiple of $line-height used on the tooltip body (defined in tooltipBodyStyle) */
   height: 1.2rem; /* ($top + $height)/$line-height is the number of lines we want to clip tooltip text at*/
   width: 10rem;
   background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 100%);

site/utils/documentExtract.js

@@ -4,7 +4,7 @@ import find from 'unist-util-find'
 import { toString } from 'mdast-util-to-string'
 
 
-// get first paragraph
+// get first paragraph found in the document
 const documentExtract = (md) => {
   const mdast = unified().use(remarkParse).parse(md);
   let paragraph = find(mdast, (node) => node.type === "paragraph");