93 lines
3.9 KiB
TypeScript
93 lines
3.9 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";
|
|
import {Link} from "react-router-dom";
|
|
import Blog from "../types/Blog";
|
|
|
|
function SingleBlog() {
|
|
|
|
const [blog, setBlog] = useState<Blog | undefined>(undefined);
|
|
const [blogText, setBlogText] = useState<string>('');
|
|
|
|
useEffect(()=> {
|
|
let blogName = window.location.pathname.split('/').at(-1);
|
|
setBlog(AllBlogs.find(b => b.uri == blogName));
|
|
}, [])
|
|
|
|
useEffect(()=> {
|
|
if(blog === undefined) return;
|
|
fetch(blog.mdfile)
|
|
.then(response => {
|
|
return response.text()
|
|
})
|
|
.then(text => {
|
|
setBlogText(text)
|
|
})
|
|
}, [blog]);
|
|
|
|
return (
|
|
blog === undefined ? <div></div> :
|
|
<div className="Blog" style={{paddingTop: 30}}>
|
|
<h1>{blog.title}</h1>
|
|
<p>{blog.date.toLocaleDateString()}</p>
|
|
<p><Link to={"/blogs"}>Back</Link></p>
|
|
<div style={{width: "100%", display: 'flex', justifyContent: 'center'}}>
|
|
<div className={"d-md-none d-block"} style={{textAlign: "left", margin: 20}}>
|
|
<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>
|
|
)
|
|
}
|
|
}}
|
|
>
|
|
{blogText}
|
|
</ReactMarkdown>
|
|
</div>
|
|
<div className={"d-none d-md-block"} 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>
|
|
)
|
|
}
|
|
}}
|
|
>
|
|
{blogText}
|
|
</ReactMarkdown>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
);
|
|
}
|
|
|
|
export default SingleBlog;
|