feat: updated design for blog and blog details page w dynamic og generation#3625
feat: updated design for blog and blog details page w dynamic og generation#3625adithyaakrishna wants to merge 31 commits intosimstudioai:stagingfrom
Conversation
PR SummaryMedium Risk Overview Overhauls the blog post detail page with a new header (category + tags + share buttons), author cards, related articles, and an optional right-rail table-of-contents driven by generated Adds dynamic sharing/preview infrastructure: a new Updates changelog fetching and UI: introduces Small follow-ups include moving Written by Cursor Bugbot for commit 101a955. This will update automatically on new commits. Configure here. |
|
@adithyaakrishna is attempting to deploy a commit to the Sim Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
Greptile SummaryThis PR is a comprehensive visual redesign of the Sim blog ( Key concerns identified:
Confidence Score: 3/5
Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[User visits /studio] --> B[StudioLayout]
B --> C[StudioSidebar\nserver component]
B --> D[main - children]
C --> C1[getAllPostMeta]
C1 --> C2[Count posts per category\nvia getPrimaryCategory]
C2 --> C3[Render category links\nactiveTag always undefined ⚠️]
D --> E{Route}
E -->|/studio| F[StudioIndex page]
E -->|/studio/slug| G[Article page]
E -->|/studio/og?slug=| H[OG Image route]
F --> F1[StudioHero]
F --> F2[FeaturedGrid\nfeatured posts]
F --> F3[PostGrid\nregular posts]
F2 --> F4[FeaturedLeadCard]
F2 --> F5[PostCard]
G --> G1[AnimatedColorBlocks\nclient animation]
G --> G2[Article MDX content\n+ prose-studio.css]
G --> G3[ArticleSidebar\nauthor / TOC / tags / related]
G --> G4[ShareButtons\nclient component]
H --> H1{slug param?}
H1 -->|No| H2[400 Bad Request]
H1 -->|Yes| H3[getPostBySlug]
H3 -->|Not found| H4[404]
H3 -->|Found| H5[Read font files\nfs.readFile ⚠️ unguarded]
H5 --> H6[ImageResponse\n1200x630 PNG]
G3 --> G3a[TableOfContents\nclient - IntersectionObserver]
Last reviewed commit: 34d3d78 |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
adithyaakrishna
force-pushed
the
feat/studio-pages
branch
from
0be63c5 to
58fc6cd
Compare
adithyaakrishna
force-pushed
the
feat/studio-pages
branch
from
0d97bab to
30ce4ba
Compare
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes and found 3 potential issues.
Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
| export async function getPostMetaBySlug(slug: string): Promise<BlogMeta | null> { | ||
| const meta = await scanFrontmatters() | ||
| return meta.find((m) => m.slug === slug) ?? null | ||
| } |
There was a problem hiding this comment.
OG route exposes draft posts to public
Medium Severity
The new getPostMetaBySlug function searches scanFrontmatters() which includes draft posts, unlike getAllPostMeta() which filters them out. The OG image route at /blog/og?slug=<slug> uses getPostMetaBySlug, so anyone can generate OG images for draft/unpublished posts by guessing the slug, leaking titles, descriptions, and metadata of unpublished content.
Additional Locations (1)
| </div> | ||
| )} | ||
|
|
||
| <ArticleSidebar headings={post.headings ?? []} /> |
There was a problem hiding this comment.
Sidebar renders after main content instead of beside
Medium Severity
The ArticleSidebar is placed after the main content div in the flex container, but the parent uses xl:flex-row. The sidebar has xl:sticky xl:top-[76px] but on XL screens it will appear to the right of the article. Combined with the main content having mx-auto centering and max-w-5xl, the sidebar may be pushed off-screen or misaligned on certain viewport sizes because the main content's flex-grow and mx-auto conflict with the sidebar's expected positioning in a two-column layout.
Additional Locations (1)
| export default async function Page({ params }: { params: Promise<{ slug: string }> }) { | ||
| const { slug } = await params | ||
| const post = await getPostBySlug(slug) | ||
| const [post, related] = await Promise.all([getPostBySlug(slug), getRelatedPosts(slug, 3)]) |
There was a problem hiding this comment.
Removed revalidate may cause stale blog pages
Low Severity
The export const revalidate = 86400 was removed from the blog detail page and revalidate = 3600 from the blog index and author pages. Without explicit revalidation, these pages become fully static after build and won't pick up new or updated blog posts until the next deployment, changing the previous ISR behavior.
Additional Locations (1)
1 participant
Summary
Complete redesign of the blog (/studio) pages with 2 column sidebar layout, redesigned post cards, a 3 column blog detail page and added feature for dynamic og image generation
Fixes #(issue)
Type of Change
Testing
/studio/og?slug=<slug>Checklist
Screenshots/Videos
OG Image:
How it looks:
screen-capture.13.webm