68 lines
1.7 KiB
JavaScript
68 lines
1.7 KiB
JavaScript
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 />
|
|
}
|