add authorDetails template

src/authors-details.js

@@ -1,7 +1,11 @@
 //TODO: data related to each author on the blog posts should be added incrementally here.
 
-module.exports = [
-  {
+module.exports = []
+
+
+/**
+ * Example:
+ * {
     name: "Joel Coutinho",
     title: "Backend Developer @Supertokens",
     image: "https://avatars.githubusercontent.com/u/87567452?v=4",
@@ -22,4 +26,4 @@ module.exports = [
     description:
       "The one major downside of TOTP is that the secret key is stored on both the user’s device and the server. If either of these systems were to be compromised, a malicious actor would now be able to generate codes and have unfettered access to the user’s account.",
   },
-]
+ */

src/components/AuthorCardFooter.jsx

@@ -4,14 +4,11 @@ import authorsDetails from "../authors-details"
 import { Github, Linkedin, Twitter } from "../icons"
 
 export default function AuthorCardFooter({ author }) {
-  if (author === undefined) {
-    return null
-  }
 
   const authorDetails = authorsDetails.find(a => a.name === author)
 
   if (authorDetails === undefined) {
-    return null
+    return <b>Written by the Folks at <a href="https://supertokens.com">SuperTokens</a> — hope you enjoyed!</b>
   }
 
   return (

src/components/AuthorCardTop.jsx

@@ -20,12 +20,12 @@ export default function AuthorCard({ author }) {
       </p>
     )
   }
-  
+
   return (
     <div className="author-card-top-container">
       <img
         src={authorDetails.image}
-        alt="author image"
+        alt="author"
       />
       <div className="author-info">
         <span className="author-name">By {author}</span>

src/components/BlogPostFooter.jsx

@@ -8,7 +8,6 @@ const BlogPostFooter = ({ idSlug , author}) => {
 
   return (
     <footer id={`last_section_${idSlug}`}>
-      <b>Written by the Folks at <a href="https://supertokens.com">SuperTokens</a> — hope you enjoyed!</b>
       <AuthorCardFooter author={author}/>
       <div className="sign-up-banner-content-border">
         <div className="blog-post-sign-up-banner">

src/styles/blog.css

@@ -264,7 +264,7 @@
 
 .author-card-top-container{
   display: flex;
-  justify-content: start;
+  justify-content: flex-start;
   align-items: center;
   gap: 8px;
 
@@ -307,8 +307,8 @@
 
 .author-card-footer-container{
   display: flex;
-  justify-content: start;
-  align-items: start;
+  justify-content: flex-start;
+  align-items: flex-start;
   gap: 23px;
 
   margin: 38px 0px;
@@ -325,7 +325,7 @@
 .author-card-footer-container .author-info{
   display: flex;
   flex-direction: column;
-  justify-content: start;
+  justify-content: flex-start;
   flex-grow: 1;
 
   gap: 8px;