feat(layout): add github link in navbar (#77)

Author: alili

.prettierrc

@@ -0,0 +1,19 @@
+{
+  "printWidth": 150,
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": false,
+  "singleQuote": true,
+  "proseWrap": "preserve",
+  "arrowParens": "avoid",
+  "bracketSpacing": true,
+  "disableLanguages": [],
+  "endOfLine": "auto",
+  "eslintIntegration": false,
+  "htmlWhitespaceSensitivity": "ignore",
+  "ignorePath": ".prettierignore",
+  "requireConfig": false,
+  "stylelintIntegration": false,
+  "trailingComma": "es5",
+  "tslintIntegration": false
+}

docs/.vitepress/config.ts

@@ -37,6 +37,12 @@ export default (async () => ({
     copyright: '©Copyright 2022 Greptime Inc. All Rights Reserved',
     email: '[email protected]',
     sidebar: await makeSidebar(),
+    socialLinks: [
+      {
+        icon: 'github',
+        link: 'https://github.com/GreptimeTeam/docs',
+      },
+    ],
     nav: [
       {
         text: 'Home',

docs/.vitepress/theme/default/components/VPNavBarExtra.vue

@@ -50,7 +50,7 @@ const hasExtraContent = computed(() => theme.value.localeLinks || site.value.app
   }
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 960px) {
   .VPNavBarExtra {
     display: none;
   }

docs/.vitepress/theme/default/components/VPNavBarHamburger.vue

@@ -48,19 +48,40 @@ defineEmits<{
   overflow: hidden;
 }
 
-.VPNavBarHamburger:hover .top    { top: 0; left: 0; transform: translateX(4px); }
-.VPNavBarHamburger:hover .middle { top: 6px; left: 0; transform: translateX(0); }
-.VPNavBarHamburger:hover .bottom { top: 12px; left: 0; transform: translateX(8px); }
+.VPNavBarHamburger:hover .top {
+  top: 0;
+  left: 0;
+  transform: translateX(4px);
+}
+.VPNavBarHamburger:hover .middle {
+  top: 6px;
+  left: 0;
+  transform: translateX(0);
+}
+.VPNavBarHamburger:hover .bottom {
+  top: 12px;
+  left: 0;
+  transform: translateX(8px);
+}
 
-.VPNavBarHamburger.active .top    { top: 6px; transform: translateX(0) rotate(225deg); }
-.VPNavBarHamburger.active .middle { top: 6px; transform: translateX(16px); }
-.VPNavBarHamburger.active .bottom { top: 6px; transform: translateX(0) rotate(135deg); }
+.VPNavBarHamburger.active .top {
+  top: 6px;
+  transform: translateX(0) rotate(225deg);
+}
+.VPNavBarHamburger.active .middle {
+  top: 6px;
+  transform: translateX(16px);
+}
+.VPNavBarHamburger.active .bottom {
+  top: 6px;
+  transform: translateX(0) rotate(135deg);
+}
 
 .VPNavBarHamburger.active:hover .top,
 .VPNavBarHamburger.active:hover .middle,
 .VPNavBarHamburger.active:hover .bottom {
   background-color: var(--vp-c-text-2);
-  transition: top .25s, background-color .25s, transform .25s;
+  transition: top 0.25s, background-color 0.25s, transform 0.25s;
 }
 
 .top,
@@ -69,11 +90,23 @@ defineEmits<{
   position: absolute;
   width: 16px;
   height: 2px;
-  background-color: var(--vp-c-text-1);
-  transition: top .25s, background-color .5s, transform .25s;
+  background-color: var(--vp-c-text-dark-1);
+  transition: top 0.25s, background-color 0.5s, transform 0.25s;
 }
 
-.top    { top: 0; left: 0; transform: translateX(0); }
-.middle { top: 6px; left: 0; transform: translateX(8px); }
-.bottom { top: 12px; left: 0; transform: translateX(4px); }
+.top {
+  top: 0;
+  left: 0;
+  transform: translateX(0);
+}
+.middle {
+  top: 6px;
+  left: 0;
+  transform: translateX(8px);
+}
+.bottom {
+  top: 12px;
+  left: 0;
+  transform: translateX(4px);
+}
 </style>

docs/.vitepress/theme/default/components/VPNavBarSocialLinks.vue

@@ -6,19 +6,15 @@ const { theme } = useData()
 </script>
 
 <template>
-  <VPSocialLinks
-    v-if="theme.socialLinks"
-    class="VPNavBarSocialLinks"
-    :links="theme.socialLinks"
-  />
+  <VPSocialLinks v-if="theme.socialLinks" class="VPNavBarSocialLinks" :links="theme.socialLinks" />
 </template>
 
 <style scoped>
 .VPNavBarSocialLinks {
   display: none;
 }
 
-@media (min-width: 1280px) {
+@media (min-width: 960px) {
   .VPNavBarSocialLinks {
     display: flex;
     align-items: center;

docs/.vitepress/theme/style/custom.styl

@@ -30,10 +30,6 @@ body {
   margin-bottom: -80px;
 }
 
-.VPNavBarHamburger {
-  display: none !important;
-}
-
 .VPNavBarTitle, .dark .VPNavBar.has-sidebar .content {
   background-color: transparent !important;
 }
@@ -86,3 +82,11 @@ body {
   line-height: 30px;
   opacity: 0.6;
 }
+
+.VPNavScreen .VPSocialLink {
+  color var(--vp-c-text-2) !important 
+}
+
+.VPSocialLink {
+  color #fff !important
+}