added home-new hidden page to start porting over content

[jennnniferkuang]

This change is 

Summary by CodeRabbit

• New Features

  • Added a new application page accessible via a dedicated route.

• Chores

  • Updated TypeScript configuration to enhance DOM type support.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[jennnniferkuang]

This change is part of the following stack:

• new home page #117
  • added home-new hidden page to start porting over content #118 ◀

_{Change managed by git-spice.}

[coderabbitai]

Walkthrough

This PR introduces new React component infrastructure by creating a Page component wrapper in a new components-new directory, adding a HomeNew route, and updating the import path in the main index file. TypeScript configuration is also extended with DOM library typings.

Changes

Cohort / File(s)	Summary
New components src/components-new/Page.tsx, src/routes-new/HomeNew.tsx	Added Page component with title prop that wraps children in a div with title display. Added basic HomeNew component rendering an empty div.
Router configuration src/index.jsx	Updated Page import source from ./components/Page to ./components-new/Page. Added HomeNew import and new "home-new" route that renders HomeNew inside Page wrapper.
TypeScript configuration tsconfig.json	Extended lib array to include "dom" and "dom.iterable" alongside existing "esnext" for DOM typings.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

• Verify import paths are correct and resolve properly
• Confirm Page component interface matches usage in index.jsx
• Ensure HomeNew component doesn't require additional initial implementation

Possibly related PRs

• TS Migration #115: Similar TypeScript configuration changes adding "dom" and "dom.iterable" to the lib array, suggesting parallel infrastructure setup.

Suggested reviewers

• ChrisYx511
• JasonBrave
• Redstone-ray

Poem

🐰 New pages rise with titles bright,
Routes unfold like morning light,
Components nest in tidy rows,
DOM types flourish as the code grows! 🚀

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The pull request description is largely incomplete, containing only a Reviewable badge link and no substantive content following the required template structure.	Add required sections: Description (context and changes), related GitHub issue reference, Developer Testing (testing steps taken), and Reviewer Testing (steps for reviewers to verify the implementation).

✅ Passed checks (2 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'added home-new hidden page to start porting over content' clearly summarizes the main changes: creating a new hidden page and beginning content migration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch new-home-page

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/routes-new/HomeNew.tsx (1)

1-9: Placeholder component looks fine for the initial setup.

Since this is a TypeScript file, consider adding an explicit return type for consistency:

-const HomeNew = () => {
+const HomeNew = (): JSX.Element => {

This is optional but improves type safety as you build out the component.

src/components-new/Page.tsx (1)

3-5: Consider renaming the interface for clarity.

HomePage suggests this is specific to the home page, but it's actually the props interface for the generic Page wrapper component. A clearer name would be PageProps:

-interface HomePage {
+interface PageProps {
   title: string;
 }

-const Page: React.FC<HomePage> = ({
+const Page: React.FC<PageProps> = ({

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f90d0ee and 1527780.

⛔ Files ignored due to path filters (1)

• package-lock.json is excluded by !**/package-lock.json

📒 Files selected for processing (4)

• src/components-new/Page.tsx (1 hunks)
• src/index.jsx (3 hunks)
• src/routes-new/HomeNew.tsx (1 hunks)
• tsconfig.json (1 hunks)

🧰 Additional context used

🧬 Code graph analysis (3)

src/routes-new/HomeNew.tsx (3)

src/components/DividerLine/DividerLine.jsx (1)

• div (6-10)

src/components/Page.jsx (1)

• Helmet (5-14)

src/components/HomeContent/HomeContent.jsx (1)

• h1 (6-16)

src/index.jsx (1)

src/components/Page.jsx (1)

• Page (5-14)

src/components-new/Page.tsx (1)

src/components/Page.jsx (1)

• Page (5-14)

🔇 Additional comments (2)

tsconfig.json (1)

5-6: LGTM!

Adding dom and dom.iterable to the TypeScript lib configuration is appropriate for supporting the new TypeScript React components.

src/index.jsx (1)

172-176: Route structure follows existing patterns.

The new route is correctly structured. Once the Page import issue above is resolved (using separate imports for old and new Page components), this will work as intended.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Critical: Raw <title> element won't set the document title.

A <title> element rendered inside a <div> in the React component tree does not update the browser's document title. It will just render as invisible text in the DOM body.

The original Page.jsx (see src/components/Page.jsx lines 4-13) correctly uses react-helmet to manage the document <head>. Port that approach:

-import React from 'react';
+import React from 'react';
+import { Helmet } from 'react-helmet';

 interface HomePage {
   title: string;
 }

 const Page: React.FC<HomePage> = ({
   title,
   children,
 }) => {
   return (
-    <div>
-      <title>{`${title || ''} - Waterloo Rocketry`}</title>
+    <>
+      <Helmet>
+        <title>{`${title || ''} - Waterloo Rocketry`}</title>
+      </Helmet>
       {children}
-    </div>
+    </>
   );
 };

🤖 Prompt for AI Agents

In src/components-new/Page.tsx around lines 11 to 16, the code renders a raw
<title> inside a <div>, which does not set the browser document title; replace
this with react-helmet usage: import { Helmet } from 'react-helmet' at the top
of the file (or add it to existing imports), remove the raw <title> element from
the DOM, and wrap the title string in a <Helmet><title>{`${title || ''} -
Waterloo Rocketry`}</title></Helmet> placed alongside the children so the
document head is correctly updated.

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Critical: This import change breaks document title for all existing routes.

Replacing the Page import affects every existing route (Home, Competition, Join, Rockets, etc.), not just the new home-new route. The original Page.jsx uses react-helmet to properly set the document <title>, while the new Page.tsx renders a raw <title> element inside a <div>, which won't update the document title correctly.

To avoid breaking existing pages, keep the original import and use a different name for the new component:

-import Page from './components-new/Page';
+import Page from './components/Page';
+import PageNew from './components-new/Page';

Then use PageNew only for the new route at lines 172-176.

🤖 Prompt for AI Agents

In src/index.jsx around line 8 and lines 172-176, the import of the new Page
component replaced the original Page and breaks document titles; restore the
original Page import (keep the existing Page.jsx import) and import the new
component under a distinct name (e.g., PageNew) so you don't override the
original, then update only the new route (lines 172-176) to reference PageNew
while leaving all other routes using the original Page.