website: add ads and mobile screen adaptability

website/src/components/ads/Ads.astro

@@ -0,0 +1,38 @@
+---
+interface Props {
+  adSlot: number;
+  adFormat: "auto" | "fluid";
+  fullWidthResponsive?: boolean;
+  style?: string;
+  adLayout?: "in-article" | "in-feed" | "in-page";
+  adLayoutKey?: string;
+}
+
+const {
+  adSlot,
+  adFormat,
+  fullWidthResponsive = true,
+  style,
+  adLayout,
+  adLayoutKey,
+} = Astro.props;
+
+const AD_CLIENT = "ca-pub-6419300932495863";
+---
+
+<ins
+  class="adsbygoogle"
+  {style}
+  data-ad-layout={adLayout}
+  data-ad-client={AD_CLIENT}
+  data-ad-slot={adSlot}
+  data-ad-format={adFormat}
+  data-full-width-responsive={fullWidthResponsive}
+  data-ad-layout-key={adLayoutKey}></ins>
+
+<script is:inline type="text/javascript">
+  // When the DOM is ready, push the ad request to the adsbygoogle array
+  document.addEventListener("DOMContentLoaded", function () {
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  });
+</script>

website/src/components/drawer/drawer.tsx

@@ -0,0 +1,45 @@
+import React, { useState } from "react";
+import { LuMenu } from "react-icons/lu";
+
+
+
+interface DrawerProps {
+  buttonLabel?: React.ReactNode;
+  children: React.ReactNode;
+  className?: string;
+}
+
+
+export const Drawer: React.FC<DrawerProps> = ({
+  buttonLabel = <LuMenu />,
+  children,
+  className = "",
+}) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button className={`btn btn-icon ${className}`} onClick={() => setOpen(true)}>
+        {buttonLabel}
+      </button>
+
+
+      {/* Drawer */}
+      <div
+        className={`
+          fixed bg-white dark:bg-surface-800 shadow-lg transition-all duration-300 left-0 top-0 h-screen w-64
+          ${open ? "-translate-x-5" : "-translate-x-[100vw]"}
+        `}
+      >
+        <button
+          className="absolute top-2 right-2 text-gray-500 hover:text-gray-700"
+          onClick={() => setOpen(false)}
+          aria-label="Close"
+        >
+          &times;
+        </button>
+        <div className="p-4">{children}</div>
+      </div>
+    </>
+  );
+};

website/src/components/navigation/TopBar.astro

@@ -3,17 +3,27 @@ import { routes } from "~/collections/app";
 import { FaGithub } from "react-icons/fa6";
 import SidebarButton from "./sidebar-button";
 import Search from "astro-pagefind/components/Search";
+import { Drawer } from "../drawer/drawer";
+import DocSideBar from "./DocSideBar.astro";
 
 const pathname = Astro.url.pathname;
 ---
 
 <header
-  class="flex justify-between items-center p-4 top-0 fixed w-full z-10 backdrop-blur-md"
+  class="flex justify-between items-center py-2 md:p-4 top-0 fixed w-full z-10 backdrop-blur-md"
 >
   <div class="flex items-center justify-between w-full">
     <div class="flex items-center gap-2">
+      {
+        pathname.startsWith("/docs") ? (
+          <Drawer client:only className="md:hidden">
+            <DocSideBar />
+          </Drawer>
+        ) : (
           <SidebarButton client:only />
-      <h2 class="text-3xl">
+        )
+      }
+      <h2 class="text-xl md:text-3xl">
         <a href="/" class="flex gap-2 items-center">
           <img src="/images/spotube-logo.png" width="40px" alt="Spotube Logo" />
           Spotube
@@ -31,7 +41,7 @@ const pathname = Astro.url.pathname;
     />
 
     <a
-      class="mw-2 md:me-4"
+      class="mw-2 me-4"
       href="https://github.com/KRTirtho/spotube?referrer=spotube.krtirtho.dev"
       target="_blank"
     >

website/src/components/navigation/sidebar-button.tsx

