Merge pull request #44 from saharshy29/add-blog

Add blog with CMS

.eslintrc.json

@@ -36,7 +36,24 @@
     "react/jsx-props-no-spreading": "off",
     "jsx-a11y/anchor-is-valid": "off",
     "react/no-unescaped-entities": "off",
-    "react/jsx-indent": "warn"
+    "react/jsx-indent": "warn",
+    "no-return-await": "off",
+    "no-console": "warn",
+    "array-callback-return": "off",
+    "no-param-reassign": "off",
+    "no-plusplus": "off",
+    "prefer-const": "warn",
+    "prefer-destructuring": [
+      "warn",
+      {
+        "array": false,
+        "object": true
+      },
+      {
+        "enforceForRenamedProperties": false
+      }
+    ],
+    "react/no-danger": "off"
   },
   "ignorePatterns": [
     ".DS_Store",

components/Blog/Featured.module.scss

@@ -0,0 +1,36 @@
+@use 'styles/colors';
+@use 'styles/breakpoints';
+@use 'styles/functions' as *;
+
+$radial-size: 0.75px;
+
+.root {
+  margin: 1em;
+  margin-top: 0;
+  background-image: radial-gradient(colors.$primary $radial-size, transparent $radial-size);
+	background-size: css-calc(10 * $radial-size) css-calc(10 * $radial-size);
+
+	@media (max-width: breakpoints.$tablet) {
+		margin-top: 1em;
+  }
+}
+
+.wrapper {
+	background-color: map-get(colors.$background, primary);
+	transform: translate(20px, -20px);
+	padding-left: 0.5em;
+	padding-bottom: 0.5em;
+	padding-top: 10px;
+}
+
+.icon {
+	font-size: 0.85em;
+}
+
+.posts {
+	margin-top: 0.5em;
+}
+.post + .post {
+	margin-top: 0.75em;
+}
+

components/Blog/Featured.tsx

@@ -0,0 +1,43 @@
+import { useContext } from 'react';
+
+import { FaBookmark } from 'react-icons/fa';
+import FeaturedPost from './FeaturedPost';
+import featured from './Featured.module.scss';
+
+import { PostsContext } from '../../pages/blog/index';
+
+const Featured = () => {
+  const posts = useContext(PostsContext);
+  const featuredPosts = posts
+    .filter((post) => post.featured === true)
+    .sort(() => 0.5 - Math.random())
+    .slice(0, 3);
+
+  featuredPosts.map((post) => {
+    post.tagList = post.tags.map((tag) => tag.name).join(' ');
+  });
+
+  return (
+    <div className={featured.root}>
+      <div className={featured.wrapper}>
+        <h2>
+          <FaBookmark className={featured.icon} /> Featured
+        </h2>
+        <div className={featured.posts}>
+          {featuredPosts.map((post) => (
+            <div className={featured.post}>
+              <FeaturedPost
+                key={post.uuid}
+                slug={post.slug}
+                title={post.title}
+                tags={post.tagList}
+              />
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Featured;

components/Blog/FeaturedPost.module.scss

@@ -0,0 +1,13 @@
+@use 'styles/colors';
+
+.root {
+  font-size: 0.8em;
+
+  p {
+    color: colors.$gray;
+  }
+
+  h3:hover {
+    text-decoration: underline;
+  }
+}

components/Blog/FeaturedPost.tsx

@@ -0,0 +1,18 @@
+import Link from 'next/link';
+
+import styles from './FeaturedPost.module.scss';
+
+const FeaturedPost = (props) => {
+  return (
+    <Link as={`/blog/${props.slug}`} href="/blog/[slug]">
+      <a>
+        <div className={styles.root}>
+          <h3>{props.title}</h3>
+          <p>{props.tags}</p>
+        </div>
+      </a>
+    </Link>
+  );
+};
+
+export default FeaturedPost;

components/Blog/Form.module.scss

@@ -0,0 +1,51 @@
+@use 'styles/colors';
+
+.root {
+  margin-top: 1em;
+  input {
+    background-color: map-get(colors.$background, secondary);
+    padding: 0.5em 1em;
+    width: 100%;
+    color: map-get(colors.$text, primary);
+    border-radius: max(0.3em, 5px);
+    outline: none;
+    border: none;
+    font-size: 1rem;
+
+    &[type='submit'] {
+      color: colors.$white;
+      background-color: colors.$gray;
+      transition: all 0.1s ease-in-out;
+
+      &:hover,
+      &:active {
+        cursor: pointer;
+      }
+
+      &:hover {
+        transform: scale(1.08);
+      }
+
+      &:active {
+        transform: scale(1);
+      }
+    }
+  }
+
+  label {
+    font-size: 0.8rem;
+    padding: 0.25em 1em;
+  }
+}
+
+.group + .group {
+  display: flex;
+  flex-direction: column;
+  margin-top: 0.5em;
+}
+
+.inline {
+  display: grid;
+  grid-template-columns: 7fr 3fr;
+  grid-gap: 0.5em;
+}

components/Blog/Form.tsx

@@ -0,0 +1,22 @@
+import form from './Form.module.scss';
+
+const Form = () => {
+  return (
+    <div className={form.root}>
+      <h2>Newsletter</h2>
+      <div className={form.group}>
+        <input type="email" name="email" placeholder="Email" required />
+        {/* <label>Email</label> */}
+      </div>
+      <div className={form.group}>
+        <div className={form.inline}>
+          <input type="text" name="name" placeholder="First Name" />
+          {/* <label>First Name</label> */}
+          <input type="submit" className={form.btn} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Form;

components/Blog/Header.module.scss

@@ -0,0 +1,17 @@
+@use 'styles/colors';
+@use 'styles/breakpoints';
+
+.root {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  // gap: 1em;
+
+  @media (max-width: breakpoints.$tablet) {
+		display: flex;
+		flex-direction: column;
+  }
+}
+
+.wrapper:nth-of-type(2) {
+  padding-top: 15px;
+}

components/Blog/Header.tsx

@@ -0,0 +1,19 @@
+import header from './Header.module.scss';
+import Form from './Form';
+import Featured from './Featured';
+
+const Header = () => {
+  return (
+    <div className={header.root}>
+      <div className={header.wrapper}>
+        <h1>Thoughts.</h1>
+        <Form />
+      </div>
+      <div className={header.wrapper}>
+        <Featured />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

components/Blog/PostPreview.module.scss

@@ -0,0 +1,20 @@
+@use 'styles/colors';
+
+.root {
+  font-size: 0.8em;
+  max-width: 65ch;
+  margin: 1.5em auto;
+
+  h2:hover {
+    text-decoration: underline;
+  }
+}
+
+.meta {
+  color: colors.$gray;
+}
+
+.icon {
+  font-size: 0.8em;
+  margin-left: 0.25em;
+}

components/Blog/PostPreview.tsx

@@ -0,0 +1,24 @@
+import Link from 'next/link';
+import { FaExternalLinkAlt } from 'react-icons/fa';
+import postPreview from './PostPreview.module.scss';
+
+const PostPreview = (props) => {
+  return (
+    <Link as={`/blog/${props.slug}`} href="/blog/[slug]">
+      <a>
+        <div className={postPreview.root}>
+          <h2>
+            {props.title} <FaExternalLinkAlt className={postPreview.icon} />
+          </h2>
+          <p className={postPreview.meta}>
+            {props.pubDate} | {props.readTime} | {props.tags}
+          </p>
+          <hr />
+          <p>{props.excerpt}</p>
+        </div>
+      </a>
+    </Link>
+  );
+};
+
+export default PostPreview;

components/Post.tsx → components/Copy.tsx

@@ -1,5 +1,5 @@
 import Link from 'next/link';
-import post from './Post.module.scss';
+import post from './Copy.module.scss';
 
 const Post = (props) => {
   return <div className={post.root}>{props.children}</div>;

components/Layouts/Layout.module.scss

@@ -13,6 +13,6 @@
 .contentWrapper {
   padding: 0.5em 1em;
   margin: 0 auto;
+  width: 100%;
   max-width: 65ch;
-  max-width: 750px;
 }

components/Nav.tsx

@@ -12,20 +12,20 @@ const Nav = () => {
           @saharshy29
         </a>
       </div>
-      {/* <div className={nav.group}>
+      <div className={nav.group}>
         <Link href="/">
           <a className={nav.link}>About</a>
         </Link>
-        <Link href="/thoughts">
+        <Link href="/blog">
           <a className={nav.link}>Thoughts</a>
         </Link>
-        <Link href="/projects">
+        {/* <Link href="/projects">
           <a className={nav.link}>Projects</a>
         </Link>
         <Link href="/story">
           <a className={nav.link}>Story</a>
-        </Link>
-      </div> */}
+        </Link> */}
+      </div>
     </div>
   );
 };

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@tryghost/content-api": "^1.4.4",
     "imagemin-optipng": "^8.0.0",
     "next": "9.5.3",
     "next-optimized-images": "^2.6.2",
@@ -17,11 +18,11 @@
     "sass": "^1.26.10"
   },
   "devDependencies": {
-    "@types/node": "^14.6.2",
-    "@types/react": "^16.9.49",
-    "@typescript-eslint/parser": "^3.10.1",
-    "@typescript-eslint/eslint-plugin": "^4.0.0",
-    "eslint": "^7.8.1",
+    "@types/node": "^14.6.0",
+    "@types/react": "^16.9.47",
+    "@typescript-eslint/eslint-plugin": "^3.10.0",
+    "@typescript-eslint/parser": "^3.10.0",
+    "eslint": "^7.7.0",
     "eslint-config-airbnb": "^18.2.0",
     "eslint-config-prettier": "^6.11.0",
     "eslint-plugin-import": "^2.22.0",

pages/api/posts.js

@@ -0,0 +1,22 @@
+import GhostContentAPI from '@tryghost/content-api';
+
+// Create API instance with site credentials
+const api = new GhostContentAPI({
+  url: 'https://shuy.ghost.io',
+  key: '4b1a5b85b966c4f3072ca8b307', // This shouldn't be publicly exposed, but it's not a big deal since it will not work soon enough, and even now, it does not provide access to much.
+  version: 'v3',
+});
+
+export async function getPosts() {
+  return await api.posts
+    .browse({
+      include: 'tags',
+      limit: 'all',
+    })
+    .catch((err) => {
+      // eslint-disable-next-line no-console
+      console.error(err);
+    });
+}
+
+export default getPosts();