Fixes #12 - Implement Events page #28
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
src/components/EventCard.tsx
Outdated
| <div className={`${styles["event-card"]}`}> | ||
| <div className={`${styles["left-container"]}`}> | ||
| <div className={`${styles["date-container"]}`}> | ||
| <h3>Date</h3> |
There was a problem hiding this comment.
Be careful with the section heading tags. If you look at the structure you currently have, it goes from h3 to h2 in the code. While it visually may not look like that, when viewing the site with screen readers, or when it gets crawled by Google for SEO, the tags will be out of order. To remediate this, I would first add an h1 tag at the top of the page, and then leave the event title as h2 tags. The date, if it eventually should house a date, should use the time HTML element instead.
There was a problem hiding this comment.
time tag documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time
There was a problem hiding this comment.
@quinnmcphail Thank you for this comment regarding SEO best practices. I'm learning how super important they are. To fix this, I added an h1 tag at the top of the EventsPage component and committed that change to this pull request.
There was a problem hiding this comment.
@quinnmcphail I changed both of the time-related elements to time tags. I don't know how the group wants to handle transforming the ISO dates from the markdown files. That's why I simply put placeholder text there, but eventually we'll convert the ISO dates to readable text (with a JS function?) and make the date text dynamic. I also added the "dateTime" attribute to the tags, although the values for the attribute will eventually be dynamic too.
Those changes have been committed to this pull request.
src/components/EventCard.tsx
Outdated
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| strokeWidth={1.5} | ||
| stroke="currentColor" | ||
| className={`${styles["meeting-time-icon"]}`} | ||
| > | ||
| <path | ||
| strokeLinecap="round" | ||
| strokeLinejoin="round" | ||
| d="M12 6v6h4.5m4.5 0a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
We may want to include the heroicons library instead of referencing the SVG. Documentation on how to do that is located here: https://github.com/tailwindlabs/heroicons?tab=readme-ov-file#react
There was a problem hiding this comment.
@quinnmcphail Thanks, I didn't know that was an available option. I removed the SVGs and imported the heroicon components. It makes everything look simpler/cleaner. That change has been committed to this pull request.
src/components/EventCard.tsx
Outdated
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| stroke-width="1.5" | ||
| stroke="currentColor" | ||
| className={`${styles["meeting-location-icon"]}`} | ||
| > | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" | ||
| /> | ||
| <path | ||
| stroke-linecap="round" | ||
| stroke-linejoin="round" | ||
| d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" | ||
| /> | ||
| </svg> |
There was a problem hiding this comment.
Same as the comment above: https://github.com/tailwindlabs/heroicons?tab=readme-ov-file#react
src/components/EventCard.tsx
Outdated
| /> | ||
| </svg> | ||
| </div> | ||
| <p>{startDateTime}</p> |
There was a problem hiding this comment.
Also will want to use the time element referenced above.
There was a problem hiding this comment.
@quinnmcphail Thank you for these comments!
…with a <time> tag, and add placeholders for the time text
🔗 Links
🗒️ What & Why
test-datadirectory with 3 markdown files inside this directory (20240701.md,20240702.md, and20240703.md) containing dummy data.getEventsData.jswith a function for reading and sorting the markdown files from the file system./eventsroute by adding aneventssubfolder inside thepagesdirectory and adding anindex.tsxfile inside it.EventsPagecomponent located insrc/pages/events/index.tsxEventsListcomponent located insrc/componentsEventCardcomponent located insrc/componentsEventsPagecomponent.EventsList.module.cssEventCard.module.css🎨 Designs
N/A
🧪 Test Steps