Fix blog teaser ellipsis rendering#8201
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Can you show me where we have a bug on our site? |
Thanks for taking a look! This shows up in blog previews where the teaser isn’t actually truncated but still ends with .... For example: If a post has fewer than three non-heading lines and stays within the 240-character limit, the full text is already shown. You can also run into this when the teaser is empty, where ... may still appear. This change makes sure ... is only added when truncation actually happens, so the preview better reflects what’s really there. |
|
Can you show me this bug on our site? |
Thanks — the bug shows up in blog teaser previews when the teaser is not actually truncated but still gets I do not think there is a clean public example on the live site right now, because the issue is in the teaser-generation logic itself. I can add a minimal reproduction example if that would help, but the current behavior is that short teaser text can still end with The fix makes sure |
| const isBlogItem = normalizedPath.includes("/blog/"); | ||
| if (isBlogItem) { | ||
| const teaser = (body || "") | ||
| const teaserLines = (body || "") |
There was a problem hiding this comment.
no point changing variable names and its prototype chaining
|
got a screenshot of the changes in this PR? |
3 participants
This PR updates how blog teasers are generated so that an ellipsis (...) is only added when the preview text is actually truncated.
Previously, the logic in src/utilities/content-tree-enhancers.mjs always appended ... to teasers, even when the full content was already shown. This could make short blog previews look incomplete and could also result in unnecessary ellipses for empty content.
The change keeps the existing teaser rules but adds a check to determine whether truncation actually occurred — either because there were more than three non-heading lines or because the text exceeded the 240-character limit.
What kind of change does this PR introduce?
fix
Did you add tests for your changes?
Yes.
Added tests to cover:
cases where the teaser is not truncated (no ellipsis expected)
cases where the teaser is truncated (ellipsis should be present)
Also verified with:
npm run jest -- src/utilities/content-tree-enhancers.test.mjs
npm run lint:js -- src/utilities/content-tree-enhancers.mjs src/utilities/content-tree-enhancers.test.mjs
npx prettier --check src/utilities/content-tree-enhancers.mjs src/utilities/content-tree-enhancers.test.mjs
git diff --check
Pre-commit checks passed as well.
Does this PR introduce a breaking change?
No.
If relevant, what needs to be documented once your changes are merged or what have you already documented?
No documentation changes are needed. This is an internal improvement to how blog previews are generated.
Use of AI
AI was used to help review the existing logic, suggest a minimal fix, and assist in drafting test cases. The final implementation and validations were reviewed and verified manually.