added dynamic meta export to events_$eventId and groups_.$groupId components #163
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
app/routes/events_.$eventId.tsx
Outdated
| @@ -102,3 +102,12 @@ export function ErrorBoundary() { | |||
| const { eventId } = useParams(); | |||
| return <div className="error-container">There was an error loading event by the id {eventId}.</div>; | |||
| } | |||
|
|
|||
| export const meta: MetaFunction = ({ data }) => { | |||
| const eventFullName = data.event.name; | |||
There was a problem hiding this comment.
Check out this section in the Remix docs: https://remix.run/docs/en/main/route/meta#data.
You can use the loader function to infer the type of data!
CamilingJS
requested review from
andrelandgraf,
eiffelwong1,
tonydangblog and
shami-dev
app/routes/events_.$eventId.tsx
Outdated
| @@ -126,3 +126,12 @@ export function ErrorBoundary() { | |||
| const { eventId } = useParams(); | |||
| return <div className="error-container">There was an error loading event by the id {eventId}.</div>; | |||
| } | |||
|
|
|||
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | |||
There was a problem hiding this comment.
NIT: Can we move Metafunction to the top? 🙂 I feel it should be there.
app/routes/events_.$eventId.tsx
Outdated
|
|
||
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | ||
| const eventFullName = data.event.name; | ||
| const regex = /^[^:]+/; |
There was a problem hiding this comment.
Not a blocker: Why do we need regex? If it's necessary, should we place a tiny comment on what it does?
There was a problem hiding this comment.
If there's a title in the format 'Tech Talks: Exploring the Latest Web Development Trends', it will only take the text before the colon.
app/routes/events_.$eventId.tsx
Outdated
| const eventName = eventFullName.match(regex); | ||
| const eventDescription = data.event.description; | ||
|
|
||
| return [{ title: `${eventName} | Social Plan-It` }, { name: 'description', content: `${eventDescription}` }]; |
There was a problem hiding this comment.
Great boost of SEO!
Another NIT: Should we shorten the title if it's lengthy?
CamilingJS
changed the title
| export async function loader({ params }: LoaderFunctionArgs) { | ||
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | ||
| const eventFullName = data.event.name; | ||
| const regex = /^[^:]+/; |
There was a problem hiding this comment.
Q: is there a reason we cleaning up only : , or should we go further and only allow a-z A-Z 0-9
| const eventName = eventFullName.match(regex); | ||
| const eventDescription = data.event.description; | ||
|
|
||
| return [{ title: `${eventName} | Social Plan-It` }, { name: 'description', content: `${eventDescription}` }]; |
There was a problem hiding this comment.
| return [{ title: `${eventName} | Social Plan-It` }, { name: 'description', content: `${eventDescription}` }]; | |
| return [{ title: `${eventName} | Social Plan-It` }, { name: 'description', content: eventDescription }]; |
| export const meta: MetaFunction<typeof loader> = ({ data }) => { | ||
| const group = data.group; | ||
|
|
||
| return [{ title: `${group.name} | Social Plan-It` }, { name: 'description', content: `${group.description}` }]; |
There was a problem hiding this comment.
| return [{ title: `${group.name} | Social Plan-It` }, { name: 'description', content: `${group.description}` }]; | |
| return [{ title: `${group.name} | Social Plan-It` }, { name: 'description', content: group.description }]; |
Issue: #
Summary (1-2 sentences)
Added dynamic meta export to the events_$eventId and groups_.$groupId components. Using the data object, I display the event name as the title and the event description in the meta description.
Details (reason and description of the changes)
Enhances the SEO for this page.
Challenges (what problems did I face?) (optional)
Had TS compliance issues. Ended up inferring the type of data in the MetaFunction per suggestion below.