diff --git a/website/components/CodeBlock.tsx b/website/components/CodeBlock.tsx index cebbdd82..111a2011 100644 --- a/website/components/CodeBlock.tsx +++ b/website/components/CodeBlock.tsx @@ -14,7 +14,10 @@ export const CodeBlock: FC = ({ children }) => { _dark={{ bgColor: "gray.700", }} - w="lg" + w="100%" + whiteSpace="pre-wrap" + overflowX="auto" + wordBreak="break-word" > {children} diff --git a/website/components/DownloadButton.tsx b/website/components/DownloadButton.tsx index add63569..4805640b 100644 --- a/website/components/DownloadButton.tsx +++ b/website/components/DownloadButton.tsx @@ -18,6 +18,7 @@ import { FaWindows, FaAndroid, } from "react-icons/fa"; +import { MdOutlineFileDownload } from "react-icons/md"; const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/"; @@ -88,6 +89,9 @@ const DownloadButton = () => { as={Anchor} href={currentPlatform.url} _hover={{ textDecoration: "none" }} + leftIcon={ + + } > Download for {platform} (.{currentPlatform.name}) diff --git a/website/components/Navbar.tsx b/website/components/Navbar.tsx index 5b0aaa25..7084b917 100644 --- a/website/components/Navbar.tsx +++ b/website/components/Navbar.tsx @@ -1,7 +1,6 @@ import { Box, Button, - ButtonGroup, chakra, CloseButton, Flex, @@ -48,8 +47,8 @@ const Navbar = () => { Logo diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx index 82187b62..56a03299 100755 --- a/website/pages/_app.tsx +++ b/website/pages/_app.tsx @@ -26,28 +26,28 @@ const customTheme = extendTheme( }), }, colors: { - green: { - 50: "#d4f3df", - 100: "#b7ecca", - 200: "#9be4b4", - 300: "#61d48a", - 400: "#45cd74", - 500: "#32ba62", - 600: "#2b9e53", - 700: "#238144", - 800: "#1b6435", - 900: "#134826", + blue: { + 50: "#e6f2ff", + 100: "#e6f2ff", + 200: "#e6f2ff", + 300: "#1681bd", + 400: "#1681bd", + 500: "#3a4da5", + 600: "#2d3c7d", + 700: "#1f2b55", + 800: "#121c2e", + 900: "#080e18", }, components: { Link: { baseStyle: { - color: "green", + color: "blue", }, }, }, }, }, - withDefaultColorScheme({ colorScheme: "green" }) + withDefaultColorScheme({ colorScheme: "blue" }) ); function MyApp({ Component, pageProps }: AppProps) { @@ -115,7 +115,7 @@ function MyApp({ Component, pageProps }: AppProps) { Spotube - + = ({ return ( - Spotube - {title} + {title} {title} diff --git a/website/pages/index.tsx b/website/pages/index.tsx index c70f518b..b4f0ac94 100755 --- a/website/pages/index.tsx +++ b/website/pages/index.tsx @@ -1,20 +1,29 @@ -import { Heading, VStack, chakra, HStack, Text } from "@chakra-ui/react"; +import { + Heading, + VStack, + chakra, + HStack, + Text, + useColorModeValue, +} from "@chakra-ui/react"; import DownloadButton from "components/DownloadButton"; import Image from "next/image"; const Root = () => { + const textColor = useColorModeValue("#171717", "#f5f5f5"); + return ( <> - + { md: "transparent", }} > - + Spotube - + A fast, modern, lightweight & efficient Spotify Music Client for every platform @@ -42,7 +51,8 @@ const Root = () => { bgRepeat="no-repeat" bgSize="contain" h="60vh" - alignItems="flex-end" + alignItems={useColorModeValue("flex-end", "flex-start")} + bgPos={useColorModeValue("left", "right")} justify="center" > - + - Looking for Something else? + Other ways to install? Here's some alternative ways & versions of Spotube that you can install try out - -
  • - - - Install Spotube via Package Managers or AppStores - - -
    • -
  • - - - Download previous versions of Spotube - - -
    • -
  • - - - Download Bleeding Edge Nightly version of Spotube - - -  (Nightly releases) -
    • -     + + } + > + Package Managers & AppStores + + } + color={useColorModeValue("red.500", "red.200")} + bgColor={useColorModeValue("red.100", "red.800")} + > + Nightly versions + + } + > + Previous versions + +  (Nightly releases) +     {/* */} @@ -56,3 +62,48 @@ function OtherDownloads() { } export default OtherDownloads; + +interface OtherDownloadLinkItemType { + href: string; + icon: React.ReactNode; + color?: string; + bgColor?: string; + children: React.ReactNode; +} + +const OtherDownloadLinkItem: FC = ({ + href, + icon, + color, + bgColor, + children, +}) => { + const router = useRouter(); + const dColor = useColorModeValue("blue.500", "blue.200"); + const dBColor = useColorModeValue("blue.100", "blue.800"); + + return ( + + + + + {icon} + + {children} + + + + ); +}; diff --git a/website/pages/other-downloads/nightly-downloads.tsx b/website/pages/other-downloads/nightly-downloads.tsx index 4ca0695b..3c778ff8 100644 --- a/website/pages/other-downloads/nightly-downloads.tsx +++ b/website/pages/other-downloads/nightly-downloads.tsx @@ -19,7 +19,9 @@ import { ReleaseResponse } from "./stable-downloads"; type NightlyProps = ReleaseResponse; -export const getServerSideProps: GetServerSideProps =async () =>{ +export const getServerSideProps: GetServerSideProps< + NightlyProps +> = async () => { const { data } = await octokit.repos.getReleaseByTag({ owner: "KRTirtho", repo: "spotube", @@ -35,12 +37,11 @@ export const getServerSideProps: GetServerSideProps =async () =>{ name: asset.name, browser_download_url: asset.browser_download_url, })), - } - } -} + }, + }; +}; - -const NightlyDownloads: NextPage = (props)=> { +const NightlyDownloads: NextPage = (props) => { return ( <> @@ -65,37 +66,46 @@ const NightlyDownloads: NextPage = (props)=> { {" "} Spotube - - {Object.entries(props.assets).map(([_, { name, id, browser_download_url}], i) => { - const segments = name.split("-"); - const platform = segments[1]; - const executable = segments[segments.length - 1].split(".")[1]; - return ( - - - {platform}{" "} - ({executable}) - - { + const segments = name.split("-"); + const platform = segments[1]; + const executable = segments[segments.length - 1].split(".")[1]; + return ( + - {name} - - - ); - })} - + + {platform}{" "} + ({executable}) + + + {name} + + + ); + } + )} +     {/* */} @@ -103,6 +113,6 @@ const NightlyDownloads: NextPage = (props)=> {     ); -} +}; export default NightlyDownloads; diff --git a/website/pages/other-downloads/stable-downloads.tsx b/website/pages/other-downloads/stable-downloads.tsx index 9899a1bd..42c80d94 100644 --- a/website/pages/other-downloads/stable-downloads.tsx +++ b/website/pages/other-downloads/stable-downloads.tsx @@ -55,18 +55,20 @@ export const getServerSideProps: GetServerSideProps = async ({ owner: "KRTirtho", repo: "spotube", }); - const releaseResponse: ReleaseResponse[] = data.map((data) => { - return { - tag_name: data.tag_name, - id: data.id, - body: data.body, - assets: data.assets.map((asset) => ({ - id: asset.id, - name: asset.name, - browser_download_url: asset.browser_download_url, - })), - }; - }); + const releaseResponse: ReleaseResponse[] = data + .map((data) => { + return { + tag_name: data.tag_name, + id: data.id, + body: data.body, + assets: data.assets.map((asset) => ({ + id: asset.id, + name: asset.name, + browser_download_url: asset.browser_download_url, + })), + }; + }) + .filter((release) => release.tag_name !== "nightly"); return { props: { data: releaseResponse, @@ -76,20 +78,16 @@ export const getServerSideProps: GetServerSideProps = async ({ const StableDownloads: NextPage = ({ data }) => { return ( - - Previous Versions - - If any of your version is not working correctly than you can download & - use previous versions of Spotube too - - + + + Previous Versions + + If any of your version is not working correctly than you can download + & use previous versions of Spotube too + + @@ -112,29 +110,28 @@ const StableDownloads: NextPage = ({ data }) => { [key in AssetTypes]: RestEndpointMethodTypes["repos"]["listReleases"]["response"]["data"][0]["assets"]; }; return ( - + Version{" "} - + {release.tag_name} {" "} {i == 0 && "(Latest)"} {Object.entries(releaseSome).map(([type, assets], i) => { return ( - + = ({ data }) => { {assets.map((asset) => { return ( @@ -163,6 +156,9 @@ const StableDownloads: NextPage = ({ data }) => { href={asset.browser_download_url} target="_blank" referrerPolicy="no-referrer" + bgColor="gray.100" + _dark={{ bgColor: "gray.800" }} + borderRadius="md" > {asset.name} @@ -191,20 +187,7 @@ const StableDownloads: NextPage = ({ data }) => { ); })} - - + ); }; diff --git a/website/public/android-chrome-192x192.png b/website/public/android-chrome-192x192.png index 9f9b9c21..9e5dd858 100644 Binary files a/website/public/android-chrome-192x192.png and b/website/public/android-chrome-192x192.png differ diff --git a/website/public/android-chrome-512x512.png b/website/public/android-chrome-512x512.png index c80a8fed..9e5dd858 100644 Binary files a/website/public/android-chrome-512x512.png and b/website/public/android-chrome-512x512.png differ diff --git a/website/public/apple-touch-icon.png b/website/public/apple-touch-icon.png index d5b5b123..06dc67c5 100644 Binary files a/website/public/apple-touch-icon.png and b/website/public/apple-touch-icon.png differ diff --git a/website/public/favicon-16x16.png b/website/public/favicon-16x16.png index 9573d164..1560d195 100644 Binary files a/website/public/favicon-16x16.png and b/website/public/favicon-16x16.png differ diff --git a/website/public/favicon-32x32.png b/website/public/favicon-32x32.png index 42eac490..5a3f3016 100644 Binary files a/website/public/favicon-32x32.png and b/website/public/favicon-32x32.png differ diff --git a/website/public/favicon.ico b/website/public/favicon.ico index 32409d41..a86856d0 100644 Binary files a/website/public/favicon.ico and b/website/public/favicon.ico differ diff --git a/website/public/headline-2a.svg b/website/public/headline-2a.svg index 00cec557..1f767eff 100644 --- a/website/public/headline-2a.svg +++ b/website/public/headline-2a.svg @@ -1 +1 @@ -progressive_app \ No newline at end of file +progressive_app \ No newline at end of file diff --git a/website/public/headline-3.svg b/website/public/headline-3.svg index 3ffd02d0..1d64cc81 100644 --- a/website/public/headline-3.svg +++ b/website/public/headline-3.svg @@ -1 +1 @@ -open source \ No newline at end of file +open source \ No newline at end of file diff --git a/website/public/spotube-logo.svg b/website/public/spotube-logo.svg index 9dc4dbee..5cd88f8e 100644 --- a/website/public/spotube-logo.svg +++ b/website/public/spotube-logo.svg @@ -1,71 +1,349 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file + +