mirror of
https://github.com/mgerb/mywebsite
synced 2026-01-11 02:12:53 +00:00
New post - more css changes (date)
This commit is contained in:
26
client/assets/scss/Content.scss
Normal file
26
client/assets/scss/Content.scss
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
.Content {
|
||||||
|
flex: 1;
|
||||||
|
.post + .post {
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
.date {
|
||||||
|
display: block;
|
||||||
|
margin: 0;
|
||||||
|
opacity: 0.7;
|
||||||
|
|
||||||
|
@media (min-width: 1200px){
|
||||||
|
position: absolute;
|
||||||
|
width: 7em;
|
||||||
|
text-align: right;
|
||||||
|
margin-left: -9em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intro {
|
||||||
|
margin-bottom: 0.5em;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
max-width: 100%;
|
||||||
|
height: auto;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -1,12 +0,0 @@
|
|||||||
.Preview {
|
|
||||||
.post + .post {
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
.date {
|
|
||||||
margin: 0;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
.intro {
|
|
||||||
margin-bottom: 0.5em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -17,6 +17,7 @@ h5,
|
|||||||
h6 {
|
h6 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
|
line-height: 1em;
|
||||||
}
|
}
|
||||||
p {
|
p {
|
||||||
font-weight: 300;
|
font-weight: 300;
|
||||||
@@ -37,8 +38,13 @@ a {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
code,
|
code,
|
||||||
pre{
|
pre {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
|
}
|
||||||
|
hr {
|
||||||
|
margin: 1em;
|
||||||
|
border: 0;
|
||||||
|
border-top: 1px solid #eee;
|
||||||
}
|
}
|
||||||
.Layout {
|
.Layout {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@@ -59,14 +65,6 @@ pre{
|
|||||||
.Main {
|
.Main {
|
||||||
padding-top: 1em;
|
padding-top: 1em;
|
||||||
}
|
}
|
||||||
.Content {
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
img{
|
|
||||||
width: 100%;
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.Header {
|
.Header {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background: url("../images/header.jpg");
|
background: url("../images/header.jpg");
|
||||||
|
|||||||
@@ -1,7 +1,10 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import {Link} from 'react-router';
|
||||||
import marked from 'marked';
|
import marked from 'marked';
|
||||||
import hljs from 'highlight.js';
|
import hljs from 'highlight.js';
|
||||||
|
|
||||||
|
import '../../assets/scss/Content.scss';
|
||||||
|
|
||||||
const renderer = new marked.Renderer();
|
const renderer = new marked.Renderer();
|
||||||
|
|
||||||
marked.setOptions({
|
marked.setOptions({
|
||||||
@@ -15,7 +18,10 @@ export default class Post extends React.Component{
|
|||||||
|
|
||||||
render(){
|
render(){
|
||||||
return(
|
return(
|
||||||
<div class="Preview" dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
|
<div class="Content">
|
||||||
|
<div dangerouslySetInnerHTML={{__html : marked(this.props.content, {renderer : renderer})}}>
|
||||||
|
</div>
|
||||||
|
<Link to="/" class="link"><i class="fa fa-caret-left" aria-hidden="true"></i> Home</Link>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Link} from 'react-router';
|
import {Link} from 'react-router';
|
||||||
|
|
||||||
import '../../assets/scss/Preview.scss';
|
import '../../assets/scss/Content.scss';
|
||||||
|
|
||||||
export default class Preview extends React.Component{
|
export default class Preview extends React.Component{
|
||||||
|
|
||||||
@@ -17,7 +17,7 @@ export default class Preview extends React.Component{
|
|||||||
<p>{posts[i].intro.toString()}</p>
|
<p>{posts[i].intro.toString()}</p>
|
||||||
<p>
|
<p>
|
||||||
<Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>
|
<Link class="link" to={`/post/${posts[i].category}/${posts[i].filename}`}>
|
||||||
continue reading...
|
continue reading <i class="fa fa-caret-right" aria-hidden="true"></i>
|
||||||
</Link>
|
</Link>
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
@@ -31,7 +31,7 @@ export default class Preview extends React.Component{
|
|||||||
const posts = this.props.posts;
|
const posts = this.props.posts;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div class="Preview">
|
<div class="Content">
|
||||||
{posts.length > 0 ? this.insertPosts(posts): ""}
|
{posts.length > 0 ? this.insertPosts(posts): ""}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -37,10 +37,8 @@ export default class Index extends React.Component {
|
|||||||
<div class="Layout" >
|
<div class="Layout" >
|
||||||
<Header />
|
<Header />
|
||||||
<div class="Main">
|
<div class="Main">
|
||||||
<div class="Content">
|
|
||||||
{typeof this.page === 'undefined' ? <Preview posts={this.props.redux.preview.posts} /> : ""}
|
{typeof this.page === 'undefined' ? <Preview posts={this.props.redux.preview.posts} /> : ""}
|
||||||
{this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
|
{this.page === 'post' ? <Post content={this.props.redux.post}/> : ""}
|
||||||
</div>
|
|
||||||
<Sidebar />
|
<Sidebar />
|
||||||
</div>
|
</div>
|
||||||
<Footer />
|
<Footer />
|
||||||
|
|||||||
@@ -91,33 +91,33 @@ This is just a beginner guide on how to use git for the first time. There are st
|
|||||||
I would like to discuss a few more things about git that I have learned and become familiar with. I am hosting this website on an Ubuntu VPS from Digital Ocean and I rely heavily on git to update and make changes. I've recently added a new "working" branch to my repository. This makes it easier to work on changes while not breaking the master branch. Another branch can be made on github and you can base it off another branch. I started a "working" branch and copied the master branch.
|
I would like to discuss a few more things about git that I have learned and become familiar with. I am hosting this website on an Ubuntu VPS from Digital Ocean and I rely heavily on git to update and make changes. I've recently added a new "working" branch to my repository. This makes it easier to work on changes while not breaking the master branch. Another branch can be made on github and you can base it off another branch. I started a "working" branch and copied the master branch.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$git checkout working
|
$ git checkout working
|
||||||
```
|
```
|
||||||
|
|
||||||
Now, after cloning my repository I can switch to my new working branch with the checkout command. Keep in mind that if I was working on my master branch with uncommited changes, I cannot checkout to another branch without commiting current changes to the master branch. After making new changes to my new "working" branch I can add, commit, and push them to Github. If and when I want to update my master branch I can checkout to my master branch, merge changes with "working" and push changes to Github. The master branch should then be up to date with the "working" branch.
|
Now, after cloning my repository I can switch to my new working branch with the checkout command. Keep in mind that if I was working on my master branch with uncommited changes, I cannot checkout to another branch without commiting current changes to the master branch. After making new changes to my new "working" branch I can add, commit, and push them to Github. If and when I want to update my master branch I can checkout to my master branch, merge changes with "working" and push changes to Github. The master branch should then be up to date with the "working" branch.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$git add -A
|
$ git add -A
|
||||||
$git commit -m "commit message"
|
$ git commit -m "commit message"
|
||||||
$git push origin working
|
$ git push origin working
|
||||||
$git checkout master
|
$ git checkout master
|
||||||
$git merge working
|
$ git merge working
|
||||||
$git push origin master
|
$ git push origin master
|
||||||
```
|
```
|
||||||
|
|
||||||
At any time you can check to see which branch you are working on and if any files have been updated/are ready to commit by using the status command:
|
At any time you can check to see which branch you are working on and if any files have been updated/are ready to commit by using the status command:
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$git status
|
$ git status
|
||||||
```
|
```
|
||||||
|
|
||||||
Now that my changes with "working" are updated on "master" I can pull the changes to my server on Digital Ocean. I sometimes have to log into my server and make minor updates to the code. This can cause merge conflicts with git and I may be unable to pull the master branch. To resolve this issue I must reset the master branch so that I can pull new changes.
|
Now that my changes with "working" are updated on "master" I can pull the changes to my server on Digital Ocean. I sometimes have to log into my server and make minor updates to the code. This can cause merge conflicts with git and I may be unable to pull the master branch. To resolve this issue I must reset the master branch so that I can pull new changes.
|
||||||
|
|
||||||
```bash
|
```bash
|
||||||
$git reset --hard
|
$ git reset --hard
|
||||||
$git pull
|
$ git pull
|
||||||
```
|
```
|
||||||
|
|
||||||
This will reset the branch to the last commit and get rid of any uncommited changes. Only do this if you have not made changes that you want to save. Because it is running on my server, I want to overwrite any changes anyway.
|
This will reset the branch to the last commit and get rid of any uncommited changes. Only do this if you have not made changes that you want to save. Because it is running on my server, I want to overwrite any changes anyway.
|
||||||
|
|
||||||
These are a few more git commands that I have learned since working on this project. As I become more familiar with git I will continue to update this post
|
These are a few more git commands that I have learned since working on this project. As I become more familiar with git I will continue to update this post
|
||||||
|
|||||||
27
posts/Web Stuff/2016-08-25-redoing-website.md
Normal file
27
posts/Web Stuff/2016-08-25-redoing-website.md
Normal file
@@ -0,0 +1,27 @@
|
|||||||
|
# Redoing this website for the third time
|
||||||
|
|
||||||
|
New web technologies never cease to amaze me. Every time I learn a new technology used in the web my mind is blown. Shortly after this happens
|
||||||
|
I discover something newer that is just bigger and better. Because of this, I am always learning, which is awesome!
|
||||||
|
|
||||||
|
***
|
||||||
|
|
||||||
|
## It's been awhile
|
||||||
|
|
||||||
|
It has been quite a long time since I posted anything on this site. Since the last post I've graduated college and started a career as a software engineer.
|
||||||
|
I'm currently mainly working on front end development with AngularJS, which is pretty exciting! I previously used Angular on this site to help myself learn the framework.
|
||||||
|
Angular is pretty great, but I've found a new web framework that I'm absolutely loving so far! It's a framework developed by Facebook called [ReactJS](https://facebook.github.io/react/).
|
||||||
|
|
||||||
|
I've decided to completely redo this site again because I know I can do it better as I learn more and more. Credit for most of my design can be given to [Nikolay](http://nikolay.rocks).
|
||||||
|
I love the simple design that he has come up with on his site. Some of the site is open source, but I am redoing a lot of it to my liking;
|
||||||
|
|
||||||
|
The source code for this site can be found on GitHub [here](https://github.com/mgerb/mywebsite) (currently developing on the react branch);
|
||||||
|
|
||||||
|
Here are some of the core items that I'm using to develop this site:
|
||||||
|
- [Go](https://golang.org/)
|
||||||
|
- [React](https://facebook.github.io/react/)
|
||||||
|
- [Redux](http://redux.js.org/docs/introduction/)
|
||||||
|
- [MongoDB](https://www.mongodb.com/)
|
||||||
|
- [App Engine](https://cloud.google.com/appengine/)
|
||||||
|
|
||||||
|
There are many other tools here and there such as [MarkedJS](https://github.com/chjj/marked) and [HighlightJS](https://highlightjs.org/)
|
||||||
|
that I've also used in the process. I am excited to discuss my thoughts and experiences with many other technologies like this.
|
||||||
Reference in New Issue
Block a user