[website] package manager install docs

[website] App Stores install docs

website/components/CodeBlock.tsx

@@ -0,0 +1,22 @@
+import { chakra } from "@chakra-ui/react";
+import { FC, ReactNode } from "react";
+
+type Props = {
+  children: ReactNode;
+};
+
+export const CodeBlock: FC<Props> = ({ children }) => {
+  return (
+    <chakra.pre
+      bgColor="gray.200"
+      p="3"
+      borderRadius="md"
+      _dark={{
+        bgColor: "gray.700",
+      }}
+      w="lg"
+    >
+      <chakra.code>{children}</chakra.code>
+    </chakra.pre>
+  );
+};

website/components/DownloadButton.tsx

@@ -55,7 +55,7 @@ const DownloadButton = () => {
           href={currentPlatform.url}
           _hover={{ textDecoration: "none" }}
         >
-          Download for {platform} (.{currentPlatform.name})
+          Download for {platform} (.{currentPlatform.name}) Binary
         </Button>
         <MenuButton
           aria-label="Show More Downloads"

website/components/Navbar.tsx

@@ -8,13 +8,21 @@ import {
 } from "@chakra-ui/react";
 import NavLink from "next/link";
 import { GoLightBulb } from "react-icons/go";
-import { FiSun,  } from "react-icons/fi";
+import { FiSun } from "react-icons/fi";
+import Image from "next/image";
 
 const Navbar = () => {
   const { colorMode, toggleColorMode } = useColorMode();
   return (
     <HStack justifyContent="space-between" as="nav" w="full">
-      <HStack alignItems="center">
+      <HStack alignItems="center" pl="3">
+        <Image
+          src="/spotube-logo.svg"
+          alt="Logo"
+          height="40"
+          width="40"
+          layout="fixed"
+        />
         <NavLink href="/" passHref>
           <Heading p="2" as="a" size="lg" mr="2">
             Spotube
@@ -23,7 +31,7 @@ const Navbar = () => {
         <ButtonGroup>
           <NavLink href="/other-downloads" passHref>
             <Button as="a" colorScheme="gray" variant="ghost">
-              Other Downloads
+              Downloads
             </Button>
           </NavLink>
           <NavLink href="/about" passHref>

website/package.json

@@ -24,6 +24,7 @@
     "react-dom": "18.2.0",
     "react-icons": "^4.4.0",
     "react-markdown": "^8.0.3",
+    "remark-gemoji": "^7.0.1",
     "remark-gfm": "^3.0.1",
     "swr": "^1.3.0"
   },

website/pages/other-downloads/index.tsx

@@ -1,4 +1,11 @@
-import { Link as Anchor, Heading, VStack, chakra } from "@chakra-ui/react";
+import {
+  Link as Anchor,
+  Heading,
+  VStack,
+  chakra,
+  Box,
+  Flex,
+} from "@chakra-ui/react";
 import NavLink from "next/link";
 import { GridMultiplexAd } from "components/special";
 import { useRouter } from "next/router";
@@ -8,19 +15,33 @@ function OtherDownloads() {
 
   return (
     <>
-      <VStack my="20" mx="5">
+      <Flex justify="center">
-        <Heading size="lg">Download other versions of Spotube</Heading>
+        <VStack my="20" mx="5" maxW="3xl" align="start" spacing="10">
+          <VStack spacing="2" align="start">
+            <Heading size="2xl">Looking for Something else?</Heading>
+            <Heading size="md">
+              Here&apos;s some alternative ways & versions of Spotube that you
+              can install try out
+            </Heading>
+          </VStack>
           <chakra.ul pl="5">
+            <li>
+              <NavLink href={router.pathname + "/package-manager"} passHref>
+                <Anchor fontSize="2xl" color="blue.500">
+                  Install Spotube via Package Managers or AppStores
+                </Anchor>
+              </NavLink>
+            </li>
             <li>
               <NavLink href={router.pathname + "/stable-downloads"} passHref>
-              <Anchor color="blue.500">
+                <Anchor fontSize="2xl" color="blue.500">
                   Download previous versions of Spotube
                 </Anchor>
               </NavLink>
             </li>
             <li>
               <NavLink href={router.pathname + "/nightly-downloads"} passHref>
-              <Anchor color="blue.500">
+                <Anchor color="blue.500" fontSize="2xl">
                   Download Bleeding Edge Nightly version of Spotube
                 </Anchor>
               </NavLink>
@@ -28,6 +49,7 @@ function OtherDownloads() {
             </li>
           </chakra.ul>
         </VStack>
+      </Flex>
       <GridMultiplexAd slot="4575915852" />
     </>
   );

website/pages/other-downloads/package-manager.tsx

@@ -0,0 +1,117 @@
+import {
+  Box,
+  Code,
+  Heading,
+  HStack,
+  Icon,
+  Image,
+  Link,
+  Text,
+  VStack,
+} from "@chakra-ui/react";
+import { CodeBlock } from "components/CodeBlock";
+import { FcLinux } from "react-icons/fc";
+import { BsWindows } from "react-icons/bs";
+import { DisplayAd } from "components/special";
+
+export default function PackageManagerPage() {
+  return (
+    <VStack p="5" spacing="5">
+      <VStack align="start" maxW="2xl">
+        <Heading>Installation using Package Managers</Heading>
+        <Text>
+          If you don&apos;t want to download the binary of Spotube, you can use
+          various package managers to install Spotube too (only Windows & Linux
+          now)
+        </Text>
+        <Heading size="lg" pt="5">
+          Linux
+          <Icon>
+            <FcLinux />
+          </Icon>
+        </Heading>
+        <Heading size="md" pt="3">
+          Flatpak
+        </Heading>
+        <Text>
+          Make sure Flatpak is installed in your Linux device & Run the
+          following command in the terminal:
+        </Text>
+        <CodeBlock>$ flatpak install com.github.KRTirtho.Spotube</CodeBlock>
+        <Heading size="md" pt="3">
+          AUR
+        </Heading>
+        <Text>
+          If you&apos;re an Arch Linux user, you can also install Spotube from
+          AUR. Make sure you have <Code>yay</Code> or <Code>pamac</Code> or{" "}
+          <Code>paru</Code> installed in your system. And Run the Following
+          command in the Terminal:
+        </Text>
+        <CodeBlock>
+          # for pamac user
+          <br />$ pamac install spotube-bin
+        </CodeBlock>
+        <CodeBlock>
+          # for paru user
+          <br />$ paru -Sy spotube-bin
+        </CodeBlock>
+        <CodeBlock>
+          # for yay user
+          <br />$ yay -Sy spotube-bin
+        </CodeBlock>
+        <Box w="full">
+          <DisplayAd slot="9501208974" />
+        </Box>
+        <HStack align="center" pt="5">
+          <Heading size="lg">Windows</Heading>
+          <BsWindows fontSize="25px" color="#00A4EF" />
+        </HStack>
+        <Heading size="md" pt="3">
+          Chocolatey
+        </Heading>
+        <Text>
+          Spotube is available in{" "}
+          <Link
+            color="blue.500"
+            target="_blank"
+            href="community.chocolatey.org"
+          >
+            community.chocolatey.org
+          </Link>{" "}
+          repo. If you have chocolatey install in your system just run following
+          command in an Elevated Command Prompt or PowerShell:
+        </Text>
+        <CodeBlock>$ choco install spotube</CodeBlock>
+        <Heading size="md" pt="3">
+          WinGet
+        </Heading>
+        <Text>
+          Yes, Spotube is also available in the Official Windows PackageManager
+          WinGet. Make sure you have WinGet installed in your Windows machine
+          and run following in a Terminal:
+        </Text>
+        <CodeBlock>$ winget install --id KRTirtho.Spotube</CodeBlock>
+        <Box w="full">
+          <DisplayAd slot="9501208974" />
+        </Box>
+        <Heading pt="5">Install from App Stores</Heading>
+        <Heading size="md">Android (F-Droid)</Heading>
+        <Text>
+          Spotube for Android is available in the F-Droid repositories too. So
+          you can install it directly from F-Droid Android application too
+        </Text>
+        <Link
+          href="https://f-droid.org/packages/oss.krtirtho.spotube/"
+          target="_blank"
+        >
+          <Image
+            src="https://user-images.githubusercontent.com/61944859/174589876-bace24c0-b3fd-4c4a-bdb4-6fa82b5853ec.png"
+            alt="F-Droid Download"
+            height="70"
+            width="240"
+          />
+        </Link>
+      </VStack>
+    </VStack>
+  );
+}

website/pages/other-downloads/stable-downloads.tsx

@@ -19,6 +19,7 @@ import { DisplayAd, InFeedAd } from "components/special";
 import { GetServerSideProps, NextPage } from "next";
 import { MarkdownComponentDefs } from "misc/MarkdownComponentDefs";
 import { octokit } from "configurations/ocotokit";
+import gemoji from "remark-gemoji"
 
 enum AssetTypes {
   sums = "sums",
@@ -176,7 +177,7 @@ const StableDownloads: NextPage<Props> = ({ data }) => {
                     <AccordionPanel>
                       <ReactMarkdown
                         components={MarkdownComponentDefs}
-                        remarkPlugins={[gfm]}
+                        remarkPlugins={[gfm, gemoji]}
                       >
                         {release.body ?? ""}
                       </ReactMarkdown>

website/pnpm-lock.yaml

@@ -22,6 +22,7 @@ specifiers:
   react-dom: 18.2.0
   react-icons: ^4.4.0
   react-markdown: ^8.0.3
+  remark-gemoji: ^7.0.1
   remark-gfm: ^3.0.1
   swr: ^1.3.0
   typescript: 4.7.4
@@ -42,6 +43,7 @@ dependencies:
   react-dom: 18.2.0_react@18.2.0
   react-icons: 4.4.0_react@18.2.0
   react-markdown: 8.0.3_3hx2ussxxho4jajbwrd6gq34qe
+  remark-gemoji: 7.0.1
   remark-gfm: 3.0.1
   swr: 1.3.0_react@18.2.0
 
@@ -2595,6 +2597,10 @@ packages:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
     dev: true
 
+  /gemoji/7.1.0:
+    resolution: {integrity: sha512-wI0YWDIfQraQMDs0yXAVQiVBZeMm/rIYssf8LZlMDdssKF19YqJKOHkv4zvwtVQTBJ0LNmErv1S+DqlVUudz8g==}
+    dev: false
+
   /gensync/1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -3854,6 +3860,15 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
+  /remark-gemoji/7.0.1:
+    resolution: {integrity: sha512-vhjuntkvYxRgM4Um6L5N7B3SrNu3eX6jNqpqAywpAvSYPbmDPNL3I5E6zWm+KPCyh3OpKRc5OPnz7SifggzePw==}
+    dependencies:
+      '@types/mdast': 3.0.10
+      gemoji: 7.1.0
+      unified: 10.1.2
+      unist-util-visit: 4.1.0
+    dev: false
+
   /remark-gfm/3.0.1:
     resolution: {integrity: sha512-lEFDoi2PICJyNrACFOfDD3JlLkuSbOa5Wd8EPt06HUdptv8Gn0bxYTdbU/XXQ3swAPkEaGxxPN9cbnMHvVu1Ig==}
     dependencies:

website/public/spotube-logo.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg viewBox="0 0 500 500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:bx="https://boxy-svg.com">
+  <defs>
+    <radialGradient id="gradient-2-0" gradientUnits="userSpaceOnUse" cx="251.179" cy="248.821" r="241.45" gradientTransform="matrix(1, 0, 0, 1, -1.768285, 0.589104)" xlink:href="#gradient-2"/>
+    <linearGradient id="gradient-2">
+      <stop offset="0.841" style="stop-color: rgb(255, 255, 255);"/>
+      <stop offset="1" style="stop-color: rgb(201, 201, 201);"/>
+    </linearGradient>
+    <filter id="drop-shadow-filter-0" x="-500%" y="-500%" width="1000%" height="1000%" bx:preset="drop-shadow 1 0 0 10 0.42 rgba(201,201,201,1)">
+      <feGaussianBlur in="SourceAlpha" stdDeviation="10"/>
+      <feOffset dx="0" dy="0"/>
+      <feComponentTransfer result="offsetblur">
+        <feFuncA id="spread-ctrl" type="linear" slope="0.84"/>
+      </feComponentTransfer>
+      <feFlood flood-color="rgba(201,201,201,1)"/>
+      <feComposite in2="offsetblur" operator="in"/>
+      <feMerge>
+        <feMergeNode/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+    <linearGradient id="gradient-4-3" gradientUnits="userSpaceOnUse" x1="47.146" y1="18.044" x2="47.146" y2="75.354" xlink:href="#gradient-4"/>
+    <linearGradient id="gradient-4">
+      <stop offset="0.113" style="stop-color: rgb(83, 240, 111);"/>
+      <stop offset="0.608" style="stop-color: rgb(0, 177, 86);"/>
+      <stop offset="0.944" style="stop-color: rgb(2, 167, 156);"/>
+    </linearGradient>
+    <filter id="inner-shadow-filter-0" x="-500%" y="-500%" width="1000%" height="1000%" bx:preset="inner-shadow 1 0 0 4 0.5 rgba(0,0,0,0.7)">
+      <feOffset dx="0" dy="0"/>
+      <feGaussianBlur stdDeviation="4"/>
+      <feComposite operator="out" in="SourceGraphic"/>
+      <feComponentTransfer result="choke">
+        <feFuncA type="linear" slope="1"/>
+      </feComponentTransfer>
+      <feFlood flood-color="rgba(0,0,0,0.7)" result="color"/>
+      <feComposite operator="in" in="color" in2="choke" result="shadow"/>
+      <feComposite operator="over" in="shadow" in2="SourceGraphic"/>
+    </filter>
+    <linearGradient id="gradient-4-1" gradientUnits="userSpaceOnUse" x1="82.026" y1="144.832" x2="82.026" y2="264.462" xlink:href="#gradient-4"/>
+    <linearGradient id="gradient-4-2" gradientUnits="userSpaceOnUse" x1="143.693" y1="22.804" x2="143.693" y2="264.582" xlink:href="#gradient-4"/>
+    <linearGradient id="gradient-4-0" gradientUnits="userSpaceOnUse" x1="205.862" y1="146.28" x2="205.862" y2="265.91" xlink:href="#gradient-4"/>
+  </defs>
+  <ellipse style="paint-order: fill; filter: url(#drop-shadow-filter-0); fill: url(#gradient-2-0);" cx="249.41" cy="249.41" rx="241.45" ry="241.45"/>
+  <g transform="matrix(0.319972, 0, 0, 0.323174, 248.635162, 304.74234)" style="">
+    <g style="stroke: none; stroke-width: 0; stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill: none; fill-rule: nonzero; opacity: 1;" transform="translate(-175.05 -175.05000000000004) scale(3.89 3.89)">
+      <path d="M 91.835 18.32 C 91.637 18.132 91.374 18.036 91.096 18.046 C 84.617 18.367 77.578 19.444 68.948 21.435 C 68.677 21.498 68.444 21.67 68.305 21.911 C 68.166 22.152 68.135 22.44 68.217 22.705 L 69.055 25.409 C 62.692 22.996 53.742 21.607 45.995 21.912 C 43.155 21.912 39.913 23.321 36.95 25.412 L 25.235 25.412 L 26.074 22.704 C 26.157 22.438 26.124 22.151 25.986 21.91 C 25.848 21.669 25.615 21.496 25.344 21.434 C 16.714 19.443 9.676 18.366 3.196 18.045 C 2.927 18.033 2.656 18.13 2.457 18.319 C 2.258 18.509 2.146 18.771 2.146 19.045 L 2.146 53.387 C 2.146 53.94 2.594 54.387 3.146 54.387 L 15.524 54.387 C 15.962 54.387 16.35 54.102 16.479 53.683 L 16.951 52.16 C 27.138 64.032 37.497 74.935 45.585 74.935 C 47.142 74.935 48.614 74.524 49.986 73.645 L 50.197 73.859 C 51.141 74.815 52.406 75.346 53.758 75.354 C 53.769 75.354 53.779 75.354 53.79 75.354 C 55.129 75.354 56.387 74.839 57.336 73.903 C 58.17 73.078 58.635 72.03 58.772 70.947 C 59.702 71.718 60.833 72.127 61.978 72.127 C 63.259 72.126 64.542 71.643 65.525 70.673 C 66.634 69.577 67.105 68.092 66.981 66.648 C 67.427 66.758 67.878 66.833 68.331 66.833 C 69.614 66.833 70.869 66.39 71.779 65.491 C 72.735 64.547 73.266 63.282 73.274 61.93 C 73.282 60.578 72.767 59.308 71.887 58.423 C 71.519 57.97 71.139 57.535 70.766 57.089 L 77.582 52.94 L 77.812 53.682 C 77.942 54.101 78.329 54.386 78.767 54.386 L 91.146 54.386 C 91.699 54.386 92.146 53.939 92.146 53.386 L 92.146 19.045 C 92.146 18.771 92.034 18.509 91.835 18.32 Z M 14.787 52.387 L 4.146 52.387 L 4.146 20.102 C 9.952 20.461 16.268 21.437 23.845 23.145 L 14.787 52.387 Z M 70.373 64.067 C 69.234 65.193 67.063 65.072 65.817 63.809 C 65.8 63.792 65.778 63.786 65.76 63.771 C 65.693 63.694 65.642 63.608 65.569 63.534 L 54.619 52.448 C 54.229 52.056 53.598 52.052 53.204 52.439 C 52.811 52.828 52.808 53.46 53.195 53.854 L 64.145 64.94 C 64.714 65.515 65.025 66.283 65.02 67.1 C 65.015 67.916 64.695 68.68 64.119 69.248 C 62.924 70.431 60.991 70.416 59.809 69.222 L 57.384 66.767 C 57.382 66.765 57.381 66.763 57.38 66.762 L 46.43 55.677 C 46.041 55.286 45.408 55.281 45.016 55.668 C 44.623 56.057 44.619 56.689 45.007 57.083 L 55.956 68.169 C 57.138 69.364 57.126 71.298 55.93 72.479 C 54.734 73.661 52.8 73.647 51.62 72.453 L 38.24 58.908 C 37.851 58.516 37.218 58.51 36.826 58.9 C 36.433 59.288 36.429 59.921 36.817 60.314 L 48.528 72.169 C 41.093 76.143 28.778 62.93 17.651 49.901 L 24.616 27.414 L 34.431 27.414 C 31.69 29.846 29.43 32.75 28.339 35.397 C 26.943 38.783 27.852 40.687 28.86 41.688 C 28.886 41.714 28.914 41.739 28.943 41.762 C 32.786 44.809 36.571 45.577 42.466 39.479 C 44.467 39.601 46.171 39.254 47.65 38.415 C 55.956 44.222 63.587 51.376 70.399 59.758 C 71.581 60.953 71.569 62.887 70.373 64.067 Z M 69.464 55.541 C 63.058 48.131 55.937 41.698 48.248 36.395 C 47.907 36.159 47.455 36.159 47.114 36.394 C 45.792 37.301 44.175 37.645 42.17 37.449 C 41.859 37.415 41.556 37.533 41.343 37.759 C 35.758 43.702 32.999 42.415 30.234 40.232 C 29.238 39.193 29.657 37.448 30.188 36.159 C 32.412 30.761 40.301 23.913 46.034 23.912 C 54.206 23.599 63.683 25.188 69.82 27.879 L 76.972 50.97 L 69.464 55.541 Z M 90.146 52.387 L 79.504 52.387 L 70.446 23.145 C 78.023 21.437 84.34 20.461 90.145 20.102 L 90.145 52.387 Z" style="stroke-dasharray: none; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; fill-rule: nonzero; opacity: 1; fill: rgb(28, 28, 29); stroke-width: 3.33887px; paint-order: stroke; stroke: url(#gradient-4-3);" stroke-linecap="round"/>
+    </g>
+  </g>
+  <g transform="matrix(1.107829, 0, 0, 1.106267, 91.508957, 66.745735)" style="filter: url(#inner-shadow-filter-0);">
+    <g>
+      <path d="M 71.421 155.437 L 71.421 253.857 C 71.421 259.724 76.162 264.462 82.026 264.462 C 87.88 264.462 92.631 259.724 92.631 253.857 L 92.631 155.437 C 92.631 149.581 87.88 144.832 82.026 144.832 C 76.162 144.832 71.421 149.576 71.421 155.437 Z" style="stroke-width: 9.80924px; stroke: url(#gradient-4-1); fill: rgb(29, 29, 29); stroke-linecap: round; stroke-linejoin: round;"/>
+      <path d="M29.456,264.582h23.351v-116.85c0.064-0.56,0.166-1.119,0.166-1.693c0-50.412,40.69-91.42,90.698-91.42 c50.002,0,90.692,41.008,90.692,91.42c0,0.771,0.113,1.518,0.228,2.263v116.28h23.354c16.254,0,29.442-13.64,29.442-30.469 v-60.936c0-13.878-8.989-25.57-21.261-29.249c-1.129-66.971-55.608-121.124-122.45-121.124 c-66.86,0-121.347,54.158-122.465,121.15C8.956,147.638,0,159.32,0,173.187v60.926C0,250.932,13.187,264.582,29.456,264.582z" style="stroke-width: 11.3184px; stroke: url(#gradient-4-2); fill: rgb(29, 29, 29); stroke-linecap: round; stroke-linejoin: round;"/>
+      <path d="M 195.258 156.885 L 195.258 255.305 C 195.258 261.172 200.006 265.91 205.862 265.91 C 211.718 265.91 216.466 261.172 216.466 255.305 L 216.466 156.885 C 216.466 151.029 211.718 146.28 205.862 146.28 C 199.995 146.28 195.258 151.024 195.258 156.885 Z" style="stroke-width: 9.80924px; stroke: url(#gradient-4-0); fill: rgb(29, 29, 29); stroke-linecap: round; stroke-linejoin: round;"/>
+    </g>
+  </g>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+  <g transform="matrix(0.972684, 0, 0, 0.972684, 62.617451, 9.850071)" style=""/>
+</svg>