Add blog to website with an example post#73
Conversation
dosubot
bot
added
the
size:L
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Caution Review failedPull request was closed or merged during review 📝 WalkthroughWalkthroughAdds a new MDX blog post, a layout component for rendering individual posts (including GitHub edit link), and a blog index route that loads MDX posts, extracts frontmatter, and renders a sorted list. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches
🧪 Generate unit tests (beta)
📝 Coding Plan
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. Comment Tip CodeRabbit can generate a title for your PR based on the changes with custom instructions.Set the |
There was a problem hiding this comment.
Pull request overview
Adds a new Blog section to the Qwik website, including an example post with a dedicated post layout and media asset.
Changes:
- Introduces
/blogindex route that discovers MDX posts viaimport.meta.globand renders a “Latest posts” list. - Adds an example post route group with a post layout (cover/meta/content + “Edit page” link).
- Adds an example MDX post and an accompanying image asset.
Reviewed changes
Copilot reviewed 3 out of 4 changed files in this pull request and generated 8 comments.
| File | Description |
|---|---|
website/src/routes/blog/index.tsx |
New blog index page + loader that enumerates MDX posts and renders cards. |
website/src/routes/blog/(posts)/example-post/layout.tsx |
New post layout rendering title/meta/cover/content and an “Edit page” link. |
website/src/routes/blog/(posts)/example-post/index.mdx |
Example blog post frontmatter/content, including image import. |
website/src/routes/blog/(posts)/example-post/type-safe-issues.jpg |
Image asset used by the example post. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
You can also share your feedback on Copilot code review. Take the survey.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
🧹 Nitpick comments (2)
website/src/routes/blog/index.tsx (1)
20-25: UseinterfaceforPostData.
PostDatais an object shape and should be declared as aninterfacein this TS file.Suggested change
-type PostData = { +interface PostData { cover: string; title: string; published: string; authors: string[]; -}; +}As per coding guidelines, "
**/*.{ts,tsx}: Preferinterfaceovertypefor defining object shapes in TypeScript".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/routes/blog/index.tsx` around lines 20 - 25, Replace the object-shaped type alias PostData with an equivalent interface declaration: change "type PostData = { cover: string; title: string; published: string; authors: string[] }" to "interface PostData { cover: string; title: string; published: string; authors: string[] }", preserving the exact property names and types (and export if required), so the symbol PostData becomes an interface rather than a type alias.website/src/routes/blog/(posts)/example-post/layout.tsx (1)
6-10: SwitchPostFrontmatterfromtypetointerface.For object-shape declarations in TS files, prefer
interfacehere.Suggested change
-type PostFrontmatter = { +interface PostFrontmatter { cover: string; authors: string[]; published: string; -}; +}As per coding guidelines, "
**/*.{ts,tsx}: Preferinterfaceovertypefor defining object shapes in TypeScript".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@website/src/routes/blog/`(posts)/example-post/layout.tsx around lines 6 - 10, Replace the object-shaped TypeScript alias with an interface by changing the declaration "type PostFrontmatter = { cover: string; authors: string[]; published: string; }" to an equivalent "interface PostFrontmatter { cover: string; authors: string[]; published: string; }" so the symbol PostFrontmatter is an interface rather than a type alias; ensure any usages/imports remain unchanged.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@website/src/routes/blog/`(posts)/example-post/layout.tsx:
- Line 47: The edit-link assembly assumes location.url.pathname ends with a
slash, causing broken URLs like "...example-postindex.mdx"; update the
construction to ensure a slash before "index.mdx" by normalizing
location.url.pathname (e.g., append '/' if it doesn't already end with one) or
by inserting a '/' between the sliced pathname and "index.mdx"; locate the href
usage where location.url.pathname is sliced in the component and change the
string concatenation to use the normalized pathname so the final URL always
contains the separating slash.
- Line 12: Add the required JSDoc block and the tree-shaking annotation above
the exported component factory: place a /** ... */ JSDoc describing the
component immediately above the export and add the single-line comment //
`@__NO_SIDE_EFFECTS__` directly above the export default component$(() => { ... })
declaration so the exported component factory has both the documentation and the
no-side-effects annotation.
In `@website/src/routes/blog/index.tsx`:
- Line 30: The export of the pure loader factory export const usePosts =
routeLoader$(...) is missing the tree-shaking annotation; add the single-line
comment // `@__NO_SIDE_EFFECTS__` immediately above the export (between any JSDoc
and the export statement) so the usePosts route loader is annotated for no side
effects and can be tree-shaken by the bundler.
- Line 46: The comparator passed to .sort in website/src/routes/blog/index.tsx
currently returns only 1 or -1; update the comparator (the inline function in
.sort((a, b) => ...)) to explicitly return 0 when a.published === b.published.
For example, implement a three-way comparison of a.published and b.published (or
their Date values) and return -1, 0, or 1 accordingly so equal publish dates
produce 0.
- Line 49: Add a JSDoc block immediately above the default export of the
component (the export default component$() factory) describing the component and
include a no-side-effects marker for tree-shaking; specifically, add a /** ...
*/ JSDoc with a short description and a `@noSideEffects` (or equivalent
project-standard tag) and prepend the component$() call with the
pure/no-side-effects annotation used by the codebase (e.g., /* `@__PURE__` */ or
the repo's preferred marker) so the default exported component is documented and
marked for tree-shaking.
---
Nitpick comments:
In `@website/src/routes/blog/`(posts)/example-post/layout.tsx:
- Around line 6-10: Replace the object-shaped TypeScript alias with an interface
by changing the declaration "type PostFrontmatter = { cover: string; authors:
string[]; published: string; }" to an equivalent "interface PostFrontmatter {
cover: string; authors: string[]; published: string; }" so the symbol
PostFrontmatter is an interface rather than a type alias; ensure any
usages/imports remain unchanged.
In `@website/src/routes/blog/index.tsx`:
- Around line 20-25: Replace the object-shaped type alias PostData with an
equivalent interface declaration: change "type PostData = { cover: string;
title: string; published: string; authors: string[] }" to "interface PostData {
cover: string; title: string; published: string; authors: string[] }",
preserving the exact property names and types (and export if required), so the
symbol PostData becomes an interface rather than a type alias.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro
Run ID: 74c68c0a-bc85-45f5-9f64-86f58cc53398
⛔ Files ignored due to path filters (1)
website/src/routes/blog/(posts)/example-post/type-safe-issues.jpgis excluded by!**/*.jpg
📒 Files selected for processing (3)
website/src/routes/blog/(posts)/example-post/index.mdxwebsite/src/routes/blog/(posts)/example-post/layout.tsxwebsite/src/routes/blog/index.tsx
![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: af7822b393
ℹ️ 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".
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 60b9b1a1fc
ℹ️ 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".
| }; | ||
| }) | ||
| ) | ||
| ).sort((a, b) => (a.published < b.published ? 1 : -1)) |
There was a problem hiding this comment.
The usePosts comparator returns -1 for every non-< case, so it also returns -1 when a.published === b.published. That violates Array.prototype.sort expectations and can produce unstable ordering for posts published on the same day, which makes the “Latest posts” list nondeterministic across runs/environments instead of preserving a consistent order for ties.
Useful? React with 👍 / 👎.
Summary by CodeRabbit