diff --git a/site/components/Anchor.js b/site/components/Anchor.js
index bcf3960..7a719b3 100644
--- a/site/components/Anchor.js
+++ b/site/components/Anchor.js
@@ -1,25 +1,93 @@
-import { useState, Fragment } from 'react';
-import { Tooltip } from './Tooltip';
+import { useRouter } from 'next/router'
+import { useState, useEffect, Fragment } from 'react'
+import { useFloating, useHover, useInteractions } from '@floating-ui/react-dom-interactions'
+import { unified } from 'unified'
+import rehypeParse from 'rehype-parse'
+import find from 'unist-util-find'
+import { toString } from 'hast-util-to-string'
+
+import { Tooltip } from './Tooltip'
+import getAbsolutePath from '../utils/absolutePath'
+
+
+// TODO cancel request on mouseleave when it hasn't been fulfilled yet
export const Anchor = (props) => {
- const href = props.href;
+ const { href } = props;
+ const router = useRouter();
+ const [ open, setOpen ] = useState(false);
+ const [ loaded, setLoaded ] = useState(false);
+ const [ preview, setPreview ] = useState("");
+ const { x, y, reference, floating, strategy, context } = useFloating({
+ open,
+ onOpenChange: setOpen
+ });
+ const { getReferenceProps, getFloatingProps } = useInteractions([
+ useHover(context, props)
+ ]);
+
+ useEffect(() => {
+ if (open) {
+ fetchPreview();
+ }
+ }, [open])
+
+ const fetchPreview = async () => {
+ setLoaded(false);
+ const basePath = "http://localhost:3000"; // TODO
+ const currentPath = router.asPath;
+ const relativePath = props.href.split(".")[0]; // TBD temp remove .md
+ const absolutePath = getAbsolutePath({ currentPath, basePath, relativePath });
+ console.log(`Fetching: ${absolutePath}`);
+
+ const response = await fetch(absolutePath);
+ if (response.status !== 200) {
+ // TODO
+ console.log(`Looks like there was a problem. Status Code: ${response.status}`)
+ return
+ }
+ const html = await response.text();
+ const hast = unified().use(rehypeParse).parse(html);
+ 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"
+ })
+
+ setPreview(toString(p));
+ setLoaded(true);
+ }
+
if (
href &&
- href.indexOf("http://") !== 0 &&
- href.indexOf("http://") !== 0 &&
+ href.indexOf("http:") !== 0 &&
+ href.indexOf("https:") !== 0 &&
href.includes(".md")
) {
- return (
-
-
-
-
-
- );
+ return
+
+ {open && loaded && (
+ // TODO temp span
+
+ { preview }
+
+ )}
+ ;
}
return ;
};
diff --git a/site/components/Content.js b/site/components/Content.js
deleted file mode 100644
index d809bdf..0000000
--- a/site/components/Content.js
+++ /dev/null
@@ -1,82 +0,0 @@
-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'
-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 (
-
-
{data}
- {/*
{wikiLogo(theme)}
*/}
- {/* {arrow(theme)} */}
-
+
+ { content }
+
+ {/*
{wikiLogo(theme)}
*/}
+ {/* {arrow(theme)} */}
+