base64 decode, announcement pill

.vitepress/theme/Layout.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import DefaultTheme from "vitepress/theme";
 import Sidebar from "./components/SidebarCard.vue";
+import Announcement from "./components/Announcement.vue";
 
 const { Layout } = DefaultTheme;
 </script>
@@ -10,9 +11,9 @@ const { Layout } = DefaultTheme;
     <template #sidebar-nav-after>
       <Sidebar />
     </template>
-    <template>
-    <Content />
-
+    <template #home-hero-prelink>
+      <Announcement />
     </template>
+    <Content />
   </Layout>
 </template>

.vitepress/theme/components/Announcement.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { useData } from "vitepress";
+
+const { frontmatter } = useData();
+</script>
+
+<template>
+  <a
+    v-if="frontmatter.hero.prelink"
+    :href="frontmatter.hero.prelink.link"
+    target="_blank"
+    class="inline-flex items-center rounded-lg bg-[var(--vp-c-default-soft)] px-4 py-1 text-sm font-semibold mb-3">
+    {{ frontmatter.hero.prelink.title }}
+  </a>
+</template>

.vitepress/theme/style.css

@@ -93,6 +93,20 @@
   background-color: var(--vp-button-brand-bg);
 }
 
+.VPFooter a {
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 5px;
+  transition: 0.3s;
+}
+
+.VPFooter a:hover {
+  color: var(--vp-c-text-1);
+  text-decoration-line: underline;
+  text-decoration-style: dashed;
+  text-underline-offset: 5px;
+}
+
 /* Custom scrollbar */
 .VPSidebar::-webkit-scrollbar {
   block-size: 4px;
@@ -123,3 +137,9 @@
     --vp-home-hero-image-filter: blur(68px);
   }
 }
+
+.base64 {
+  min-width: 100%;
+  width: 0px;
+  white-space: pre-wrap;
+}