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
No fields configured for issues without a type.

Projects

Status

For Review

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions