chore: add redirect to herodevs site for vue 2 (#2912)

Author: ShelbyKelley

.vitepress/theme/components/Home.vue

@@ -38,6 +38,18 @@ onMounted(load)
         </svg>
       </a>
       <a class="setup" href="/guide/quick-start.html">Install</a>
+      <a class="security" href="https://v2.vuejs.org/eol/" target="_blank">
+        Get Security Updates for Vue 2
+        <svg 
+          class="icon"
+          xmlns="http://www.w3.org/2000/svg" 
+          viewBox="0 0 512 512"
+        >
+          <path 
+            d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
+          />
+        </svg>
+      </a>
     </p>
   </section>
 
@@ -145,7 +157,25 @@ html:not(.dark) .accent,
   transition: background-color 0.5s, color 0.5s;
 }
 
-.actions .get-started {
+.actions .security {
+  background: linear-gradient(var(--vt-c-bg-mute), var(--vt-c-bg-mute)) padding-box, 
+    linear-gradient(45deg, #42d392, #647eff) border-box;
+  border: 2px solid transparent;
+}
+.actions .security:hover {
+  background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, 
+    linear-gradient(45deg, #42d392, #647eff) border-box;
+}
+
+.actions .security .icon {
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+
+}
+
+.actions .get-started,
+.actions .setup {
   margin-right: 18px;
 }
 
@@ -167,18 +197,21 @@ html:not(.dark) .accent,
 }
 
 .actions .get-started,
-.actions .setup {
+.actions .setup,
+.actions .security {
   color: var(--vt-c-text-code);
 }
 
 .actions .get-started:hover,
-.actions .setup:hover {
+.actions .setup:hover,
+.actions .security:hover {
   background-color: var(--vt-c-gray-light-4);
   transition-duration: 0.2s;
 }
 
 .dark .actions .get-started:hover,
-.dark .actions .setup:hover {
+.dark .actions .setup:hover,
+.dark .actions .security:hover {
   background-color: var(--vt-c-gray-dark-3);
 }
 
@@ -267,11 +300,14 @@ html:not(.dark) .accent,
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 794px) {
   .tagline {
     font-size: 48px;
     letter-spacing: -0.5px;
   }
+  .actions .security {
+    margin-top: 18px;
+  }
 }
 
 @media (max-width: 576px) {
@@ -301,6 +337,9 @@ html:not(.dark) .accent,
   .actions a {
     margin: 18px 0;
   }
+  .actions .security {
+    margin-top: 0;
+  }
 }
 
 @media (max-width: 370px) {

.vitepress/theme/components/SecurityUpdateBtn.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="container">
+    <a 
+      class="security" 
+      href="https://www.herodevs.com/support/nes-vue?utm_source=vuejs_org&utm_medium=sidebar_link&utm_campaign=vue2eol"
+      target="_blank"
+    >
+      Get Security Updates for Vue 2
+      <svg 
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg" 
+        viewBox="0 0 512 512"
+      >
+        <path 
+          d="M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z"
+        />
+      </svg>
+    </a>
+  </div>
+</template>
+
+<style>
+  .container {
+    margin-top: 20px;
+  }
+  .container .security {
+    font-size: 12px;
+    display: inline-block;
+    padding: 4px 8px;
+    font-weight: 500;
+    border-radius: 8px;
+    background: linear-gradient(var(--vt-c-bg-mute), var(--vt-c-bg-mute)) padding-box, 
+      linear-gradient(45deg, #42d392, #647eff) border-box;
+    border: 2px solid transparent;
+    color: var(--vt-c-text-code);
+    transition: background-color 0.5s, color 0.5s;
+  }
+  .container .security:hover {
+    background: linear-gradient(var(--vt-c-gray-light-4), var(--vt-c-gray-light-4)) padding-box, 
+      linear-gradient(45deg, #42d392, #647eff) border-box;
+    transition-duration: 0.2s;
+  }
+  .container .security .icon {
+    width: 12px;
+    height: 12px;
+    margin-left: 4px;
+    display: inline;
+    position: relative;
+    fill: currentColor;
+    transition: transform 0.2s;
+
+  }
+  .dark .container .security:hover {
+    background-color: var(--vt-c-gray-dark-3);
+  }
+</style>

.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import './styles/index.css'
 import { h, App } from 'vue'
 import { VPTheme } from '@vue/theme'
 import PreferenceSwitch from './components/PreferenceSwitch.vue'
+import SecurityUpdateBtn from './components/SecurityUpdateBtn.vue'
 import {
   preferComposition,
   preferSFC,
@@ -18,6 +19,7 @@ export default Object.assign({}, VPTheme, {
     return h(VPTheme.Layout, null, {
       // banner: () => h(Banner),
       'sidebar-top': () => h(PreferenceSwitch),
+      'sidebar-bottom': () => h(SecurityUpdateBtn),
       'aside-mid': () => h(SponsorsAside)
     })
   },