Skip to content

[UXIT-3731][UI-Filecoin] Create shared MarkdownImage [skip percy]#2140

Open
barbaraperic wants to merge 7 commits intomainfrom
bp/markdown-image-component
Open

[UXIT-3731][UI-Filecoin] Create shared MarkdownImage [skip percy]#2140
barbaraperic wants to merge 7 commits intomainfrom
bp/markdown-image-component

Conversation

@barbaraperic
Copy link
Collaborator

@barbaraperic barbaraperic commented Feb 4, 2026

📝 Description

This PR introduces a new MarkdownImage component in ui-filecoin library, used in MarkdownContent to handle all markdown images through a custom renderer.

Bumped @filecoin-foundation/ui-filecoin to version 0.7.4

🛠️ Key Changes

Configured images with:

  • Fixed container width of 672px
  • 16:9 aspect ratio
  • Quality set to 100
  • Responsive sizing with buildImageSizeProp
  • Rounded corners styling

📸 Screenshots

Screenshot 2026-02-04 at 12 59 35

…downImage component for improved image handling in MarkdownContent. This change enhances the rendering of images with error handling for missing src attributes.
@barbaraperic barbaraperic requested a review from Copilot February 4, 2026 13:11
@barbaraperic barbaraperic self-assigned this Feb 4, 2026
@notion-workspace
Copy link

@vercel
Copy link

vercel bot commented Feb 4, 2026

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

Project Deployment Actions Updated (UTC)
filecoin-site Ready Ready Preview, Comment Feb 5, 2026 2:12pm
3 Skipped Deployments
Project Deployment Actions Updated (UTC)
ffdweb-site Skipped Skipped Feb 5, 2026 2:12pm
filecoin-foundation-site Skipped Skipped Feb 5, 2026 2:12pm
filecoin-foundation-uxit Skipped Skipped Feb 5, 2026 2:12pm

Request Review

Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

This PR introduces a new MarkdownImage component in the ui-filecoin library to handle markdown images with standardized formatting. The component provides consistent image rendering with a fixed 16:9 aspect ratio, optimized quality settings, and responsive sizing.

Changes:

  • Added MarkdownImage component with configurable dimensions (672px × 378px, 16:9 ratio)
  • Integrated custom image renderer into MarkdownContent component
  • Bumped @filecoin-foundation/ui-filecoin package version from 0.7.2 to 0.7.4

Reviewed changes

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.

File Description
packages/ui-filecoin/src/components/Markdown/MarkdownImage.tsx New component for rendering markdown images with standardized sizing and error handling
packages/ui-filecoin/src/components/Markdown/MarkdownContent.tsx Integrated MarkdownImage as custom img renderer
package-lock.json Updated package version references for ui-filecoin dependency

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@vercel vercel bot temporarily deployed to Preview – ffdweb-site February 4, 2026 13:43 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-uxit February 4, 2026 13:43 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-site February 4, 2026 13:43 Inactive
@github-actions github-actions bot added size/S and removed size/S labels Feb 4, 2026
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-uxit February 4, 2026 13:44 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-site February 4, 2026 13:44 Inactive
@vercel vercel bot temporarily deployed to Preview – ffdweb-site February 4, 2026 13:44 Inactive
@github-actions github-actions bot added size/S and removed size/S labels Feb 4, 2026
…ving unnecessary props from the img element.
…dationWeb/filecoin-foundation into bp/markdown-image-component
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-uxit February 4, 2026 14:15 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-site February 4, 2026 14:15 Inactive
@vercel vercel bot temporarily deployed to Preview – ffdweb-site February 4, 2026 14:15 Inactive
@github-actions github-actions bot added size/S and removed size/S labels Feb 4, 2026
@barbaraperic barbaraperic requested a review from Copilot February 4, 2026 14:16
Copy link
Contributor

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull request overview

Copilot reviewed 2 out of 3 changed files in this pull request and generated 3 comments.


💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@barbaraperic barbaraperic marked this pull request as draft February 5, 2026 12:29
…improved image rendering and simplify props in MarkdownContent component by removing unused parameters from the img element.
@vercel vercel bot temporarily deployed to Preview – ffdweb-site February 5, 2026 14:09 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-site February 5, 2026 14:09 Inactive
@vercel vercel bot temporarily deployed to Preview – filecoin-foundation-uxit February 5, 2026 14:09 Inactive
@barbaraperic barbaraperic marked this pull request as ready for review February 5, 2026 14:09
@github-actions github-actions bot added size/S and removed size/S labels Feb 5, 2026
Copy link
Collaborator

@CharlyMartin CharlyMartin left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Barbara, is this missing a changetset to re-publish the package?

import { buildImageSizeProp } from '../../utils/buildImageSizeProp'

const IMAGE_DIMENSIONS = {
containerWidth: 672,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I forgot why we set this value here? Why is it hard-coded to 672?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants