Create blog

Create blog stream
Create post template
Configured multiple route
Add README file to explain WHAT IS HAPPENING

.prettierrc

@@ -0,0 +1,8 @@
+{
+  "semi": true,
+  "trailingComma": "all",
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 70
+}

package.json

@@ -6,7 +6,7 @@
   "dependencies": {
     "@babel/core": "7.9.0",
     "@material-ui/core": "^4.11.0",
-    "@material-ui/icons": "^4.9.1",
+    "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.56",
     "@material-ui/styles": "^4.10.0",
     "@svgr/webpack": "4.3.3",

src/components/Common/Links/index.js

@@ -18,11 +18,9 @@ const Links = (props) => {
 	const linksData = [
 		{
 			props: {
-				props: {
-					link: '/blog'
-				},
-				title: 'Blog'
-			}
+				link: '/blog'
+			},
+			title: 'Blog'
 		},
 		{
 			props: {

src/components/Layout/index.js

@@ -4,8 +4,6 @@ import { ThemeProvider } from '@material-ui/core/styles';
 import withWidth, { isWidthDown } from '@material-ui/core/withWidth';
 import CssBaseline from '@material-ui/core/CssBaseline';
 
-import Grid from '@material-ui/core/Grid';
-
 import Routes from '../Routes';
 import Header from '../Common/Header';
 import Footer from '../Common/Footer';
@@ -20,11 +18,7 @@ const Layout = (props) => {
 			<BrowserRouter>
 				<Header />
 				<main>
-					<Grid container justify='center'>
-						<Grid item sm={10} xs={11}>
-							<Routes />
-						</Grid>
-					</Grid>
+					<Routes />
 				</main>
 				<Footer />
 				{!isWidthDown('xs', props.width) ? <SocialMedia /> : null}

src/components/Pages/Blog/EntriesSkelleton.js

@@ -0,0 +1,68 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import Grid from '@material-ui/core/Grid';
+import Skeleton from '@material-ui/lab/Skeleton';
+
+import useStyles from './styles';
+
+const EntriesTemplate = ({
+  blogEntries,
+  isLoading
+}) => {
+	const classes = useStyles();
+
+  const entries = blogEntries;
+  let cont = 0;
+
+  const getColSpace = () => {
+    let colSpace = 12;
+
+    if (cont === 0) {
+      colSpace = 12;
+    } else if (cont < 2 || cont > 5) {
+      colSpace = 6;
+    } else {
+      colSpace = 3;
+    }
+
+    if (cont === 7) {
+      cont = 1;
+    }
+
+    cont += 1;
+
+    return colSpace;
+  }
+
+  return entries.map((entry, index) => {
+    console.log(entry.image);
+    return (
+      <Grid key={`blog-entries-key-${index}`} item xs={getColSpace()}>
+        {isLoading ? (
+          <Skeleton
+            animation='wave'
+            variant='rect'
+            width='100%'
+            height={280}
+          />
+        ) : (
+          <NavLink
+            className={classes.entry}
+            exact
+            to={`/blog/${entry.slug}`}
+            style={{
+              backgroundImage: `url(${entry.image})`,
+            }}
+          >
+
+            <h2>{entry.title}</h2>
+            <h3>{entry.author.name}</h3>
+          </NavLink>
+        )}
+      </Grid>
+    );
+  });
+};
+
+export default EntriesTemplate;

src/components/Pages/Blog/README.md

@@ -0,0 +1,3 @@
+**Efra programming BLOG**
+
+This is my blog, the design was inspired by this theme https://partio.golem.io/ on [Ghost Blog](https://ghost.org/themes/?tag=Blog)

src/components/Pages/Blog/index.js

@@ -2,86 +2,29 @@ import React, { useState, useEffect } from 'react';
 
 import Container from '@material-ui/core/Container';
 import Grid from '@material-ui/core/Grid';
-import Skeleton from '@material-ui/lab/Skeleton';
+import EntriesSkelleton from './EntriesSkelleton';
 
-import hero from '../../../assets/images/code-background.jpg';
-import useStyles from './styles';
+// Check how to get last url segment for blog
+
+import { blogEntries } from '../../../constants/blogEntries';
 
 const Blog = () => {
 	const [loadingState, setLoadingState] = useState(true);
-	const [entriesState, setEntriesState] = useState([...Array(7)].map((x) => 0));
-
-	const classes = useStyles();
+	const [ entriesState, setEntriesState ] = useState([...Array(18)].map((x) => ({}) ));
 
 	useEffect(() => {
-		setTimeout(() => {
-			const tempEntries = [...Array(19)].map((x, index) => {
-				return {
-					title: `Example of a title ${index + 1}`,
-					author: `Example of an author ${index + 1}`,
-					image: `url(${hero})`,
-				};
-			});
-
-			setEntriesState(tempEntries);
-			setLoadingState(false);
-		}, 3000);
+		setEntriesState(blogEntries);
+		setLoadingState(false);
 	}, []);
 
-	const EntriesTemplate = () => {
-		let cont = 0;
-		const entries = entriesState;
-
-		return entries.map((entry) => {
-			let cols = 12;
-
-			if (cont === 0) {
-				cols = 12;
-			} else if (cont < 2 || cont > 5) {
-				cols = 6;
-			} else {
-				cols = 3;
-			}
-
-			if (cont === 7) {
-				cont = 1;
-			}
-
-			cont += 1;
-
-			return (
-				<Grid item xs={cols}>
-					{loadingState ? (
-						<Skeleton
-							animation='wave'
-							variant='rect'
-							width='100%'
-							height={280}
-						/>
-					) : (
-						<div
-							className='entry'
-							style={{
-								backgroundImage: entry.image,
-							}}
-						>
-							<h2>{entry.title}</h2>
-							<h3>{entry.author}</h3>
-						</div>
-					)}
-				</Grid>
-			);
-		});
-	};
-
 	return (
-		<section className={classes.root}>
+		<section>
 			<Container maxWidth='lg'>
 				<Grid container spacing={2}>
 					<Grid item xs>
 						<h2>Blog</h2>
 					</Grid>
-					<EntriesTemplate />
+					<EntriesSkelleton blogEntries={entriesState} isLoading={loadingState} />
 				</Grid>
 			</Container>
 		</section>

src/components/Pages/Blog/styles.js

@@ -1,11 +1,10 @@
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
-	root: {
-		'& .entry': {
-			height: 180,
-			padding: theme.spacing(),
-		},
+	entry: {
+		display: 'block',
+		height: 180,
+		padding: theme.spacing(),
 	},
 }));
 

src/components/Pages/Home/index.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import Container from '@material-ui/core/Container';
+import {Container, Grid} from '@material-ui/core';
 
 import HeroSection from './HeroSection';
 import AboutSection from './AboutSection';
@@ -13,15 +13,19 @@ const Home = () => {
 	const classes = useStyles();
 
 	return (
-		<React.Fragment>
-			<Container className={classes.root} maxWidth='md'>
-				<HeroSection />
-				<AboutSection />
-				<WorkedSection />
-				<ProjectsSection />
-				<ContactSection />
-			</Container>
-		</React.Fragment>
+		<>
+			<Grid container justify='center'>
+				<Grid item sm={10} xs={11}>			
+					<Container className={classes.root} maxWidth='md'>
+						<HeroSection />
+						<AboutSection />
+						<WorkedSection />
+						<ProjectsSection />
+						<ContactSection />
+					</Container>
+				</Grid>
+			</Grid>
+		</>
 	);
 };
 

src/components/Pages/Post/Footer.js

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Chip } from '@material-ui/core';
+import useStyles from './styles';
+
+const Footer = ({ category, author }) => {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.footer}>
+      {author && (
+        <div>
+          <figure>
+            {/* Implement link to all posts of this author */}
+            <a href="#efra-link">
+              <img src={author.avatar} alt={author.name} />
+            </a>
+          </figure>
+          <h3>
+            <a href="#efra-link">{author.name}</a>
+          </h3>
+        </div>
+      )}
+      <div>
+        <Chip label={category} />
+      </div>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Pages/Post/Header.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import {Container, Grid, Chip} from '@material-ui/core';
+import useStyle from './styles';
+
+const Header = ({
+  entry
+}) => {
+  const classes = useStyle();
+
+  return (
+    <header className={classes.hero} style={{ backgroundImage: `url(${entry.image})` }}>
+      <Grid container justify='center'>
+				<Grid item sm={10} xs={11}>			
+					<Container maxWidth='md'>
+            <h1>{entry.title}</h1>
+            <div>
+              {entry.author &&
+                <>
+                  <a className={classes.author} href={`mailto:${entry.author.email}`} >{entry.author.name}</a>
+                  <div className={classes.avatar}><img src={entry.author.avatar} alt={`${entry.author.name}`} /></div>
+                </>
+              }
+            </div>
+            <div className={classes.postDetail}>
+              <div>
+                <Chip color="secondary" className="chip" label={entry.category} />
+                <Chip color="secondary" className="chip" label={entry.date} />
+              </div>
+            </div>
+          </Container>
+        </Grid>
+      </Grid>
+    </header>
+  )
+};
+
+export default Header;

src/components/Pages/Post/index.js

@@ -0,0 +1,45 @@
+import React, { useState, useEffect } from 'react';
+import { Container, Grid } from '@material-ui/core';
+import { useParams } from 'react-router';
+import { getPostBySlug } from '../../../constants/blogEntries';
+import useStyle from './styles';
+import Header from './Header';
+import Footer from './Footer';
+import IconButton from '@material-ui/core/IconButton';
+import FacebookIcon from '@material-ui/icons/Facebook';
+import TwitterIcon from '@material-ui/icons/Twitter';
+
+const Post = () => {
+  const slug = useParams();
+  const [entry, setEntry] = useState({});
+  const classes = useStyle();
+
+  useEffect(() => {
+    setEntry(getPostBySlug(slug.slug));
+  }, [slug]);
+
+  return (
+    <>
+      <Header entry={entry} />
+      <main className={classes.body}>
+        <Grid container justify="center">
+          <Grid item sm={10} xs={11}>
+            <Container maxWidth="md">{entry.body}</Container>
+            <aside className={classes.socials}>
+              <IconButton aria-label="Facebook share Button">
+                <FacebookIcon />
+              </IconButton>
+              <IconButton aria-label="Twitter share Button">
+                <TwitterIcon />
+              </IconButton>
+            </aside>
+          </Grid>
+        </Grid>
+      </main>
+      <Footer category={entry.category} author={entry.author} />
+      {/* Add a widget for more posts */}
+    </>
+  );
+};
+
+export default Post;