Skip to content

Add Homepage Link to Logo Component #200

@babblebey

Description

@babblebey

The jargons.dev logo in the header navigation currently doesn't link to the homepage. We need to make the logo clickable so users can easily navigate back to the homepage from any page on the site.

Image

Goal

Make the logo in the navigation header clickable and link to the homepage (/).

Current State

The logo is currently displayed as a plain SVG component without any link functionality:

<JargonsdevLogo class="drop-shadow drop-shadow-color-black h-10 md:h-12" />

File location: src/components/navbar.astro (line 32)

Expected Outcome

The logo should be wrapped with a link that navigates to the homepage when clicked, following standard web conventions where clicking a site logo takes you to the homepage.

Step-by-Step Instructions

  1. Open the navbar component file:

    • Navigate to src/components/navbar.astro
  2. Locate the logo component:

    • Find the <JargonsdevLogo> component on line 32
    • It's currently inside a <div> with flex layout
  3. Wrap the logo with a link:

    • Replace the current logo line with:
    <a href="/" class="block">
      <JargonsdevLogo class="drop-shadow drop-shadow-color-black h-10 md:h-12" />
    </a>
  4. Test your changes:

    • Run the development server: npm run dev
    • Navigate to any page that shows the header
    • Click the logo to verify it navigates to the homepage
    • Ensure the logo styling remains unchanged

Why This Change Matters

  • User Experience: Standard web convention - users expect logos to link to homepage
  • Navigation: Provides an easy way to return to the main page from anywhere on the site
  • Accessibility: Improves site navigation for all users

Files to Modify

  • src/components/navbar.astro (line 32)

Testing Checklist

  • Logo is clickable and links to homepage (/)
  • Logo styling remains unchanged (same size, drop shadow, etc.)
  • Link works on different pages (browse pages, individual word pages, etc.)
  • No visual regression in the navbar layout

Need Help?

  • New to Astro? Check out the Astro documentation
  • Questions about this issue? Feel free to comment below or reach out to maintainers
  • Stuck? Don't hesitate to ask for help - we're here to support you!

Metadata

Metadata

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions