Epic Shop

P14:[{"_330":75,"_331":73,"_332":333},"app1","app2","diffPatch","diff --git a/app/root.tsx b/app/root.tsx\nindex 1400e8a..ff67eb6 100644\n--- a/app/root.tsx\n+++ b/app/root.tsx\n@@ -24,6 +24,13 @@ export const links: Route.LinksFunction = () => [\n \t},\n ]\n \n+export const meta: Route.MetaFunction = () => {\n+\t// 🐨 Add the title to this page\n+\t// 💰 The title should be \"Epic Shop\"\n+\t// 💰 Even if you add it the child route (_landing._index/route.tsx) takes precedence so you need to change it there as well to see this reflected on the page\n+\treturn []\n+}\n+\n export function Layout({ children }: { children: React.ReactNode }) {\n \treturn (\n \t\t\ndiff --git a/app/routes/_landing._index/route.tsx b/app/routes/_landing._index/route.tsx\nindex da4209f..3257157 100644\n--- a/app/routes/_landing._index/route.tsx\n+++ b/app/routes/_landing._index/route.tsx\n@@ -1,13 +1,30 @@\n+// 💰 You will need these utilities! Feel free to check their implementation first!\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n+import { type Route } from './+types/route'\n import { CategoriesSection } from './categories-section'\n import { FeaturedProductsSection } from './featured-products.section'\n import { FeaturesSection } from './features-section'\n import { HeroSection } from './hero-section'\n import { NewsletterSection } from './newsletter-section'\n \n+// 🐨 We want to include the root meta in the title to have Epic Shop\n+export const meta: Route.MetaFunction = ({ matches }) => {\n+\t// 💰 You can use getMetaFromMatches and specify \"root\" to extract the meta information from root\n+\t// 💰 You can use getMetaTitle to extract the title from the root meta information\n+\treturn [\n+\t\t{\n+\t\t\t// 💰 You can use the title from the root to return the same title here\n+\t\t},\n+\t]\n+}\n+\n export default function HomePage() {\n \treturn (\n \t\t

\n-\t\t\tEpic Shop\n \t\t\t\n \t\t\t\n \t\t\t\ndiff --git a/app/routes/_landing.products.$productId.tsx b/app/routes/_landing.products.$productId.tsx\nindex efc068c..7286d47 100644\n--- a/app/routes/_landing.products.$productId.tsx\n+++ b/app/routes/_landing.products.$productId.tsx\n@@ -8,9 +8,27 @@ import {\n \tPlus,\n \tMinus,\n } from 'lucide-react'\n-import React, { useState } from 'react'\n+import { useState } from 'react'\n import { useParams, Link } from 'react-router'\n+import {\n+\tgetMetaFromMatches,\n+\tgetMetaTitle,\n+\tconstructPrefixedTitle,\n+} from '#app/utils/metadata.js'\n import { products } from '../../data/products'\n+// 💰 You will need these utilities! Feel free to check their implementation first!\n+import { type Route } from './+types/_landing.products.$productId'\n+\n+// 🐨 We want to include the root meta in the title to have Epic Shop | Product overview ${productId}\n+export const meta: Route.MetaFunction = ({ matches, params }) => {\n+\t// 💰 You can use getMetaFromMatches and specify \"root\" to extract the meta information from root\n+\t// 💰 You can use getMetaTitle to extract the title from the root meta information\n+\treturn [\n+\t\t{\n+\t\t\t// 💰 You can use constructPrefixedTitle to create the title with the prefix you provide\n+\t\t},\n+\t]\n+}\n \n export default function ProductDetailPage() {\n \tconst { productId } = useParams()\n@@ -63,7 +81,6 @@ export default function ProductDetailPage() {\n \treturn (\n \t\t

\n \t\t\t

\n-\t\t\t\tProduct Overview\n \t\t\t\t{/* Breadcrumb */}\n \t\t\t\t

\n \t\t\t\t\t {\n+\t// 💰 You can use getMetaFromMatches and specify \"root\" to extract the meta information from root\n+\t// 💰 You can use getMetaTitle to extract the title from the root meta information\n+\treturn [\n+\t\t{\n+\t\t\t// 💰 You can use constructPrefixedTitle to create the title with the prefix you provide\n+\t\t},\n+\t]\n+}\n export default function ProductsPage() {\n \tconst [selectedCategory, setSelectedCategory] = useState('All')\n \tconst [selectedBrand, setBrand] = useState('All')\n@@ -43,7 +60,6 @@ export default function ProductsPage() {\n \n \treturn (\n \t\t

\n-\t\t\tAll Products\n \t\t\t{/* Header */}\n \t\t\t

\n \t\t\t\t

\ndiff --git a/app/routes/_landing.products.tsx b/app/routes/_landing.products.tsx\nindex 557cee3..b3f90d3 100644\n--- a/app/routes/_landing.products.tsx\n+++ b/app/routes/_landing.products.tsx\n@@ -3,7 +3,6 @@ import { Outlet } from 'react-router'\n export default function ProductsLandingPage() {\n \treturn (\n \t\t<>\n-\t\t\tProducts\n \t\t\t\n \t\t\n \t)\ndiff --git a/app/utils/metadata.ts b/app/utils/metadata.ts\nnew file mode 100644\nindex 0000000..145df9b\n--- /dev/null\n+++ b/app/utils/metadata.ts\n@@ -0,0 +1,40 @@\n+import { type MetaDescriptor } from 'react-router'\n+\n+/**\n+ * Get the meta title from an array of meta descriptors.\n+ * @param metaDescriptors - An array of meta descriptors from route matches\n+ * @returns The meta title or null if not found\n+ */\n+export function getMetaTitle(metaDescriptors?: MetaDescriptor[]) {\n+\tif (!metaDescriptors) return null\n+\n+\tfor (const item of metaDescriptors) {\n+\t\tif ('title' in item && item.title && typeof item.title === 'string')\n+\t\t\treturn item.title\n+\t}\n+\treturn null\n+}\n+/**\n+ * Helper to get the meta array from route matches by route id.\n+ * @param matches - An array of route matches\n+ * @param id - The id of the route to find\n+ * @returns An array of meta descriptors for the matching route\n+ */\n+export function getMetaFromMatches<\n+\tT extends { id?: string; meta?: MetaDescriptor[] },\n+>(matches: (T | undefined)[], id: string) {\n+\tfor (const match of matches) {\n+\t\tif (match?.id === id && match?.meta) return match.meta\n+\t}\n+\treturn []\n+}\n+\n+/**\n+ * Helper to construct a prefixed title. If no prefix is provided, returns the original title.\n+ * @param title - The original title\n+ * @param prefix - The prefix to add\n+ * @returns The constructed title\n+ */\n+export function constructPrefixedTitle(title: string, prefix?: string | null) {\n+\treturn prefix ? `${prefix} | ${title}` : title\n+}\ndiff --git a/tests/e2e/metadata.test.ts b/tests/e2e/metadata.test.ts\nindex 74e9cdc..eb73e64 100644\n--- a/tests/e2e/metadata.test.ts\n+++ b/tests/e2e/metadata.test.ts\n@@ -6,19 +6,29 @@ test.describe('Routing E2E Tests', () => {\n \t}) => {\n \t\tawait page.goto('/')\n \t\tawait expect(page).toHaveTitle('Epic Shop')\n+\n+\t\t// Check for duplicate elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n \t})\n \n \ttest('should navigate to products page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/products')\n-\t\tawait expect(page).toHaveTitle('All Products')\n+\t\tawait expect(page).toHaveTitle('Epic Shop | All Products')\n+\t\t// Check for duplicate <title> elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n \t})\n \n \ttest('should navigate to specific product page and render correct content', async ({\n \t\tpage,\n \t}) => {\n \t\tawait page.goto('/products/1')\n-\t\tawait expect(page).toHaveTitle('Product Overview')\n+\t\tawait expect(page).toHaveTitle('Epic Shop | Product overview')\n+\t\t// Check for duplicate <title> elements\n+\t\tconst titleElements = page.locator('head > title')\n+\t\tawait expect(titleElements).toHaveCount(1)\n \t})\n })"] </article></body></html>

app/root.tsx-6+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-13+30App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-16+33App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx-15+31App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-7+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/utils/metadata.ts-0+40App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/metadata.test.ts-19+29App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/root.tsx-6+13App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing._index/route.tsx-13+30App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.$productId.tsx-16+33App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products._index.tsx-15+31App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/routes/_landing.products.tsx-7+6App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

app/utils/metadata.ts-0+40App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

tests/e2e/metadata.test.ts-19+29App 1Copy app 2 file to app 1 (Option+Command to sync without opening)Copy app 1 file to app 2 (Option+Command to sync without opening)App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2

App 1
App 2