cleanup

examples/routing/package.json

@@ -12,8 +12,8 @@
     "yarpm": "^1.2.0"
   },
   "scripts": {
-    "start": "cd routing-project/routing-app && yarpm start --",
-    "postinstall": "cd routing-project/routing-app && yarpm install",
+    "start": "cd routing-project/src && yarpm start --",
+    "postinstall": "cd routing-project/src && yarpm install",
     "lint:js": "eslint . --ext .js,.jsx",
     "prettier": "prettier . --check",
     "watch:hubl": "hs watch routing-theme routing-theme",

examples/routing/routing-project/routing-app/components/Home.tsx → examples/routing/routing-project/src/components/Account.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import pageStyles from '../styles/page.module.css';
+import Hero from './Hero.tsx';
 
-export default function Home() {
+export default function Account() {
   return (
     <main className={pageStyles.page}>
-      <div className={pageStyles.hero} style={{ background: '#ff7a59' }}>
-        <h1>Home</h1>
-      </div>
+      <Hero size="small">
+        <h1>Account</h1>
+      </Hero>
     </main>
   );
 }

examples/routing/routing-project/routing-app/components/Contact.tsx → examples/routing/routing-project/src/components/Contact.tsx

@@ -1,12 +1,13 @@
 import React from 'react';
 import pageStyles from '../styles/page.module.css';
+import Hero from './Hero.tsx';
 
 export default function Contact() {
   return (
     <main className={pageStyles.page}>
-      <div className={pageStyles.hero} style={{ background: '#ff7a59' }}>
+      <Hero size="small">
         <h1>Contact</h1>
-      </div>
+      </Hero>
     </main>
   );
 }

examples/routing/routing-project/src/components/Dashboard.tsx

@@ -0,0 +1,12 @@
+import pageStyles from '../styles/page.module.css';
+import Hero from './Hero.tsx';
+
+export default function Dashboard() {
+  return (
+    <main className={pageStyles.page}>
+      <Hero>
+        <h1>Dashboard</h1>
+      </Hero>
+    </main>
+  );
+}

examples/routing/routing-project/routing-app/components/Header.tsx → examples/routing/routing-project/src/components/Header.tsx

@@ -12,19 +12,16 @@ export default function Header() {
       <nav className={navigationStyles.nav}>
         <ul>
           <li>
-            <Link to="/">Home</Link>
+            <Link to="/">Dashboard</Link>
           </li>
           <li>
-            <Link to="/about">About</Link>
+            <Link to="/account">Account</Link>
           </li>
-          <li>
-            <Link to="/services">Services</Link>
+          <li className={navigationStyles.btn}>
+            <Link to="/contact">Contact Us</Link>
           </li>
         </ul>
       </nav>
-      <li className={navigationStyles.btn}>
-        <Link to="/contact">Contact Us</Link>
-      </li>
     </header>
   );
 }

examples/routing/routing-project/src/components/Hero.tsx

@@ -0,0 +1,17 @@
+import pageStyles from '../styles/page.module.css';
+
+type HeroProps = {
+  children: React.ReactNode;
+  size?: 'large' | 'small';
+};
+
+export default function Hero({ children, size = 'large' }: HeroProps) {
+  return (
+    <div
+      className={pageStyles.hero}
+      style={{ height: `${size === 'large' ? '50' : '20'}vh` }}
+    >
+      {children}
+    </div>
+  );
+}

examples/routing/routing-project/routing-app/components/islands/App.tsx → examples/routing/routing-project/src/components/islands/App.tsx

@@ -1,26 +1,22 @@
 import React from 'react';
 import { Routes, Route, BrowserRouter } from 'react-router-dom';
 import { StaticRouter } from 'react-router-dom/server';
-
 import {
   useIsServerRender,
   usePageUrl,
   useBasePath,
-  logInfo,
 } from '@hubspot/cms-components';
 
-import Home from '../Home.tsx';
-import About from '../About.tsx';
-import Services from '../Services.tsx';
-import Contact from '../Contact.tsx';
 import Header from '../Header.tsx';
+import Dashboard from '../Dashboard.tsx';
+import Account from '../Account.tsx';
+import Contact from '../Contact.tsx';
 
 const AppRoutes = () => {
   return (
     <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/about" element={<About />} />
-      <Route path="/services" element={<Services />} />
+      <Route path="/" element={<Dashboard />} />
+      <Route path="/account" element={<Account />} />
       <Route path="/contact" element={<Contact />} />
     </Routes>
   );
@@ -31,9 +27,6 @@ const App = () => {
   const pageUrl = usePageUrl();
   const basePath = useBasePath();
 
-  logInfo(basePath);
-  logInfo(pageUrl.pathname);
-
   let app: JSX.Element;
 
   if (isServerRender) {

examples/routing/routing-project/routing-app/components/modules/MembershipApp/index.tsx → examples/routing/routing-project/src/components/modules/Router/index.tsx

@@ -1,5 +1,5 @@
-import { Island } from '@hubspot/cms-components';
 import React from 'react';
+import { Island } from '@hubspot/cms-components';
 import AppIsland from '../../islands/App?island';
 
 export const Component = () => {
@@ -13,5 +13,5 @@ export const Component = () => {
 export const fields = [];
 
 export const meta = {
-  label: 'Membership app entry point',
+  label: 'Router Module',
 };

examples/routing/routing-project/routing-app/styles/header.module.css → examples/routing/routing-project/src/styles/header.module.css

@@ -11,6 +11,7 @@
       list-style: none;
       display: flex;
       flex-direction: row;
+      align-items: center;
       gap: 30px;
       margin: 0;
       padding: 0;

examples/routing/routing-project/routing-app/styles/page.module.css → examples/routing/routing-project/src/styles/page.module.css

@@ -4,12 +4,12 @@
   }
 
   & .hero {
-    height: 50vh;
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 5px;
+    background-color: #ff7a59;
 
     & h1 {
       color: white;

examples/routing/routing-project/src/tsconfig.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "forceConsistentCasingInFileNames": true,
+    "allowImportingTsExtensions": true,
+    "noEmit": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "skipLibCheck": true,
+    "types": ["vite/client", "vitest/globals"]
+  },
+  "include": ["components/**/*"],
+  "exclude": ["node_modules"]
+}

examples/routing/routing-theme/page.hubl.html

@@ -1,14 +1,14 @@
 <!--
   templateType: page
   isAvailableForNewContent: true
-  label: Routing - Page template
+  label: CMS React - Routing
 -->
 {% extends "./layouts/base.hubl.html" %}
 
 {% block body %}
 
   {% module
-    path="@projects/routing-project/routing-app/components/modules/MembershipApp.tsx"
+    path="@projects/routing-project/routing-app/components/modules/Router.tsx"
   %}
 
 {% endblock body %}