diff --git a/website/src/components/ads/Ads.astro b/website/src/components/ads/Ads.astro new file mode 100644 index 00000000..b2e4bb27 --- /dev/null +++ b/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"; +--- + + + + diff --git a/website/src/components/drawer/drawer.tsx b/website/src/components/drawer/drawer.tsx new file mode 100644 index 00000000..4f61cd65 --- /dev/null +++ b/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 = ({ + buttonLabel = , + children, + className = "", +}) => { + const [open, setOpen] = useState(false); + + return ( + <> + + + + {/* Drawer */} +
+ +
{children}
+
+ + ); +}; diff --git a/website/src/components/navigation/TopBar.astro b/website/src/components/navigation/TopBar.astro index 9a6136ff..5b33d80a 100644 --- a/website/src/components/navigation/TopBar.astro +++ b/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; ---
- -

+ { + pathname.startsWith("/docs") ? ( + + + + ) : ( + + ) + } +

Spotube Logo Spotube @@ -31,7 +41,7 @@ const pathname = Astro.url.pathname; /> diff --git a/website/src/components/navigation/sidebar-button.tsx b/website/src/components/navigation/sidebar-button.tsx index 850f320b..5b4a20e4 100644 --- a/website/src/components/navigation/sidebar-button.tsx +++ b/website/src/components/navigation/sidebar-button.tsx @@ -13,7 +13,7 @@ export default function SidebarButton() { return <>
@@ -34,7 +34,7 @@ export default function SidebarButton() { }


- + diff --git a/website/src/pages/downloads/nightly/index.astro b/website/src/pages/downloads/nightly/index.astro index 0e79c8c6..30536300 100644 --- a/website/src/pages/downloads/nightly/index.astro +++ b/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";
- +
diff --git a/website/src/pages/downloads/packages/index.mdx b/website/src/pages/downloads/packages/index.mdx index 13f2587c..d2d6c4ea 100644 --- a/website/src/pages/downloads/packages/index.mdx +++ b/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'; @@ -25,13 +27,13 @@ import MarkdownLayout from 'layouts/MarkdownLayout.astro'; ```bash $ paru -Sy spotube-bin ``` - {/* */} + /> ## 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 ``` - {/* */} + /> ## 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: diff --git a/website/src/pages/index.astro b/website/src/pages/index.astro index 72a71257..180aefc8 100644 --- a/website/src/pages/index.astro +++ b/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"; --- @@ -58,7 +60,7 @@ import { Supporters } from "~/modules/root/supporters";

- +
@@ -82,6 +84,6 @@ import { Supporters } from "~/modules/root/supporters";

- + diff --git a/website/src/styles/global.css b/website/src/styles/global.css index 5773035e..eb6ed28e 100644 --- a/website/src/styles/global.css +++ b/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) {