[website] better home screen

[website[ ad units created

website/src/components/Navbar.tsx

@@ -1,9 +1,20 @@
-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">
+    <HStack justifyContent="space-between" as="nav" w="$full">
+      <section>
         <Heading p="$2" size="3xl" mr="$2" as={NavLink} href="/">
           Spotube
         </Heading>
@@ -15,6 +26,15 @@ const Navbar = () => {
             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,8 +43,14 @@ const AllVersions = () => {
         If any of your version is not working correctly than you can download &
         use previous versions of Spotube too
       </Text>
+      <HStack alignItems="flex-start">
         <VStack alignItems="stretch" spacing="$3" mr="$1">
-        {data()?.data.map((release, i) => {
+          {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 =
@@ -119,45 +126,7 @@ const AllVersions = () => {
                     </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="" />,
-                      }}
+                        components={MarkdownComponentDefs}
                         remarkPlugins={[gfm]}
                       >
                         {release.body ?? ""}
@@ -169,6 +138,13 @@ const AllVersions = () => {
             );
           })}
         </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,11 +50,22 @@ 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
+    <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">
@@ -79,5 +92,8 @@ export const Root = () => {
             </MenuContent>
           </Menu>
         </VStack>
+      </hope.section>
+      <DisplayAd />
+    </VStack>
   );
 };