refactor: Home page for create-vitnode-app - #834
Conversation
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: fc621eb2f7
ℹ️ 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".
| loader: async ({ context: { locale, queryClient } }) => { | ||
| const { messages } = await queryClient.query({ | ||
| ...intlQueryOptions({ locale, namespaces: HOME_NAMESPACES }), | ||
| staleTime: "static", | ||
| }); |
There was a problem hiding this comment.
Move the home query out of the route module
Move the namespace declaration, query construction, translation work, and screen into an appropriate TanStack feature module, leaving this file to wire its loader and component. As written, every newly generated app starts with domain/query logic embedded directly in a route file, contrary to the repository's topology-only route invariant and making the starter the source users will copy for future routes.
AGENTS.md reference: AGENTS.md:L26-L28
Useful? React with 👍 / 👎.
| <div | ||
| aria-label="Tools VitNode is built on and integrates with" | ||
| className="flex items-center justify-center gap-1.5 sm:gap-3 lg:gap-4" | ||
| role="list" |
There was a problem hiding this comment.
Let the integration grid wrap on narrow screens
Allow these columns to wrap or reduce their count at the base breakpoint. The seven fixed size-11 columns plus six gap-1.5 gaps require 344px, while MarketingSection leaves only 288px at a 320px viewport and 343px at 375px after its horizontal padding, so this prominent home-page section overflows horizontally on common small screens.
AGENTS.md reference: AGENTS.md:L60-L62
Useful? React with 👍 / 👎.
| </div> | ||
| </footer> | ||
| export const MainFooter = () => ( | ||
| <RouteMessages namespaces={FOOTER_NAMESPACES}> |
There was a problem hiding this comment.
Preload the footer message query in the layout loader
Warm FOOTER_NAMESPACES from the parent _main loader before rendering this provider. loadMainShell currently fetches only header namespaces, and the home loader uses a different query key, so every generated app's first public render reaches this new useSuspenseQuery cold and adds a server-function waterfall or suspends the _main route while the footer catalogue loads.
AGENTS.md reference: AGENTS.md:L46-L48
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 147cfce9d2
ℹ️ 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".
| !!docker, | ||
| appName, | ||
| packageManager, | ||
| isSingleApp ? "apps/web" : "apps/api", |
There was a problem hiding this comment.
Run split-app i18n commands in both workspaces
For generated apiMonorepo projects, this selects only apps/api, although the web app has its own vitnode.config.ts, src/locales, and frontend message tree. The i18n CLI derives its scope and files from process.cwd(), so root-level i18n:create, i18n:delete, and i18n:update now leave the web locale configuration untouched, while i18n:check can pass without inspecting any frontend translations. Coordinate the command across both apps/api and apps/web for split projects rather than routing every command exclusively to the API.
Useful? React with 👍 / 👎.
| ``` | ||
|
|
||
| ```ts title="src/vitnode.config.ts" | ||
| import { Logo } from '@/components/logo' |
There was a problem hiding this comment.
Use a resolvable import in the logo example
Following this example makes VitNode's build-time config discovery fail with an unresolved module: readAppConfig loads vitnode.config.ts directly through Jiti with no @/ alias configuration, so Vite's later resolve.tsconfigPaths handling is never involved. Use a relative import such as ./components/logo here so users can add the documented logo without breaking route and registry generation.
Useful? React with 👍 / 👎.
Improving Documentation
pnpm lint:fixto fix formatting issues before opening the PR.Description
What?
Why?