introducing projectlearn blog

Xtremilicious · Apr 5, 2020 · 9625b54 · 9625b54
1 parent 8f69ba3
commit 9625b54
Show file tree

Hide file tree

Showing 25 changed files with 902 additions and 296 deletions.
diff --git a/next.config.js b/next.config.js
@@ -6,7 +6,6 @@ const glob = require("glob");
 
 module.exports = (phase, { defaultConfig }) =>
   withImages({
-    exportTrailingSlash: true,
     webpack: function (config) {
       config.module.rules.push({
         test: /\.md$/,

diff --git a/pages/blog/[slug].js b/pages/blog/[slug].js
@@ -1,21 +1,59 @@
-import * as React from "react";
+import React, { useEffect } from "react";
 import matter from "gray-matter";
 import ReactMarkdown from "react-markdown";
 import styled from "styled-components";
+import Head from "next/head";
+import Link from "next/link";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowLeft } from "@fortawesome/free-solid-svg-icons";
+
+import Footer from "../../src/components/Blog/Footer";
 
 const ArticleWrapper = styled.div`
+  margin-bottom: 1vh;
   img {
     max-width: 100%;
   }
+  h2 {
+    border-bottom: 1px solid #f2f2f2;
+    padding-bottom: 0.5rem;
+    width: 100%;
+  }
+  .back {
+    position: absolute;
+    background: #2e2e2e;
+    border-radius: 50%;
+    padding: 2vh;
+    top: 2vw;
+    width: fit-content;
+    border-radius: 2vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    left: 2vw;
+    color: white;
+    font-size: 2vw;
+    cursor: pointer;
+    transition: 0.5s;
+    .back-text {
+      margin-left: 1vh;
+    }
+    :hover {
+      box-shadow: 0 1px 7px rgba(0, 0, 0, 0.05);
+    }
+  }
   .author,
   .date {
     font-weight: normal;
     font-size: 1.5vw;
     margin: 0;
   }
+  .date {
+    font-weight: 200;
+  }
   .blog h1 {
     margin: 0.7rem;
-    font-size: 4vw;
+    font-size: 3.5vw;
   }
   .blog__hero {
     height: 60vh;
@@ -31,7 +69,7 @@ const ArticleWrapper = styled.div`
     padding: 1.5rem 0;
     display: flex;
     flex-direction: column;
-    align-items: center;
+    margin: 0 10%;
   }
   .blog__info h1 {
     margin-bottom: 0.66rem;
@@ -44,8 +82,9 @@ const ArticleWrapper = styled.div`
     width: 80%;
     margin: 0 auto;
     flex-direction: column;
-    align-items: center;
+    align-items: flex-start;
     font-size: 1.35vw;
+    padding-bottom: 2vw;
   }
   .blog__body a {
     padding-bottom: 1.5rem;
@@ -68,6 +107,63 @@ const ArticleWrapper = styled.div`
     margin-bottom: 1.25rem;
     padding-left: 1.45rem;
   }
+  .article-meta {
+    display: flex;
+    align-items: center;
+    margin-left: 3vh;
+  }
+  .author-image {
+    display: flex;
+
+    align-items: center;
+    margin-right: 1vh;
+  }
+  .author-image img {
+    height: 3.7vw;
+    width: 3.7vw;
+    border-radius: 50%;
+    overflow: hidden;
+    object-position: center;
+    object-fit: cover;
+  }
+  .meta-info {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+  }
+  @media only screen and (min-width: 320px) and (max-width: 480px) {
+    margin-bottom: 3vh;
+    .blog__hero {
+      height: 30vh;
+    }
+    .blog__info {
+      margin: 0 5%;
+    }
+    .blog__info h1 {
+      font-size: 7vw;
+      text-align: center;
+    }
+    .blog__info h3 {
+      margin-bottom: 0;
+      font-size: 4vw;
+    }
+    .blog__body {
+      font-size: 4vw;
+    }
+    .back {
+      font-size: 3.5vw;
+      padding: 1.5vh;
+    }
+    .author-image img {
+      height: 9vw;
+      width: 9vw;
+    }
+    .article-meta {
+      margin-top: 2vh;
+      justify-content: center;
+      margin-left: 0vh;
+    }
+  }
 `;
 
 export default function BlogTemplate(props) {
@@ -79,22 +175,53 @@ export default function BlogTemplate(props) {
     return `${day} ${month}, ${year}`;
   }
   const { post } = props;
+
+  useEffect(() => {
+    var links = document.getElementsByTagName("a");
+    var len = links.length;
+
+    for (var i = 0; i < len; i++) {
+      links[i].target = "_blank";
+    }
+  });
+
   return (
-    <ArticleWrapper>
-      <article className="blog">
-        <figure className="blog__hero">
-          <img src={post.frontmatter.hero_image} alt={`blog_hero_${post.frontmatter.title}`} />
-        </figure>
-        <div className="blog__info">
-          <h1>{post.frontmatter.title}</h1>
-          <h2 className="author">{post.frontmatter.author}</h2>
-          <h3 className="date">{reformatDate(post.frontmatter.date)}</h3>
-        </div>
-        <div className="blog__body">
-          <ReactMarkdown source={post.markdownBody} />
-        </div>
-      </article>
-    </ArticleWrapper>
+    <React.Fragment>
+      <Head>
+        <meta name="ProjectLearn" content="Learn Code By Doing Projects" />
+        <title>{`${post.frontmatter.title} | ProjectLearn`}</title>
+        {/* <!--Title--> */}
+      </Head>
+      <ArticleWrapper>
+        <Link href="/blog">
+          <div className="back">
+            <FontAwesomeIcon icon={faArrowLeft} /> <div className="back-text">Back To Home</div>
+          </div>
+        </Link>
+
+        <article className="blog">
+          <figure className="blog__hero">
+            <img src={post.frontmatter.hero_image} alt={`blog_hero_${post.frontmatter.title}`} />
+          </figure>
+          <div className="blog__info">
+            <h1>{post.frontmatter.title}</h1>
+            <div className="article-meta">
+              <div className="author-image">
+                <img src={post.frontmatter.author_image} />
+              </div>
+              <div className="meta-info">
+                <h3 className="author">{post.frontmatter.author}</h3>
+                <h3 className="date">{reformatDate(post.frontmatter.date)}</h3>
+              </div>
+            </div>
+          </div>
+          <div className="blog__body">
+            <ReactMarkdown source={post.markdownBody} />
+          </div>
+        </article>
+      </ArticleWrapper>
+      <Footer />
+    </React.Fragment>
   );
 }
 

diff --git a/pages/blog/index.js b/pages/blog/index.js
@@ -1,19 +1,40 @@
 import matter from "gray-matter";
 import BlogList from "../../src/components/Blog/BlogList";
-import Navbar from "../../src/components/Blog/Navbar";
+import Navbar from "../../src/components/Landing/Navbar";
+import Head from "next/head";
 
 import styled from "styled-components";
 
 const BlogWrapper = styled.div`
-
-`
+  min-height: 100vh;
+  background: #fafafa;
+  padding-bottom: 3vw;
+`;
 
 const Index = (props) => {
   return (
-    <BlogWrapper>
-      <Navbar/>
-      <BlogList allBlogs={props.allBlogs} />
-    </BlogWrapper>
+    <React.Fragment>
+      <Head>
+        <meta name="ProjectLearn" content="Learn Code By Doing Projects" />
+        <meta
+          name="description"
+          content={`Read awesome articles about all things tech. Discover tech facts, opportunites, project tutorials, guides and much more. It also allows you to contribute and publish posts on anything related to tech.`}
+        />
+
+        <meta
+          name="keywords"
+          content={`project, tutorial, learn code by doing, project based learning, learn code free, web development
+      `}
+        />
+
+        <title>ProjectLearn Blog - All Things Tech</title>
+        {/* <!--Title--> */}
+      </Head>
+      <BlogWrapper>
+        <Navbar />
+        <BlogList allBlogs={props.allBlogs} />
+      </BlogWrapper>
+    </React.Fragment>
   );
 };
 

diff --git a/pages/redux.temp b/pages/redux.temp
diff --git a/posts/bali.md b/posts/bali.md
diff --git a/posts/iceland.md b/posts/iceland.md
diff --git a/posts/joshua-tree.md b/posts/joshua-tree.md
diff --git a/posts/mauritius.md b/posts/mauritius.md