62 lines
2.3 KiB
TypeScript
62 lines
2.3 KiB
TypeScript
import React, {useEffect, useState} from 'react';
|
|
import './Home.css';
|
|
import ReactMarkdown from 'react-markdown'
|
|
import {AllBlogs} from "../static/data/Blogs";
|
|
import {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
|
|
import {a11yDark as theme} from "react-syntax-highlighter/dist/esm/styles/prism";
|
|
|
|
function SingleBlog() {
|
|
|
|
const [blog, setBlog] = useState('');
|
|
const [blogId, setBlogId] = useState(0);
|
|
|
|
useEffect(()=> {
|
|
const queryString = window.location.search;
|
|
const urlParams = new URLSearchParams(queryString);
|
|
setBlogId(parseInt(urlParams.get('id') || ''));
|
|
}, [])
|
|
|
|
fetch(AllBlogs[blogId].mdfile)
|
|
.then(response => {
|
|
return response.text()
|
|
})
|
|
.then(text => {
|
|
setBlog(text)
|
|
})
|
|
|
|
return (
|
|
<div className="Blog" style={{padding: 20}}>
|
|
<h1>{AllBlogs[blogId].title}</h1>
|
|
<p>{AllBlogs[blogId].date.toLocaleDateString()}</p>
|
|
<p><a href={"/"}>Return Home</a> | <a href={"/blogs"}>All Blogs</a></p>
|
|
<div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
|
|
<div style={{textAlign: "left", margin: 20, maxWidth: "80vw"}}>
|
|
<ReactMarkdown
|
|
components={{
|
|
code({node, inline, className, children, ...props}) {
|
|
const match = /language-(\w+)/.exec(className || '')
|
|
return !inline && match ? (
|
|
<SyntaxHighlighter
|
|
children={String(children).replace(/\n$/, '')}
|
|
style={theme}
|
|
language={match[1]}
|
|
PreTag="div"
|
|
{...props}
|
|
/>
|
|
) : (
|
|
<code className={className} {...props}>
|
|
{children}
|
|
</code>
|
|
)
|
|
}
|
|
}}
|
|
>
|
|
{blog}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default SingleBlog;
|