83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
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 (
|
|
<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>
|
|
)
|
|
}
|
|
|
|
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 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
|
|
}
|
|
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"
|
|
})
|
|
setState({
|
|
data: toString(p),
|
|
isLoaded: true,
|
|
})
|
|
})
|
|
})
|
|
}, [])
|
|
|
|
const { theme } = props
|
|
const { data, isLoaded } = state
|
|
|
|
return isLoaded ? display(data, theme) : <div />
|
|
}
|