Repository navigation
feat(life): 인문학 에세이와 MDX 이미지 폭 지원 - #133
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 12819fc3bd
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| <span className="my-12 block overflow-hidden rounded-[var(--radius-content)]"> | ||
| <span | ||
| className="my-12 block max-w-full overflow-hidden rounded-[var(--radius-content)]" | ||
| style={props.width ? { width: props.width } : undefined} |
There was a problem hiding this comment.
This establishes a reusable MDX authoring contract in which an HTML width attribute controls the rendered wrapper, including choices around percentages, numeric values, and responsive behavior, but the commit adds no ADR. Document this convention and its trade-offs in a numbered ADR as required for recurring rules or boundaries.
AGENTS.md reference: AGENTS.md:L26-L30
Useful? React with 👍 / 👎.
| className="my-12 block max-w-full overflow-hidden rounded-[var(--radius-content)]" | ||
| style={props.width ? { width: props.width } : undefined} |
There was a problem hiding this comment.
For the newly changed game screenshot using width="25%", this wrapper remains 25% wide at every breakpoint; on a roughly 320px mobile content area, the portrait screenshot is rendered at about 80px wide and its game details become unreadable. max-w-full only caps oversized values, so the width should become full or otherwise larger on small screens while retaining the reduced desktop width.
AGENTS.md reference: AGENTS.md:L93-L95
Useful? React with 👍 / 👎.
| 너무 멀게 느껴져 손이 잘 가지 않았다. 그러다 심리학 코너에 표지에 이끌려 《다크심리학》 책을 구매해서 읽게되었다. | ||
| 책 내용 중간 중간 《군주론》이 자주 언급되어서 궁금해졌다. | ||
|
|
||
| 그 호기심을 시작으로 서점에 갈 기회가 생겼을때 《군주론》의 표지를 표니 명문대에서 필수 교양 서적으로 지정되었다는 내용이 적혀있었다. |
There was a problem hiding this comment.
Because the sibling metadata marks this post as public, readers immediately receive the malformed phrase 《군주론》의 표지를 표니 along with the missing spacing in 생겼을때. Correct the apparent 보니 typo and spacing before releasing the essay.
Useful? React with 👍 / 👎.
| <span className="my-12 block overflow-hidden rounded-[var(--radius-content)]"> | ||
| <span | ||
| className="my-12 block max-w-full overflow-hidden rounded-[var(--radius-content)]" | ||
| style={props.width ? { width: props.width } : undefined} |
There was a problem hiding this comment.
When an MDX image is narrowed to 25%, the nested Next image still advertises 100vw on mobile and 800px on larger screens through its fixed sizes value. Browsers therefore select a source candidate for roughly four times the displayed width, wasting bandwidth on every view of the newly narrowed screenshot; derive sizes from the requested width or let the MDX image specify an appropriate responsive value.
Useful? React with 👍 / 👎.
| 대학 시절 캡스톤 디자인 작품전을 떠올렸다. 당시 만든 게임의 이름은 `F 학점 피하기`였다. 학생이 날아오는 F를 피하고, 체력을 모두 잃기 전에 정해진 시간 동안 버티는 방식이었다. 아래는 게임 플레이 화면과 게임 오버 화면이다. | ||
|
|
||
|  | ||
| <img |
There was a problem hiding this comment.
Under the current @mdx-js/loader pipeline, an explicitly authored lowercase JSX <img> is emitted as that literal element rather than as the markdown img element resolved from components. Consequently this only usage of width="25%" bypasses getMDXComponents().img, so it loses the Next image optimization, dimensions, caption wrapper, and the new wrapper-width behavior; the direct component unit test cannot detect that integration failure. Use a mapped custom component or syntax that actually reaches the MDX image renderer and cover the compiled MDX path.
AGENTS.md reference: AGENTS.md:L74-L76
Useful? React with 👍 / 👎.
This branch was successfully deployed
1 participant
변경 사항
<img width>값을 이미지 wrapper 폭에 반영검증
npm run content:auditnpm run buildgit diff --check