Add start button and source code button (#175)

* Add start button and source code button * Remove the GH logo from the topbar
jozu-ai · Mar 28, 2024 · 2b1ab12 · 2b1ab12
1 parent 49a7002
commit 2b1ab12
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 6 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -25,6 +25,7 @@ export default defineConfig({
     ['script', { async: '', src: 'https://www.googletagmanager.com/gtag/js?id=G-QTDTMG01Z5' } ],
     ['script', {}, "window.dataLayer = window.dataLayer || [];\nfunction gtag(){dataLayer.push(arguments);}\ngtag('js', new Date());\ngtag('config', 'G-QTDTMG01Z5');"],
     ['script', {}, "(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});\nvar f=d.getElementsByTagName(s)[0],j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';\nj.async=true;j.src='https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);\n})(window,document,'script','dataLayer','GTM-TFFZXCQW');"],
+    ['script', { async: '', defer: '', src: 'https://buttons.github.io/buttons.js' }]
   ],
 
   lastUpdated: true,
@@ -98,10 +99,6 @@ export default defineConfig({
         icon: 'discord',
         link: 'https://discord.gg/3eDb4yAN'
       },
-      {
-        icon: 'github',
-        link: 'https://github.com/jozu-ai/kitops'
-      }
     ],
     footer: {
       license: {

diff --git a/docs/.vitepress/theme/components/GithubStartButton.vue b/docs/.vitepress/theme/components/GithubStartButton.vue
@@ -0,0 +1,11 @@
+<template>
+<div class="inline-flex items-center">
+  <a class="github-button"
+    href="https://github.com/jozu-ai/kitops"
+    data-color-scheme="no-preference: dark_high_contrast; light: dark_high_contrast; dark: dark_high_contrast;"
+    data-icon="octicon-star"
+    data-size="large"
+    data-show-count="true"
+    aria-label="Star jozu-ai/kitops on GitHub">Star</a>
+</div>
+</template>
diff --git a/docs/.vitepress/theme/components/Home.vue b/docs/.vitepress/theme/components/Home.vue
@@ -8,7 +8,10 @@ import { VueMarqueeSlider } from 'vue3-marquee-slider'
   <p class="h4 !font-normal !text-off-white">Share and run your models anywhere</p>
   <h1 class="mt-4">Bridge the gap between ML and Application teams</h1>
 
-  <a href="/docs/cli/installation" class="kit-button mt-10 md:mt-14 xl:mt-22">Install</a>
+  <div class="flex flex-col lg:flex-row justify-center items-center gap-10 lg:gap-4 mt-10 md:mt-14 xl:mt-22">
+    <a href="/docs/cli/installation" class="kit-button">Install</a>
+    <a href="https://github.com/jozu-ai/kitops" class="kit-button bg-none border-transparent hover:text-gold hover:bg-transparent hover:opacity-[80%]">Source Code</a>
+  </div>
 </div>
 
 <div id="howdoesitwork" class="mt-32 md:mt-40 xl:mt-60 px-6 md:px-12 text-center max-w-[1152px] mx-auto">

diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
@@ -4,6 +4,7 @@ import { type Theme, inBrowser } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import PlatformSelect from './components/PlatformSelect.vue'
 import PlatformSnippet from './components/PlatformSnippet.vue'
+import GithubStartButton from './components/GithubStartButton.vue'
 import Layout from './Layout.vue'
 import './assets/css/fonts.css'
 import './assets/css/tailwind.css'
@@ -28,7 +29,10 @@ export default {
 
     return h(DefaultTheme.Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
-      'sidebar-nav-after': () => h(PlatformSelect)
+      'sidebar-nav-after': () => h(PlatformSelect),
+      'nav-bar-content-after': () => h(GithubStartButton, {
+        class: 'ml-4 pt-2'
+      })
     })
   },
   enhanceApp({ app, router, siteData }) {