mirror of
https://github.com/mgerb/mywebsite
synced 2026-01-11 18:32:50 +00:00
too many changes - load posts now
This commit is contained in:
@@ -4,9 +4,11 @@ import '../../assets/scss/Footer.scss';
|
||||
|
||||
export default class Footer extends React.Component{
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div class="Footer">Site created and maintained by Mitchell Gerber</div>
|
||||
);
|
||||
}
|
||||
render(){
|
||||
return(
|
||||
<div class="Footer">
|
||||
Site created and maintained by Mitchell Gerber
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
|
||||
export default class Header extends React.Component{
|
||||
|
||||
render(){
|
||||
return(
|
||||
<header class="Header" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<header class="Header" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,11 +1,20 @@
|
||||
import React from 'react';
|
||||
import marked from 'marked';
|
||||
import highlight from 'highlight.js';
|
||||
|
||||
marked.setOptions({
|
||||
header: true,
|
||||
highlight: (code) => {
|
||||
return highlight.highlightAuto(code).value;
|
||||
}
|
||||
});
|
||||
|
||||
export default class Post extends React.Component{
|
||||
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div></div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content)}}>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,39 +1,39 @@
|
||||
import React from 'react';
|
||||
import Link from 'react-router';
|
||||
import {Link} from 'react-router';
|
||||
|
||||
import '../../assets/scss/Preview.scss';
|
||||
|
||||
export default class Preview extends React.Component{
|
||||
|
||||
insertPosts(posts){
|
||||
let elements = [];
|
||||
for (let i in posts){
|
||||
elements.push(
|
||||
<div class="post" key={i}>
|
||||
<div class="date">{posts[i].date}</div>
|
||||
<div class="intro" dangerouslySetInnerHTML={this.decodeHtml(posts[i].title.toString())}></div>
|
||||
<div dangerouslySetInnerHTML={this.decodeHtml(posts[i].intro.toString())}></div>
|
||||
<p><a class="link" href="#">continue reading...</a></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return elements;
|
||||
insertPosts(posts){
|
||||
let elements = [];
|
||||
for (let i in posts){
|
||||
elements.push(
|
||||
<div class="post" key={i}>
|
||||
<div class="date">
|
||||
{posts[i].date}
|
||||
</div>
|
||||
<h2 class="intro" >{posts[i].title.toString()}</h2>
|
||||
<p>{posts[i].intro.toString()}</p>
|
||||
<p>
|
||||
<Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>
|
||||
continue reading...
|
||||
</Link>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
decodeHtml(html) {
|
||||
var txt = document.createElement("textarea");
|
||||
txt.innerHTML = html;
|
||||
return {__html : txt.value};
|
||||
}
|
||||
return elements;
|
||||
}
|
||||
|
||||
render(){
|
||||
const posts = this.props.posts;
|
||||
render(){
|
||||
const posts = this.props.posts;
|
||||
|
||||
return (
|
||||
<div class="Preview">
|
||||
{posts.length > 0 ? this.insertPosts(posts): ""}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<div class="Preview">
|
||||
{posts.length > 0 ? this.insertPosts(posts): ""}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,39 +6,61 @@ import '../../assets/scss/Sidebar.scss';
|
||||
|
||||
export default class Sidebar extends React.Component{
|
||||
|
||||
constructor(){
|
||||
super();
|
||||
constructor(){
|
||||
super();
|
||||
|
||||
this.state = {
|
||||
toggler: ""
|
||||
};
|
||||
this.state = {
|
||||
toggler: ""
|
||||
};
|
||||
|
||||
this.onToggle = this.onToggle.bind(this);
|
||||
}
|
||||
this.onToggle = this.onToggle.bind(this);
|
||||
}
|
||||
|
||||
onToggle(){
|
||||
let temp = this.state.toggler;
|
||||
temp = temp === "open" ? "" : "open";
|
||||
onToggle(){
|
||||
let temp = this.state.toggler;
|
||||
temp = temp === "open" ? "" : "open";
|
||||
|
||||
this.setState({
|
||||
toggler: temp
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
toggler: temp
|
||||
});
|
||||
}
|
||||
|
||||
render(){
|
||||
return(
|
||||
<div class={"Sidebar " + this.state.toggler}>
|
||||
<a onClick={this.onToggle} class="toggler"><i class="fa fa-2x fa-navicon" aria-hidden="true" /></a>
|
||||
<h2>About Me</h2>
|
||||
<img src={me}/>
|
||||
<p>My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.</p>
|
||||
render(){
|
||||
return(
|
||||
<div class={"Sidebar " + this.state.toggler}>
|
||||
<a onClick={this.onToggle} class="toggler">
|
||||
<i
|
||||
class="fa fa-2x fa-navicon"
|
||||
aria-hidden="true" />
|
||||
</a>
|
||||
<h2>
|
||||
About Me
|
||||
</h2>
|
||||
<img src={me}/>
|
||||
<p>
|
||||
My name is Mitchell and I have a passion for software development. I am currently a software engineer and enjoy working on personal projects in my free time.
|
||||
</p>
|
||||
|
||||
<h3>Contact Me</h3>
|
||||
<p><i class="fa fa-envelope" aria-hidden="true"></i><a class="link" href="mailto:mgerb42@gmail.com"> eMail</a></p>
|
||||
<p><i class="fa fa-linkedin-square" aria-hidden="true"></i><a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a></p>
|
||||
<p><i class="fa fa-github" aria-hidden="true"></i><a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a></p>
|
||||
<p><i class="fa fa-wpforms" aria-hidden="true"></i><a href="/resume" class="link"> Resume</a></p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<h3>
|
||||
Contact Me
|
||||
</h3>
|
||||
<p>
|
||||
<i class="fa fa-envelope" aria-hidden="true"></i>
|
||||
<a class="link" href="mailto:mgerb42@gmail.com"> eMail</a>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa fa-linkedin-square" aria-hidden="true"></i>
|
||||
<a class="link" href="https://www.linkedin.com/in/mitchell-gerber-125391b3" target="_blank"> LinkedIn</a>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa fa-github" aria-hidden="true"></i>
|
||||
<a class="link" href="https://github.com/mgerb" target="_blank"> GitHub</a>
|
||||
</p>
|
||||
<p>
|
||||
<i class="fa fa-wpforms" aria-hidden="true"> </i>
|
||||
<a href="/resume" class="link"> Resume</a>
|
||||
</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user