Skip to content

Commit 011a924

Browse files
AlemTuzlakAlemTuzlak
committed
fixes
1 parent 10f292c commit 011a924

File tree

16 files changed

+118
-47
lines changed

16 files changed

+118
-47
lines changed

‎exercises/02.metadata/01.problem.styling/README.mdx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,8 @@ export const links: LinksFunction = () => [
6060
]
6161
```
6262

63+
## Exercise overview
64+
6365
In this exercise, we're adding a global stylesheet and a Google Fonts link to our app.
6466
To get started head to the `root.tsx` and find the exercise instructions there!
6567

‎exercises/02.metadata/02.problem.titles-react/README.mdx‎

Lines changed: 6 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -50,30 +50,9 @@ and try to add titles to all the pages!
5050

5151

5252

53-
54-
55-
56-
57-
58-
59-
60-
61-
62-
In this exercise, we're going to use the `meta` export to add titles to our pages.
63-
64-
Here's a quick overview of how the `meta` export works:
65-
- The `meta` export is a function that returns an object containing metadata for the route.
66-
- The keys of the object correspond to the metadata properties, such as `title`, `description`, etc.
67-
- The values of the object are the values of the metadata properties.
68-
Here's an example of how to use the `meta` export to add a title to a route:
69-
70-
```tsx
71-
import { MetaFunction } from 'react-router'
72-
73-
export const meta: MetaFunction = () => {
74-
return {
75-
title: 'My Page Title',
76-
description: 'My Page Description',
77-
}
78-
}
79-
```
53+
## Exercise overview
54+
In this exercise, we're going to add titles to our pages using React 19 JSX metadata tags.
55+
1. Go through every route, Kody will be there to guide you in what you need to do.
56+
2. Add titles to all the pages using React 19 JSX metadata tags.
57+
3. Make sure to test your titles by visiting the pages and checking the document title in the
58+
browser tab and also in the document head using the browser dev tools.

‎exercises/02.metadata/02.solution.titles-react/README.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,4 +19,8 @@ to our pages and also add a shared prefix to all our titles!
1919
for metadata parsing and reading! You can find them in `app/utils/metadata.ts` in the
2020
next exercise! I really hope this helps you out to make Peter happier!
2121

22+
🧝‍♀️ Also, I've removed all the `<title>` tags you added, Peter says he'd rather have no
23+
titles at all, than buggy ones! So, you'll have to add them all again using the `meta`
24+
export!
25+
2226
Take a breather, and let's continue once you're ready! 🚀

‎exercises/02.metadata/02.solution.titles-react/app/routes/_landing.products.$productId.tsx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,6 @@ export default function ProductDetailPage() {
2424
if (!product) {
2525
return (
2626
<div className="flex min-h-screen items-center justify-center bg-stone-50 dark:bg-gray-900">
27-
28-
<title>Product Overview</title>
2927
<div className="text-center">
3028
<h2 className="mb-4 text-2xl font-light text-gray-900 dark:text-white">
3129
Product not found

‎exercises/02.metadata/03.problem.titles-with-meta/README.mdx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,14 @@ in a more structured way by giving us the data returned from loaders, and also t
3131
routes metadata, which allows us to easily create dynamic titles and other metadata based on the
3232
data returned from our loaders.
3333

34-
In this exercise, we're going to use the `meta` export to add titles to our pages.
34+
In this exercise, we're going to use the `meta` export to add titles to our pages.
35+
36+
## Exercise overview
37+
38+
1. Go to the `root.tsx` file and find Kody there, he will help you add the first SEO title in the root.
39+
2. Once you have that in place visit each route and add the `meta` export to add titles to each page.
40+
3. Make sure to include the root meta in the title to have `Epic Shop - <Page Specific Title>`.
41+
4. Kelly has helped us with utilities for metadata parsing and reading! You can find them in
42+
`app/utils/metadata.ts`. Feel free to check their implementation first!
43+
44+

‎exercises/02.metadata/03.problem.titles-with-meta/app/root.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,12 @@ export const links: Route.LinksFunction = () => [
2525
},
2626
]
2727

28+
export const meta: Route.MetaFunction = () => {
29+
// 🐨 Add the title to this page
30+
// 💰 The title should be "Epic Shop"
31+
return []
32+
}
33+
2834
export function Layout({ children }: { children: React.ReactNode }) {
2935
return (
3036
<html lang="en">

‎exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing._index/route.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,24 @@
1-
import { getMetaFromMatches, getMetaTitle } from '#app/utils/metadata.js'
21
import type { Route } from './+types/route'
32
import { CategoriesSection } from './categories-section'
43
import { FeaturedProductsSection } from './featured-products.section'
54
import { FeaturesSection } from './features-section'
65
import { HeroSection } from './hero-section'
76
import { NewsletterSection } from './newsletter-section'
7+
// 💰 You will need these utilities! Feel free to check their implementation first!
8+
import { getMetaFromMatches, getMetaTitle, constructPrefixedTitle } from '#app/utils/metadata.js';
89

10+
// 🐨 We want to include the root meta in the title to have Epic Shop | Terms of Use
911
export const meta: Route.MetaFunction = ({ matches }) => {
10-
//
11-
const rootMeta = getMetaFromMatches(matches, 'root')
12-
const title = getMetaTitle(rootMeta);
13-
return [{ title }]
12+
// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
13+
// 💰 You can use getMetaTitle to extract the title from the root meta information
14+
return [{
15+
// 💰 You can use the title from the root to return the same title here
16+
}]
1417
}
1518

1619
export default function HomePage() {
1720
return (
1821
<div className="bg-stone-50 dark:bg-gray-900">
19-
<title>Epic Shop</title>
2022
<HeroSection />
2123
<FeaturesSection />
2224
<CategoriesSection />

‎exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing.about.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,16 @@
11
import { Award, Heart, Compass, Lightbulb } from 'lucide-react'
2+
// 💰 You will need these utilities! Feel free to check their implementation first!
3+
import { getMetaFromMatches, getMetaTitle, constructPrefixedTitle } from '#app/utils/metadata.js';
4+
import type { Route } from './+types/_landing.about';
5+
6+
// 🐨 We want to include the root meta in the title to have Epic Shop | About Us
7+
export const meta: Route.MetaFunction = ({ matches }) => {
8+
// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
9+
// 💰 You can use getMetaTitle to extract the title from the root meta information
10+
return [{
11+
// 💰 You can use constructPrefixedTitle to create the title with the prefix you provide
12+
}]
13+
}
214

315
export default function AboutPage() {
416
const team = [
@@ -54,7 +66,6 @@ export default function AboutPage() {
5466

5567
return (
5668
<div className="bg-stone-50 dark:bg-gray-900">
57-
<title>About Us</title>
5869
{/* Hero Section */}
5970
<div className="bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100 py-32 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
6071
<div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">

‎exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing.cart.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import { Minus, Plus, Trash2, ArrowLeft, ShoppingBag } from 'lucide-react'
22
import { Link } from 'react-router'
3+
// 💰 You will need these utilities! Feel free to check their implementation first!
4+
import { getMetaFromMatches, getMetaTitle, constructPrefixedTitle } from '#app/utils/metadata.js';
5+
import type { Route } from './+types/_landing.cart';
36

7+
// 🐨 We want to include the root meta in the title to have Epic Shop | Cart
8+
export const meta: Route.MetaFunction = ({ matches }) => {
9+
// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
10+
// 💰 You can use getMetaTitle to extract the title from the root meta information
11+
return [{
12+
// 💰 You can use constructPrefixedTitle to create the title with the prefix you provide
13+
}]
14+
}
415
export default function CartPage() {
516
const items: {
617
id: number
@@ -71,7 +82,6 @@ export default function CartPage() {
7182
<div className="min-h-screen bg-stone-50 dark:bg-gray-900">
7283
<div className="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
7384
{/* Header */}
74-
<title>Cart</title>
7585
<div className="mb-8 flex items-center justify-between">
7686
<div>
7787
<h1 className="text-3xl font-light text-gray-900 dark:text-white">

‎exercises/02.metadata/03.problem.titles-with-meta/app/routes/_landing.contact.tsx‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
11
import { Mail, Phone, MapPin, Send, CheckCircle, Clock } from 'lucide-react'
22
import React, { useState } from 'react'
3+
// 💰 You will need these utilities! Feel free to check their implementation first!
4+
import { getMetaFromMatches, getMetaTitle, constructPrefixedTitle } from '#app/utils/metadata.js';
5+
import type { Route } from './+types/_landing.contact';
36

7+
// 🐨 We want to include the root meta in the title to have Epic Shop | Contact Us
8+
export const meta: Route.MetaFunction = ({ matches }) => {
9+
// 💰 You can use getMetaFromMatches and specify "root" to extract the meta information from root
10+
// 💰 You can use getMetaTitle to extract the title from the root meta information
11+
return [{
12+
// 💰 You can use constructPrefixedTitle to create the title with the prefix you provide
13+
}]
14+
}
415
export default function ContactPage() {
516
const [formData, setFormData] = useState({
617
name: '',
@@ -61,7 +72,6 @@ export default function ContactPage() {
6172

6273
return (
6374
<div className="bg-stone-50 dark:bg-gray-900">
64-
<title>Contact Us</title>
6575
{/* Hero Section */}
6676
<div className="bg-gradient-to-br from-stone-50 via-amber-50/30 to-stone-100 py-32 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
6777
<div className="mx-auto max-w-7xl px-4 text-center sm:px-6 lg:px-8">

0 commit comments

Comments
 (0)