Merge branch 'main' of https://github.com/themeselection/vue-cheatsheet

Author: yagnikvamja

.github/workflows/deploy.yml

@@ -3,15 +3,13 @@ run-name: 🚀 Deploy
 
 on:
   workflow_dispatch:
-  # push:
-  #   branches:
-  #     - main
+  push:
+    branches:
+      - main
 
 jobs:
   deployment:
     runs-on: ubuntu-latest
-    env:
-      DEPLOY_DIR_NAME: vue-cheatsheet
     steps:
       - name: ⚙️ Setup pnpm
         uses: pnpm/action-setup@v2
@@ -25,27 +23,16 @@ jobs:
         run: |
           pnpm i
           pnpm build
-          mv content/.vitepress/dist content/.vitepress/${{ env.DEPLOY_DIR_NAME }}
-        
-      - name: 🗄️ Cleanup & Backup
-        uses: appleboy/ssh-action@v0.1.5
-        with:
-          host: ${{ secrets.HOST }}
-          username: ${{ secrets.USERNAME }}
-          port: ${{ secrets.PORT }}
-          key: ${{ secrets.SSHKEY }}
-          script: |
-            mkdir -p ${{ secrets.PROD_DIR }}
-            cd ${{ secrets.PROD_DIR }}
-            rm -rf ${{ env.DEPLOY_DIR_NAME }}
+          mv content/.vitepress/dist content/.vitepress/html
           
-      - name: 🚀 Upload documentation
+      - name: 🚀 Upload
         uses: appleboy/scp-action@master
         with:
           HOST: ${{ secrets.HOST }}
           USERNAME: ${{ secrets.USERNAME }}
           PORT: ${{ secrets.PORT }}
           KEY: ${{ secrets.SSHKEY }}
-          source: content/.vitepress/${{ env.DEPLOY_DIR_NAME }}
-          target: ${{ secrets.PROD_DIR }}
-          strip_components: 2
+          source: content/.vitepress/html
+          target: ${{ secrets.TARGET_DIR }}
+          strip_components: 3
+          rm: true

content/.vitepress/config.mts

@@ -19,12 +19,29 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
-  base: '/vue-cheatsheet/',
   lang: 'en-US',
   title: 'Vue Cheatsheet',
   description: "The one and only cheatsheet you need for Vue.js by ThemeSelection",
