External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: move theme toggle and GitHub button to top-right navbar

Browse Source 
Remove socialLinks config and three-dots menu. Add appearance toggle
and combined GitHub + Star button directly in the navbar via layout
slot. The button shows the Octocat icon, "Star" label, and live
stargazer count.
This commit is contained in:
Siddharth Kumar Sah
2026-04-03 23:20:23 +08:00
parent 78cbdfdd6f
commit 47e53dc6cd
4 changed files with 59 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/docs/.vitepress/config.mts
-2
View File
@@ -46,8 +46,6 @@ export default defineConfig({
},
],
socialLinks: [{ icon: "github", link: "https://github.com/stirling-image/stirling-image" }],
search: {
provider: "local",
},
apps/docs/.vitepress/theme/GitHubStars.vue
+9 -15
View File
@@ -12,33 +12,27 @@ onMounted(async () => {
const count = data.stargazers_count;
stars.value = count >= 1000 ? `${(count / 1000).toFixed(1)}k` : String(count);
} catch {
// Silently fail - stars badge just won't show a count
// Stars count won't show if fetch fails
}
});
</script>
<template>
<div class="github-stars-wrapper">
<a :href="repo" target="_blank" rel="noopener" class="github-stars-btn">
<svg
width="16"
height="16"
viewBox="0 0 16 16"
fill="currentColor"
aria-hidden="true"
>
<path
d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25z"
/>
<div class="github-btn-wrapper">
<a :href="repo" target="_blank" rel="noopener" class="github-btn" title="Star on GitHub">
<!-- GitHub Octocat -->
<svg class="github-icon" width="18" height="18" viewBox="0 0 16 16" fill="currentColor">
<path d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z" />
</svg>
<span>Star</span>
<span class="github-btn-label">Star</span>
</a>
<a
v-if="stars !== null"
:href="`${repo}/stargazers`"
target="_blank"
rel="noopener"
class="github-stars-count"
class="github-btn-count"
title="Stargazers"
>
{{ stars }}
</a>
apps/docs/.vitepress/theme/Layout.vue
+5 -1
View File
@@ -1,5 +1,6 @@
<script setup>
import DefaultTheme from "vitepress/theme";
import VPSwitchAppearance from "vitepress/dist/client/theme-default/components/VPSwitchAppearance.vue";
import GitHubStars from "./GitHubStars.vue";
const { Layout } = DefaultTheme;
@@ -8,7 +9,10 @@ const { Layout } = DefaultTheme;
<template>
<Layout>
<template #nav-bar-content-after>
<GitHubStars />
<div class="nav-bar-right">
<VPSwitchAppearance />
<GitHubStars />
</div>
</template>
</Layout>
</template>
apps/docs/.vitepress/theme/github-stars.css
+45 -21
View File
@@ -1,64 +1,88 @@
.github-stars-wrapper {
/* Hide the three-dots extra menu - its contents are now in the navbar directly */
.VPNavBarExtra {
display: none !important;
}
/* Also hide the default appearance toggle since we render our own */
.VPNavBarAppearance {
display: none !important;
}
/* Right side of navbar: toggle + GitHub button */
.nav-bar-right {
display: flex;
align-items: center;
gap: 12px;
margin-left: 16px;
}
.github-stars-btn {
/* GitHub button group */
.github-btn-wrapper {
display: flex;
align-items: stretch;
height: 30px;
}
.github-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
font-size: 13px;
padding: 0 10px;
font-size: 12px;
font-weight: 600;
line-height: 20px;
line-height: 30px;
color: var(--vp-c-text-1);
background: var(--vp-c-bg-soft);
border: 1px solid var(--vp-c-divider);
border-radius: 6px 0 0 6px;
border-radius: 6px;
text-decoration: none;
transition: background 0.2s, border-color 0.2s;
transition: border-color 0.25s, background 0.25s;
white-space: nowrap;
}
.github-stars-btn:hover {
.github-btn:hover {
background: var(--vp-c-bg-mute);
border-color: var(--vp-c-text-3);
}
.github-stars-btn svg {
color: var(--vp-c-yellow-2, #d4a72c);
.github-icon {
opacity: 0.85;
}
.github-stars-count {
.github-btn-label {
margin-top: -1px;
}
/* Star count badge - attached to right side of button */
.github-btn-count {
display: flex;
align-items: center;
padding: 4px 10px;
font-size: 13px;
padding: 0 8px;
font-size: 12px;
font-weight: 600;
line-height: 20px;
line-height: 30px;
color: var(--vp-c-text-2);
background: var(--vp-c-bg);
border: 1px solid var(--vp-c-divider);
border-left: none;
border-radius: 0 6px 6px 0;
text-decoration: none;
transition: color 0.2s, border-color 0.2s;
transition: color 0.25s;
white-space: nowrap;
}
.github-stars-count:hover {
.github-btn-count:hover {
color: var(--vp-c-brand-1);
}
/* When there's no count yet, round all corners on the button */
.github-stars-btn:only-child {
border-radius: 6px;
/* When count is present, left-button gets flat right edge */
.github-btn-wrapper .github-btn:first-child:not(:last-child) {
border-radius: 6px 0 0 6px;
}
/* Hide on very small screens to avoid crowding */
/* Hide stars on small screens, keep toggle */
@media (max-width: 640px) {
.github-stars-wrapper {
.github-btn-wrapper {
display: none;
}
}