feat: add download page

Signed-off-by: seven <[email protected]>

Author: Blankll

docs/.vitepress/config.mts

@@ -26,9 +26,7 @@ export default defineConfig({
       {
         text: 'Download',
         items: [
-          {text: 'mac', link: '/markdown-examples'},
-          {text: 'linux', link: '/api-examples'},
-          {text: 'windows', link: '/api-examples'}
+          {text: 'Download', link: '/download'},
         ]
       }
     ],

docs/.vitepress/theme/components/download.vue

@@ -0,0 +1,57 @@
+<script setup>
+const platform = {
+  MacIntel: 'x64.dmg',
+  Win32: 'Setup.exe',
+  'Linux x86_64': '_amd64.deb',
+  'Linux armv81': '_arm64.deb'
+};
+const getLatestLinks = async () => {
+  const data = await fetch('https://api.github.com/repos/geek-fun/dockit/releases/latest')
+    .then((res) => res.json())
+    .catch((err) => console.error(err));
+  return data.assets.map((item) => ({
+    name: item.name,
+    url: item.browser_download_url
+  }));
+}
+
+const downloadFn = async (event) => {
+  // const links = await getLatestLinks();
+  // const link = links.find((item) => item.name.includes(platform[window.navigator.platform]));
+  // console.log('downloadFn', fetch(link.url))
+  console.log('downloadFn',window.navigator)
+  console.log('downloadFnJson',{ nv: JSON.stringify(window.navigator)})
+}
+</script>
+<template>
+  <p>
+    Download the the latest of DocKit for your platform, or you can find the historic/cross-platforms version in
+    <a href="https://github.com/geek-fun/dockit/releases">github release</a>
+  </p>
+  <button :class="$style.downloadButton" @click="downloadFn"><i class="fab fa-apple"></i>Download DocKit</button>
+</template>
+<style module>
+.downloadButton {
+  display: inline-block;
+  padding: 10px;
+  font-size: 16px;
+  font-weight: bold;
+  text-align: center;
+  text-decoration: none;
+  background-color: #87CEFA; /* Light Blue color */
+  color: #fff;
+  border: 1px solid #87CEFA; /* Light Blue color */
+  border-radius: 10px; /* Rounded corners */
+  cursor: pointer;
+  transition: background-color 0.3s;
+  margin-right: 10px; /* Add some space between buttons */
+}
+
+.downloadButton:hover {
+  background-color: #6495ED; /* Slightly darker blue on hover */
+}
+
+.downloadButton i {
+  margin-right: 8px; /* Adjust the space between icon and text */
+}
+</style>

docs/.vitepress/theme/index.ts

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme'
 import {inBrowser, useData} from "vitepress";
 import {watchEffect} from "vue";
 import './custom.css'
+import Download from "./components/download.vue";
 
 export default {
   ...DefaultTheme,
@@ -12,5 +13,9 @@ export default {
         document.cookie = `nf_lang=${lang.value}; expires=Mon, 1 Jan 2024 00:00:00 UTC; path=/`
       }
     })
+  },
+  enhanceApp({app}) {
+    // register your custom global components
+    app.component('Download', Download);
   }
 }

docs/download.md

@@ -3,3 +3,5 @@ outline: deep
 ---
 
 # Download
+
+<Download></Download>