Skip to content

Commit 1990a5f

Browse files
CodeDeadCodeDead
committed
* Added blog functionality
* Added blog posts * Design changes * Dependency upgrades
1 parent 7abe5cd commit 1990a5f

File tree

103 files changed

+3650
-302
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

103 files changed

+3650
-302
lines changed

‎.eslintignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
.yarn
22
.cache
33
public
4+
gatsby-browser.js
5+
gatsby-ssr.js

‎gatsby-config.js‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ module.exports = {
1212
title: 'CodeDead',
1313
description: 'Solving problems using code',
1414
siteUrl: 'https://codedead.com',
15+
author: 'CodeDead',
1516
github: 'https://github.com/CodeDead',
1617
twitter: 'https://twitter.com/C0DEDEAD',
1718
reddit: 'https://reddit.com/r/CodeDead/',
@@ -25,6 +26,29 @@ module.exports = {
2526
path: path.join(__dirname, 'src', 'images'),
2627
},
2728
},
28-
'gatsby-theme-material-ui', 'gatsby-transformer-sharp', 'gatsby-plugin-sharp',
29+
{
30+
resolve: 'gatsby-source-filesystem',
31+
options: {
32+
name: 'blog',
33+
path: `${__dirname}/src/markdown/blog`,
34+
},
35+
},
36+
{
37+
resolve: 'gatsby-transformer-remark',
38+
options: {
39+
plugins: [
40+
{
41+
resolve: 'gatsby-remark-images',
42+
options: {
43+
maxWidth: 590,
44+
},
45+
},
46+
],
47+
},
48+
},
49+
'gatsby-transformer-remark',
50+
'gatsby-theme-material-ui',
51+
'gatsby-transformer-sharp',
52+
'gatsby-plugin-sharp',
2953
],
3054
};

‎gatsby-node.js‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
const path = require('path');
2+
3+
exports.createPages = async ({ actions, graphql, reporter }) => {
4+
const { createPage } = actions;
5+
const BlogTemplate = path.resolve('./src/templates/BlogTemplate/index.jsx');
6+
7+
const result = await graphql(`{
8+
allMarkdownRemark {
9+
edges {
10+
node {
11+
frontmatter {
12+
path
13+
}
14+
}
15+
}
16+
}
17+
}`);
18+
19+
if (result.errors) {
20+
reporter.panicOnBuild('Error while running GraphQL query!');
21+
return;
22+
}
23+
24+
result.data.allMarkdownRemark.edges.forEach(({ node }) => {
25+
createPage({
26+
path: node.frontmatter.path,
27+
component: BlogTemplate,
28+
context: {},
29+
});
30+
});
31+
};

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,11 @@
1818
"@material-ui/icons": "^4.11.2",
1919
"gatsby": "^2.31.1",
2020
"gatsby-image": "^2.10.0",
21-
"gatsby-plugin-sharp": "^2.13.2",
21+
"gatsby-plugin-sharp": "^2.13.4",
22+
"gatsby-remark-images": "^3.10.0",
2223
"gatsby-source-filesystem": "^2.10.0",
2324
"gatsby-theme-material-ui": "^1.0.13",
25+
"gatsby-transformer-remark": "^2.15.0",
2426
"gatsby-transformer-sharp": "^2.11.0",
2527
"react": "^17.0.1",
2628
"react-dom": "^17.0.1"

