[website] Various components updated

[website] Joke component added

website/src/App.tsx

@@ -1,20 +1,144 @@
-import { VStack } from "@hope-ui/solid";
-import type { Component } from "solid-js";
+import {
+  Button,
+  createDisclosure,
+  Heading,
+  Modal,
+  ModalBody,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  Stack,
+  Text,
+  VStack,
+} from "@hope-ui/solid";
+import {
+  Component,
+  createEffect,
+  createResource,
+  createSignal,
+} from "solid-js";
 import Navbar from "./components/Navbar";
 import { Route, Router, Routes } from "solid-app-router";
 import { Root } from "./pages/Root";
-import AllVersions from "./pages/AllVersions";
+import OtherDownloads from "./pages/OtherDownloads";
+import NightlyDownloads from "./pages/NightlyDownloads";
+import StableDownloads from "./pages/StableDownloads";
 
 const App: Component = () => {
+  const [adBlockEnabled, setAdBlockEnabled] = createSignal(false);
+  const { isOpen, onOpen, onClose } = createDisclosure();
+  const [joke, setJoke] = createSignal<Record<string, any>>({});
+
+  createEffect(() => {
+    (async () => {
+      const googleAdUrl =
+        "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js";
+      try {
+        await fetch(new Request(googleAdUrl)).catch((_) =>
+          setAdBlockEnabled(true)
+        );
+      } catch (e) {
+        setAdBlockEnabled(true);
+      } finally {
+        if (adBlockEnabled()) {
+          setJoke(
+            await (
+              await fetch(
+                "https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist"
+              )
+            ).json()
+          );
+          onOpen();
+        }
+      }
+    })();
+  }, []);
+
   return (
     <Router>
-      <VStack alignItems="stretch">
-        <Navbar />
-        <Routes>
-          <Route path="/" component={Root} />
-          <Route path="/all-versions" component={AllVersions} />
-        </Routes>
-      </VStack>
+      <Modal opened={isOpen()} onClose={onClose}>
+        <ModalOverlay />
+        <ModalContent mt="$5" mx="$3">
+          <ModalHeader>Support the Creator💚</ModalHeader>
+          <ModalBody>
+            <p>
+              Open source developers work really hard to provide the best,
+              secure & efficient software experience for you & people all around
+              the world. Most of the time we work without any wages at all but
+              we need minimum support to live & these <b> Ads Helps Us</b> earn
+              the minimum wage that we need to live.{" "}
+              <Text color="$success10" fontWeight="bold" textAlign="justify">
+                So, please support Spotube by disabling the AdBlocker on this
+                page or by sponsoring or donating to our collectives directly
+              </Text>
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={() => window.location.reload()}>
+              Reload without AdBlocker
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+      {!adBlockEnabled() ? (
+        <VStack alignItems="stretch">
+          <Navbar />
+          <Routes>
+            <Route path="/" component={Root} />
+            <Route path="/other-downloads" component={OtherDownloads} />
+            <Route path="/stable-downloads" component={StableDownloads} />
+            <Route path="/nightly-downloads" component={NightlyDownloads} />
+          </Routes>
+        </VStack>
+      ) : (
+        <Stack
+          direction="column"
+          w="100vw"
+          h="100vh"
+          justifyContent="space-between"
+          alignItems="center"
+          p="$5"
+        >
+          <Heading></Heading>
+          <VStack spacing="$2" alignItems="flex-start">
+            <Heading>Here's something interesting:</Heading>
+            <Heading size="xl">
+              {joke().joke ?? (
+                <>
+                  <p>{joke().setup}</p>
+                  <p>{joke().delivery}</p>
+                </>
+              )}
+            </Heading>
+          </VStack>
+          <VStack justifySelf="flex-end">
+            <Heading
+              mt="$10"
+              size={{
+                "@lg": "4xl",
+                "@initial": "2xl",
+              }}
+              maxW="700px"
+              textAlign="justify"
+              lineHeight="1.5"
+            >
+              Be grateful for all the favors you get. But don't let it become a
+              pile of debt. Try returning them as soon as you can. You'll feel
+              relieved
+            </Heading>
+            <Heading
+              size={{
+                "@lg": "2xl",
+                "@initial": "lg",
+              }}
+              alignSelf="flex-end"
+            >
+              - Kingkor Roy Tirtho
+            </Heading>
+          </VStack>
+        </Stack>
+      )}
     </Router>
   );
 };

