Adds Author details to blogs.

src/authors-details.js

@@ -0,0 +1,29 @@
+//TODO: data related to each author on the blog posts should be added incrementally here.
+
+module.exports = []
+
+
+/**
+ * Example:
+ * {
+    name: "Joel Coutinho",
+    title: "Backend Developer @Supertokens",
+    image: "https://avatars.githubusercontent.com/u/87567452?v=4",
+    socials: [
+      {
+        name: "github",
+        url: "https://github.com/jscyo",
+      },
+      {
+        name: "linkedin",
+        url: "https://github.com/jscyo",
+      },
+      {
+        name: "twitter",
+        url: "https://github.com/jscyo",
+      },
+    ],
+    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

@@ -0,0 +1,53 @@
+import React from "react"
+
+import authorsDetails from "../authors-details"
+import { Github, Linkedin, Twitter } from "../icons"
+
+export default function AuthorCardFooter({ author }) {
+
+  const authorDetails = authorsDetails.find(a => a.name === author)
+
+  if (authorDetails === undefined) {
+    return <b>Written by the Folks at <a href="https://supertokens.com">SuperTokens</a> — hope you enjoyed!</b>
+  }
+
+  return (
+   <>
+    <div className="author-card-footer-container">
+      <img
+        src={authorDetails.image}
+        alt="author image"
+      />
+      <div className="author-info">
+        <span className="author-name">{authorDetails.name}</span>
+        <div className="author-title-socials-container">
+          <span className="author-title">{authorDetails.title}</span>
+          <div className="author-socials">
+            {authorDetails.socials.map(({name, url}) => {
+              return <LinkIcon key={name} name={name} url={url}/>
+            })}
+          </div>
+        </div>
+        <p className="author-description">{authorDetails.description}</p>
+      </div>
+    </div>
+    <p className="hidden-md">{authorDetails.description}</p>
+   </>
+  )
+}
+
+function LinkIcon({name, url}) {
+  let icon = undefined
+  if (name === "github") {
+    icon = <Github />
+  } else if (name === "linkedin") {
+    icon = <Linkedin />
+  } else if (name === "twitter") {
+    icon = <Twitter />
+  }
+  return (
+    <a href={url} target="_blank">
+      {icon}
+    </a>
+  )
+}

src/components/AuthorCardTop.jsx

@@ -0,0 +1,36 @@
+import React from "react"
+
+import authorsDetails from "../authors-details"
+
+export default function AuthorCard({ author }) {
+
+  const authorDetails = authorsDetails.find(a => a.name === author);
+
+  if (authorDetails === undefined) {
+    return (
+      <p
+        style={{
+          fontSize: "16px",
+          fontWeight: "normal",
+          margin: "-16px 0px 32px",
+          color: "#222",
+        }}
+      >
+        By {author}
+      </p>
+    )
+  }
+
+  return (
+    <div className="author-card-top-container">
+      <img
+        src={authorDetails.image}
+        alt="author"
+      />
+      <div className="author-info">
+        <span className="author-name">By {author}</span>
+        <span className="author-title">{authorDetails.title}</span>
+      </div>
+    </div>
+  )
+}

src/components/BlogPostFooter.jsx

@@ -2,12 +2,13 @@ import React from "react";
 
 import STBannerBackdrop from "../images/supertokens-logo-backdrop.png";
 import STBannerTop from "../images/bottom-banner-top-icon.png";
+import AuthorCardFooter from "./AuthorCardFooter";
 
-const BlogPostFooter = ({ idSlug }) => {
+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">
           <img

src/icons/index.jsx

@@ -0,0 +1,59 @@
+import React from "react"
+
+export function Github() {
+    return (
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8.99865 0C6.58203 0.0305992 4.2765 1.01997 2.58912 2.75054C0.901743 4.48111 -0.029315 6.81116 0.000704011 9.22824C-0.0131156 11.1469 0.572462 13.022 1.67568 14.5918C2.7789 16.1615 4.34469 17.3474 6.1544 17.984C6.6043 18.0686 6.76896 17.7842 6.76896 17.5394C6.76896 17.3198 6.76086 16.7402 6.75636 15.9699C4.25313 16.5279 3.72585 14.7333 3.72585 14.7333C3.56369 14.1788 3.20928 13.7002 2.72619 13.3834C1.90917 12.811 2.78827 12.8227 2.78827 12.8227C3.07547 12.8649 3.34913 12.9726 3.58814 13.1374C3.82715 13.3021 4.02511 13.5196 4.16676 13.7731C4.28432 13.9993 4.44641 14.1993 4.64329 14.3612C4.84017 14.5231 5.06778 14.6435 5.3124 14.7152C5.55701 14.7868 5.8136 14.8082 6.0667 14.7781C6.3198 14.7479 6.56418 14.6669 6.78515 14.5398C6.82499 14.0743 7.02725 13.6375 7.35653 13.306C5.35898 13.0729 3.25796 12.2818 3.25796 8.74497C3.24332 7.83244 3.57405 6.94808 4.18385 6.26916C3.90942 5.47208 3.94149 4.60135 4.27382 3.82664C4.27382 3.82664 5.02875 3.57827 6.74826 4.77252C8.22151 4.35864 9.78028 4.35864 11.2535 4.77252C12.9712 3.57827 13.7253 3.82664 13.7253 3.82664C14.0575 4.60137 14.0896 5.47207 13.8152 6.26916C14.4253 6.94789 14.7557 7.83245 14.7402 8.74497C14.7402 12.2899 12.6365 13.0702 10.6318 13.2979C10.8476 13.5242 11.0136 13.7934 11.1188 14.088C11.2241 14.3825 11.2663 14.6959 11.2427 15.0078C11.2427 16.2417 11.2319 17.237 11.2319 17.5394C11.2319 17.786 11.3948 18.0731 11.851 17.9831C13.6593 17.3456 15.2237 16.1595 16.3258 14.5902C17.428 13.021 18.013 11.1468 17.9993 9.22915C18.0293 6.81152 17.0979 4.48097 15.41 2.75018C13.722 1.01939 11.4158 0.0301258 8.99865 0V0Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+
+  export function Linkedin() {
+    return (
+      <svg
+        width="18"
+        height="18"
+        viewBox="0 0 18 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M16.2 0H1.8C1.32305 0.00142445 0.866039 0.191524 0.528781 0.528781C0.191524 0.866039 0.00142445 1.32305 0 1.8L0 16.2C0.00142445 16.677 0.191524 17.134 0.528781 17.4712C0.866039 17.8085 1.32305 17.9986 1.8 18H16.2C16.677 17.9986 17.134 17.8085 17.4712 17.4712C17.8085 17.134 17.9986 16.677 18 16.2V1.8C17.9986 1.32305 17.8085 0.866039 17.4712 0.528781C17.134 0.191524 16.677 0.00142445 16.2 0V0ZM5.4 15.3H2.7V7.2H5.4V15.3ZM4.05 5.67C3.72959 5.67 3.41638 5.57499 3.14998 5.39698C2.88357 5.21897 2.67593 4.96596 2.55332 4.66995C2.4307 4.37393 2.39862 4.0482 2.46113 3.73395C2.52364 3.4197 2.67793 3.13105 2.90449 2.90449C3.13105 2.67793 3.4197 2.52364 3.73395 2.46113C4.0482 2.39862 4.37393 2.4307 4.66995 2.55332C4.96596 2.67593 5.21897 2.88357 5.39698 3.14998C5.57499 3.41638 5.67 3.72959 5.67 4.05C5.67083 4.26297 5.6295 4.47401 5.54838 4.67093C5.46726 4.86785 5.34797 5.04677 5.19737 5.19737C5.04677 5.34797 4.86785 5.46726 4.67093 5.54838C4.47401 5.6295 4.26297 5.67083 4.05 5.67V5.67ZM15.3 15.3H12.6V10.53C12.6 10.172 12.4578 9.82858 12.2046 9.57541C11.9514 9.32223 11.608 9.18 11.25 9.18C10.892 9.18 10.5486 9.32223 10.2954 9.57541C10.0422 9.82858 9.9 10.172 9.9 10.53V15.3H7.2V7.2H9.9V8.28C10.1528 7.91104 10.4874 7.60539 10.8776 7.38685C11.2679 7.16831 11.7033 7.04277 12.15 7.02C12.9823 7.03004 13.7777 7.36514 14.3663 7.95372C14.9549 8.54229 15.29 9.33769 15.3 10.17V15.3Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+  export function Twitter() {
+    return (
+      <svg
+        width="22"
+        height="18"
+        viewBox="0 0 22 18"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M14.6694 0.041972C12.8562 0.277358 11.3705 1.55496 10.8535 3.32347C10.7349 3.72889 10.719 3.86395 10.717 4.48277C10.7157 4.868 10.7314 5.2767 10.7518 5.39099L10.7891 5.59879L10.4858 5.56995C8.30096 5.36215 6.5479 4.81061 4.83688 3.7927C3.6922 3.1117 2.36505 2.00602 1.67898 1.16186C1.54406 0.995835 1.42002 0.859955 1.40338 0.859955C1.31799 0.859955 0.968572 1.75204 0.864176 2.23663C0.76515 2.696 0.790306 3.75425 0.910859 4.20464C1.15932 5.13246 1.47764 5.67492 2.18664 6.37871C2.75907 6.94696 2.75912 6.94759 2.19718 6.84615C1.78729 6.7722 1.27097 6.61328 0.998275 6.4772C0.869207 6.41281 0.754362 6.36939 0.743042 6.38074C0.708647 6.41508 0.820348 7.28905 0.898717 7.59839C1.00074 8.00149 1.39511 8.79315 1.6813 9.16944C1.9791 9.56094 2.39146 9.94168 2.81485 10.2159C3.17235 10.4474 3.81963 10.7396 4.08555 10.7894C4.1795 10.807 4.25637 10.8387 4.25637 10.8599C4.25637 10.9422 3.54451 11.0155 2.96395 10.9932C2.63712 10.9807 2.36969 10.9894 2.36969 11.0127C2.36969 11.1274 2.65013 11.6986 2.87522 12.0424C3.53987 13.0574 4.59727 13.7674 5.81984 14.0195C6.02195 14.0612 6.2693 14.0953 6.36944 14.0953C6.54984 14.0953 6.55066 14.0962 6.45613 14.1879C6.25363 14.3844 5.51299 14.8409 4.95782 15.1115C3.60909 15.7689 2.27589 16.0539 0.706615 16.0205C-0.211566 16.0009 -0.200488 15.9759 0.540442 16.3963C1.98888 17.2181 3.76748 17.7741 5.55222 17.9631C6.24236 18.0361 8.15496 17.9948 8.83794 17.892C12.2648 17.3764 15.1526 15.6563 17.1585 12.936C18.7961 10.7152 19.6951 8.14336 19.7712 5.46161L19.799 4.48417L20.1675 4.19947C20.3703 4.04286 20.7492 3.69309 21.0096 3.42211C21.4716 2.94158 22.0414 2.22725 21.9976 2.18359C21.9856 2.17156 21.8735 2.20552 21.7486 2.25899C21.251 2.47196 19.6287 2.89351 19.5622 2.8271C19.5525 2.81744 19.724 2.66871 19.9433 2.4966C20.4627 2.08901 20.8872 1.5566 21.1957 0.926035C21.3314 0.648576 21.4298 0.409036 21.4145 0.393675C21.3991 0.378362 21.2494 0.441979 21.0817 0.53511C20.4907 0.86324 19.7453 1.14374 18.8712 1.36686L18.562 1.44579L18.3875 1.28165C17.6824 0.618483 16.8364 0.208815 15.8667 0.061052C15.3685 -0.0148339 15.1356 -0.0185532 14.6694 0.041972Z"
+          fill="black"
+        />
+      </svg>
+    )
+  }
+
+

src/styles/blog.css

@@ -262,6 +262,120 @@
   object-fit: cover;
 }
 
+.author-card-top-container{
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 8px;
+
+  padding-bottom: 36px;
+  margin-bottom: 32px;
+  margin-top: 42px;
+  border-bottom: 1px solid #ddd;
+}
+
+.author-card-top-container img{
+  height: 48px;
+  width: 48px;
+  border-radius: 8px;
+
+}
+
+.author-card-top-container .author-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.author-card-top-container .author-info .author-name{
+  color: #222;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.author-card-top-container .author-info .author-title{
+  color: rgb(34 34 34 / 68%);
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.author-card-footer-container{
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+  gap: 23px;
+
+  margin: 38px 0px;
+
+  width: 100%;
+}
+
+.author-card-footer-container img{
+  height: 211px;
+  width: 211px;
+  border-radius: 16px;
+}
+
+.author-card-footer-container .author-info{
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex-grow: 1;
+
+  gap: 8px;
+}
+
+.author-card-footer-container .author-info .author-name{
+  color: #222;
+
+  font-size: 32px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.author-card-footer-container .author-info .author-title-socials-container{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+
+.author-card-footer-container .author-info .author-socials{
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+.author-card-footer-container .author-info .author-title-socials-container .author-title{
+  color: rgb(34 34 34 / 68%);
+
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 300;
+  line-height: normal;
+}
+
+.author-card-footer-container .author-info .author-description{
+  color: #333;
+
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px;
+  margin: 0;
+}
+
+.hidden-md{
+  display: none;
+}
+
 @media screen and (max-width: 768px) {
   .sign-up-banner-content-border {
     width: 100%;
@@ -290,4 +404,37 @@
     -moz-transform: translateY(-20%);
     transform: translateY(-20%);
   }
+  .author-card-footer-container img{
+    height: 107px;
+    width: 107px;
+  }
+
+  .author-card-footer-container .author-info .author-description{
+    display: none;
+  }
+
+  .author-card-footer-container .author-info .author-title-socials-container{
+    flex-direction: column;
+    align-items: start;
+    gap: 14px;
+  }
+
+  .hidden-md{
+    display: block;
+  }
+
+  .author-card-footer-container{
+    margin-bottom: 24px;
+  }
+
+}
+
+@media screen and (max-width: 425px) {
+  .author-card-footer-container .author-info .author-name{
+    font-size: 22px;
+  }
+
+  .author-card-footer-container .author-info .author-title-socials-container .author-title{
+    font-size: 12px;
+  }
 }

src/templates/blog-post.js

@@ -4,6 +4,7 @@ import { withPrefix } from "gatsby"
 
 import Layout from "../components/layout"
 import BlogPostFooter from "../components/BlogPostFooter";
+import AuthorCard from "../components/AuthorCardTop";
 
 const BlogPostTemplate = ({ data, location }) => {
   const post = data.markdownRemark
@@ -57,12 +58,7 @@ const BlogPostTemplate = ({ data, location }) => {
           <p className="blog-date">{post.frontmatter.date}</p>
           <h1 itemProp="headline">{post.frontmatter.title}</h1>
           {post.frontmatter.author && (
-            <p style={{
-              fontSize: "16px",
-              fontWeight: "normal",
-              margin: "-16px 0px 32px",
-              color: "#222",
-            }}>By {post.frontmatter.author}</p>
+           <AuthorCard author={post.frontmatter.author}/>
           )}
         </header>
         <section
@@ -71,6 +67,7 @@ const BlogPostTemplate = ({ data, location }) => {
         />
         <BlogPostFooter
           idSlug={postSlugWithUnderscores}
+          author={post.frontmatter.author}
         />
       </article>
     </Layout>