kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2025-09-13 07:55:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

[website] better home screen

Browse Source 
[website[ ad units created
This commit is contained in:
Kingkor Roy Tirtho 2022-07-16 17:47:51 +06:00
parent c6a2430767
commit 9254fb3f87
6 changed files with 216 additions and 172 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
website/src/assets/spotube-screenshot-web.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 323 KiB

46
website/src/components/Navbar.tsx
View File

@ -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 { NavLink } from "solid-app-router";
import { FaLightbulb } from "solid-icons/fa";
import { FiSun } from "solid-icons/fi";
const Navbar = () => { const Navbar = () => {
const { colorMode, toggleColorMode } = useColorMode();
return ( return (
<HStack as="nav" w="$full"> <HStack justifyContent="space-between" as="nav" w="$full">
<Heading p="$2" size="3xl" mr="$2" as={NavLink} href="/"> <section>
Spotube <Heading p="$2" size="3xl" mr="$2" as={NavLink} href="/">
</Heading> Spotube
<ButtonGroup> </Heading>
<Button variant="ghost" size="sm" as={NavLink} href="/all-versions"> <ButtonGroup>
All Versions <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
</Button> All Versions
<Button variant="ghost" size="sm" as={NavLink} href="/all-versions"> </Button>
About <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
</Button> About
</ButtonGroup> </Button>
</ButtonGroup>
</section>
<IconButton
variant="ghost"
icon={colorMode() == "dark" ? <FaLightbulb /> : <FiSun />}
aria-label="Dark Mode Toggle"
onClick={() => {
toggleColorMode();
}}
/>
</HStack> </HStack>
); );
}; };

19
website/src/components/special.tsx Normal file
View File

@ -0,0 +1,19 @@
import { createEffect } from "solid-js";
export function DisplayAd() {
createEffect(() => {
//@ts-ignore
(window.adsbygoogle = window.adsbygoogle || []).push({});
}, []);
return (
<ins
class="adsbygoogle"
style={{ display: "block" }}
data-ad-client="ca-pub-6419300932495863"
data-ad-slot="9501208974"
data-ad-format="auto"
data-full-width-responsive="true"
></ins>
);
}

13
website/src/misc/MarkdownComponentDefs.tsx Normal file
View File

@ -0,0 +1,13 @@
import { Anchor, Heading, Text, hope } from "@hope-ui/solid";
export const MarkdownComponentDefs = {
a: (props: any) => <Anchor {...props} color="$info10" />,
h1: (props: any) => <Heading {...props} size="4xl" mt="$5" mb="$1_5" />,
h2: (props: any) => <Heading {...props} size="3xl" mt="$5" mb="$1_5" />,
h3: (props: any) => <Heading {...props} size="2xl" mt="$5" mb="$1_5" />,
h4: (props: any) => <Heading {...props} size="md" />,
h5: (props: any) => <Heading {...props} size="lg" />,
h6: (props: any) => <Heading {...props} size="md" />,
p: (props: any) => <Text {...props} />,
li: (props: any) => <hope.li {...props} ml="$4" />,
};

234
website/src/pages/AllVersions.tsx
View File

@ -5,10 +5,9 @@ import {
AccordionItem, AccordionItem,
AccordionPanel, AccordionPanel,
Anchor, Anchor,
Container,
Heading, Heading,
HStack, HStack,
Stack, Skeleton,
Text, Text,
VStack, VStack,
} from "@hope-ui/solid"; } from "@hope-ui/solid";
@ -17,6 +16,8 @@ import { createCachedResource } from "solid-cached-resource";
import SolidMarkdown from "solid-markdown"; import SolidMarkdown from "solid-markdown";
import { Platform } from "../hooks/usePlatform"; import { Platform } from "../hooks/usePlatform";
import gfm from "remark-gfm"; import gfm from "remark-gfm";
import { MarkdownComponentDefs } from "../misc/MarkdownComponentDefs";
import { DisplayAd } from "../components/special";
enum AssetTypes { enum AssetTypes {
sums = "sums", sums = "sums",
@ -42,133 +43,108 @@ const AllVersions = () => {
If any of your version is not working correctly than you can download & If any of your version is not working correctly than you can download &
use previous versions of Spotube too use previous versions of Spotube too
</Text> </Text>
<VStack alignItems="stretch" spacing="$3" mr="$1"> <HStack alignItems="flex-start">
{data()?.data.map((release, i) => { <VStack alignItems="stretch" spacing="$3" mr="$1">
const releaseSome = release.assets {data.loading &&
.map((asset) => { !data.latest && [
const platform = <Skeleton h="$6" w="$56" />,
Object.keys(Platform).find((platform) => ...Array.from({ length: 8 }, () => <Skeleton h="$6" w="$96" />),
asset.name.toLowerCase().includes(platform) ]}
) ?? "sums"; {(data.latest ?? data())?.data.map((release, i) => {
return { const releaseSome = release.assets
type: AssetTypes[platform as keyof typeof AssetTypes], .map((asset) => {
asset, const platform =
}; Object.keys(Platform).find((platform) =>
}) asset.name.toLowerCase().includes(platform)
.reduce((acc, val) => { ) ?? "sums";
acc[val.type] = [...(acc[val.type] ?? []), val.asset]; return {
return acc; type: AssetTypes[platform as keyof typeof AssetTypes],
}, {} as any) as { asset,
[key in AssetTypes]: RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"]; };
}; })
return ( .reduce((acc, val) => {
<VStack acc[val.type] = [...(acc[val.type] ?? []), val.asset];
py="$3" return acc;
alignItems="flex-start" }, {} as any) as {
borderBottom="1px solid grey" [key in AssetTypes]: RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"];
_last={{ borderBottom: "none" }} };
> return (
<Heading size="xl"> <VStack
Version{" "} py="$3"
<Text as="span" color="$success8"> alignItems="flex-start"
{release.tag_name} borderBottom="1px solid grey"
</Text>{" "} _last={{ borderBottom: "none" }}
{i == 0 && "(Latest)"} >
</Heading> <Heading size="xl">
{Object.entries(releaseSome).map(([type, assets]) => { Version{" "}
return ( <Text as="span" color="$success8">
<HStack py="$2" alignItems="flex-start"> {release.tag_name}
<Heading </Text>{" "}
w={90} {i == 0 && "(Latest)"}
p="$2" </Heading>
color="$info12" {Object.entries(releaseSome).map(([type, assets]) => {
border={`2px solid #404040`} return (
borderRadius="5px 0 0 5px" <HStack py="$2" alignItems="flex-start">
borderRight="none" <Heading
> w={90}
{type[0].toUpperCase() + type.slice(1)} p="$2"
</Heading> color="$info12"
<VStack border={`2px solid #404040`}
alignItems="flex-start" borderRadius="5px 0 0 5px"
border={`2px solid #404040`} borderRight="none"
borderRadius={`0 5px 5px ${ >
assets.length !== 1 ? 5 : 0 {type[0].toUpperCase() + type.slice(1)}
}px`} </Heading>
w="$72" <VStack
> alignItems="flex-start"
{assets.map((asset) => { border={`2px solid #404040`}
return ( borderRadius={`0 5px 5px ${
<Anchor assets.length !== 1 ? 5 : 0
color="$info11" }px`}
width="$full" w="$72"
p="$2" >
href={asset.name} {assets.map((asset) => {
> return (
{asset.name} <Anchor
</Anchor> color="$info11"
); width="$full"
})} p="$2"
</VStack> href={asset.name}
</HStack> >
); {asset.name}
})} </Anchor>
<Accordion defaultIndex={i}> );
<AccordionItem> })}
<AccordionButton> </VStack>
Release Notes <AccordionIcon /> </HStack>
</AccordionButton> );
<AccordionPanel> })}
<SolidMarkdown <Accordion defaultIndex={i}>
components={{ <AccordionItem>
a: (props) => ( <AccordionButton>
<Anchor {...(props as any)} color="$info10" /> Release Notes <AccordionIcon />
), </AccordionButton>
h1: (props) => ( <AccordionPanel>
<Heading <SolidMarkdown
{...(props as any)} components={MarkdownComponentDefs}
size="4xl" remarkPlugins={[gfm]}
mt="$5" >
mb="$1_5" {release.body ?? ""}
/> </SolidMarkdown>
), </AccordionPanel>
h2: (props) => ( </AccordionItem>
<Heading </Accordion>
{...(props as any)} </VStack>
size="3xl" );
mt="$5" })}
mb="$1_5" </VStack>
/> <VStack id="Ad">
), <DisplayAd />
h3: (props) => ( <DisplayAd />
<Heading <DisplayAd />
{...(props as any)} <DisplayAd />
size="2xl" </VStack>
mt="$5" </HStack>
mb="$1_5"
/>
),
h4: (props) => (
<Heading {...(props as any)} size="md" />
),
h5: (props) => (
<Heading {...(props as any)} size="lg" />
),
h6: (props) => (
<Heading {...(props as any)} size="md" />
),
p: (props) => <Text {...(props as any)} size="" />,
}}
remarkPlugins={[gfm]}
>
{release.body ?? ""}
</SolidMarkdown>
</AccordionPanel>
</AccordionItem>
</Accordion>
</VStack>
);
})}
</VStack>
</VStack> </VStack>
); );
}; };

76
website/src/pages/Root.tsx
View File

@ -9,8 +9,10 @@ import {
MenuContent, MenuContent,
MenuItem, MenuItem,
VStack, VStack,
hope,
} from "@hope-ui/solid"; } from "@hope-ui/solid";
import { FaSolidCaretDown } from "solid-icons/fa"; import { FaSolidCaretDown } from "solid-icons/fa";
import { DisplayAd } from "../components/special";
import { Platform, usePlatform } from "../hooks/usePlatform"; import { Platform, usePlatform } from "../hooks/usePlatform";
const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/"; const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/";
@ -48,36 +50,50 @@ export const Root = () => {
const currentPlatform = DownloadLinks[platform][0]; const currentPlatform = DownloadLinks[platform][0];
return ( return (
<VStack alignSelf="center" spacing="$4"> <VStack spacing="$4" alignItems="stretch">
<Heading size="5xl">Spotube</Heading> <hope.section
<Heading size="2xl"> h="60vh"
A fast, modern, lightweight & efficient Spotify Music Client for every backgroundColor="#f5f5f5"
platform style={{
</Heading> "background-image": "url(/src/assets/spotube-screenshot-web.jpg)",
<Menu placement="bottom-end"> "background-repeat": "no-repeat",
<ButtonGroup spacing="$0_5"> "background-size": "contain",
<Button "background-position": "right",
variant="subtle" }}
as={Anchor} >
href={currentPlatform.url} <VStack mt="$10" mx="$6" spacing="$4" alignItems="flex-start">
_hover={{ textDecoration: "none" }} <Heading color="#212121" size="5xl">Spotube</Heading>
> <Heading color="#212121" size="2xl" textAlign="justify" maxW="500px">
Download for {platform} (.{currentPlatform.name}) A fast, modern, lightweight & efficient Spotify Music Client for
</Button> every platform
<MenuTrigger as={IconButton} variant="subtle"> </Heading>
<FaSolidCaretDown /> <Menu placement="bottom-end">
</MenuTrigger> <ButtonGroup spacing="$0_5">
</ButtonGroup> <Button
<MenuContent> variant="subtle"
{allPlatforms.map(({ name, url }) => { as={Anchor}
return ( href={currentPlatform.url}
<MenuItem as={Anchor} href={url}> _hover={{ textDecoration: "none" }}
{name} >
</MenuItem> Download for {platform} (.{currentPlatform.name})
); </Button>
})} <MenuTrigger as={IconButton} variant="subtle">
</MenuContent> <FaSolidCaretDown />
</Menu> </MenuTrigger>
</ButtonGroup>
<MenuContent>
{allPlatforms.map(({ name, url }) => {
return (
<MenuItem as={Anchor} href={url}>
{name}
</MenuItem>
);
})}
</MenuContent>
</Menu>
</VStack>
</hope.section>
<DisplayAd />
</VStack> </VStack>
); );
}; };