‎src/components/Application/index.jsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -16,14 +16,13 @@ const Application = ({ name, description, url }) => {
1616

1717
return (
1818
<Card style={{ height: '100%' }}>
19-
<CardHeader
20-
title={name}
21-
style={{ cursor: 'pointer' }}
22-
onClick={goToUrl}
23-
/>
2419
<CardActionArea
2520
onClick={goToUrl}
21+
style={{ height: '100%' }}
2622
>
23+
<CardHeader
24+
title={name}
25+
/>
2726
<CardContent>
2827
<Typography color="textSecondary" paragraph>
2928
{description}

‎src/components/BlogList/index.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import Grid from '@material-ui/core/Grid';
3+
import BlogPost from '../BlogPost';
4+
5+
const BlogList = ({ blogPosts, style }) => (
6+
<Grid container spacing={2} style={style}>
7+
{blogPosts && blogPosts.map((item) => {
8+
const post = item.node.frontmatter;
9+
return (
10+
<Grid item xs={12} md={12} lg={12} key={post.path}>
11+
<BlogPost
12+
title={post.title}
13+
abstract={post.abstract}
14+
path={post.path}
15+
date={post.date}
16+
/>
17+
</Grid>
18+
);
19+
})}
20+
</Grid>
21+
);
22+
23+
export default BlogList;

‎src/components/BlogPost/index.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
import { navigate } from 'gatsby';
3+
import Card from '@material-ui/core/Card';
4+
import CardActionArea from '@material-ui/core/CardActionArea';
5+
import CardHeader from '@material-ui/core/CardHeader';
6+
import CardContent from '@material-ui/core/CardContent';
7+
import Typography from '@material-ui/core/Typography';
8+
9+
const BlogPost = ({
10+
title, path, abstract, date,
11+
}) => (
12+
<Card>
13+
<CardActionArea onClick={() => navigate(path)}>
14+
<CardHeader title={title} subheader={<i>{date}</i>} />
15+
<CardContent>
16+
<Typography variant="body2" color="textSecondary" component="p">
17+
{abstract}
18+
</Typography>
19+
</CardContent>
20+
</CardActionArea>
21+
</Card>
22+
);
23+
24+
export default BlogPost;

‎src/components/DefaultAppBar/index.jsx‎

Lines changed: 14 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React, { useState } from 'react';
1+
import React, { useContext, useState } from 'react';
22
import { makeStyles } from '@material-ui/core/styles';
33
import AppBar from '@material-ui/core/AppBar';
44
import Toolbar from '@material-ui/core/Toolbar';
@@ -11,6 +11,10 @@ import NavigationDrawer from '../NavigationDrawer';
1111
import GitHubIcon from '../GithubIcon';
1212
import TwitterIcon from '../TwitterIcon';
1313
import FacebookIcon from '../FacebookIcon';
14+
import Brightness5Icon from '@material-ui/icons/Brightness5';
15+
import Brightness7Icon from '@material-ui/icons/Brightness7';
16+
import { MainContext } from '../../contexts/MainContextProvider';
17+
import { setThemeIndex } from '../../reducers/MainReducer/Actions';
1418

1519
const useStyles = makeStyles((theme) => ({
1620
root: {
@@ -27,17 +31,18 @@ const useStyles = makeStyles((theme) => ({
2731
const DefaultAppBar = ({
2832
title, githubUrl, twitterUrl, facebookUrl,
2933
}) => {
34+
const [state, dispatch] = useContext(MainContext);
35+
36+
const { themeIndex } = state;
37+
3038
const classes = useStyles();
3139
const [drawerOpen, setDrawerOpen] = useState(false);
3240

3341
/**
34-
* Open a website
35-
* @param site The website that should be opened
42+
* Change the theme
3643
*/
37-
const openSite = (site) => {
38-
if (site) {
39-
window.open(site, '_blank');
40-
}
44+
const changeTheme = () => {
45+
dispatch(setThemeIndex(themeIndex === 1 ? 0 : 1));
4146
};
4247

4348
return (
@@ -67,20 +72,8 @@ const DefaultAppBar = ({
6772

6873
<div className={classes.title} />
6974

70-
<IconButton color="inherit" onClick={() => openSite(facebookUrl)}>
71-
<SvgIcon>
72-
<FacebookIcon />
73-
</SvgIcon>
74-
</IconButton>
75-
<IconButton color="inherit" onClick={() => openSite(twitterUrl)}>
76-
<SvgIcon>
77-
<TwitterIcon />
78-
</SvgIcon>
79-
</IconButton>
80-
<IconButton color="inherit" onClick={() => openSite(githubUrl)}>
81-
<SvgIcon>
82-
<GitHubIcon />
83-
</SvgIcon>
75+
<IconButton color="inherit" onClick={changeTheme}>
76+
{themeIndex === 1 ? <Brightness5Icon /> : <Brightness7Icon />}
8477
</IconButton>
8578
</Toolbar>
8679
<NavigationDrawer onClose={() => setDrawerOpen(false)} open={drawerOpen} />

‎src/components/Footer/index.jsx‎

Lines changed: 41 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,53 @@
1-
import React, { useContext } from 'react';
1+
import React from 'react';
22
import BottomNavigation from '@material-ui/core/BottomNavigation';
33
import BottomNavigationAction from '@material-ui/core/BottomNavigationAction';
4-
import Brightness7Icon from '@material-ui/icons/Brightness7';
5-
import Brightness5Icon from '@material-ui/icons/Brightness5';
6-
import { MainContext } from '../../contexts/MainContextProvider';
7-
import { setThemeIndex } from '../../reducers/MainReducer/Actions';
8-
9-
const Footer = () => {
10-
const [state, dispatch] = useContext(MainContext);
11-
const currentYear = new Date().getFullYear();
12-
13-
const { themeIndex } = state;
4+
import { SvgIcon } from '@material-ui/core';
5+
import FacebookIcon from '../FacebookIcon';
6+
import TwitterIcon from '../TwitterIcon';
7+
import GitHubIcon from '../GithubIcon';
148

9+
const Footer = ({ facebookUrl, githubUrl, twitterUrl }) => {
1510
/**
16-
* Change the theme
11+
* Open a website
12+
* @param site The website that should be opened
1713
*/
18-
const changeTheme = () => {
19-
dispatch(setThemeIndex(themeIndex === 1 ? 0 : 1));
14+
const openSite = (site) => {
15+
if (site) {
16+
window.open(site, '_blank');
17+
}
2018
};
2119

2220
return (
23-
<BottomNavigation showLabels style={{ marginTop: 20 }}>
24-
<BottomNavigationAction label={`Copyright © ${currentYear} CodeDead`} />
21+
<BottomNavigation
22+
showLabels
23+
style={{ marginTop: 20 }}
24+
>
25+
<BottomNavigationAction
26+
icon={(
27+
<SvgIcon>
28+
<FacebookIcon />
29+
</SvgIcon>
30+
)}
31+
label="Facebook"
32+
onClick={() => openSite(facebookUrl)}
33+
/>
34+
<BottomNavigationAction
35+
icon={(
36+
<SvgIcon>
37+
<TwitterIcon />
38+
</SvgIcon>
39+
)}
40+
label="Twitter"
41+
onClick={() => openSite(twitterUrl)}
42+
/>
2543
<BottomNavigationAction
26-
icon={themeIndex === 0 ? <Brightness5Icon /> : <Brightness7Icon />}
27-
onClick={changeTheme}
44+
icon={(
45+
<SvgIcon>
46+
<GitHubIcon />
47+
</SvgIcon>
48+
)}
49+
label="GitHub"
50+
onClick={() => openSite(githubUrl)}
2851
/>
2952
</BottomNavigation>
3053
);

‎src/components/Layout/index.css‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
code {
2+
background: #f4f4f4;
3+
border: 1px solid #ddd;
4+
border-left: 3px solid #f36d33;
5+
color: #666;
6+
page-break-inside: avoid;
7+
font-family: monospace;
8+
font-size: 15px;
9+
line-height: 1.6;
10+
margin-bottom: 1.6em;
11+
max-width: 100%;
12+
overflow: auto;
13+
padding: 1em 1.5em;
14+
display: block;
15+
word-wrap: break-word;
16+
}

0 commit comments

Comments
 (0)