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

15
src/pages/Blog.tsx
View file

@ -1,15 +0,0 @@
import React, {useState} from 'react';
import './Home.css';
import Blogs from "../components/blogs/Blogs";
function Blog() {
return (
<div className="Blog" style={{padding: 20}}>
<h1>Blog</h1>
<Blogs/>
</div>
);
}
export default Blog;

25
src/pages/Home.css
View file

@ -20,23 +20,7 @@ html {
background-color: black;
}
/* we do this because scroll snapping is broken on moz://a for some reason */
@supports (-moz-appearance:none){
html {
scroll-snap-type: none !important;
}
}
/* mobile won't play with snapping too well so we need to make it prox not mandatory */
@media only screen and (max-width: 600px) {
html {
scroll-snap-type: none !important;
}
.child {
scroll-snap-align: none !important;
}
}
h1 {
font-weight: bolder;
@ -154,15 +138,6 @@ ul {
}
html {
scroll-snap-type: y proximity;
}
.child {
scroll-snap-align: center;
}
.pfp {
border-radius: 100%;
width: 25%

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>
);
}