import matter from 'gray-matter'
import { marked } from 'marked'
import SearchBar from '../../components/SearchBar'
import fs from 'fs'
import path from 'path'
export default function title({frontmatter: {title, date},slug,content}) {
return (
<div className='DISPLAY_Container'>
<SearchBar />
<div className="DISPLAY_Sub_Container">
<h3>{title}</h3>
<p dangerouslySetInnerHTML={{ __html: marked.parse(content)}}></p>
</div>
</div>
)
}
export async function getStaticPaths() {
const files = fs.readdirSync(path.join('posts'))
const paths = files.map((filename) => ({
params: {
slug: filename.replace('.md', ''),
},
}))
return {
paths,
fallback: false,
}
}
export async function getStaticProps({ params: { slug } }) {
const markdownWithMeta = fs.readFileSync(path.join('posts', slug + '.md'), 'utf-8')
const { data:frontmatter,content } = matter(markdownWithMeta)
return {
props: {
frontmatter,
content,
slug
}
}
}
the marked(content) function doesn’t work that well, and when the page is reloaded the content disappears
I am using .md files, and a npm package called marked as can be seen in code.
The styling isn’t that good either, i’d wanna use a better parser if possible and want that content not disappear when the page is reloaded