Implement sidebar ad

src/components/Footer.astro

@@ -3,7 +3,7 @@ const { permissions } = Astro.locals
 const show = !permissions.includes('SKIP_ADS')
 ---
 
-{ show ? (
+{show ? (
   <>
     <footer class='bg-dark p-2'>
       <iframe
@@ -18,7 +18,7 @@ const show = !permissions.includes('SKIP_ADS')
           height: '220px',
           width: '100%'
         }}
-        scrolling='no'></iframe>
+      />
     </footer>
 
     <script>

src/components/Sidebar.astro

@@ -12,6 +12,7 @@ import Highlight from './sidebar/Highlight.astro'
 import AlbumBox from './AlbumBox.astro'
 import AlbumCount from './sidebar/AlbumCount.astro'
 import CommentCarousel from './sidebar/CommentCarousel.astro'
+import SidebarAd from './sidebar/SidebarAd.astro'
 
 const listClass =
   'uppercase text-3xl font-semibold w-full text-center py-3 hover:bg-dark-hover hover:text-cyan-400 hover:underline'
@@ -55,5 +56,11 @@ const listClass =
     <AlbumCount server:defer>
       <SidebarSection slot='fallback' class='h-32 animate-pulse' />
     </AlbumCount>
+
+    <SidebarSection class='h-96 p-0.5'>
+      <iframe title='radio' src='https://radio.sittingonclouds.net/widget' class='size-full rounded-md'></iframe>
+    </SidebarSection>
+
+    <SidebarAd />
   </div>
 </div>

src/components/sidebar/SidebarAd.astro

@@ -0,0 +1,43 @@
+---
+const { permissions } = Astro.locals
+const show = !permissions.includes('SKIP_ADS')
+---
+
+{show ? (
+
+<div class="rounded-md mb-2">
+      <iframe
+            title='play-asia'
+            id='id01_909824'
+            src='https://www.play-asia.com/38/190%2C000000%2Cnone%2C0%2C0%2C0%2C0%2CFFFFFF%2C000000%2Cleft%2C0%2C0-762s-70joq4-062-783c-29466-901vq93-33iframe_banner-44140px'
+            style={{ 
+              height: '100%',
+              width: '100%',
+              borderStyle: 'none',
+              borderWidth: '0px',
+              borderColor: '#000000',
+              padding: 0,
+              margin: 0,
+              scrolling: 'no',
+              frameborder: 0
+            }}
+          />
+
+    <script>
+      document.addEventListener('astro:after-preparation', () => {
+        let t = ''
+        t += window.location
+        t = t
+          .replace(/#.*$/g, '')
+          .replace(/^.*:\/*/i, '')
+          .replace(/\./g, '[dot]')
+          .replace(/\//g, '[obs]')
+          .replace(/-/g, '[dash]')
+        t = encodeURIComponent(encodeURIComponent(t))
+
+        document.querySelector('#id01_909824')?.setAttribute('src', t)
+      })
+    </script>
+    </div>
+
+) : null}