feat: add download links, add icon to index buttons

Author: MC-XiaoHei

docs/.vitepress/config.mts

@@ -144,6 +144,8 @@ const vitePressI18nOptions: VitePressI18nOptions = {
                     link: '/intro'
                 }, {
                     component: 'VersionSwitcher'
+                }, {
+                    component: 'DownloadCard'
                 }
             ]
         }

docs/.vitepress/theme/download/DownloadCard.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// noinspection JSUnusedGlobalSymbols
+import {onMounted} from "vue";
+
+const props = defineProps<{
+    screenMenu?: boolean
+}>();
+
+const modrinthUrl = "https://modrinth.com/plugin/commandapi";
+const spigotUrl = "https://www.spigotmc.org/resources/api-commandapi-1-16-5-1-21-4.62353/";
+const hangarUrl = "https://hangar.papermc.io/Skepter/CommandAPI";
+
+onMounted(() => {
+    document.querySelectorAll(".download-link").forEach((element) => {
+        const a = element as HTMLLinkElement;
+        a.onclick = function (){
+            window.open(a.href, "_blank");
+            return false;
+        }
+    });
+});
+
+</script>
+
+<template>
+    <div class="container">
+        <a class="hangar-link download-link" :href="hangarUrl"/>
+        <a class="modrinth-link download-link" :href="modrinthUrl"/>
+        <a class="spigot-link download-link" :href="spigotUrl"/>
+    </div>
+</template>
+
+<style scoped>
+.container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    padding-left: 24px;
+    padding-right: 24px;
+    gap: 12px;
+}
+
+.spigot-link {
+    content: url("/images/index/spigot.png");
+}
+
+.hangar-link {
+    content: url("/images/index/hangar.svg");
+}
+
+.modrinth-link {
+    content: url("/images/index/modrinth-light.svg");
+}
+
+.download-link {
+    width: 24px;
+}
+
+.dark {
+    .modrinth-link {
+        content: url("/images/index/modrinth-dark.svg");
+    }
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -15,12 +15,14 @@ import '@nolebase/vitepress-plugin-enhanced-readabilities/client/style.css'
 import VersionSwitcher from "./versioning/VersionSwitcher.vue";
 import TitleAnchor from "./anchor/TitleAnchor.vue";
 import NotFoundComponent from "./404/NotFoundComponent.vue";
+import DownloadCard from "./download/DownloadCard.vue";
 
 // noinspection JSUnusedGlobalSymbols
 export default {
     extends: DefaultTheme,
     enhanceApp({app}) {
         provideTabsSharedState(app)
+        app.component('DownloadCard', DownloadCard)
         app.component('VersionSwitcher', VersionSwitcher)
         app.component('PluginTabs', PluginTabs)
         app.component('PluginTabsTab', PluginTabsTab)
@@ -45,10 +47,12 @@ export default {
         const route = useRoute();
         onMounted(async () => {
             initZoom()
+            injectIndexPageIcons()
             await nextTick(() => scrollToActiveSidebarItem())
         });
         watch(() => route.path, () => nextTick(() => {
             scrollToActiveSidebarItem()
+            injectIndexPageIcons()
             initZoom()
         }));
     }
@@ -63,4 +67,16 @@ function scrollToActiveSidebarItem() {
     if (activeLink) {
         activeLink.scrollIntoView({behavior: 'smooth', block: 'center'})
     }
+}
+
+function injectIndexPageIcons() {
+    document.querySelectorAll("a.VPButton.medium").forEach((button) => {
+        const a = button as HTMLLinkElement;
+        const href = a.href;
+        if (href.includes("CommandAPI/releases/latest")) {
+            a.classList.add("index-download-button");
+        } else if (href.includes("/intro")) {
+            a.classList.add("index-docs-button");
+        }
+    })
 }

docs/.vitepress/theme/style/global.css

@@ -39,9 +39,8 @@ kbd:not(.DocSearch-Button-Key) {
     background-color: #eee !important;
     border-radius: 3px;
     border: 1px solid #b4b4b4;
-    box-shadow:
-        0 1px 1px rgba(0, 0, 0, 0.2),
-        0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
+    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2),
+    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
     color: #333;
     display: inline-block;
     font-size: 0.85em;
@@ -59,16 +58,51 @@ kbd:not(.DocSearch-Button-Key) {
     display: none;
 }
 
-.dark {
-    .tip.custom-block > .danger.custom-block {
-        background-color: #3e2129;
-    }
-}
 
 .tip.custom-block > .danger.custom-block {
     background-color: #fde4e8;
 }
 
 .example-title-anchor > code {
     background-color: rgba(0, 0, 0, 0) !important;
+}
+
+.index-download-button:before {
+    display: block;
+    float: left;
+    width: 18px;
+    height: 18px;
+    padding-top: 4px;
+    margin-left: -4px;
+    margin-right: 6px;
+    /*noinspection CssUnknownTarget*/
+    content: url(/images/index/download-light.svg);
+}
+
+.index-docs-button:before {
+    display: block;
+    float: left;
+    width: 18px;
+    height: 18px;
+    padding-top: 5px;
+    margin-left: -4px;
+    margin-right: 6px;
+    /*noinspection CssUnknownTarget*/
+    content: url(/images/index/docs-light.svg);
+}
+
+.dark {
+    .tip.custom-block > .danger.custom-block {
+        background-color: #3e2129;
+    }
+
+    .index-download-button:before {
+        /*noinspection CssUnknownTarget*/
+        content: url(/images/index/download-dark.svg);
+    }
+
+    .index-docs-button:before {
+        /*noinspection CssUnknownTarget*/
+        content: url(/images/index/docs-dark.svg);
+    }
 }

docs/en/index.md

@@ -10,18 +10,18 @@ hero:
             text: Documentation
             link: /intro
         -   theme: alt
-            text: Download
+            text: Latest Release
             link: https://github.com/CommandAPI/CommandAPI/releases/latest
 
 features:
     -   title: Safer commands with better arguments
         icon: 🔒
         details: Prevent players running invalid commands by picking from over 50 specialized arguments with built-in error checking, suggestions, tooltips, and permission checks.
     -   title: Supports vanilla datapacks
-        icon: { src: "images/commandblock.webp" }
+        icon: { src: "images/index/commandblock.webp" }
         details: Let your command to be executed by the built-in <code>/execute</code> command, command blocks, and even datapack functions and tags.
     -   title: Write code how <i>you</i> want to
-        icon: { src: "images/kotlin.png" }
+        icon: { src: "images/index/kotlin.png" }
         details: Want a Brigadier tree-like structure? Want to use Kotlin? Want an annotation-based command system? We've got you covered.
 ---