feat: Display author photos and bios from Notion#129
Merged
vibemarketerpromax merged 5 commits intomainfrom Feb 25, 2026
Merged
feat: Display author photos and bios from Notion#129vibemarketerpromax merged 5 commits intomainfrom
vibemarketerpromax merged 5 commits intomainfrom
Conversation
- Add cacheAuthorPhoto() to download and cache author images from Notion (same pattern as blog cover caching — handles temporary S3 URLs) - Extract "Author image" file property from Notion database - Create reusable AuthorAvatar component with next/image and gradient initial fallback when no photo exists - Hero section: show author photo + name (no title/bio) - Bottom section: show full author bio with photo, name, title, and social links via BlogAuthorBio component
Deploying website with
|
| Latest commit: |
ceff60f
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://778414c5.website-yiq.pages.dev |
| Branch Preview URL: | https://feat-blog-author-bios.website-yiq.pages.dev |
The m.div with whileInView animation started at opacity: 0 but the intersection observer never fired inside the TracingBeam container, making the entire author bio section invisible. Replaced with a plain div. Also removes the unnecessary "use client" directive since the component no longer uses any client-side APIs.
- AuthorAvatar: wrap Image in div with overflow-hidden for reliable circular clipping in both hero and bio sections - notion-image-cache: detect HEIC/HEIF/TIFF files and convert to JPEG via sharp during build (fixes Shravani's .heic author photo) - tracing-beam: remove h-full from outer container which caused it to stretch beyond content height in the grid layout, creating blank space between article end and "Continue Reading" section
BlogRelatedPosts, BlogCTA, and BlogPostCard used framer-motion's lazy `m` component which requires a `LazyMotion` provider ancestor. The blog post page is a server component with no such provider, so `whileInView` never fired and elements stayed at initial opacity: 0. - BlogRelatedPosts: removed framer-motion animation entirely - BlogCTA: removed framer-motion animation entirely - BlogPostCard: switched from `m` to `motion` (works without LazyMotion)
Use consistent py-16 sm:py-24 for Related Posts and CTA sections, matching the standard pattern used across all other site sections. Remove redundant internal spacing from BlogRelatedPosts.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Author imagefile property from Notion blog database and caches photos locally (same pattern as blog cover images — handles expiring S3 URLs)AuthorAvatarcomponent renders real photo vianext/imagewith gradient-initial fallbackBlogAuthorBiowith photo, name, title, bio, and social linksChanges
lib/notion-image-cache.ts— newcacheAuthorPhoto()function, saves topublic/content/cache/authors/lib/notion-blog.ts— extractsAuthor imageproperty, caches it, passes tomapAuthor()components/blog/BlogAuthorBio.tsx— newAuthorAvatarcomponent, used in both hero and bio sectionsapp/blogs/[slug]/page.tsx— hero usesAuthorAvatarinstead of hardcoded gradient circleTest plan
public/content/cache/authors/NOTION_TOKENset