From 3cc069b21716445f49dcaaba130f122b1c4fe133 Mon Sep 17 00:00:00 2001
From: Dania Rifki <atomicnumberphi@gmail.com>
Date: Mon, 23 Feb 2026 15:59:21 +0800
Subject: Clickable hero image on homepage to navigate to the mascot reference
 page.

---
 doc/docs/.vitepress/theme/index.ts | 36 +++++++++++++++++++++++++++++++++---
 doc/docs/de/index.md               |  1 +
 doc/docs/id-id/index.md            |  1 +
 doc/docs/index.md                  |  1 +
 doc/docs/pt-br/index.md            |  1 +
 doc/docs/zh/index.md               |  1 +
 6 files changed, 38 insertions(+), 3 deletions(-)

(limited to 'doc')

diff --git a/doc/docs/.vitepress/theme/index.ts b/doc/docs/.vitepress/theme/index.ts
index 70145d5..403b783 100644
--- a/doc/docs/.vitepress/theme/index.ts
+++ b/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);
diff --git a/doc/docs/de/index.md b/doc/docs/de/index.md
index d9ebff0..bab0a91 100644
--- a/doc/docs/de/index.md
+++ b/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 →
diff --git a/doc/docs/id-id/index.md b/doc/docs/id-id/index.md
index feef760..5e1b31b 100644
--- a/doc/docs/id-id/index.md
+++ b/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 →
diff --git a/doc/docs/index.md b/doc/docs/index.md
index 7d34f11..e6b5cfe 100644
--- a/doc/docs/index.md
+++ b/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 →
diff --git a/doc/docs/pt-br/index.md b/doc/docs/pt-br/index.md
index ce0a516..3a94715 100644
--- a/doc/docs/pt-br/index.md
+++ b/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 →
diff --git a/doc/docs/zh/index.md b/doc/docs/zh/index.md
index 0146468..75f0eff 100644
--- a/doc/docs/zh/index.md
+++ b/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: 快速上手 →
-- 
cgit v1.2.3-55-g6feb