Clickable hero image on homepage to navigate to the mascot reference page.

Author: Kaleidosium

doc/docs/.vitepress/theme/index.ts

@@ -1,6 +1,7 @@
 import DefaultTheme from "vitepress/theme";
 import type { Theme } from "vitepress";
 import { h } from "vue";
+import { useData, withBase } from "vitepress";
 import "./custom.css";
 
 // @ts-ignore
@@ -14,10 +15,39 @@ import YueDisplay from "./components/YueDisplay.vue";
 
 const theme: Theme = {
   extends: DefaultTheme,
-  Layout: () =>
-    h(DefaultTheme.Layout, null, {
+  Layout: () => {
+    const { frontmatter } = useData();
+
+    return h(DefaultTheme.Layout, null, {
       "layout-bottom": () => [h(HomeFooter), h(CompilerModal)],
-    }),
+      "home-hero-image": () => {
+        const fm = frontmatter.value;
+        if (fm?.hero?.image?.src) {
+          const img = h("img", {
+            src: withBase(fm.hero.image.src),
+            alt: fm.hero.image.alt || "",
+            class: "VPImage",
+            style: "max-width: 100%; max-height: 100%; object-fit: contain;",
+          });
+
+          if (fm.hero.image.link) {
+            return h(
+              "a",
+              {
+                href: withBase(fm.hero.image.link),
+                class: "image-src",
+                style: "display: flex; justify-content: center; align-items: center;",
+              },
+              [img]
+            );
+          }
+
+          return h("div", { class: "image-src", style: "display: flex; justify-content: center; align-items: center;" }, [img]);
+        }
+        return null;
+      },
+    });
+  },
   enhanceApp({ app }) {
     app.component("CompilerModal", CompilerModal);
     app.component("YueCompiler", YueCompiler);

doc/docs/de/index.md

@@ -6,6 +6,7 @@ hero:
   image:
     src: /image/mascot/electrichearts_20260211A_yuescript_xiaoyu.png
     alt: YueScript
+    link: /de/doc/reference/mascot
   actions:
     - theme: brand
       text: Schnellstart →

doc/docs/id-id/index.md

@@ -6,6 +6,7 @@ hero:
   image:
     src: /image/mascot/electrichearts_20260211A_yuescript_xiaoyu.png
     alt: YueScript
+    link: /id-id/doc/reference/mascot
   actions:
     - theme: brand
       text: Mulai Cepat →

doc/docs/index.md

@@ -6,6 +6,7 @@ hero:
   image:
     src: /image/mascot/electrichearts_20260211A_yuescript_xiaoyu.png
     alt: YueScript
+    link: /doc/reference/mascot
   actions:
     - theme: brand
       text: Quick Start →

doc/docs/pt-br/index.md

@@ -6,6 +6,7 @@ hero:
   image:
     src: /image/mascot/electrichearts_20260211A_yuescript_xiaoyu.png
     alt: YueScript
+    link: /pt-br/doc/reference/mascot
   actions:
     - theme: brand
       text: Início rápido →

doc/docs/zh/index.md

@@ -6,6 +6,7 @@ hero:
   image:
     src: /image/mascot/electrichearts_20260211A_yuescript_xiaoyu.png
     alt: 月之脚本
+    link: /zh/doc/reference/mascot
   actions:
     - theme: brand
       text: 快速上手 →