BLOG-166 Fix image rendering on post preview #174

Merged

squid merged 4 commits from BLOG-166_fix_image_preview into main 2025-10-20 17:58:04 +08:00

Conversation 3 Commits 4 Files Changed 7 +21 -21

squid commented 2025-10-20 17:54:07 +08:00

Owner

Copy Link

Description

• Fix the issue by adding w-full, h-full, and object-cover

Package Changes

{
  "prettier-plugin-tailwindcss": "^0.7.1"
}

Screenshots

Original Image	Preview

Reference

Resolves #166.

Checklist

• A milestone is set
• The related issuse has been linked to this branch

### Description - Fix the issue by adding `w-full`, `h-full`, and `object-cover` ### Package Changes ```json { "prettier-plugin-tailwindcss": "^0.7.1" } ``` ### Screenshots |Original Image|Preview| |-|-| ||| ### Reference Resolves #166. ### Checklist - [x] A milestone is set - [x] The related issuse has been linked to this branch

截圖 2025-10-20 17.52.59.png

122 KiB

截圖 2025-10-20 17.47.35.png

12 KiB

squid added this to the 0.5 milestone 2025-10-20 17:54:07 +08:00

squid added 3 commits 2025-10-20 17:54:07 +08:00

feat: using url() for type checking to allow localhost c4e9a32992

fix: image preview with strange ratio df4571dd15

feat: upgrade prettier-tailwind version 59edcf8554

bot commented 2025-10-20 17:54:11 +08:00

Collaborator

Copy Link

/improve

/improve

bot commented 2025-10-20 17:54:16 +08:00

Collaborator

Copy Link

PR Code Suggestions ✨

Category	Suggestion	Impact
General	Stricter URL validation for image previews The z.url() schema allows for any URL scheme. For a preview_image_url, it is typically expected to be an HTTP or HTTPS URL. Consider using z.httpUrl() for stricter validation to ensure only web-accessible image URLs are accepted, preventing potential issues with unsupported schemes. frontend/src/lib/post/adapter/gateway/postInfoResponseDto.ts [10] -preview_image_url: z.url().nullable(), +preview_image_url: z.httpUrl().nullable(), Suggestion importance[1-10]: 7 __ Why: The suggestion to use z.httpUrl() instead of z.url() provides stricter validation, ensuring that preview_image_url is a web-accessible URL. This improves data integrity, even though the PR changed it from z.httpUrl() to z.url().	Medium
	Remove debug logging from production code The console.log statement is likely for debugging purposes. It should be removed before merging to production to prevent exposing internal validation details to end-users and to keep the browser console clean. frontend/src/lib/post/framework/ui/EditPostDialog.svelte [93] -console.log('Validation errors:', errorResult); + Suggestion importance[1-10]: 6 __ Why: Removing console.log statements before merging to production is a good practice to prevent exposing internal details and keep the console clean. This improves code quality and maintainability.	Low

## PR Code Suggestions ✨ <!-- --> <table><thead><tr><td><strong>Category</strong></td><td align=left><strong>Suggestion&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </strong></td><td align=center><strong>Impact</strong></td></tr><tbody><tr><td rowspan=2>General</td> <td> <details><summary>Stricter URL validation for image previews</summary> ___ **The <code>z.url()</code> schema allows for any URL scheme. For a <code>preview_image_url</code>, it is <br>typically expected to be an HTTP or HTTPS URL. Consider using <code>z.httpUrl()</code> for <br>stricter validation to ensure only web-accessible image URLs are accepted, <br>preventing potential issues with unsupported schemes.** [frontend/src/lib/post/adapter/gateway/postInfoResponseDto.ts [10]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-166_fix_image_preview/frontend/src/lib/post/adapter/gateway/postInfoResponseDto.ts#L10-L10) ```diff -preview_image_url: z.url().nullable(), +preview_image_url: z.httpUrl().nullable(), ``` <details><summary>Suggestion importance[1-10]: 7</summary> __ Why: The suggestion to use `z.httpUrl()` instead of `z.url()` provides stricter validation, ensuring that `preview_image_url` is a web-accessible URL. This improves data integrity, even though the PR changed it from `z.httpUrl()` to `z.url()`. </details></details></td><td align=center>Medium </td></tr><tr><td> <details><summary>Remove debug logging from production code</summary> ___ **The <code>console.log</code> statement is likely for debugging purposes. It should be removed <br>before merging to production to prevent exposing internal validation details to <br>end-users and to keep the browser console clean.** [frontend/src/lib/post/framework/ui/EditPostDialog.svelte [93]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-166_fix_image_preview/frontend/src/lib/post/framework/ui/EditPostDialog.svelte#L93-L93) ```diff -console.log('Validation errors:', errorResult); + ``` <details><summary>Suggestion importance[1-10]: 6</summary> __ Why: Removing `console.log` statements before merging to production is a good practice to prevent exposing internal details and keep the console clean. This improves code quality and maintainability. </details></details></td><td align=center>Low </td></tr></tr></tbody></table>

squid changed title from BLOG-166_fix_image_preview to BLOG-166 Fix image rendering on post preview 2025-10-20 17:55:11 +08:00

squid added 1 commit 2025-10-20 17:56:18 +08:00

fix: remove console log for validation errors in EditPostDialog 14d57daffc

squid commented 2025-10-20 17:57:17 +08:00

Author

Owner

Copy Link

The console.log statement is likely for debugging purposes. It should be removed
before merging to production to prevent exposing internal validation details to
end-users and to keep the browser console clean.

frontend/src/lib/post/framework/ui/EditPostDialog.svelte [93]

-console.log('Validation errors:', errorResult);
 
+

Addressed in 14d57daffc.

> **The <code>console.log</code> statement is likely for debugging purposes. It should be removed <br>before merging to production to prevent exposing internal validation details to <br>end-users and to keep the browser console clean.** > > [frontend/src/lib/post/framework/ui/EditPostDialog.svelte [93]](https://git.squidspirit.com/squid/blog/src/branch/BLOG-166_fix_image_preview/frontend/src/lib/post/framework/ui/EditPostDialog.svelte#L93-L93) > > ```diff > -console.log('Validation errors:', errorResult); > > + > ``` Addressed in 14d57daffc11d54f59d30707d60e1233036e41ec.

squid merged commit 799eafaff7 into main 2025-10-20 17:58:04 +08:00

squid deleted branch BLOG-166_fix_image_preview 2025-10-20 17:58:04 +08:00

squid referenced this issue from a commit 2025-10-20 17:58:05 +08:00

BLOG-166 Fix image rendering on post preview (#174)

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

Clear labels

bug

Something is not working

dashboard

design

dev/automation

dev/backend

dev/frontend

dev/improvement

invalid

Something is wrong

wontfix

This won't be fixed

No Label

Milestone

No items

No Milestone 0.5

Projects

Clear projects

No project

Assignees

Clear assignees

bot zoe squid

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: squid/blog#174