avoid uwu logo layout shift

Author: yyx990803

.vitepress/config.ts

@@ -605,6 +605,14 @@ export default defineConfigWithTheme<ThemeConfig>({
         'utf-8'
       )
     ],
+    [
+      'script',
+      {},
+      fs.readFileSync(
+        path.resolve(__dirname, './inlined-scripts/uwu.js'),
+        'utf-8'
+      )
+    ],
     [
       'script',
       {

.vitepress/inlined-scripts/uwu.js

@@ -0,0 +1,3 @@
+if (location.search.includes('?uwu')) {
+  document.documentElement.classList.add('uwu')
+}

.vitepress/theme/components/Home.vue

@@ -6,21 +6,12 @@ import { load, data, base } from './sponsors'
 import SponsorsGroup from './SponsorsGroup.vue'
 import VueMasteryModal from './VueMasteryModal.vue'
 
-const uwu = ref(false)
-
-onMounted(async () => {
-  uwu.value = location.search.includes('?uwu')
-  await load()
-})
+onMounted(load)
 </script>
 
 <template>
   <section id="hero">
-    <img
-      v-if="uwu"
-      src="/logo-uwu.svg"
-      style="width: 100%; max-width: 580px; margin: -80px auto -20px"
-    />
+    <img id="uwu" />
     <h1 class="tagline">
       The
       <span class="accent">Progressive</span>
@@ -317,4 +308,13 @@ html:not(.dark) .accent,
     font-size: 36px;
   }
 }
+
+:global(.uwu #uwu) {
+  display: block;
+  width: 100%;
+  max-width: 580px;
+  margin: -80px auto -20px;
+  aspect-ratio: 145 / 91;
+  content: url(/logo-uwu.svg);
+}
 </style>