From df02d3c63733415cf13a17c5819ede3eb8b65d97 Mon Sep 17 00:00:00 2001 From: Chakravarthi Medicharla Date: Wed, 22 Nov 2023 12:00:55 +0530 Subject: [PATCH 01/14] feat: author card --- src/authors-details.js | 14 ++++ src/components/AuthorCardFooter.jsx | 40 ++++++++++ src/components/AuthorCardTop.jsx | 35 +++++++++ src/components/BlogPostFooter.jsx | 4 +- src/styles/blog.css | 109 ++++++++++++++++++++++++++++ src/templates/blog-post.js | 9 +-- 6 files changed, 204 insertions(+), 7 deletions(-) create mode 100644 src/authors-details.js create mode 100644 src/components/AuthorCardFooter.jsx create mode 100644 src/components/AuthorCardTop.jsx diff --git a/src/authors-details.js b/src/authors-details.js new file mode 100644 index 00000000..4fd3cd74 --- /dev/null +++ b/src/authors-details.js @@ -0,0 +1,14 @@ +module.exports = [ + { + name: "Joel Coutinho", + title: "Backend Developer @Supertokens", + image:"https://avatars.githubusercontent.com/u/87567452?v=4", + socials: [ + { + name: "Github", + url: "https://github.com/joel", + }, + ], + 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." + }, +] diff --git a/src/components/AuthorCardFooter.jsx b/src/components/AuthorCardFooter.jsx new file mode 100644 index 00000000..4f70b081 --- /dev/null +++ b/src/components/AuthorCardFooter.jsx @@ -0,0 +1,40 @@ +import React from "react" + +import authorsDetails from "../authors-details"; + +export default function AuthorCardFooter({ author }) { + + if (author === undefined) { + return null + } + + const authorDetails = authorsDetails.find(a => a.name === author) + + if (authorDetails === undefined) { + return null; + } + + return ( +
+ author image +
+ {authorDetails.name} +
+ {authorDetails.title} +
+ {authorDetails.socials.map(s => { + return + })} +
+
+

+ {authorDetails.description} +

+
+
+ ) +} + +function Icon() { + return +} \ No newline at end of file diff --git a/src/components/AuthorCardTop.jsx b/src/components/AuthorCardTop.jsx new file mode 100644 index 00000000..1da736ac --- /dev/null +++ b/src/components/AuthorCardTop.jsx @@ -0,0 +1,35 @@ +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 ( +

+ By {author} +

+ ) + } + return ( +
+ author image +
+ By {author} + {authorDetails.title} +
+
+ ) +} diff --git a/src/components/BlogPostFooter.jsx b/src/components/BlogPostFooter.jsx index 79ad5140..7e2f1849 100644 --- a/src/components/BlogPostFooter.jsx +++ b/src/components/BlogPostFooter.jsx @@ -2,12 +2,14 @@ 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 (