+  head: [
+    ['link', { rel: 'icon', href: '/logos/favicon.ico' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-57x57.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-60x60.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-72x72.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-76x76.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-114x114.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-120x120.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-144x144.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-152x152.png' }],
+    ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-180x180.png' }],
+    ['link', { rel: 'icon', href: '/logos/android-icon-192x192.png' }],
+    ['link', { rel: 'icon', href: '/logos/favicon-32x32.png' }],
+    ['link', { rel: 'icon', href: '/logos/favicon-96x96.png' }],
+    ['link', { rel: 'icon', href: '/logos/favicon-16x16.png' }],
+    ['link', { rel: 'manifest', href: '/logos/manifest.json' }],
+  ],
   themeConfig: {
     logo: '/vue-cheatsheet-logo.png',
+    
     siteTitle: false,
     search: {
       provider: 'local',

content/.vitepress/theme/components/Footer.vue

@@ -7,6 +7,7 @@ import SubscribeForm from './SubscribeForm.vue';
 const { frontmatter } = useData()
 const { hasSidebar } = useSidebar()
 
+
 const firstColLinks = [
     { title: 'Freebies', link: 'https://themeselection.com/item/category/download-free-admin-templates/' },
     { title: 'UI Kits', link: 'https://themeselection.com/item/category/ui-kits/' },
@@ -21,9 +22,9 @@ const secondColLinks = [
 </script>
 
 <template>
-    <footer v-if="frontmatter.footer !== false" class="pt-12 px-6 bg-gray-100 dark:bg-zinc-800 sm:px-12 lg:px-16"
+    <footer v-if="frontmatter.footer !== false" class="pt-12 bg-gray-100 dark:bg-zinc-800"
         :class="{ 'hidden': hasSidebar }">
-        <div class="container mx-auto flex flex-wrap gap-y-14 gap-x-10 lg:justify-between  gap-y-4 mb-10">
+        <div class="container mx-auto flex flex-wrap gap-10 lg:justify-between mb-10 px-6 sm:px-12 lg:px-16">
             <div class="flex flex-col gap-4 items-start">
                 <a v-for="(link, index) in firstColLinks" :key="index" target="_blank" rel="noreferrer" :href="link.link"
                     class="text-gray-500 hover:text-[var(--vp-c-brand-1)] dark:text-gray-400 dark:hover:text-[var(--vp-c-brand-1)]">{{
@@ -41,12 +42,10 @@ const secondColLinks = [
                 <SocialLinks class="mt-6"></SocialLinks>
             </div>
         </div>
-        <hr>
-
-        <div class="container mx-auto flex items-center justify-between border-gray-300 dark:border-zinc-700 pt-8 pb-6 ">
-            <a href="https://themeselection.com/" target="_blank">
-                <img src="/brand-logo-small.png" alt="ThemeSelection" height="38" class="h-10" />
-            </a>
+        <hr class="divider">
+        <div
+            class="container mx-auto flex flex-wrap items-center justify-between border-gray-300 dark:border-zinc-700 pt-8 pb-6 gap-3 px-6 sm:px-12 lg:px-16">
+            <a href="https://themeselection.com/" target="_blank" class="themeselection-logo"> </a>
             <div class="flex items-center gap-x-1">
                 <span>© 2024-Present, Made with</span>
                 <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
@@ -60,3 +59,26 @@ const secondColLinks = [
         </div>
     </footer>
 </template>
+
+<style scoped lang="scss">
+html {
+
+    .themeselection-logo {
+        width: 192px;
+        height: 40px;
+        background-image: url('/brand-logo-small-light.png');
+        background-repeat: no-repeat;
+        background-size: contain;
+    }
+
+    &.dark {
+        .divider {
+            border-color: var(--vp-c-gray-3);
+        }
+
+        .themeselection-logo {
+            background-image: url('/brand-logo-small-dark.png');
+        }
+    }
+}
+</style>

content/.vitepress/theme/components/SiteTitle.vue

@@ -0,0 +1,12 @@
+<script lang="ts" setup>
+import { useData } from 'vitepress';
+import { computed } from 'vue';
+
+const { site, page } = useData()
+
+const isHome = computed(() => page.value.frontmatter?.layout === 'home')
+</script>
+
+<template>
+    <span v-if="!isHome">{{ site.title }}</span>
+</template>

content/.vitepress/theme/components/SubscribeForm.vue

@@ -2,15 +2,20 @@
 </script>
 
 <template>
-    <p class="font-semibold leading-7 text-lg text-[var(--vp-c-brand-1)]">Stay connected with latest industry updates
+    <p class="font-semibold leading-7 text-lg text-[var(--vp-c-brand-1)]">Subscribe to our newsletter
     </p>
-    <p class="my-4 mt-2 text-gray-500 dark:text-gray-400">Subscribe to get updated with our template updates,
-        development-related resources, Freebies, and product offers.</p>
-    <form class="flex items-center gap-4">
-        <input type="email" required
+    <p class="my-4 mt-2 text-gray-500 dark:text-gray-400">A weekly latest Articles, UI Kits, Free & Premium Resources.</p>
+    <form action="https://themeselection.com/mailster/subscribe" method="post" class="flex items-center gap-4">
+
+        <input name="_action" type="hidden" value="subscribe">
+        <input name="_timestamp" type="hidden" value="1706684888">
+        <input name="_referer" type="hidden" value="extern">
+        <input name="_nonce" type="hidden" value="342601d290">
+        <input name="formid" type="hidden" value="1">
+        <input type="email" required name="email"
             class="py-3 px-4 block w-full bg-white dark:bg-zinc-900 border-transparent rounded-lg text-sm focus:ring-2 focus:ring-emerald-500 dark:border-transparent dark:text-gray-400 dark:focus:ring-emerald-600"
             placeholder="john@mail.com" />
-        <button
+        <button type="submit"
             class="py-3 px-4 inline-flex items-center gap-x-2 text-sm font-semibold rounded-lg border border-transparent bg-[var(--vp-c-brand-1)] focus:ring-2 focus:outline-none focus:ring-emerald-500 text-white hover:bg-emerald-700 dark:focus:outline-none dark:focus:ring-1 dark:focus:ring-emerald-600">Subscribe</button>
     </form>
 </template>

content/.vitepress/theme/custom.scss

@@ -64,4 +64,9 @@
     button.DocSearch-Button {
         background-color: var(--vp-c-bg-alt);
     }
-}
+}
+
+// Enable below after: https://github.com/vuejs/vitepress/pull/3522
+// .VPNav:has(~ .is-home) .title > span {
+//     display: none;
+// }

content/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import DefaultTheme from 'vitepress/theme';
 import { h } from 'vue';
 import DocFooter from './components/DocFooter.vue';
+import SiteTitle from './components/SiteTitle.vue';
 import HomeVueThemesCallOut from './components/VueThemesCallOut.vue';
 import './custom.scss';
 import './tailwind.css';
@@ -11,6 +12,7 @@ export default {
         return h(DefaultTheme.Layout, null, {
             'home-features-before': h(HomeVueThemesCallOut),
             'doc-after': h(DocFooter),
+            'nav-bar-title-after': h(SiteTitle),
         })
     }
 }

content/changelog.md

@@ -1,5 +1,5 @@
 # Changelog
 
-## 2024-01-XX
+## 2024-01-31
 
 - Initial Release

content/index.md

@@ -20,7 +20,7 @@ features:
   - title: Vue
     icon: 
       src: /vue-logo.png
-    details: Accelerate your vue learning with our comprehensive cheatsheet
+    details: Accelerate your vue learning & improve your skills with our comprehensive cheatsheet
     link: /vue/basic
   - title: Vue Router
     icon: 

content/public/brand-logo-small-dark.png

@@ -0,0 +1,41 @@
+{
+ "name": "App",
+ "icons": [
+  {
+   "src": "\/android-icon-36x36.png",
+   "sizes": "36x36",
+   "type": "image\/png",
+   "density": "0.75"
+  },
+  {
+   "src": "\/android-icon-48x48.png",
+   "sizes": "48x48",
+   "type": "image\/png",
+   "density": "1.0"
+  },
+  {
+   "src": "\/android-icon-72x72.png",
+   "sizes": "72x72",
+   "type": "image\/png",
+   "density": "1.5"
+  },
+  {
+   "src": "\/android-icon-96x96.png",
+   "sizes": "96x96",
+   "type": "image\/png",
+   "density": "2.0"
+  },
+  {
+   "src": "\/android-icon-144x144.png",
+   "sizes": "144x144",
+   "type": "image\/png",
+   "density": "3.0"
+  },
+  {
+   "src": "\/android-icon-192x192.png",
+   "sizes": "192x192",
+   "type": "image\/png",
+   "density": "4.0"
+  }
+ ]
+}

content/public/brand-logo-small.png renamed to content/public/brand-logo-small-light.png

@@ -1,4 +1,6 @@
 {
+  "name": "vue-cheatsheet",
+  "version": "0.0.0",
   "scripts": {
     "dev": "vitepress dev content",
     "build": "vitepress build content",