Add: banner on the main

.vitepress/theme/Banner.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+import { VPBadge } from "vitepress/theme";
+import { computed } from "vue";
+
+const data = useData();
+
+const text = computed(() => {
+ return data.lang.value == "en"
+ ? "Help test <b>secure SOCKS5 proxy</b> ->"
+ : "Помогите протестировать <b>безопасный SOCKS5 прокси</b> ->";
+});
+</script>
+
+<template>
+ <a href="/use#socks5">
+ <VPBadge class="banner-text" v-html="text" />
+ </a>
+</template>
+
+<style>
+.banner-text {
+ margin-top: 1rem;
+ padding: 7px 10px 7px 10px;
+ font-size: 14px;
+ align-content: center;
+ animation: pulse 5s infinite;
+}
+
+@keyframes pulse {
+ 0% {
+ transform: scale(1);
+ box-shadow: 0 0 5px;
+ }
+ 50% {
+ transform: scale(1.02);
+ box-shadow: 0 0 15px;
+ }
+ 100% {
+ transform: scale(1);
+ box-shadow: 0 0 5px;
+ }
+}
+</style>

.vitepress/theme/index.ts

@@ -2,13 +2,16 @@
 import { h } from "vue";
 import type { Theme } from "vitepress";
 import DefaultTheme from "vitepress/theme";
+import "./Banner.vue";
 import "./style.css";
+import Banner from "./Banner.vue";
 
 export default {
  extends: DefaultTheme,
  Layout: () => {
  return h(DefaultTheme.Layout, null, {
  // https://vitepress.dev/guide/extending-default-theme#layout-slots
+ "home-hero-info-after": () => h(Banner),
  });
  },
  enhanceApp({ app, router, siteData }) {

src/en/use.md

@@ -2,7 +2,7 @@
 
 > [!WARNING] huecker.io is in the development stage and does not guarantee 100% availability and security.
 
-## 1. New Secure Method (SOCKS5) {#socks5}
+## 1. New Secure Method (SOCKS5) {#socks5} <Badge type="warning" text="experiment" />
 
 **This method eliminates the possibility of traffic interception and image tampering.**
 

src/use.md

@@ -2,7 +2,7 @@
 
 > [!WARNING] huecker.io находится в стадии разработки и не гарантирует 100% доступности и безопасности.
 
-## 1. Новый безопасный способ (SOCKS5) {#socks5}
+## 1. Новый безопасный способ (SOCKS5) <Badge type="warning" text="эксперимент" /> {#socks5}
 
 **Этот способ исключает возможность перехвата трафика и подмены образов.**