adjust the download block ssg rendering

.vitepress/theme/components/AppPeer.vue

@@ -11,7 +11,7 @@
         <div style="font-size: 1.25em">{{ t("joinPeer", { inviter }) }}</div>
         <div class="ui grey text"
           style="font-size: 0.55em; color: rgb(222 222 222); font-weight: 100; padding-top: 10px">{{
-          t("joinPeerDescription", { inviter, group })
+            t("joinPeerDescription", { inviter, group })
           }}</div>
       </h1>
       <div class="ui horizontal inverted divider" style="margin-bottom: 40px;">{{ t("notWork") }}</div>
@@ -29,14 +29,16 @@
           </div>
         </div>
         <div style="color: rgb(222 222 222);  line-height: 1.4; font-size: 1.4rem; padding-top: 10px">{{
-        t("nothingWork")
-        }}</div>
+          t("nothingWork")
+          }}</div>
         <div class="w-full flex justify-center mt-10">
           <a class="ui version inverted basic label" target="_blank"
             href="https://github.com/voxelum/x-minecraft-launcher/releases">{{ github.latestVersion }}</a>
         </div>
         <div class="flex item-center w-full justify-center mb-20 mt-10">
-          <component :is="componentByPlatform" />
+          <ClientOnly>
+            <component :is="componentByPlatform" />
+          </ClientOnly>
         </div>
       </div>
     </div>

.vitepress/theme/components/AppWelcome.vue

@@ -27,19 +27,21 @@
                             class="max-h-10  inline-block px-2 max-w-15 sm:max-w-full sm:-mt-4 -mt-2" />! -->
                     </p>
                     <p class="text-xl dark:text-[rgb(208,208,208)] font-medium mt-5 text-left lg:mr-2 mr-7">{{
-                                t('intro.description')
-                            }}</p>
+                        t('intro.description')
+                        }}</p>
                     <div class="w-full flex justify-center mt-10 gap-2">
                         <a class="ui version inverted basic label text-sm" target="_blank"
                             href="https://github.com/voxelum/x-minecraft-launcher/releases">
                             <span>{{ data.latestVersion }}</span>
                         </a>
                     </div>
 
-                    <component :is="platformDownload" class="mt-10 w-full mb-5" :organized="true" />
+                    <ClientOnly>
+                        <component :is="platformDownload" class="mt-10 w-full mb-5" :organized="true" />
+                    </ClientOnly>
 
                     <a class="ui link cursor-pointer self-center font-medium italic" :href="prebuildsUrl">{{
-                                t('prebuild.entryHint') }}</a>
+                        t('prebuild.entryHint') }}</a>
 
                     <span class="flex gap-2 items-start w-full mt-5 items-center justify-center">
                         <a href="https://fabricmc.net/" target="_blank">
@@ -95,7 +97,7 @@
                         </template>
                     </i18n-t>
                     <p class="text-xl dark:text-[rgb(208,208,208)] font-medium mt-5 text-left lg:mr-2 mr-7">{{
-                                t('gameInstall.description') }}</p>
+                        t('gameInstall.description') }}</p>
                     <div class="flex flex-col items-start w-full mt-3 text-gray-400">
                         <a href="https://bmclapidoc.bangbang93.com/" class="text-lg" target="_blank">> BMCL API</a>
                     </div>
@@ -119,7 +121,7 @@
                         </template>
                     </i18n-t>
                     <p class="text-xl dark:text-[rgb(208,208,208)] font-medium mt-5 text-left lg:mr-2 mr-7">{{
-                                t('optimalDisk.description') }}</p>
+                        t('optimalDisk.description') }}</p>
                     <div class="flex flex-col items-start w-full mt-3 text-gray-400">
                         <a href="https://en.wikipedia.org/wiki/Hard_link" class="text-lg" target="_blank">> Hard
                             link</a>
@@ -165,7 +167,7 @@
                         </template>
                     </i18n-t>
                     <p class="text-xl dark:text-[rgb(208,208,208)] font-medium mt-5 text-left lg:mr-2 mr-7">{{
-                                t('cleanWorkspace.description') }}</p>
+                        t('cleanWorkspace.description') }}</p>
                 </div>
             </div>
         </div>
@@ -182,7 +184,7 @@
                         </template>
                     </i18n-t>
                     <p class="text-xl dark:text-[rgb(208,208,208)] font-medium mt-5 text-left lg:mr-2 mr-7">{{
-                                t('communityIntegration.description') }}</p>
+                        t('communityIntegration.description') }}</p>
                     <div class="flex flex-col w-full mt-3 text-gray-400 items-start">
                         <a href="https://curseforge.com/minecraft/" class="text-lg" target="_blank">> Curseforge</a>
                         <a href="https://modrinth.com/" class="text-lg" target="_blank">> Modrinth</a>

.vitepress/theme/components/PrebuildDownloads.vue

@@ -3,13 +3,11 @@
         <div class="flex lg:flex-row flex-col gap-4">
             <a :class="{ positive: platform === 'Win32', loading: fetching }"
                 class="ui huge inverted download labeled icon button" @click="onDownload(windowsArtifact)">
-                <i class="windows icon"></i>
                 <span>Windows</span>
             </a>
             <div class="ui labeled button" tabindex="0">
                 <a class="ui huge purple download labeled icon button w-full"
                     :class="{ positive: platform === 'Mac', loading: fetching }" @click="onDownload(macArtifact)">
-                    <i class="apple icon"></i>
                     <span>MacOS</span>
                 </a>
                 <a class="ui basic inverted green left pointing label" :class="{ disabled: fetching }"
@@ -20,7 +18,6 @@
             <div class="ui labeled button" tabindex="0">
                 <a :class="{ positive: platform === 'Linux', loading: fetching }"
                     class="ui huge orange download labeled icon button w-full" @click="onDownload(linuxArtifact)">
-                    <i class="linux icon"></i>
                     <span>Linux</span>
                 </a>
                 <a class="ui basic inverted green left pointing label" :class="{ disabled: fetching }"

.vitepress/theme/composables/usePlatform.ts

@@ -1,7 +1,7 @@
 import platform from 'platform'
 
 export function usePlatform() {
-    if (import.meta.env.SSR) return ''
+    if (import.meta.env.SSR) return undefined
     switch (platform.os?.family) {
         case 'Windows':
             return 'Win32'
@@ -14,5 +14,5 @@ export function usePlatform() {
         case 'Red Hat':
             return 'Linux'
     }
-    return 'Win32'
+    return undefined
 }