Skip to content

Update Github navbar link with icon #10

@MathyouMB

Description

@MathyouMB

As a visitor, I want the "GitHub" link in the navbar to use the GitHub icon instead of plain text so that it’s easier to recognize and visually consistent with other Docusaurus sites.


🧠 Context

Right now, the top navigation bar includes a plain text link labeled "GitHub". Instead, we want to display the GitHub icon, as shown on the [official Docusaurus site](https://docusaurus.io/docs/cli).

✅ Example (what we want):

Example link with icon

🔗 Current Icon (from Docusaurus docs):

GitHub icon

This appears to be a built-in feature of Docusaurus — it’s likely just a matter of updating the navbar configuration in docusaurus.config.ts.


🛠️ Implementation Plan

  1. Open docusaurus.config.ts

  2. Update the navbar item for GitHub

    • Replace the current text-based item with one that uses the built-in icon

    Example from the Docusaurus site:

    navbar: {
      items: [
        {
          href: 'https://github.com/CarletonComputerScienceSociety/handbook',
          position: 'right',
          className: 'header-github-link',
          'aria-label': 'GitHub repository',
        },
      ]
    }
  3. Ensure icon CSS is included

    • Docusaurus automatically provides the icon if you use the header-github-link class
  4. Test the navbar

    • Verify that the GitHub icon appears and links to the correct repository
    • Confirm it looks correct in both light and dark mode

✅ Acceptance Criteria

  • The "GitHub" text link is replaced with the GitHub icon
  • The icon appears in the navbar and links to the correct repo
  • Styling is consistent with other Docusaurus sites
  • The icon works correctly in both light and dark themes

Metadata

Metadata

Assignees

Labels

Type

No type

Projects

Status

For Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions