Merge remote-tracking branch 'origin/main'

Author: harlan-zw

client/app.vue

@@ -2,11 +2,9 @@
 import { onDevtoolsClientConnected } from '@nuxt/devtools-kit/iframe-client'
 import { registry } from '../src/registry'
 import { devtools, getScriptSize, humanFriendlyTimestamp, reactive, ref, urlToOrigin } from '#imports'
-import { loadShiki } from '~/composables/shiki'
 import { msToHumanReadable } from '~/utils/formatting'
 
 const scriptRegistry = registry(s => s)
-await loadShiki()
 
 const scripts = ref({})
 const scriptSizes = reactive<Record<string, string>>({})
@@ -73,7 +71,7 @@ function viewDocs(docs: string) {
 
 <template>
   <div class="relative n-bg-base flex flex-col">
-    <header class="sticky top-0 z-2 px-4 pt-4">
+    <header class="sticky top-0 z-2 px-4 pt-4 bg-background/80 backdrop-blur-lg">
       <div class="flex justify-between items-start" mb2>
         <div class="flex space-x-5">
           <h1 text-xl flex items-center gap-2>
@@ -155,9 +153,9 @@ function viewDocs(docs: string) {
         </div>
       </div>
     </header>
-    <div class="flex-row flex p4 h-full" style="min-height: calc(100vh - 64px);">
+    <div class="flex-row flex h-full" style="min-height: calc(100vh - 64px);">
       <main class="mx-auto flex flex-col w-full bg-white dark:bg-black dark:bg-dark-700 bg-light-200 ">
-        <div v-if="tab === 'scripts'" class="h-full relative max-h-full">
+        <div v-if="tab === 'scripts'" class="h-full relative max-h-full p-4">
           <div v-if="!Object.keys(scripts || {}).length">
             <div>No scripts loaded.</div>
           </div>
@@ -237,12 +235,12 @@ function viewDocs(docs: string) {
                       {{ event.status }}
                     </div>
                   </template>
-                  <template v-else-if="event.type === 'fn-call' && event.args">
-                    <OCodeBlock :code="`${event.fn}(${event.args?.map(a => JSON.stringify(a, null, 2)).join(', ') || ''})`" lang="javascript" />
-                  </template>
-                  <template v-else-if="event.type === 'fn-call' && !event.args">
-                    <OCodeBlock :code="`QUEUED ${event.fn}`" lang="javascript" />
-                  </template>
+                  <div v-else-if="event.type === 'fn-call' && event.args" class="px-2 py-[2px] bg-gray-100 text-gray-700 rounded-lg font-mono">
+                    {{ `${event.fn}(${event.args?.map((a: any) => JSON.stringify(a, null, 2)).join(', ') || ''})` }}
+                  </div>
+                  <div v-else-if="event.type === 'fn-call' && !event.args" class="px-2 py-[2px] bg-gray-100 text-gray-700 rounded-lg font-mono">
+                    QUEUED {{ event.fn }}
+                  </div>
                 </div>
               </div>
             </OSectionBlock>

client/components/OCodeBlock.vue

@@ -67,12 +67,17 @@ watch(() => route.query.format, (newFormat) => {
         >
           <template #awaitingLoad>
             <div class="text-white text-xl">
-              ...waiting
+              ...waiting to Ads
             </div>
           </template>
           <template #loading>
             <div class="text-white text-xl">
-              ...loading
+              ...Loading Ads
+            </div>
+          </template>
+          <template #error>
+            <div class="text-white text-xl">
+              ...Ad-Blocker detected
             </div>
           </template>
         </ScriptGoogleAdsense>

client/composables/shiki.ts

@@ -74,19 +74,20 @@ const rootAttrs = computed(() => {
 </script>
 
 <template>
-  <ins
-    ref="rootEl"
-    class="adsbygoogle"
-    style="display: block;"
-    :data-ad-client="addClient"
-    :data-ad-slot="dataAdSlot"
-    :data-ad-format="dataAdFormat"
-    :data-ad-layout="dataAdLayout"
-    :data-full-width-responsive="dataFullWidthResponsive"
-    v-bind="rootAttrs"
-  >
+  <div>
+    <ins
+      ref="rootEl"
+      class="adsbygoogle"
+      style="display: block;"
+      :data-ad-client="addClient"
+      :data-ad-slot="dataAdSlot"
+      :data-ad-format="dataAdFormat"
+      :data-ad-layout="dataAdLayout"
+      :data-full-width-responsive="dataFullWidthResponsive"
+      v-bind="rootAttrs"
+    />
     <slot v-if="status === 'awaitingLoad'" name="awaitingLoad" />
     <slot v-else-if="status === 'loading'" name="loading" />
     <slot v-else-if="status === 'error'" name="error" />
-  </ins>
+  </div>
 </template>