Merge pull request #49 from saharshy29/blog-cms

Integrate UI with GhostCMS

.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",
@@ -50,4 +67,4 @@
     ".github/workflows/lint.yml",
     "./tsconfig.json"
   ]
-}
+}

components/Blog/Featured.tsx

@@ -1,25 +1,39 @@
+import { useContext } from 'react';
+
 import { FaBookmark } from 'react-icons/fa';
-import { features } from 'process';
-import featured from './Featured.module.scss';
 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}>
-          <div className={featured.post}>
-            <FeaturedPost />
-          </div>
-          <div className={featured.post}>
-            <FeaturedPost />
-          </div>
-          <div className={featured.post}>
-            <FeaturedPost />
-          </div>
+          {featuredPosts.map((post) => (
+            <div className={featured.post}>
+              <FeaturedPost
+                key={post.uuid}
+                slug={post.slug}
+                title={post.title}
+                tags={post.tagList}
+              />
+            </div>
+          ))}
         </div>
       </div>
     </div>

components/Blog/FeaturedPost.module.scss

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

components/Blog/FeaturedPost.tsx

@@ -1,11 +1,17 @@
+import Link from 'next/link';
+
 import styles from './FeaturedPost.module.scss';
 
-const FeaturedPost = () => {
+const FeaturedPost = (props) => {
   return (
-    <div className={styles.root}>
-      <h3>Lorem ipsum dolor sit amet.</h3>
-      <p>#tag 1 #tag2 #tag3</p>
-    </div>
+    <Link as={`/blog/${props.slug}`} href="/blog/[slug]">
+      <a>
+        <div className={styles.root}>
+          <h3>{props.title}</h3>
+          <p>{props.tags}</p>
+        </div>
+      </a>
+    </Link>
   );
 };
 

components/Blog/PostPreview.module.scss

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

components/Blog/PostPreview.tsx

@@ -1,22 +1,23 @@
+import Link from 'next/link';
+import { FaExternalLinkAlt } from 'react-icons/fa';
 import postPreview from './PostPreview.module.scss';
 
-const PostPreview = () => {
+const PostPreview = (props) => {
   return (
-    <div className={postPreview.root}>
-      <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
-      <p className={postPreview.meta}>Aug 12 | 5 min | #stuff #things #life</p>
-      <hr />
-      <p>
-        Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam
-        beatae nam repellendus ratione expedita possimus, sint dolore
-        necessitatibus quisquam natus, nisi laborum magni sequi placeat ab
-        perferendis, delectus reprehenderit similique ex veritatis illo! Quas
-        voluptates ad exercitationem temporibus quibusdam, corrupti ratione
-        dolorem optio alias. Animi adipisci quidem voluptates officiis provident
-        deleniti officia! Dolor molestiae debitis maxime porro tempora eius
-        architecto.
-      </p>
-    </div>
+    <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>
   );
 };
 

package.json

@@ -8,6 +8,7 @@
     "start": "next start"
   },
   "dependencies": {
+    "@tryghost/content-api": "^1.4.4",
     "imagemin-optipng": "^8.0.0",
     "next": "9.5.2",
     "next-optimized-images": "^2.6.2",

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();

pages/blog/[slug].tsx

@@ -0,0 +1,55 @@
+import { GetStaticProps, GetStaticPaths } from 'next';
+import { useRouter } from 'next/router';
+import Layout from '../../components/Layouts/Layout';
+import Copy from '../../components/Copy';
+
+import { getPosts } from '../api/posts';
+
+const Post = (props) => {
+  const { slug } = useRouter().query;
+  let post = props.posts.filter((p) => p.slug === slug);
+  post = post[0];
+
+  return (
+    <Layout>
+      <h1>{post.title}</h1>
+      <p>{post.tagList}</p>
+      <hr />
+      <Copy>
+        <div dangerouslySetInnerHTML={{ __html: post.html }} />
+      </Copy>
+    </Layout>
+  );
+};
+
+export default Post;
+
+export const getStaticProps = async () => {
+  const posts = await getPosts();
+
+  posts.map((post) => {
+    post.dateFormatted = new Intl.DateTimeFormat('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+    }).format(new Date(post.published_at));
+  });
+
+  posts.map((post) => {
+    post.tagList = post.tags.map((tag) => tag.name).join(' ');
+  });
+
+  return {
+    props: {
+      posts,
+    },
+  };
+};
+
+export async function getStaticPaths() {
+  const posts = await getPosts();
+  return {
+    paths: posts?.map((post) => `/blog/${post.slug}`),
+    fallback: false,
+  };
+}