diff --git a/website/src/assets/spotube-screenshot-web.jpg b/website/src/assets/spotube-screenshot-web.jpg new file mode 100644 index 00000000..89cc93bc Binary files /dev/null and b/website/src/assets/spotube-screenshot-web.jpg differ diff --git a/website/src/components/Navbar.tsx b/website/src/components/Navbar.tsx index 79da111f..70eea379 100644 --- a/website/src/components/Navbar.tsx +++ b/website/src/components/Navbar.tsx @@ -1,20 +1,40 @@ -import { Button, ButtonGroup, Heading, HStack } from "@hope-ui/solid"; +import { + Button, + ButtonGroup, + Heading, + HStack, + IconButton, + useColorMode, +} from "@hope-ui/solid"; import { NavLink } from "solid-app-router"; +import { FaLightbulb } from "solid-icons/fa"; +import { FiSun } from "solid-icons/fi"; const Navbar = () => { + const { colorMode, toggleColorMode } = useColorMode(); return ( - - - Spotube - - - - - + +
+ + Spotube + + + + + +
+ : } + aria-label="Dark Mode Toggle" + onClick={() => { + toggleColorMode(); + }} + /> ); }; diff --git a/website/src/components/special.tsx b/website/src/components/special.tsx new file mode 100644 index 00000000..c619c047 --- /dev/null +++ b/website/src/components/special.tsx @@ -0,0 +1,19 @@ +import { createEffect } from "solid-js"; + +export function DisplayAd() { + createEffect(() => { + //@ts-ignore + (window.adsbygoogle = window.adsbygoogle || []).push({}); + }, []); + + return ( + + ); +} diff --git a/website/src/misc/MarkdownComponentDefs.tsx b/website/src/misc/MarkdownComponentDefs.tsx new file mode 100644 index 00000000..8c030480 --- /dev/null +++ b/website/src/misc/MarkdownComponentDefs.tsx @@ -0,0 +1,13 @@ +import { Anchor, Heading, Text, hope } from "@hope-ui/solid"; + +export const MarkdownComponentDefs = { + a: (props: any) => , + h1: (props: any) => , + h2: (props: any) => , + h3: (props: any) => , + h4: (props: any) => , + h5: (props: any) => , + h6: (props: any) => , + p: (props: any) => , + li: (props: any) => , +}; diff --git a/website/src/pages/AllVersions.tsx b/website/src/pages/AllVersions.tsx index db4a3aed..16f5416d 100644 --- a/website/src/pages/AllVersions.tsx +++ b/website/src/pages/AllVersions.tsx @@ -5,10 +5,9 @@ import { AccordionItem, AccordionPanel, Anchor, - Container, Heading, HStack, - Stack, + Skeleton, Text, VStack, } from "@hope-ui/solid"; @@ -17,6 +16,8 @@ import { createCachedResource } from "solid-cached-resource"; import SolidMarkdown from "solid-markdown"; import { Platform } from "../hooks/usePlatform"; import gfm from "remark-gfm"; +import { MarkdownComponentDefs } from "../misc/MarkdownComponentDefs"; +import { DisplayAd } from "../components/special"; enum AssetTypes { sums = "sums", @@ -42,133 +43,108 @@ const AllVersions = () => { If any of your version is not working correctly than you can download & use previous versions of Spotube too - - {data()?.data.map((release, i) => { - const releaseSome = release.assets - .map((asset) => { - const platform = - Object.keys(Platform).find((platform) => - asset.name.toLowerCase().includes(platform) - ) ?? "sums"; - return { - type: AssetTypes[platform as keyof typeof AssetTypes], - asset, - }; - }) - .reduce((acc, val) => { - acc[val.type] = [...(acc[val.type] ?? []), val.asset]; - return acc; - }, {} as any) as { - [key in AssetTypes]: RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"]; - }; - return ( - - - Version{" "} - - {release.tag_name} - {" "} - {i == 0 && "(Latest)"} - - {Object.entries(releaseSome).map(([type, assets]) => { - return ( - - - {type[0].toUpperCase() + type.slice(1)} - - - {assets.map((asset) => { - return ( - - {asset.name} - - ); - })} - - - ); - })} - - - - Release Notes - - - ( - - ), - h1: (props) => ( - - ), - h2: (props) => ( - - ), - h3: (props) => ( - - ), - h4: (props) => ( - - ), - h5: (props) => ( - - ), - h6: (props) => ( - - ), - p: (props) => , - }} - remarkPlugins={[gfm]} - > - {release.body ?? ""} - - - - - - ); - })} - + + + {data.loading && + !data.latest && [ + , + ...Array.from({ length: 8 }, () => ), + ]} + {(data.latest ?? data())?.data.map((release, i) => { + const releaseSome = release.assets + .map((asset) => { + const platform = + Object.keys(Platform).find((platform) => + asset.name.toLowerCase().includes(platform) + ) ?? "sums"; + return { + type: AssetTypes[platform as keyof typeof AssetTypes], + asset, + }; + }) + .reduce((acc, val) => { + acc[val.type] = [...(acc[val.type] ?? []), val.asset]; + return acc; + }, {} as any) as { + [key in AssetTypes]: RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"]; + }; + return ( + + + Version{" "} + + {release.tag_name} + {" "} + {i == 0 && "(Latest)"} + + {Object.entries(releaseSome).map(([type, assets]) => { + return ( + + + {type[0].toUpperCase() + type.slice(1)} + + + {assets.map((asset) => { + return ( + + {asset.name} + + ); + })} + + + ); + })} + + + + Release Notes + + + + {release.body ?? ""} + + + + + + ); + })} + + + ); }; diff --git a/website/src/pages/Root.tsx b/website/src/pages/Root.tsx index ef72b5df..5806365d 100644 --- a/website/src/pages/Root.tsx +++ b/website/src/pages/Root.tsx @@ -9,8 +9,10 @@ import { MenuContent, MenuItem, VStack, + hope, } from "@hope-ui/solid"; import { FaSolidCaretDown } from "solid-icons/fa"; +import { DisplayAd } from "../components/special"; import { Platform, usePlatform } from "../hooks/usePlatform"; const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/"; @@ -48,36 +50,50 @@ export const Root = () => { const currentPlatform = DownloadLinks[platform][0]; return ( - - Spotube - - A fast, modern, lightweight & efficient Spotify Music Client for every - platform - - - - - - - - - - {allPlatforms.map(({ name, url }) => { - return ( - - {name} - - ); - })} - - + + + + Spotube + + A fast, modern, lightweight & efficient Spotify Music Client for + every platform + + + + + + + + + + {allPlatforms.map(({ name, url }) => { + return ( + + {name} + + ); + })} + + + + + ); };