website/src/components/Navbar.tsx

@@ -13,16 +13,21 @@ import { FiSun } from "solid-icons/fi";
 const Navbar = () => {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
-    <HStack justifyContent="space-between" as="nav" w="$full">
+    <HStack py="$2" justifyContent="space-between" as="nav" w="$full">
       <section>
         <Heading p="$2" size="3xl" mr="$2" as={NavLink} href="/">
           Spotube
         </Heading>
         <ButtonGroup>
-          <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
-            All Versions
+          <Button
+            variant="ghost"
+            size="sm"
+            as={NavLink}
+            href="/other-downloads"
+          >
+            Other Downloads
           </Button>
-          <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
+          <Button variant="ghost" size="sm" as={NavLink} href="/about">
             About
           </Button>
         </ButtonGroup>

website/src/components/special.tsx

@@ -1,6 +1,10 @@
-import { createEffect } from "solid-js";
+import { Component, createEffect } from "solid-js";
 
-export function DisplayAd() {
+type AdComponent = Component<{
+  slot: string;
+}>;
+
+export const DisplayAd: AdComponent = ({ slot }) => {
   createEffect(() => {
     //@ts-ignore
     (window.adsbygoogle = window.adsbygoogle || []).push({});
@@ -11,9 +15,26 @@ export function DisplayAd() {
       class="adsbygoogle"
       style={{ display: "block" }}
       data-ad-client="ca-pub-6419300932495863"
-      data-ad-slot="9501208974"
+      data-ad-slot={slot}
       data-ad-format="auto"
       data-full-width-responsive="true"
     ></ins>
   );
-}
+};
+
+export const GridMultiplexAd: AdComponent = ({ slot }) => {
+  createEffect(() => {
+    //@ts-ignore
+    (window.adsbygoogle = window.adsbygoogle || []).push({});
+  }, []);
+
+  return (
+    <ins
+      class="adsbygoogle"
+      style={{ display: "block" }}
+      data-ad-format="autorelaxed"
+      data-ad-client="ca-pub-6419300932495863"
+      data-ad-slot={slot}
+    ></ins>
+  );
+};

website/src/pages/NightlyDownloads.tsx

@@ -0,0 +1,75 @@
+import {
+  Anchor,
+  Button,
+  Heading,
+  Table,
+  Td,
+  Th,
+  Tr,
+  VStack,
+  hope,
+  Text,
+} from "@hope-ui/solid";
+import { NavLink } from "solid-app-router";
+import { GridMultiplexAd } from "../components/special";
+
+const baseURL =
+  "https://nightly.link/KRTirtho/spotube/workflows/spotube-nightly/build";
+
+const DownloadLinks = Object.freeze({
+  Linux: baseURL + "Spotube-Linux-Bundle.zip",
+  Android: baseURL + "Spotube-Android-Bundle.zip",
+  Windows: baseURL + "Spotube-Windows-Bundle.zip",
+  MacOS: baseURL + "Spotube-Macos-Bundle.zip",
+});
+
+function NightlyDownloads() {
+  return (
+    <VStack
+      mx="$3"
+      alignSelf="center"
+      alignItems="flex-start"
+      spacing="$4"
+      maxW="500px"
+      overflow="auto"
+    >
+      <Heading size="2xl">Nightly Release</Heading>
+      <Text>Download latest & most bleeding edge version of Spotube</Text>
+      <Text size="sm" color="$danger11" textAlign="justify">
+        Disclaimer!: Nightly versions are untested and not the final version of
+        spotube. So it can consists of many hidden or unknown bugs but at the
+        same time will be opted with latest & greatest features too. So use it
+        at your own risk! If you don't know what you're doing than we recommend
+        you to download the{" "}
+        <Anchor as={NavLink} color="$info10" href="/">
+          latest stable version of
+        </Anchor>{" "}
+        Spotube
+      </Text>
+      <hope.section
+        border="2px solid"
+        borderColor="$neutral10"
+        borderRadius="$md"
+      >
+        <Table overflow="auto">
+          {Object.entries(DownloadLinks).map(([platform, url]) => {
+            const segments = url.split("/");
+            return (
+              <Tr>
+                <Th>{platform}</Th>
+                <Td>
+                  <Button as={Anchor} href={url} variant="ghost">
+                    {segments.at(segments.length - 1)?.replace("build", "")}
+                  </Button>
+                </Td>
+              </Tr>
+            );
+          })}
+        </Table>
+      </hope.section>
+      <GridMultiplexAd slot="3192619797" />
+    </VStack>
+  );
+}
+
+export default NightlyDownloads;

website/src/pages/OtherDownloads.tsx

@@ -0,0 +1,27 @@
+import { Anchor, Heading, VStack } from "@hope-ui/solid";
+import { NavLink } from "solid-app-router";
+import { GridMultiplexAd } from "../components/special";
+
+function OtherDownloads() {
+  return (
+    <VStack alignItems="flex-start" ml="$10" mt="$20">
+      <Heading size="2xl">Download other versions of Spotube</Heading>
+      <ul>
+        <li>
+          <Anchor color="$info10" as={NavLink} href="/stable-downloads">
+            Download previous versions of Spotube
+          </Anchor>
+        </li>
+        <li>
+          <Anchor color="$info10" as={NavLink} href="/nightly-downloads">
+            Download Bleeding Edge Nightly version of Spotube
+          </Anchor>{" "}
+          (Nightly releases)
+        </li>
+      </ul>
+      <GridMultiplexAd slot="4575915852" />
+    </VStack>
+  );
+}
+
+export default OtherDownloads;

website/src/pages/Root.tsx

@@ -17,7 +17,7 @@ import { Platform, usePlatform } from "../hooks/usePlatform";
 
 const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/";
 
-const DownloadLinks = {
+const DownloadLinks = Object.freeze({
   [Platform.linux]: [
     { name: "deb", url: baseURL + "Spotube-linux-x86_64.deb" },
     { name: "tar", url: baseURL + "Spotube-linux-x86_64.tar.xz" },
@@ -34,7 +34,7 @@ const DownloadLinks = {
     { name: "exe", url: baseURL + "Spotube-windows-x86_64-setup.exe" },
     { name: "nupkg", url: baseURL + "Spotube-windows-x86_64.nupkg " },
   ],
-};
+});
 
 export const Root = () => {
   const platform = usePlatform();
@@ -62,7 +62,9 @@ export const Root = () => {
         }}
       >
         <VStack mt="$10" mx="$6" spacing="$4" alignItems="flex-start">
-          <Heading color="#212121" size="5xl">Spotube</Heading>
+          <Heading color="#212121" size="5xl">
+            Spotube
+          </Heading>
           <Heading color="#212121" size="2xl" textAlign="justify" maxW="500px">
             A fast, modern, lightweight & efficient Spotify Music Client for
             every platform
@@ -93,7 +95,7 @@ export const Root = () => {
           </Menu>
         </VStack>
       </hope.section>
-      <DisplayAd />
+      <DisplayAd slot="9501208974" />
     </VStack>
   );
 };

website/src/pages/StableDownloads.tsx

@@ -27,8 +27,8 @@ enum AssetTypes {
   android = "android",
 }
 
-const octokit = new Octokit();
-const AllVersions = () => {
+export const octokit = new Octokit();
+function StableDownloads() {
   const [data] = createCachedResource("gh-releases", () => {
     return octokit.repos.listReleases({
       owner: "KRTirtho",
@@ -139,14 +139,14 @@ const AllVersions = () => {
           })}
         </VStack>
         <VStack id="Ad">
-          <DisplayAd />
-          <DisplayAd />
-          <DisplayAd />
-          <DisplayAd />
+          <DisplayAd slot="1391349310" />
+          <DisplayAd slot="6452104301" />
+          <DisplayAd slot="1199777626" />
+          <DisplayAd slot="2001723409" />
         </VStack>
       </HStack>
     </VStack>
   );
-};
+}
 
-export default AllVersions;
+export default StableDownloads;