From 3e85b46727ecc242cd852193574f08796d7352f8 Mon Sep 17 00:00:00 2001
From: Evan You <yyx990803@gmail.com>
Date: Wed, 30 Dec 2020 18:04:52 -0500
Subject: [PATCH] refactor: improve css treeshaking + avoid layout shift on
 async components

---
 src/client/app/mixin.ts                            | 10 +++++++---
 src/client/theme-default/Layout.vue                |  1 +
 .../theme-default/components/AlgoliaSearchBox.vue  |  1 +
 src/client/theme-default/components/CarbonAds.vue  | 14 ++++++++------
 4 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/src/client/app/mixin.ts b/src/client/app/mixin.ts
index 95dc8863..9fb29376 100644
--- a/src/client/app/mixin.ts
+++ b/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'))
+  )
 }
diff --git a/src/client/theme-default/Layout.vue b/src/client/theme-default/Layout.vue
index d18d9ad3..7cd3b565 100644
--- a/src/client/theme-default/Layout.vue
+++ b/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
diff --git a/src/client/theme-default/components/AlgoliaSearchBox.vue b/src/client/theme-default/components/AlgoliaSearchBox.vue
index dc657a03..14e66873 100644
--- a/src/client/theme-default/components/AlgoliaSearchBox.vue
+++ b/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 */
   }
 }
 
diff --git a/src/client/theme-default/components/CarbonAds.vue b/src/client/theme-default/components/CarbonAds.vue
index 7f3e6d6a..796d9952 100644
--- a/src/client/theme-default/components/CarbonAds.vue
+++ b/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,7 +62,7 @@ onMounted(() => {
   }
 }
 
-.carbon-ads ::v-deep(.carbon-img) {
+.carbon-ads :deep(.carbon-img) {
   float: left;
   margin-right: .75rem;
   max-width: 100px;
@@ -68,7 +70,7 @@ onMounted(() => {
 }
 
 @media (min-width: 420px) {
-  .carbon-ads ::v-deep(.carbon-img) {
+  .carbon-ads :deep(.carbon-img) {
     float: none;
     display: block;
     margin-right: 0;
@@ -76,24 +78,24 @@ onMounted(() => {
   }
 }
 
-.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;