refactor(multi): added alt attributes.

Author: DeepKumbhare85

content/.vitepress/config.mts

@@ -20,9 +20,9 @@ height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   lang: 'en-US',
-  title: 'Vue Cheatsheet',
+  title: 'Vue Cheatsheet By ThemeSelection',
   lastUpdated: true,
-  description: "The one and only vue cheatsheet you need for VueJS by ThemeSelection",
+  description: "The one and only Vue cheatsheet you need for VueJS by ThemeSelection",
   head: [
     ['link', { rel: 'icon', href: '/logos/favicon.ico' }],
     ['link', { rel: 'apple-touch-icon', href: '/logos/apple-icon-57x57.png' }],
@@ -40,17 +40,18 @@ export default defineConfig({
     ['link', { rel: 'icon', href: '/logos/favicon-16x16.png' }],
     ['link', { rel: 'manifest', href: '/logos/manifest.json' }],
     ['meta', { property: 'og:title', content: 'Vue Cheatsheet' }],
-    ['meta', { property: 'og:description', content: 'The only Vue cheatsheet you will ever need' }],
+    ['meta', { property: 'og:description', content: 'The only VueJS cheatsheet you will ever need' }],
     ['meta', { property: 'og:image', content: 'https://ts-assets.b-cdn.net/ts-assets/vue-cheatsheet/github-banner-smm.png' }],
     ['meta', { property: 'twitter:image', content: 'https://ts-assets.b-cdn.net/ts-assets/vue-cheatsheet/github-banner-smm.png' }],
     ['meta', { property: 'twitter:title', content: 'Vue.js CheatSheet By ThemeSelection' }],
     ['meta', { property: 'twitter:description', content: 'Accelerate your vue learning & improve your skills with our comprehensive cheatsheet' }],
     ['meta', { property: 'twitter:card', content: 'summary_large_image' }],
     ['meta', { property: 'twitter:site', content: '@Theme_Selection' }],
     ['meta', { property: 'twitter:creator', content: '@Theme_Selection' }],
+    ['meta', { property: 'keywords', content: 'Vue 3 Cheatsheet, VueJS Cheatsheet, Vue JS Cheatsheet' }]
   ],
   themeConfig: {
-    logo: '/vue-cheatsheet-logo.png',
+    logo: { src: '/vue-cheatsheet-logo.png', alt: 'Vue Cheatsheet' },
 
     siteTitle: false,
     search: {

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

@@ -45,7 +45,7 @@ const secondColLinks = [
         <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>
+            <a href="https://themeselection.com/" target="_blank" class="themeselection-logo" alt="ThemeSelection"> </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">

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

@@ -8,5 +8,5 @@ const isHome = computed(() => page.value.frontmatter?.layout === 'home')
 </script>
 
 <template>
-    <span v-if="!isHome">{{ site.title }}</span>
+    <span v-if="!isHome">{{ site.title.split(' ').slice(0, 2).join(' ') }}</span>
 </template>

content/.vitepress/theme/components/SocialLinks.vue

@@ -4,7 +4,7 @@
 
 <template>
     <div class="flex items-center gap-3">
-        <a target="_blank" rel="noreferrer" href="https://github.com/themeselection"
+        <a target="_blank" rel="noreferrer" href="https://github.com/themeselection" alt="ThemeSelection GitHub"
             class="hover:text-[var(--vp-c-brand-1)]">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
@@ -15,21 +15,21 @@
                 </g>
             </svg>
         </a>
-        <a target="_blank" rel="noreferrer" href="https://twitter.com/Theme_Selection"
+        <a target="_blank" rel="noreferrer" href="https://twitter.com/Theme_Selection" alt="ThemeSelection Twitter"
             class="hover:text-[var(--vp-c-brand-1)]">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                     d="M23 3.01s-2.018 1.192-3.14 1.53a4.48 4.48 0 0 0-7.86 3v1a10.66 10.66 0 0 1-9-4.53s-4 9 5 13a11.64 11.64 0 0 1-7 2c9 5 20 0 20-11.5c0-.278-.028-.556-.08-.83C21.94 5.674 23 3.01 23 3.01" />
             </svg>
         </a>
-        <a target="_blank" rel="noreferrer" href="https://www.facebook.com/ThemeSelections/"
+        <a target="_blank" rel="noreferrer" href="https://www.facebook.com/ThemeSelections/" alt="ThemeSelection Facebook"
             class="hover:text-[var(--vp-c-brand-1)]">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                     d="M17 2h-3a5 5 0 0 0-5 5v3H6v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z" />
             </svg>
         </a>
-        <a target="_blank" rel="noreferrer" href="https://dribbble.com/themeselection/"
+        <a target="_blank" rel="noreferrer" href="https://dribbble.com/themeselection/" alt="ThemeSelection Dribbble"
             class="hover:text-[var(--vp-c-brand-1)]">
             <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24">
                 <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
@@ -39,4 +39,5 @@
                 </g>
             </svg>
         </a>
-</div></template>
+    </div>
+</template>

content/index.md

@@ -4,7 +4,7 @@ layout: home
 
 hero:
   name: "Vue Cheatsheet"
-  tagline: The only Vue cheatsheet you will ever need
+  tagline: The only VueJS cheatsheet you will ever need
   image:
     src: /hero-image.png
     alt: Vue Cheatsheet
@@ -20,16 +20,19 @@ features:
   - title: Vue
     icon: 
       src: /vue-logo.png
+      alt: 'Vue'
     details: Accelerate your vue learning & improve your skills with our comprehensive cheatsheet
     link: /vue/basic
   - title: Vue Router
     icon: 
       src: /vue-router-logo.png
+      alt: 'Vue Router'
     details: Your Simple Guide to Vue Router, Making Routes as Easy as Following a Map.
     link: /vue-router/basic
   - title: Pinia
     icon: 
       src: /pinia-logo.png
+      alt: 'Pinia'
     details: Your Cheatsheet for  Pinia, Perfect for Vue Beginners and Beyond.
     link: /pinia/basic
 ---