@@ -13,7 +13,7 @@ export default function SidebarButton() {
 
   return <>
     <div className={
-      `fixed h-screen w-72 bg-surface-100 dark:bg-surface-900 top-0 left-0 bg-surface z-50 transition-all duration-300 ${isOpen ? "" : "-translate-x-full opacity-0"}`
+      `fixed h-screen w-72 bg-primary-50-950 top-0 left-0 bg-surface z-50 transition-all duration-300 ${isOpen ? "" : "-translate-x-full opacity-0"}`
     }
       ref={ref}
     >
@@ -34,7 +34,7 @@ export default function SidebarButton() {
       }
     </div>
     <button
-      className="btn btn-icon md:hidden"
+      className="p-2 md:hidden"
       onClick={() => {
         setIsOpen(!isOpen);
       }}

website/src/layouts/RootLayout.astro

@@ -24,6 +24,13 @@ import TopBar from "~/components/navigation/TopBar.astro";
     <meta name="robots" content="index, follow" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#1DB954" />
+
+    <script
+      is:inline
+      async
+      src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-6419300932495863"
+      data-overlays="bottom"
+      crossorigin="anonymous"></script>
   </head>
   <body>
     <main class="p-2 md:p-4 min-h-[90vh]">

website/src/pages/downloads/index.astro

@@ -1,7 +1,8 @@
 ---
 import type { IconType } from "react-icons";
 import { LuDownload, LuHistory, LuPackage, LuSparkles } from "react-icons/lu";
-import { extendedDownloadLinks } from "~/collections/app";
+import { ADS_SLOTS, extendedDownloadLinks } from "~/collections/app";
+import Ads from "~/components/ads/Ads.astro";
 import RootLayout from "~/layouts/RootLayout.astro";
 import DownloadItems from "~/modules/downloads/download-item.astro";
 
@@ -26,7 +27,7 @@ const otherDownloads: [string, string, IconType][] = [
     <br />
 
     <br />
-    <!-- <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" /> -->
+    <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
     <br />
 
     <h2 class="h2">Other Downloads</h2>
@@ -48,6 +49,6 @@ const otherDownloads: [string, string, IconType][] = [
       }
     </div>
     <br />
-    <!-- <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" /> -->
+    <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
   </section>
 </RootLayout>

website/src/pages/downloads/nightly/index.astro

@@ -1,6 +1,7 @@
 ---
 import { LuBug, LuSparkles, LuTriangleAlert } from "react-icons/lu";
-import { extendedNightlyDownloadLinks } from "~/collections/app";
+import { ADS_SLOTS, extendedNightlyDownloadLinks } from "~/collections/app";
+import Ads from "~/components/ads/Ads.astro";
 import RootLayout from "~/layouts/RootLayout.astro";
 import DownloadItems from "~/modules/downloads/download-item.astro";
 ---
@@ -41,7 +42,7 @@ import DownloadItems from "~/modules/downloads/download-item.astro";
     <DownloadItems links={extendedNightlyDownloadLinks} />
 
     <br />
-    <!-- <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" /> -->
+    <Ads adSlot={ADS_SLOTS.downloadPageDisplay} adFormat="auto" />
     <br />
   </section>
 </RootLayout>

website/src/pages/downloads/packages/index.mdx

@@ -1,6 +1,8 @@
 import { FaLinux, FaWindows, FaApple } from 'react-icons/fa6';
 import RootLayout from 'layouts/RootLayout.astro';
 import MarkdownLayout from 'layouts/MarkdownLayout.astro';
+import Ads from 'components/ads/Ads.astro';
+import { ADS_SLOTS } from 'collections/app';
 
 <RootLayout>
   <MarkdownLayout>
@@ -25,13 +27,13 @@ import MarkdownLayout from 'layouts/MarkdownLayout.astro';
       ```bash
       $ paru -Sy spotube-bin
       ```
-      {/* <Ads
+      <Ads
         style="display:block; text-align:center;"
         adSlot={ADS_SLOTS.packagePageArticle}
         adLayout="in-article"
         adFormat="fluid"
         fullWidthResponsive={false}
-      /> */}
+      />
       ## <FaApple className="inline" /> MacOS
       ### Homebrew🍻
       Spotube can be installed through Homebrew. We host our own cask definition thus you'll need to add our tap first:
@@ -39,13 +41,13 @@ import MarkdownLayout from 'layouts/MarkdownLayout.astro';
       $ brew tap krtirtho/apps
       $ brew install --cask spotube
       ```
-      {/* <Ads
+      <Ads
         style="display:block; text-align:center;"
         adSlot={ADS_SLOTS.packagePageArticle}
         adLayout="in-article"
         adFormat="fluid"
         fullWidthResponsive={false}
-      /> */}
+      />
       ## <FaWindows className="inline" color="#00A2F0" /> Windows
       ### Chocolatey🍫
       Spotube is available in [community.chocolatey.org](https://community.chocolatey.org) repo. If you have chocolatey install in your system just run following command in an Elevated Command Prompt or PowerShell:

website/src/pages/index.astro

@@ -3,6 +3,8 @@ import { FaAndroid, FaApple, FaLinux, FaWindows } from "react-icons/fa6";
 import RootLayout from "../layouts/RootLayout.astro";
 import { LuDownload, LuHeart } from "react-icons/lu";
 import { Supporters } from "~/modules/root/supporters";
+import Ads from "~/components/ads/Ads.astro";
+import { ADS_SLOTS } from "~/collections/app";
 ---
 
 <RootLayout>
@@ -58,7 +60,7 @@ import { Supporters } from "~/modules/root/supporters";
     </div>
 
     <br />
-    <!-- <Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" /> -->
+    <Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
     <br />
 
     <div class="flex flex-col gap-4">
@@ -82,6 +84,6 @@ import { Supporters } from "~/modules/root/supporters";
       <Supporters client:only />
     </div>
     <br />
-    <!-- <Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" /> -->
+    <Ads adSlot={ADS_SLOTS.rootPageDisplay} adFormat="auto" />
   </section>
 </RootLayout>

website/src/styles/global.css

@@ -56,6 +56,7 @@ h6 {
   --pagefind-ui-border-radius: 0.5rem;
 
   width: 50%;
+  @apply hidden md:block;
 }
 
 .pagefind-ui .pagefind-ui__drawer:not(.pagefind-ui__hidden) {