From 68e9dfe9b3f37050433d800fd3cc2c5d34775919 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Mon, 18 Jul 2022 11:26:10 +0600 Subject: [PATCH] [website] package manager install docs [website] App Stores install docs --- website/components/CodeBlock.tsx | 22 ++++ website/components/DownloadButton.tsx | 2 +- website/components/Navbar.tsx | 14 ++- website/package.json | 1 + website/pages/other-downloads/index.tsx | 64 ++++++---- .../pages/other-downloads/package-manager.tsx | 117 ++++++++++++++++++ .../other-downloads/stable-downloads.tsx | 3 +- website/pnpm-lock.yaml | 15 +++ website/public/spotube-logo.svg | 71 +++++++++++ 9 files changed, 283 insertions(+), 26 deletions(-) create mode 100644 website/components/CodeBlock.tsx create mode 100644 website/pages/other-downloads/package-manager.tsx create mode 100644 website/public/spotube-logo.svg diff --git a/website/components/CodeBlock.tsx b/website/components/CodeBlock.tsx new file mode 100644 index 00000000..cebbdd82 --- /dev/null +++ b/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 = ({ children }) => { + return ( + + {children} + + ); +}; diff --git a/website/components/DownloadButton.tsx b/website/components/DownloadButton.tsx index d1126713..17757ddb 100644 --- a/website/components/DownloadButton.tsx +++ b/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 { const { colorMode, toggleColorMode } = useColorMode(); return ( - + + Logo Spotube @@ -23,7 +31,7 @@ const Navbar = () => { diff --git a/website/package.json b/website/package.json index 8be246af..6e39a976 100644 --- a/website/package.json +++ b/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" }, diff --git a/website/pages/other-downloads/index.tsx b/website/pages/other-downloads/index.tsx index d4dcd1c1..c7913a38 100644 --- a/website/pages/other-downloads/index.tsx +++ b/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,26 +15,41 @@ function OtherDownloads() { return ( <> - - Download other versions of Spotube - -
  • - - - Download previous versions of Spotube - - -
    • -
  • - - - Download Bleeding Edge Nightly version of Spotube - - -  (Nightly releases) -
    • -     -     + + + + Looking for Something else? + + 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) +
    • +     +     +     ); diff --git a/website/pages/other-downloads/package-manager.tsx b/website/pages/other-downloads/package-manager.tsx new file mode 100644 index 00000000..c5e8e4fd --- /dev/null +++ b/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 ( + + + Installation using Package Managers + + If you don't want to download the binary of Spotube, you can use + various package managers to install Spotube too (only Windows & Linux + now) + + + Linux + + + + + + Flatpak + + + Make sure Flatpak is installed in your Linux device & Run the + following command in the terminal: + + $ flatpak install com.github.KRTirtho.Spotube + + AUR + + + If you're an Arch Linux user, you can also install Spotube from + AUR. Make sure you have yay or pamac or{" "} + paru installed in your system. And Run the Following + command in the Terminal: + + + # for pamac user +
    $ pamac install spotube-bin +     + + # for paru user +
    $ paru -Sy spotube-bin +     + + # for yay user +
    $ yay -Sy spotube-bin +     + + + + + Windows + + + + Chocolatey + + + Spotube is available in{" "} + + community.chocolatey.org + {" "} + repo. If you have chocolatey install in your system just run following + command in an Elevated Command Prompt or PowerShell: + + $ choco install spotube + + WinGet + + + 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: + + $ winget install --id KRTirtho.Spotube + + + + Install from App Stores + Android (F-Droid) + + Spotube for Android is available in the F-Droid repositories too. So + you can install it directly from F-Droid Android application too + + + F-Droid Download + +     +     + ); +} diff --git a/website/pages/other-downloads/stable-downloads.tsx b/website/pages/other-downloads/stable-downloads.tsx index 12a4592a..9a260b33 100644 --- a/website/pages/other-downloads/stable-downloads.tsx +++ b/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 = ({ data }) => { {release.body ?? ""} diff --git a/website/pnpm-lock.yaml b/website/pnpm-lock.yaml index d9d2b600..ba63bb8f 100644 --- a/website/pnpm-lock.yaml +++ b/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: diff --git a/website/public/spotube-logo.svg b/website/public/spotube-logo.svg new file mode 100644 index 00000000..9dc4dbee --- /dev/null +++ b/website/public/spotube-logo.svg @@ -0,0 +1,71 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file