blog: make author name clickable, show description and posts by the author

[shcheklein]

No description provided.

[utkarshsingh99]

Does this mean a new template would have to be added in the src/templates folder additionally?
Since there is no page that has a profile like page.
Also, how should be the design?
I think even a graphql query will be required to fill in the specific posts based on the authors.

[jorgeorpinel]

@utkarshsingh99 as for the technical implementation, that would be the role of whoever takes this issue. Ivan or maybe @rogermparent can probalby give you some quick tips if needed. The design is probably not a big deal initially, once the page exists in a PR, we can worry about that part.

[rogermparent]

Does this mean a new template would have to be added in the src/templates folder additionally?
Since there is no page that has a profile like page.

Yes, I believe so! This template would then be called from onCreatePages and given the ID for the author, where the template can launch a GraphQL query on that ID for whatever data it needs.

Also, how should be the design?

I'm not very good at design, so I can't help you here.

I think even a graphql query will be required to fill in the specific posts based on the authors.

Yes, we have separate author nodes so we just need to use a GraphQL query in the createPages logic to make Author pages, then make links wherever Authors are already present.

The current gatsby-node logic for Authors is at src/gatsby/models/authors where you'd make an onCreatePages file. The GraphIQL tool in gatsby develop can help a lot here in showing you what data is already exposed.

Let me know if you need any help! Most of the schema logic handling stuff related to this was written by me, so I can help you find your way around.

[utkarshsingh99]

My idea is to re-use the Feed component used in the template blog-home.tsx, and pass the Author Name as header, and Description as leadParagraph props.
Please tell me if my approach is correct:

1. I create a blog-authors.tsx, and in src/gatsby/models/authors/createPages.js make a graphql query listing all authors with their posts.
2. I call the blog-authors.tsx file in createPages subsequently.
3. The blog-authors.tsx will be almost exactly like the blog Home template. (maybe some styling to make it look a little different, but the good thing is we can have bigFirst post and ordered pairs for the rest of the posts)
4. The only changes I will need to make in blog-authors.tsx then is in the interface props, to receive the graphql nodes appropriately, and then pass the received posts, pageInfo, author name and description in a component much like BlogHome (/component/Blog/Home) which will in-turn call Feed.

What do you think?
@rogermparent @jorgeorpinel @shcheklein

[rogermparent]

@utkarshsingh99 I think you're mostly right, with a slight exception:

blog-authors.tsx (I'd call it the singular blog-author.tsx, blog-authors.tsx makes it seem an index of authors) will have to diverge a bit from blog-home.tsx because I'd assume we want to show something like a name, social links, and a larger version of the author's avatar over their posts.

That said, something nearly identical to the blog home is a great starting point that we can work from, so I think going with your original plan is a good idea as long as we know it'll be more of a rough draft that we'll all refine together.

With that in mind, don't worry too much about code duplication on your first version of the Author page since the code will probably be easier to change in a rougher state. Let's create the functionality we want now and optimize it before merge.

Good luck!

[utkarshsingh99]

@rogermparent Just wanted to confirm if the graphql query I will be putting in should be fine.
This solution was based on the principle that I wanted to re-use maximum components. Unfortunately, one 1 component is re-used.
I am querying on the AllAuthors schema which will result in:

fragment FeedPost on BlogPost {
  title
  timeToRead
}

fragment AuthorPostList on Author {
  name
  posts {
      nodes {
        ...FeedPost
      }
    }
}

query MyQuery {
  allAuthor {
    nodes {
      ...AuthorPostList
    }
  }
}

The latter one seems to be more reasonable, but it will involve making another new component, and then re-using the Feed/Item component. Is this approach okay?

[rogermparent]

@utkarshsingh99 Sounds reasonable to me! Even if I find an issue with it during review, getting the new page working with whatever schema works is the priority here- especially where it's likely to change soon afterward as we add new features to the Author pages.