fix(blog): add back unoptimized tag, fix styling #2461

waleedlatif1 · 2025-12-18T23:55:40Z

Summary

add back unoptimized tag bc of sharp incompatibility with nextjs standalone build, fix styling and loading issues

Type of Change

Bug fix

Testing

Tested manually

Checklist

Code follows project style guidelines
Self-reviewed my changes
Tests added/updated and passing
No new warnings introduced
I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

vercel · 2025-12-18T23:55:45Z

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Review	Updated (UTC)
docs	Skipped		Dec 18, 2025 11:55pm

greptile-apps · 2025-12-19T00:05:17Z

Greptile Summary

This PR adds the unoptimized prop to all Next.js Image components in the blog system to resolve sharp incompatibility issues with Next.js standalone builds, along with styling improvements to enhance the blog reading experience.

Key Changes:

Added unoptimized prop to all <Image> components across blog pages and MDX rendering to work around sharp/Next.js standalone build incompatibility
Refactored post grid into separate PostGrid client component with fixed aspect ratio container to prevent layout shift during image loading
Enhanced code block component with copy-to-clipboard functionality and dark-themed header showing language label
Added CSS overrides in globals.css to remove default prose styling (backticks around inline code, underlines on heading anchors)
Fixed anchor link styling to remove underlines and inherit text color
Wrapped code blocks in not-prose div to prevent Tailwind Typography interference
Removed unused getInstanceUrl imports from 4 Salesforce tool files (unrelated cleanup)

Style Guide Violations:

Multiple files use inline style props instead of Tailwind-only classes, violating the project's strict Tailwind-only styling rule
The globals.css file was modified with prose overrides, violating the custom rule that explicitly states to avoid editing globals.css unless absolutely necessary - these should be moved to Tailwind config's typography plugin or local component styles

Confidence Score: 3/5

This PR is functional but violates multiple project style guidelines that should be addressed
The core functionality (adding unoptimized prop to fix build issues) is sound and the enhanced code block features work correctly. However, the PR consistently violates the project's Tailwind-only styling rule by using inline style props throughout mdx.tsx, and it modifies globals.css despite a custom rule explicitly discouraging this. These are style violations rather than functional bugs, but they go against established project standards that help maintain code consistency.
Pay attention to apps/sim/lib/blog/mdx.tsx and apps/sim/app/_styles/globals.css which contain multiple style guideline violations that should be refactored to use Tailwind-only classes

Important Files Changed

Filename	Overview
apps/sim/app/(landing)/studio/post-grid.tsx	New client component with fixed aspect ratio container to prevent layout shift, uses inline style (violates Tailwind-only rule)
apps/sim/app/_styles/globals.css	Added prose styling overrides to remove backticks and underlines from code/links - violates rule against editing globals.css
apps/sim/lib/blog/code.tsx	Enhanced CodeBlock with copy button functionality and dark themed header with language label
apps/sim/lib/blog/mdx.tsx	Added `unoptimized` to images, fixed anchor link styling, added `not-prose` wrapper - contains many inline styles violating Tailwind-only rule

Sequence Diagram

sequenceDiagram
    participant User
    participant Browser
    participant StudioPage as Studio Page (SSR)
    participant PostGrid as PostGrid Component
    participant NextImage as Next.js Image

    User->>Browser: Navigate to /studio
    Browser->>StudioPage: Request blog page
    StudioPage->>StudioPage: getAllPostMeta() - server side
    StudioPage->>PostGrid: Render with posts data
    PostGrid->>PostGrid: Map posts array
    loop Each post (index-based)
        PostGrid->>NextImage: Render image with unoptimized=true
        alt index < 6
            NextImage->>Browser: Load with priority (eager)
        else index >= 6
            NextImage->>Browser: Load with lazy loading
        end
    end
    Browser->>User: Display blog grid

    User->>Browser: Navigate to /studio/[slug]
    Browser->>StudioPage: Request blog post
    StudioPage->>StudioPage: getPostBySlug() - server side
    StudioPage->>NextImage: Render hero image (unoptimized=true, priority)
    StudioPage->>StudioPage: Render MDX content
    Note over StudioPage: MDX components render with unoptimized images
    Browser->>User: Display blog post with enhanced styling

greptile-apps

Additional Comments (7)

apps/sim/lib/blog/mdx.tsx, line 22-24 (link)

style: inline style prop violates Tailwind-only styling rule - use Tailwind classes instead

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 28-30 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 35-37 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 42-44 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 49-51 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 56-61 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)
apps/sim/lib/blog/mdx.tsx, line 87-89 (link)

style: inline style prop violates Tailwind-only styling rule

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)

_{12 files reviewed, 10 comments}

_{Edit Code Review Agent Settings | Greptile}

greptile-apps · 2025-12-19T00:04:35Z

apps/sim/app/(landing)/studio/post-grid.tsx

+                priority={index < 6}
+                loading={index < 6 ? undefined : 'lazy'}
+                fill
+                style={{ objectFit: 'cover' }}


style: inline style prop violates Tailwind-only styling rule

Suggested change

style={{ objectFit: 'cover' }}

