Fix markdown rendering in blog posts and replace nav logo with bicycle icon#14
Fix markdown rendering in blog posts and replace nav logo with bicycle icon#14
Conversation
Co-authored-by: miacycle <184569369+miacycle@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR fixes markdown styling in blog posts and replaces the plain "MG" text logo with a thematic bicycle icon in the navigation bar. The changes enable proper visual rendering of markdown content using Tailwind's typography plugin and provide a more visually distinctive branding element.
Changes:
- Added
@tailwindcss/typographyplugin to enable prose styling for markdown content in blog posts - Replaced text-based "MG" logo with a Bike icon from lucide-react in the navigation component
- Updated package-lock.json to reflect the new typography plugin dependency
Reviewed changes
Copilot reviewed 2 out of 3 changed files in this pull request and generated 1 comment.
| File | Description |
|---|---|
| tailwind.config.ts | Added @tailwindcss/typography plugin to enable prose class styling |
| src/components/Navigation.tsx | Replaced "MG" text logo with Bike icon and updated import statement |
| package-lock.json | Added @tailwindcss/typography package and its dependencies as devDependencies |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className="flex items-center justify-between"> | ||
| <Link to="/" className="text-xl font-semibold text-primary"> | ||
| MG | ||
| <Link to="/" className="text-primary hover:text-primary/80 transition-colors"> |
There was a problem hiding this comment.
The Bike icon link is missing an aria-label attribute for accessibility. Screen reader users won't have clear information about where this link navigates to. Add an aria-label describing the link's purpose (e.g., "Home" or "Go to homepage").
| <Link to="/" className="text-primary hover:text-primary/80 transition-colors"> | |
| <Link | |
| to="/" | |
| className="text-primary hover:text-primary/80 transition-colors" | |
| aria-label="Go to homepage" | |
| > |
Blog post markdown was not visually styled (prose plugin missing), and the nav logo displayed a plain "MG" text instead of a thematic bicycle icon.
Changes
tailwind.config.ts— Added@tailwindcss/typographyto the plugins array. Theproseclass was already applied inBlogPost.tsxbut had no effect without the plugin.Navigation.tsx— Swapped the "MG" text for aBikeicon fromlucide-react(already a dependency).Screenshots
Bicycle icon in navigation + homepage:

Rendered markdown in blog post (bold, lists, links):

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.