refactor: improve css treeshaking + avoid layout shift on async compo…

…nents

src/client/app/mixin.ts

@@ -1,9 +1,8 @@
-import { App } from 'vue'
+import { App, defineAsyncComponent } from 'vue'
 import { joinPath } from './utils'
 import { SiteDataRef } from './composables/siteData'
 import { PageDataRef } from './composables/pageData'
 import { Content } from './components/Content'
-import Debug from './components/Debug.vue'
 import { ClientOnly } from './components/ClientOnly'
 
 export function mixinGlobalComputed(
@@ -70,5 +69,10 @@ export function mixinGlobalComponents(app: App) {
 
   app.component('Content', Content)
   app.component('ClientOnly', ClientOnly)
-  app.component('Debug', isProd ? () => null : Debug)
+  app.component(
+    'Debug',
+    isProd
+      ? () => null
+      : defineAsyncComponent(() => import('./components/Debug.vue'))
+  )
 }

src/client/theme-default/Layout.vue

@@ -76,6 +76,7 @@ import type { DefaultTheme } from './config'
 import NavBar from './components/NavBar.vue'
 import SideBar from './components/SideBar.vue'
 import Page from './components/Page.vue'
+
 const Home = defineAsyncComponent(() => import('./components/Home.vue'))
 
 const NoopComponent = () => null

src/client/theme-default/components/AlgoliaSearchBox.vue

@@ -139,6 +139,7 @@ function initialize(userOptions: any) {
 @media (min-width: 720px) {
   .algolia-search-box {
     padding-left: 8px;
+    min-width: 176.3px; /* avoid layout shift */
   }
 }
 

src/client/theme-default/components/CarbonAds.vue

@@ -28,6 +28,7 @@ onMounted(() => {
   max-width: 280px;
   font-size: .75rem;
   background-color: rgba(255, 255, 255, .8);
+  min-height: 105.38px; /* avoid layout shift on mobile */
 }
 
 .carbon-ads::after {
@@ -46,6 +47,7 @@ onMounted(() => {
     padding: 8px;
     width: 146px;
     max-width: 100%;
+    min-height: 200px;
   }
 }
 
@@ -60,40 +62,40 @@ onMounted(() => {
   }
 }
 
-.carbon-ads ::v-deep(.carbon-img) {
+.carbon-ads :deep(.carbon-img) {
   float: left;
   margin-right: .75rem;
   max-width: 100px;
   border: 1px solid var(--c-divider);
 }
 
 @media (min-width: 420px) {
-  .carbon-ads ::v-deep(.carbon-img) {
+  .carbon-ads :deep(.carbon-img) {
     float: none;
     display: block;
     margin-right: 0;
     max-width: 130px;
   }
 }
 
-.carbon-ads ::v-deep(.carbon-img img) {
+.carbon-ads :deep(.carbon-img img) {
   display: block;
   width: 100%;
 }
 
 @media (min-width: 420px) {
-  .carbon-ads ::v-deep(.carbon-text) {
+  .carbon-ads :deep(.carbon-text) {
     padding-top: 8px;
   }
 }
 
-.carbon-ads ::v-deep(.carbon-text) {
+.carbon-ads :deep(.carbon-text) {
   display: block;
   font-weight: 400;
   color: var(--c-text-light);
 }
 
-.carbon-ads ::v-deep(.carbon-poweredby) {
+.carbon-ads :deep(.carbon-poweredby) {
   display: block;
   padding-top: 2px;
   font-weight: 400;