className="object-cover"

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/sim/app/(landing)/studio/post-grid.tsx Line: 41:41 Comment: **style:** inline `style` prop violates Tailwind-only styling rule ```suggestion className="object-cover" ``` **Context Used:** Context from `dashboard` - Tailwind CSS and styling conventions ([source](https://app.greptile.com/review/custom-context?memory=e1e9ca56-9819-463f-be67-0d2ba849ec4f)) Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-12-19T00:05:15Z

apps/sim/lib/blog/mdx.tsx

          className={clsx(
-            'rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[0.9em] text-red-600',
+            'rounded bg-gray-100 px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-red-600',
            props.className
          )}
+          style={{ fontWeight: 400 }}
        />


style: inline style prop violates Tailwind-only styling rule - remove the style attribute and keep only Tailwind classes

Suggested change

className={clsx(

'rounded bg-gray-100 px-1.5 py-0.5 font-mono text-[0.9em] text-red-600',

'rounded bg-gray-100 px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-red-600',

props.className

)}

style={{ fontWeight: 400 }}

/>

className={clsx(

'rounded bg-gray-100 px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-red-600',

props.className

)}

Context Used: Context from dashboard - Tailwind CSS and styling conventions (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/sim/lib/blog/mdx.tsx Line: 131:136 Comment: **style:** inline `style` prop violates Tailwind-only styling rule - remove the `style` attribute and keep only Tailwind classes ```suggestion className={clsx( 'rounded bg-gray-100 px-1.5 py-0.5 font-mono font-normal text-[0.9em] text-red-600', props.className )} ``` **Context Used:** Context from `dashboard` - Tailwind CSS and styling conventions ([source](https://app.greptile.com/review/custom-context?memory=e1e9ca56-9819-463f-be67-0d2ba849ec4f)) Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! How can I resolve this? If you propose a fix, please make it concise.

greptile-apps · 2025-12-19T00:05:16Z

apps/sim/app/_styles/globals.css

+
+/**
+ * Remove backticks from inline code in prose (Tailwind Typography default)
+ */
+.prose code::before,
+.prose code::after {
+  content: none !important;
+}
+
+/**
+ * Remove underlines from heading anchor links in prose
+ */
+.prose h1 a,
+.prose h2 a,
+.prose h3 a,
+.prose h4 a,
+.prose h5 a,
+.prose h6 a {
+  text-decoration: none !important;
+  color: inherit !important;
+}


style: violates custom rule to avoid editing globals.css - these styles should be moved to local component files or use Tailwind's prose plugin configuration

The prose customizations should be handled via Tailwind config's typography plugin, not in globals.css:

// In tailwind.config.ts typography: { DEFAULT: { css: { 'code::before': { content: 'none' }, 'code::after': { content: 'none' }, 'h1 a, h2 a, h3 a, h4 a, h5 a, h6 a': { textDecoration: 'none', color: 'inherit' } } } }

Context Used: Context from dashboard - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... (source)

_{Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!}

Prompt To Fix With AI

This is a comment left during a code review. Path: apps/sim/app/_styles/globals.css Line: 762:782 Comment: **style:** violates custom rule to avoid editing `globals.css` - these styles should be moved to local component files or use Tailwind's prose plugin configuration The prose customizations should be handled via Tailwind config's typography plugin, not in globals.css: ``` // In tailwind.config.ts typography: { DEFAULT: { css: { 'code::before': { content: 'none' }, 'code::after': { content: 'none' }, 'h1 a, h2 a, h3 a, h4 a, h5 a, h6 a': { textDecoration: 'none', color: 'inherit' } } } } ``` **Context Used:** Context from `dashboard` - Avoid editing the globals.css file unless absolutely necessary. Move style changes to local componen... ([source](https://app.greptile.com/review/custom-context?memory=c3b5e4b0-6580-4307-83aa-ba28f105b3c4)) Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time! How can I resolve this? If you propose a fix, please make it concise.

fix(blog): add back unoptimized tag, fix styling

fd3f6c0

waleedlatif1 merged commit 90c3c43 into staging Dec 18, 2025
7 checks passed

waleedlatif1 deleted the fix/image branch December 18, 2025 23:55

waleedlatif1 mentioned this pull request Dec 18, 2025

v0.5.35: helm updates, copilot improvements, 404 for docs, salesforce fixes, subflow resize clamping #2455

Merged

greptile-apps bot reviewed Dec 19, 2025

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(blog): add back unoptimized tag, fix styling #2461

fix(blog): add back unoptimized tag, fix styling #2461

Uh oh!

waleedlatif1 commented Dec 18, 2025

Uh oh!

vercel bot commented Dec 18, 2025

Uh oh!

Uh oh!

greptile-apps bot commented Dec 19, 2025

Uh oh!

greptile-apps bot left a comment •

edited

Loading

Uh oh!

greptile-apps bot Dec 19, 2025

Uh oh!

greptile-apps bot Dec 19, 2025

Uh oh!

greptile-apps bot Dec 19, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

fix(blog): add back unoptimized tag, fix styling #2461

fix(blog): add back unoptimized tag, fix styling #2461

Uh oh!

Conversation

waleedlatif1 commented Dec 18, 2025

Summary

Type of Change

Testing

Checklist

Uh oh!

vercel bot commented Dec 18, 2025

Uh oh!

Uh oh!

greptile-apps bot commented Dec 19, 2025

Greptile Summary

Confidence Score: 3/5

Important Files Changed

Sequence Diagram

Uh oh!

greptile-apps bot left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Additional Comments (7)

Uh oh!

greptile-apps bot Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

greptile-apps bot Dec 19, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

greptile-apps bot left a comment •

edited

Loading