Authors page UI

[kaushiktak19]

Related Tickets & Documents

No related issue - enhancement to improve author discoverability and page UX consistency.

Description

This update improves the Authors section by adding a search bar, A–Z/Z–A sorting. It also fixes the issue where some authors showed “No posts found” by filtering posts using ppmaAuthorName. The API now supports pagination and includes postId for content fetching.

In this PR revamp of the UI for authors page section is done. Introduced glassmorphism in author cards, search and filter; added a new bacground component and used that. In author cards, included more detailes - total numbe rof posts by author, linkedIn and decription (for ones available). Also, have fixed the 404-page image responsiveness, in this PR (as suggested).

Changes

• Authors index:

  • Added search input and A–Z/Z–A sort with custom dropdown.
  • Styled UI to match “More Stories” layout.
  • Introduced glassmorphism design in author cards, search, and filter elements.
  • Added a new background component to enhance visual depth and consistency.
  • Updated author cards to include more details total number of posts, LinkedIn link and description (where available).
  • For authors data to show in author cards, used static json containing all details available to show; for now.

• Author details:

  • Filtered posts by ppmaAuthorName (supports multi-author strings).
  • Expanded static paths for all authors.

• API:

  • Paginated getAllPosts and included postId.

• fixed the 404-page image responsiveness

Type of Change

• Chore (maintenance, refactoring, tooling updates)
• Bug fix (non-breaking change that fixes an issue)
• New feature (change that adds functionality)
• Breaking Change (may require updates in existing code)
• UI improvement (visual or design changes)
• Performance improvement (optimization or efficiency enhancements)
• Documentation update (changes to README, guides, etc.)
• CI (updates to continuous integration workflows)
• Revert (undo a previous commit or merge)

Testing

• Verified search/sort reset pagination and load more button properly.
• Checked multi-author slug paths resolve correctly.
• Ran npm run build successfully with no errors.

Build check :

Demo

Search & Sort, Load more button

• Before :

• After :

(sorted based on alphabetical order) -

(search funtionality) -

Broken Links

• Before :
  

• After :
  

Environment and Dependencies

• New Dependencies: None
• Configuration Changes: None

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have made corresponding changes to the documentation
• I have added corresponding tests
• I have run the build command to ensure there are no build errors
• My changes have been tested across relevant browsers/devices
• For UI changes, I've included visual evidence of my changes

[amaan-bhati]

Hey @kaushiktak19 I have reviewed the previous code that you added in this pr, can you please also :

1. resolve the merge conflict
2. push all the new code changes as we discussed for the cards here
3. update the hero section in this pr itself

[kaushiktak19]

@amaan-bhati , Changes updates -

Build Check :

Also, have fixed the 404-page image responsiveness, in this PR.

[amaan-bhati]

Hey @kaushiktak19 Update the pr description, summarise everything with the latest changes and the current state of the page. Document the pr properly so that it is easier for the second reviewer to review.

[kaushiktak19]

Hey @kaushiktak19 Update the pr description, summarise everything with the latest changes and the current state of the page. Document the pr properly so that it is easier for the second reviewer to review.

Okay, i will update the PR description.

[amaan-bhati]

Hey @kaushiktak19 I ran this page on local, and have following suggestions for the changes to be made:

• the opacity of the images of the authors in the background should be reduced since it makes it very hard for the user to understand where to focus at the first glance, the background images with too much opacity is distracting.

• responsiveness: in smaller screen sizes, the hero section is not looking good due to: 1. the heading and the description being too small, 2. the font weight being too less for it to pop out and grab user attention at first glance

• in smaller screen sizes, the images of the authors in the background are too loud and has high opacity which makes it very difficukt to read what is written in the hero section, pay attention to the images attached:

• the filering/sorting functionality ui is not properly visible, the text inside it might be difficult to read at times, you can try a darker background for that or maybe a thicker glassmorphic effect for the same.

• take a look at the issues and the warnings listed in the terminal,
  ⚠ The "images.domains" configuration is deprecated. Please use "images.remotePatterns" configuration instead. is because of the recent deprication by nextjs, update the next config file proactively before it breaks in the future, please take a look at the other issues and warnings in the page too.

[amaan-bhati]

Hey @kaushiktak19 Please confirm if you have addressed the last comments on this pr, if yes, please give an update in a comment. Also, take a look at the merge conflicts. Once confirmed, we are good to go for the 2nd review and get this merged.⚡

[amaan-bhati]

Also, i tried running the page on local and ended up getting the following error, adding the screenshot for your refernce, take a look.

[amaan-bhati]

There might be a bunch of hydration errors as well, we should proactively take care of these so that it is easier for the open source contribtors to go throught the same without bumpiong into these issues.

[amaan-bhati]

Hey @kaushiktak19 Please take a look at the conflicts