refactor(multi): added product hunt details.

Author: DeepKumbhare85

.vscode/settings.json

@@ -20,4 +20,5 @@
     "emmet.includeLanguages": {
         "markdown": "html",
     },
+    "commentAnchors.tagHighlights.enabled": false,
 }

content/.vitepress/config.mts

@@ -50,6 +50,7 @@ export default defineConfig({
     ['meta', { property: 'twitter:creator', content: '@Theme_Selection' }],
     ['meta', { property: 'keywords', content: 'Vue 3 Cheatsheet, VueJS Cheatsheet, Vue JS Cheatsheet' }],
     ['meta', { property: 'google-site-verification', content: 'Eb4Y887SF6gMOy33YpMZEZLJuVfQHW9E3b8QjoSTDhw' }],
+    ['script', { src: 'https://buttons.github.io/buttons.js' }]
   ],
   themeConfig: {
     logo: { src: '/vue-cheatsheet-logo.png', alt: 'Vue Cheatsheet' },

content/.vitepress/theme/components/ProductHuntButton.vue

@@ -1,9 +1,16 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress';
+
+const { isDark } = useData()
+</script>
 <template>
-    <div class="mt-4">
+    <div class="mt-4 flex items-center gap-x-3">
+        <a data-v-0c3feb32="" data-v-2270f7fa="" class="VPButton medium brand" href="/vue/basic.html">Let's Start</a>
         <a href="https://www.producthunt.com/posts/vue-cheatsheet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-vue&#0045;cheatsheet"
             target="_blank"><img
-                src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=445414&theme=neutral"
+                :src="`https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=445414&theme=${isDark ? 'dark' : 'light'}`"
                 alt="Vue&#0032;CheatSheet - The&#0032;Ultimate&#0032;Vue&#0032;CheatSheet&#0032;For&#0032;Vue&#0044;&#0032;Vue&#0032;Router&#0032;&#0038;&#0032;Pinia | Product Hunt"
-                style="width: 250px; height: 54px;" width="250" height="54" /></a>
+                style="width: auto; height: 40px;border: 1px solid #fff;border-radius: 6px;" width="auto"
+                height="40" /></a>
     </div>
 </template>

content/.vitepress/theme/components/SocialMediaBtn.vue

@@ -0,0 +1,30 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress';
+import GithubButton from 'vue-github-button';
+
+const { isDark } = useData()
+
+console.log('theme :>> ', isDark.value);
+</script>
+
+<template>
+    <div class="widget">
+        <!-- Place this tag where you want the button to render. -->
+        <github-button href="https://github.com/themeselection/vue-cheatsheet"
+            :data-color-scheme="`no-preference: ${isDark ? 'dark' : 'light'};light: ${isDark ? 'dark' : 'light'} ; dark: ${isDark ? 'dark' : 'light'}`"
+            data-icon="octicon-star" data-size="large" data-show-count="true"
+            aria-label="Star themeselection/vue-cheatsheet on GitHub">Star</github-button>
+    </div>
+</template>
+
+<style lang="scss">
+.widget {
+    display: block;
+    margin-inline-start: 0.75rem;
+    margin-block-start: 0.375rem;
+
+    .social-count {
+        display: none;
+    }
+}
+</style>

content/.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme';
 import { h } from 'vue';
 import DocFooter from './components/DocFooter.vue';
 import ProductHuntButton from './components/ProductHuntButton.vue';
+import SocialMediaBtn from './components/SocialMediaBtn.vue';
 import SubscribeAlert from './components/SubscribeAlert.vue';
 import HomeVueThemesCallOut from './components/VueThemesCallOut.vue';
 import './custom.scss';
@@ -14,7 +15,8 @@ export default {
             'home-features-before': h(HomeVueThemesCallOut),
             'doc-after': h(DocFooter),
             'home-hero-before': h(SubscribeAlert),
-            'home-hero-actions-after': h(ProductHuntButton)
+            'home-hero-actions-after': h(ProductHuntButton),
+            'nav-bar-content-after': h(SocialMediaBtn),
         })
     }
 }

content/index.md

@@ -8,13 +8,6 @@ hero:
   image:
     src: /hero-image.png
     alt: Vue Cheatsheet
-  actions:
-    - theme: brand
-      text: Let's Start
-      link: /vue/basic
-    - theme: alt
-      text: Other Free Resources
-      link: https://themeselection.com/item/category/freebies/
 
 features:
   - title: Vue

content/public/google6f658ffc1e5996cb.html

@@ -0,0 +1 @@
+google-site-verification: google6f658ffc1e5996cb.html

package.json

@@ -16,6 +16,7 @@
   },
   "dependencies": {
     "markdown-it-mathjax3": "^4.3.2",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "vue-github-button": "^3.1.0"
   }
 }