fix: banner in prod (FabricMC#523)

Author: its-miroma

.vitepress/theme/components/BannerComponent.vue

@@ -31,8 +31,11 @@ const strings = computed(() => {
   }
 });
 
-watch(height, () =>
-  document.documentElement.style.setProperty("--vp-layout-top-height", `${height.value + 16}px`)
+watch([height, strings], () =>
+  document.documentElement.style.setProperty(
+    "--vp-layout-top-height",
+    `${strings.value.length ? height.value + 16 : 0}px`
+  )
 );
 </script>
 
@@ -47,24 +50,6 @@ watch(height, () =>
   </div>
 </template>
 
-<style>
-html {
-  --vp-layout-top-height: 88px;
-}
-
-@media (min-width: 375px) {
-  html {
-    --vp-layout-top-height: 64px;
-  }
-}
-
-@media (min-width: 768px) {
-  html {
-    --vp-layout-top-height: 40px;
-  }
-}
-</style>
-
 <style scoped>
 div {
   align-items: center;

.vitepress/theme/index.ts

@@ -2,9 +2,10 @@ import mediumZoom from "medium-zoom";
 import { type Theme, useData, useRouter } from "vitepress";
 import { enhanceAppWithTabs } from "vitepress-plugin-tabs/client";
 import DefaultTheme from "vitepress/theme";
-import { defineAsyncComponent, h, nextTick, onMounted, watch } from "vue";
+import { h, nextTick, onMounted, watch } from "vue";
 
 import AuthorsComponent from "./components/AuthorsComponent.vue";
+import BannerComponent from "./components/BannerComponent.vue";
 import ChoiceComponent from "./components/ChoiceComponent.vue";
 import ColorSwatch from "./components/ColorSwatch.vue";
 import DownloadEntry from "./components/DownloadEntry.vue";
@@ -45,9 +46,6 @@ export default {
     };
 
     if (theme.value.env !== "github") {
-      const BannerComponent = defineAsyncComponent(
-        () => import("./components/BannerComponent.vue")
-      );
       (children as any)["layout-top"] = () => h(BannerComponent);
     }