[website] better home screen

[website[ ad units created

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 (
-    <HStack as="nav" w="$full">
-      <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>
-        <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
-          About
-        </Button>
-      </ButtonGroup>
+    <HStack 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>
+          <Button variant="ghost" size="sm" as={NavLink} href="/all-versions">
+            About
+          </Button>
+        </ButtonGroup>
+      </section>
+      <IconButton
+        variant="ghost"
+        icon={colorMode() == "dark" ? <FaLightbulb /> : <FiSun />}
+        aria-label="Dark Mode Toggle"
+        onClick={() => {
+          toggleColorMode();
+        }}
+      />
     </HStack>
   );
 };

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 (
+    <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>
+  );
+}

website/src/misc/MarkdownComponentDefs.tsx

@@ -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" />,
+};

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
       </Text>
-      <VStack alignItems="stretch" spacing="$3" mr="$1">
-        {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 (
-            <VStack
-              py="$3"
-              alignItems="flex-start"
-              borderBottom="1px solid grey"
-              _last={{ borderBottom: "none" }}
-            >
-              <Heading size="xl">
-                Version{" "}
-                <Text as="span" color="$success8">
-                  {release.tag_name}
-                </Text>{" "}
-                {i == 0 && "(Latest)"}
-              </Heading>
-              {Object.entries(releaseSome).map(([type, assets]) => {
-                return (
-                  <HStack py="$2" alignItems="flex-start">
-                    <Heading
-                      w={90}
-                      p="$2"
-                      color="$info12"
-                      border={`2px solid #404040`}
-                      borderRadius="5px 0 0 5px"
-                      borderRight="none"
-                    >
-                      {type[0].toUpperCase() + type.slice(1)}
-                    </Heading>
-                    <VStack
-                      alignItems="flex-start"
-                      border={`2px solid #404040`}
-                      borderRadius={`0 5px 5px ${
-                        assets.length !== 1 ? 5 : 0
-                      }px`}
-                      w="$72"
-                    >
-                      {assets.map((asset) => {
-                        return (
-                          <Anchor
-                            color="$info11"
-                            width="$full"
-                            p="$2"
-                            href={asset.name}
-                          >
-                            {asset.name}
-                          </Anchor>
-                        );
-                      })}
-                    </VStack>
-                  </HStack>
-                );
-              })}
-              <Accordion defaultIndex={i}>
-                <AccordionItem>
-                  <AccordionButton>
-                    Release Notes <AccordionIcon />
-                  </AccordionButton>
-                  <AccordionPanel>
-                    <SolidMarkdown
-                      components={{
-                        a: (props) => (
-                          <Anchor {...(props as any)} color="$info10" />
-                        ),
-                        h1: (props) => (
-                          <Heading
-                            {...(props as any)}
-                            size="4xl"
-                            mt="$5"
-                            mb="$1_5"
-                          />
-                        ),
-                        h2: (props) => (
-                          <Heading
-                            {...(props as any)}
-                            size="3xl"
-                            mt="$5"
-                            mb="$1_5"
-                          />
-                        ),
-                        h3: (props) => (
-                          <Heading
-                            {...(props as any)}
-                            size="2xl"
-                            mt="$5"
-                            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>
+      <HStack alignItems="flex-start">
+        <VStack alignItems="stretch" spacing="$3" mr="$1">
+          {data.loading &&
+            !data.latest && [
+              <Skeleton h="$6" w="$56" />,
+              ...Array.from({ length: 8 }, () => <Skeleton h="$6" w="$96" />),
+            ]}
+          {(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 (
+              <VStack
+                py="$3"
+                alignItems="flex-start"
+                borderBottom="1px solid grey"
+                _last={{ borderBottom: "none" }}
+              >
+                <Heading size="xl">
+                  Version{" "}
+                  <Text as="span" color="$success8">
+                    {release.tag_name}
+                  </Text>{" "}
+                  {i == 0 && "(Latest)"}
+                </Heading>
+                {Object.entries(releaseSome).map(([type, assets]) => {
+                  return (
+                    <HStack py="$2" alignItems="flex-start">
+                      <Heading
+                        w={90}
+                        p="$2"
+                        color="$info12"
+                        border={`2px solid #404040`}
+                        borderRadius="5px 0 0 5px"
+                        borderRight="none"
+                      >
+                        {type[0].toUpperCase() + type.slice(1)}
+                      </Heading>
+                      <VStack
+                        alignItems="flex-start"
+                        border={`2px solid #404040`}
+                        borderRadius={`0 5px 5px ${
+                          assets.length !== 1 ? 5 : 0
+                        }px`}
+                        w="$72"
+                      >
+                        {assets.map((asset) => {
+                          return (
+                            <Anchor
+                              color="$info11"
+                              width="$full"
+                              p="$2"
+                              href={asset.name}
+                            >
+                              {asset.name}
+                            </Anchor>
+                          );
+                        })}
+                      </VStack>
+                    </HStack>
+                  );
+                })}
+                <Accordion defaultIndex={i}>
+                  <AccordionItem>
+                    <AccordionButton>
+                      Release Notes <AccordionIcon />
+                    </AccordionButton>
+                    <AccordionPanel>
+                      <SolidMarkdown
+                        components={MarkdownComponentDefs}
+                        remarkPlugins={[gfm]}
+                      >
+                        {release.body ?? ""}
+                      </SolidMarkdown>
+                    </AccordionPanel>
+                  </AccordionItem>
+                </Accordion>
+              </VStack>
+            );
+          })}
+        </VStack>
+        <VStack id="Ad">
+          <DisplayAd />
+          <DisplayAd />
+          <DisplayAd />
+          <DisplayAd />
+        </VStack>
+      </HStack>
     </VStack>
   );
 };

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 (
-    <VStack alignSelf="center" spacing="$4">
-      <Heading size="5xl">Spotube</Heading>
-      <Heading size="2xl">
-        A fast, modern, lightweight & efficient Spotify Music Client for every
-        platform
-      </Heading>
-      <Menu placement="bottom-end">
-        <ButtonGroup spacing="$0_5">
-          <Button
-            variant="subtle"
-            as={Anchor}
-            href={currentPlatform.url}
-            _hover={{ textDecoration: "none" }}
-          >
-            Download for {platform} (.{currentPlatform.name})
-          </Button>
-          <MenuTrigger as={IconButton} variant="subtle">
-            <FaSolidCaretDown />
-          </MenuTrigger>
-        </ButtonGroup>
-        <MenuContent>
-          {allPlatforms.map(({ name, url }) => {
-            return (
-              <MenuItem as={Anchor} href={url}>
-                {name}
-              </MenuItem>
-            );
-          })}
-        </MenuContent>
-      </Menu>
+    <VStack spacing="$4" alignItems="stretch">
+      <hope.section
+        h="60vh"
+        backgroundColor="#f5f5f5"
+        style={{
+          "background-image": "url(/src/assets/spotube-screenshot-web.jpg)",
+          "background-repeat": "no-repeat",
+          "background-size": "contain",
+          "background-position": "right",
+        }}
+      >
+        <VStack mt="$10" mx="$6" spacing="$4" alignItems="flex-start">
+          <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
+          </Heading>
+          <Menu placement="bottom-end">
+            <ButtonGroup spacing="$0_5">
+              <Button
+                variant="subtle"
+                as={Anchor}
+                href={currentPlatform.url}
+                _hover={{ textDecoration: "none" }}
+              >
+                Download for {platform} (.{currentPlatform.name})
+              </Button>
+              <MenuTrigger as={IconButton} variant="subtle">
+                <FaSolidCaretDown />
+              </MenuTrigger>
+            </ButtonGroup>
+            <MenuContent>
+              {allPlatforms.map(({ name, url }) => {
+                return (
+                  <MenuItem as={Anchor} href={url}>
+                    {name}
+                  </MenuItem>
+                );
+              })}
+            </MenuContent>
+          </Menu>
+        </VStack>
+      </hope.section>
+      <DisplayAd />
     </VStack>
   );
 };