Skip to content

GitHub Icon with Stars

If you want to change the GitHub icon to a different one that includes repository stars, you will need the stargazers.data.ts and StarUs.vue files, along with some changes to your index.ts and package.json files.

Change repository information

ts
# stargazers.data.ts
const REPO = "LuxDL/DocumenterVitepress.jl"; # change to "u/repo"

and here

vue
# StarUs.vue
const props = defineProps({
  repoUrl: {
    type: String,
    default: "https://github.com/LuxDL/DocumenterVitepress.jl" # change to "url repo"
  }
});

And make sure you have the following highlighted elements:

ts
// .vitepress/theme/index.ts
import { h } from 'vue'
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import VersionPicker from "../../components/VersionPicker.vue"
import StarUs from '../../components/StarUs.vue'
import AuthorBadge from '../../components/AuthorBadge.vue'
import Authors from '../../components/Authors.vue'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
import './style.css'

export default {
  extends: DefaultTheme,
  Layout() {
    return h(DefaultTheme.Layout, null, {
      'nav-bar-content-after': () => h(StarUs), 
    })
  },
  enhanceApp({ app, router, siteData }) {
    enhanceAppWithTabs(app);
    app.component('VersionPicker', VersionPicker);
    app.component('AuthorBadge', AuthorBadge)
    app.component('Authors', Authors)
  }
} satisfies Theme
json
{
  "devDependencies": {
    "@types/d3-format": "^3.0.4", 
    "@types/node": "^22.10.5", 
    "markdown-it": "^14.1.0",
    "markdown-it-mathjax3": "^4.3.2",
    "vitepress": "^1.5.0",
    "vitepress-plugin-tabs": "^0.5.0"
  },
  "scripts": {
    "docs:dev": "vitepress dev build/.documenter",
    "docs:build": "vitepress build build/.documenter",
    "docs:preview": "vitepress preview build/.documenter"
  },
  "dependencies": {
    "d3-format": "^3.1.0", 
    "markdown-it-footnote": "^4.0.0"
  }
}