nickorlow/personal-site
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

design changes and project updates

Browse source
This commit is contained in:
Nicholas Orlowsky 2023-03-21 11:26:01 -05:00
parent 6ad19a8bfa
commit e375cbe23d
21 changed files with 174 additions and 217 deletions
Download patch file Download diff file Expand all files Collapse all files

135
src/pages/SingleBlog.tsx
View file

@ -5,82 +5,87 @@ 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('');
const [blogId, setBlogId] = useState(0);
const [blog, setBlog] = useState<Blog | undefined>(undefined);
const [blogText, setBlogText] = useState<string>('');
useEffect(()=> {
const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString);
setBlogId(parseInt(urlParams.get('id') || ''));
let blogName = window.location.pathname.split('/').at(-1);
setBlog(AllBlogs.find(b => b.uri == blogName));
}, [])
fetch(AllBlogs[blogId].mdfile)
.then(response => {
return response.text()
})
.then(text => {
setBlog(text)
})
useEffect(()=> {
if(blog === undefined) return;
fetch(blog.mdfile)
.then(response => {
return response.text()
})
.then(text => {
setBlogText(text)
})
}, [blog]);
return (
<div className="Blog" style={{paddingTop: 30}}>
<h1>{AllBlogs[blogId].title}</h1>
<p>{AllBlogs[blogId].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>
)
}
}}
>
{blog}
</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>
)
}
}}
>
{blog}
</ReactMarkdown>
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>
</div>
);
}