diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index 92707aa4..928e131c 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -59,6 +59,56 @@ Following are some examples- ![Alt text for the image](./flow.png) ``` +#### Author information for the post. +To add/edit the author information for existing or new author of the blog that needs to be published you need to add necessary information of that author in `src/authors-details.js` and the name property of the author object should match with the author value in frontmatter in your blogs `index.md` file. + +##### Example + +```mdx +--- +title: "What is TOTP and why do you need it?" +date: "2023-11-16" +description: "Time based one-time passwords solve a number of issues that plague traditional authentication methods. In this blog we break down TOTP and why it's so useful." +cover: "totp-why-you-need-it-and-how-it-works.png" +category: "programming" +# this author properties value should exactly match with name property in the author object below. +author: "Joel Coutinho" +--- + +``` + +```js + +module.exports = [ +{ + // This property's value should match with the frontmatter author value. + name: "Joel Coutinho", + jobTitle: "Backend Developer at SuperTokens", + image: "joel.jpeg", + socials: [ + { + name: "github", + url: "https://github.com/jscyo", + }, + { + name: "linkedin", + url: "https://linkedin.com/jscyo", + }, + { + name: "twitter", + url: "https://twitter.com/jscyo", + }, + ], + bio: + "Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis enim consequatur obcaecati, modi facilis nemo. Doloribus quia libero iste autem!", +} +] + +``` + +Finally add a image of the author into `/static/author_images` folder and make sure that the author metatag is added to `/static/blog-seo/config.json` as show in the below [metatags](#meta-tags) example. + + #### SEO for blogs ##### Adding OG images @@ -73,6 +123,7 @@ Meta tags for blog images are picked up from `/static/blog-seo/config.json`, for { "path": "/blog/", "metaTags": [ + "\" /> ", "\" />", "", "\" />", diff --git a/src/authors-details.js b/src/authors-details.js new file mode 100644 index 00000000..8cc76d8e --- /dev/null +++ b/src/authors-details.js @@ -0,0 +1,19 @@ +//TODO: data related to each author on the blog posts should be added incrementally here. + +module.exports = [{ + name: "Joel Coutinho", + jobTitle: "Software Developer at SuperTokens", + image: "joel.png", + socials: [ + { + name: "github", + url: "https://github.com/jscyo", + }, + { + name: "linkedin", + url: "https://in.linkedin.com/in/joel-coutinho-7bbb89143", + }, + ], + bio: + "I am a content writer at SuperTokens. I have also contributed to the SuperTokens core, all the backend SDKs, and the developer docs.", +},] diff --git a/src/components/AuthorCardFooter.jsx b/src/components/AuthorCardFooter.jsx new file mode 100644 index 00000000..fc22f808 --- /dev/null +++ b/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 Written by the Folks at SuperTokens — hope you enjoyed! + } + + return ( + <> +
+ author +
+ {authorDetails.name} +
+ {authorDetails.jobTitle} +
+ {authorDetails.socials.map(({name, url}) => { + return + })} +
+
+

{authorDetails.bio}

+
+
+

{authorDetails.bio}

+ + ) +} + +function LinkIcon({name, url}) { + let icon = undefined + if (name === "github") { + icon = + } else if (name === "linkedin") { + icon = + } else if (name === "twitter") { + icon = + } + return ( + + {icon} + + ) +} diff --git a/src/components/AuthorCardTop.jsx b/src/components/AuthorCardTop.jsx new file mode 100644 index 00000000..ac458045 --- /dev/null +++ b/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 ( +

+ By {author} +

+ ) + } + + return ( +
+ author +
+ By {author} + {authorDetails.jobTitle} +
+
+ ) +} diff --git a/src/components/BlogPostFooter.jsx b/src/components/BlogPostFooter.jsx index 79ad5140..c5f3a76c 100644 --- a/src/components/BlogPostFooter.jsx +++ b/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 (