LinkedIn post as carousel #786
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎ 1 Skipped Deployment
|
|
Caution Review failedThe pull request is closed. WalkthroughThis update introduces support for posting image carousels as PDFs to LinkedIn, refactoring the LinkedIn provider to handle PDF, image, and video uploads. It adds a user setting for carousel posting, updates DTOs and validation, modifies translations, and adds the "image-to-pdf" dependency. SWC configuration files are also removed. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant Frontend
participant Backend
participant LinkedInProvider
participant LinkedInAPI
User->>Frontend: Selects "Post as images carousel" and submits post
Frontend->>Backend: Sends post details with carousel setting
Backend->>LinkedInProvider: Calls post() with post details and settings
alt post_as_images_carousel enabled
LinkedInProvider->>LinkedInProvider: Convert images to PDF carousel
LinkedInProvider->>LinkedInProvider: Upload PDF document to LinkedIn
else
LinkedInProvider->>LinkedInProvider: Upload images/videos as usual
end
LinkedInProvider->>LinkedInAPI: Create main post with media
loop For each additional post
LinkedInProvider->>LinkedInAPI: Create comment post
end
LinkedInProvider->>Backend: Return post response(s)
Backend->>Frontend: Return post result
Possibly related PRs
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
libraries/nestjs-libraries/src/integrations/social/linkedin.provider.tsOops! Something went wrong! :( ESLint: 8.57.0 Error [ERR_MODULE_NOT_FOUND]: Cannot find package '@eslint/eslintrc' imported from /eslint.config.mjs 📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (1)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (6)
libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts (6)
385-387: Use a more descriptive filename for the PDF carousel.The hardcoded filename 'carousel.pdf' is generic and doesn't provide context.
- url: 'carousel.pdf', + url: `linkedin-carousel-${Date.now()}.pdf`,
369-373: Consider handling images with different dimensions more gracefully.Using only the first image's dimensions for all PDF pages might cause cropping or distortion for images with different aspect ratios.
Consider calculating the maximum dimensions or standardizing all images to a common aspect ratio:
- const firstImageDimensions = imageData[0]; - const pageSize = [firstImageDimensions.width, firstImageDimensions.height]; + // Use the largest dimensions to avoid cropping + const maxWidth = Math.max(...imageData.map(img => img.width)); + const maxHeight = Math.max(...imageData.map(img => img.height)); + const pageSize = [maxWidth, maxHeight];
468-468: Consider making the image resize width configurable.The hardcoded width of 1000px might not be optimal for all use cases. LinkedIn supports images up to 7680×4320 pixels.
Consider making this configurable or using LinkedIn's recommended dimensions:
- .resize({ width: 1000 }) + .resize({ width: 1200, height: 627, fit: 'inside' }) // LinkedIn's recommended dimensions
481-481: Use a more descriptive title for PDF documents.The hardcoded title 'slides.pdf' is generic.
- ...(isPdf ? { title: 'slides.pdf' } : {}), + ...(isPdf ? { title: 'Carousel Presentation' } : {}),
550-552: Improve error handling with more descriptive messages.The current error message is generic and doesn't help with debugging.
- if (response.status !== 201 && response.status !== 200) { - throw new Error('Error posting to LinkedIn'); - } + if (response.status !== 201 && response.status !== 200) { + const errorBody = await response.text(); + throw new Error(`LinkedIn post failed with status ${response.status}: ${errorBody}`); + }
657-667: Add error handling for individual comment post failures.If one comment post fails, it will prevent subsequent posts from being created. Consider continuing with remaining posts.
for (const post of restPosts) { + try { const commentPostId = await this.createCommentPost( id, accessToken, post, mainPostId, type ); responses.push(this.createPostResponse(commentPostId, post.id, false)); + } catch (error) { + // Log error but continue with other posts + console.error(`Failed to create comment for post ${post.id}:`, error); + responses.push({ + status: 'failed', + postId: '', + id: post.id, + releaseURL: '', + error: error.message + }); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (7)
apps/backend/.swcrc(0 hunks)apps/cron/.swcrc(0 hunks)apps/frontend/src/components/launches/providers/linkedin/linkedin.provider.tsx(1 hunks)libraries/nestjs-libraries/src/dtos/posts/providers-settings/linkedin.dto.ts(1 hunks)libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts(7 hunks)libraries/react-shared-libraries/src/translation/locales/en/translation.json(1 hunks)package.json(1 hunks)
💤 Files with no reviewable changes (2)
- apps/backend/.swcrc
- apps/cron/.swcrc
🧰 Additional context used
🧬 Code Graph Analysis (1)
apps/frontend/src/components/launches/providers/linkedin/linkedin.provider.tsx (5)
libraries/react-shared-libraries/src/translation/get.transation.service.client.ts (1)
useT(14-18)apps/frontend/src/components/launches/helpers/use.values.ts (1)
useSettings(87-87)libraries/react-shared-libraries/src/form/checkbox.tsx (1)
Checkbox(6-85)apps/frontend/src/components/launches/providers/high.order.provider.tsx (1)
withProvider(82-668)libraries/nestjs-libraries/src/dtos/posts/providers-settings/linkedin.dto.ts (1)
LinkedinDto(3-7)
⏰ Context from checks skipped due to timeout of 90000ms (3)
- GitHub Check: build-and-publish
- GitHub Check: build (20.17.0)
- GitHub Check: build (20.17.0)
🔇 Additional comments (12)
package.json (1)
152-152:✅ Verification successful
Verify the image-to-pdf package version and security status.
The addition of the
image-to-pdfdependency supports the new LinkedIn carousel feature. Please verify that version^3.0.2is valid, actively maintained, and free from security vulnerabilities.
🌐 Web query:
Is image-to-pdf version 3.0.2 a valid npm package version and are there any known security vulnerabilities?💡 Result:
Based on the search results, image-to-pdf version 3.0.2 is indeed a valid npm package version. It is the latest version of the package as mentioned in multiple search results[1][3]. The package was last published approximately 5 months ago according to the information from January 2025[1], which would be around January 2025.
The image-to-pdf package is a simple image to PDF converter that accepts PNG and JPEG formats as input. These can be passed as base64, Buffer, or file paths[1]. The package allows you to convert images to PDF documents with various page size options, including preset sizes like A4 or custom sizes specified as [x, y] coordinates[1].
Regarding security vulnerabilities, there are no specific mentions of security issues for version 3.0.2 of the image-to-pdf package in the provided search results. The search results do mention vulnerabilities in other PDF-related npm packages such as pdf-image (versions ≤ 2.0.0), which had issues like command injection due to unescaped string parameters[6][9], but these are unrelated to the image-to-pdf package.
It's worth noting that the package appears to be actively maintained, as evidenced by its recent version release. The package is also well-documented with examples provided for CommonJS, ECMAScript, and TypeScript implementations[1][3].
Citations:
- 1: https://www.npmjs.com/package/image-to-pdf
- 2: https://www.npmjs.com/search?q=keywords%3Aimage+to+pdf
- 3: https://www.npmjs.com/package/image-to-pdf/v/1.0.0
- 4: https://www.npmjs.com/package/@react-pdf/image/v/3.0.2
- 5: https://github.com/mikepziegler/some-images-to-pdf
- 6: https://www.acunetix.com/vulnerabilities/sca/cve-2020-8132-vulnerability-in-npm-package-pdf-image/
- 7: https://nextcloud.com/changelog/
- 8: https://community.activepieces.com/t/how-to-change-image-to-pdf/1315
- 9: https://www.acunetix.com/vulnerabilities/sca/cve-2018-3757-vulnerability-in-npm-package-pdf-image/
- 10: https://help.sonatype.com/en/npm-application-analysis.html
Dependency
image-to-pdf@^3.0.2is valid and secure
- Confirmed version 3.0.2 is the latest release (published ~January 2025)
- Package is actively maintained and well-documented
- No known security vulnerabilities for this version
The addition of
image-to-pdf@^3.0.2 can proceed safely.libraries/react-shared-libraries/src/translation/locales/en/translation.json (1)
485-486: LGTM! Translation addition is well-structured.The new translation key follows existing naming conventions and provides clear labeling for the LinkedIn carousel feature. The trailing comma maintains valid JSON syntax.
libraries/nestjs-libraries/src/dtos/posts/providers-settings/linkedin.dto.ts (1)
1-7: LGTM! Clean and correct DTO implementation.The DTO follows NestJS best practices with proper validation decorators. The optional boolean property is well-suited for the carousel feature flag.
apps/frontend/src/components/launches/providers/linkedin/linkedin.provider.tsx (4)
2-5: LGTM! Imports are well-organized and necessary.All imports are appropriately used in the component implementation and follow the project's import structure.
7-22: LGTM! Settings component is well-implemented.The
LinkedInSettingscomponent follows React best practices:
- Proper use of hooks for translation and form state
- Correct form registration with default value
- Appropriate use of the Checkbox component with proper styling variant
30-36: Excellent validation logic for LinkedIn carousel requirements.The validation correctly enforces LinkedIn carousel constraints:
- Requires at least 2 images (minimum for a carousel)
- Prohibits videos in carousel posts (LinkedIn limitation)
- Provides clear error messaging
This validation prevents user frustration by catching invalid configurations before posting.
23-50: LGTM! Proper integration with withProvider HOC.The component correctly:
- Types the provider with
LinkedinDto- Passes the settings component and DTO to the HOC
- Maintains existing validation logic alongside new carousel validation
- Uses appropriate character limit (3000) for LinkedIn
libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts (5)
14-16: LGTM! Imports are appropriate for the new functionality.The new imports support the PDF carousel feature correctly.
404-411: LGTM! Standard stream to buffer conversion.The implementation correctly handles stream events and errors.
591-606: LGTM! Clean response object creation.The method properly constructs LinkedIn URLs for both main and comment posts.
502-502:⚠️ Potential issueFix typo in parameter name.
The parameter
isPdfis misspelled.- isPdf: boolean + isPdf: booleanLikely an incorrect or invalid review comment.
207-207: 🛠️ Refactor suggestionMake PDF detection case-insensitive.
The current PDF detection is case-sensitive. Files with extensions like
- const isPdf = fileName.toLowerCase().indexOf('pdf') > -1; + const isPdf = fileName.toLowerCase().endsWith('.pdf');Likely an incorrect or invalid review comment.
| const response = await this.fetch( | ||
| `https://api.linkedin.com/v2/socialActions/${decodeURIComponent( | ||
| parentPostId | ||
| )}/comments`, | ||
| { | ||
| status: 'posted', | ||
| postId: topPostId, | ||
| id: firstPost.id, | ||
| releaseURL: `https://www.linkedin.com/feed/update/${topPostId}`, | ||
| }, | ||
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| Authorization: `Bearer ${accessToken}`, | ||
| }, | ||
| body: JSON.stringify({ | ||
| actor, | ||
| object: parentPostId, | ||
| message: { | ||
| text: this.fixText(post.message), | ||
| }, | ||
| }), | ||
| } | ||
| ); | ||
|
|
||
| const { object } = await response.json(); | ||
| return object; | ||
| } |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Add error handling for comment post creation.
The method doesn't handle API errors, which could cause the entire post operation to fail.
Add error handling:
if (!response.ok) {
const errorBody = await response.text();
throw new Error(`Failed to create comment: ${response.status} - ${errorBody}`);
}🤖 Prompt for AI Agents
In libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts
around lines 567 to 589, the code lacks error handling for the API response when
creating a comment. Add a check after the fetch call to verify if response.ok is
false; if so, read the response text and throw an error with the status code and
error body to properly handle API failures and prevent silent errors.
| // Return modified post details with PDF instead of images | ||
| const modifiedFirstPost = { | ||
| ...firstPost, | ||
| media: [pdfMedia] as any[], |
There was a problem hiding this comment.
🛠️ Refactor suggestion
Avoid using any type casting for better type safety.
The cast to any[] bypasses TypeScript's type checking and could hide potential issues.
Define a proper type for media with buffer:
interface MediaWithBuffer {
url: string;
buffer?: Buffer;
}Then use it instead of any[].
🤖 Prompt for AI Agents
In libraries/nestjs-libraries/src/integrations/social/linkedin.provider.ts at
line 392, avoid casting media to any[] which disables type checking. Define a
MediaWithBuffer interface with url as string and optional buffer as Buffer, then
replace the any[] cast with MediaWithBuffer[] to ensure proper type safety for
the media array.
Summary by CodeRabbit
New Features
Improvements
Chores