feat: Implement Open Graph image resolution logic #15335
Merged
Conversation
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
- Added a helper function to resolve Open Graph image URLs based on various conditions, including manual overrides and fallback mechanisms. - Integrated the new function into the metadata generation process to prioritize custom images, the first image from content, or a default image. - Introduced a new remark plugin to extract the first image from markdown content for use in Open Graph metadata. - Updated frontmatter type definitions to include an optional `og_image` field for custom Open Graph images.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
…age field - Moved the firstImage property to the end of the SlugFile type definition for better organization. - Updated the remarkExtractFirstImage function to return undefined when no image is found, improving clarity in the image extraction logic.
Bundle ReportChanges will increase total bundle size by 126.24kB (0.54%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: sentry-docs-server-cjsAssets Changed:
Files in
App Routes Affected:
view changes for bundle: sentry-docs-client-array-pushAssets Changed:
|
- Added directory existence check for mdx-images to prevent errors when accessing images. - Improved error handling and logging for image resolution failures. - Updated asset caching logic to handle Vercel deployment scenarios, ensuring images are correctly managed in read-only environments. - Enhanced overall robustness of the image resolution process by returning null when images are not found, allowing for fallback to default images.
- Refactored the `resolveOgImageUrl` function to remove asynchronous operations, improving performance and clarity. - Updated the logic to handle image paths more efficiently, ensuring that fallback mechanisms are in place when images are not found. - Enhanced the integration of the image resolution function within the metadata generation process, streamlining the handling of custom and default images.
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Changed the way metafile is accessed in the getFileBySlug function to ensure type safety by casting the result to 'any'. - Improved clarity by defining the metafile structure explicitly, enhancing maintainability and reducing potential runtime errors.
…eBySlug function - Enhanced the logic to detect Vercel and AWS Lambda environments, ensuring proper usage of the /tmp directory to avoid read-only file system errors. - Updated comments for clarity regarding the deployment scenarios and the handling of output directories.
and add a script to copy images into the public folder
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
- Updated the logic to always use the public/mdx-images directory during build, removing the conditional checks for Vercel and AWS Lambda environments. - Improved comments for clarity regarding directory creation and asset copying, ensuring that images are assumed to exist from build time. - Streamlined cache checking logic by removing unnecessary runtime checks, enhancing maintainability.
- Introduced a README file in the public/og-images directory to document the generation and usage of Open Graph images. - Updated the addOgImageToFile function to always copy the source image, ensuring that images are regenerated on each build, even if frontmatter already exists. - Enhanced error handling to track and report any image copy errors during the generation process.
- Added 'public/og-images/**/*' to the outputFileTracingExcludes for both '/platform-redirect' and sitemap.xml paths, ensuring proper handling of Open Graph images during the build process.
|
|
||
| // Simple regex to find markdown images  | ||
| const IMAGE_REGEX = /!\[([^\]]*)\]\(([^)]+)\)/; | ||
|
|
There was a problem hiding this comment.
Bug: Regex Fails with Parentheses in Image Paths
The IMAGE_REGEX in add-og-images.ts uses [^)]+ to capture image paths, which stops at the first closing parenthesis. This causes image paths containing parentheses to be truncated, preventing the script from finding and copying the correct image file.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
og_imagefield for custom Open Graph images.