From 852dce34ce2f39031d440ab88feec9001895d64b Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sat, 16 Jul 2022 21:12:25 +0600 Subject: [PATCH] [website] Various components updated [website] Joke component added --- website/src/App.tsx | 144 ++++++++++++++++-- website/src/components/Navbar.tsx | 13 +- website/src/components/special.tsx | 29 +++- website/src/pages/NightlyDownloads.tsx | 75 +++++++++ website/src/pages/OtherDownloads.tsx | 27 ++++ website/src/pages/Root.tsx | 10 +- .../{AllVersions.tsx => StableDownloads.tsx} | 16 +- 7 files changed, 284 insertions(+), 30 deletions(-) create mode 100644 website/src/pages/NightlyDownloads.tsx create mode 100644 website/src/pages/OtherDownloads.tsx rename website/src/pages/{AllVersions.tsx => StableDownloads.tsx} (94%) diff --git a/website/src/App.tsx b/website/src/App.tsx index 727ba42e..092e7804 100644 --- a/website/src/App.tsx +++ b/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>({}); + + 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 ( - - - - - - - + + + + Support the Creatorđź’š + +

+ 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 Ads Helps Us earn + the minimum wage that we need to live.{" "} + + So, please support Spotube by disabling the AdBlocker on this + page or by sponsoring or donating to our collectives directly + +

+ + + + + + + {!adBlockEnabled() ? ( + + + + + + + + + + ) : ( + + + + Here's something interesting: + + {joke().joke ?? ( + <> +

{joke().setup}

+

{joke().delivery}

+ + )} + + + + + 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 + + + - Kingkor Roy Tirtho + + + + )} ); }; diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx index 70eea379..9317ac8e 100644 --- a/website/src/components/Navbar.tsx +++ b/website/src/components/Navbar.tsx @@ -13,16 +13,21 @@ import { FiSun } from "solid-icons/fi"; const Navbar = () => { const { colorMode, toggleColorMode } = useColorMode(); return ( - +
Spotube - - diff --git a/website/src/components/special.tsx b/website/src/components/special.tsx index c619c047..8a8dac85 100644 --- a/website/src/components/special.tsx +++ b/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" > ); -} +}; + +export const GridMultiplexAd: AdComponent = ({ slot }) => { + createEffect(() => { + //@ts-ignore + (window.adsbygoogle = window.adsbygoogle || []).push({}); + }, []); + + return ( + + ); +}; diff --git a/website/src/pages/NightlyDownloads.tsx b/website/src/pages/NightlyDownloads.tsx new file mode 100644 index 00000000..1fb587d0 --- /dev/null +++ b/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 ( + + Nightly Release + Download latest & most bleeding edge version of Spotube + + 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{" "} + + latest stable version of + {" "} + Spotube + + + + {Object.entries(DownloadLinks).map(([platform, url]) => { + const segments = url.split("/"); + return ( + + + + + ); + })} +
{platform} + +
+ + + + ); +} + +export default NightlyDownloads; diff --git a/website/src/pages/OtherDownloads.tsx b/website/src/pages/OtherDownloads.tsx new file mode 100644 index 00000000..75ed78d5 --- /dev/null +++ b/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 ( + + Download other versions of Spotube +
    +
  • + + Download previous versions of Spotube + +
    • +
  • + + Download Bleeding Edge Nightly version of Spotube + {" "} + (Nightly releases) +
    • +
+ + + ); +} + +export default OtherDownloads; diff --git a/website/src/pages/Root.tsx b/website/src/pages/Root.tsx index 5806365d..5e9540b2 100644 --- a/website/src/pages/Root.tsx +++ b/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 = () => { }} > - Spotube + + Spotube + A fast, modern, lightweight & efficient Spotify Music Client for every platform @@ -93,7 +95,7 @@ export const Root = () => { - + ); }; diff --git a/website/src/pages/AllVersions.tsx b/website/src/pages/StableDownloads.tsx similarity index 94% rename from website/src/pages/AllVersions.tsx rename to website/src/pages/StableDownloads.tsx index 16f5416d..925382a2 100644 --- a/website/src/pages/AllVersions.tsx +++ b/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 = () => { })} ); -}; +} -export default AllVersions; +export default StableDownloads;