From 45680fc7765fcccc9246e201d7854aa8c1a7c4a8 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Wed, 27 Jul 2022 12:24:24 -0500
Subject: [PATCH] Fix Carbon not being styled

---
 components/ad-inline.vue    | 15 ++++++++++++++-
 components/search-stork.vue |  2 +-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/components/ad-inline.vue b/components/ad-inline.vue
index 152672d..e1fa213 100644
--- a/components/ad-inline.vue
+++ b/components/ad-inline.vue
@@ -39,6 +39,19 @@
 import CarbonInline from './carbon-inline.vue'
 
 const ads = {
+    // Since Vue renders the ad on the server
+    // but destroys the ad when hydrating on
+    // the browser, we render an empty placeholder ad
+    // so that it get's properly rendered at the browser
+    // and so that our ad css still get's imported.
+    'placeholder': {
+        url: '/',
+        imageSrc: 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7',
+        imageAlt: '',
+        copy: '',
+        corner: '',
+    },
+
     'new-world-1': {
         url: 'https://amzn.to/3bllXrC',
         imageSrc: 'https://vumbnail.com/OKnUBs-Ko44.jpg',
@@ -77,7 +90,7 @@ export default {
         name: {
             type: String,
             default: 'default'
-        }
+        },
     },
     computed: {
         ad () {
diff --git a/components/search-stork.vue b/components/search-stork.vue
index 0f26681..8331541 100644
--- a/components/search-stork.vue
+++ b/components/search-stork.vue
@@ -47,7 +47,7 @@
         <div class="slot-wrapper">
             <slot name="ad-inline">
                 <AdInline
-                    v-if="isSSR === false"
+                    :name="isSSR ? 'placeholder' : 'default'"
                     v-once
                 />
             </slot>