From 5d099fb2e418d67f29a4f24db66607e208fb5065 Mon Sep 17 00:00:00 2001 From: Kingkor Roy Tirtho Date: Sun, 17 Jul 2022 15:13:42 +0600 Subject: [PATCH] Moved from Solidjs to Nextjs for better compatibility with docs & blogs stuff --- website/.eslintrc.json | 6 + website/.gitignore | 37 +- website/README.md | 35 +- website/components/AdDetector.tsx | 123 + website/components/Navbar.tsx | 48 + website/components/special.tsx | 72 + website/configurations/gtag.ts | 17 + website/hooks/usePlatform.ts | 26 + website/index.html | 52 - website/misc/MarkdownComponentDefs.tsx | 13 + website/next-env.d.ts | 5 + website/next.config.js | 7 + website/package.json | 50 +- website/pages/_app.tsx | 125 + website/pages/api/hello.ts | 13 + website/pages/index.tsx | 106 + website/pages/other-downloads/index.tsx | 36 + .../other-downloads/nightly-downloads.tsx | 87 + .../other-downloads/stable-downloads.tsx} | 151 +- website/pnpm-lock.yaml | 3771 +++++++++++++---- website/public/_redirects | 2 - .../android-chrome-192x192.png | Bin .../android-chrome-512x512.png | Bin .../assets => public}/apple-touch-icon.png | Bin .../{src/assets => public}/favicon-16x16.png | Bin .../{src/assets => public}/favicon-32x32.png | Bin .../favicon copy.ico => public/favicon.ico} | Bin .../{src/assets => public}/site.webmanifest | 0 .../spotube-screenshot-web.jpg | Bin website/src/App.tsx | 146 - website/src/assets/favicon.ico | Bin 15086 -> 0 bytes website/src/components/Navbar.tsx | 47 - website/src/components/special.tsx | 40 - website/src/hooks/usePlatform.ts | 19 - website/src/index.css | 13 - website/src/index.tsx | 35 - website/src/misc/MarkdownComponentDefs.tsx | 13 - website/src/pages/NightlyDownloads.tsx | 75 - website/src/pages/OtherDownloads.tsx | 27 - website/src/pages/Root.tsx | 101 - website/styles/globals.css | 16 + website/tsconfig.json | 28 +- website/vite.config.ts | 17 - 43 files changed, 3939 insertions(+), 1420 deletions(-) create mode 100755 website/.eslintrc.json mode change 100644 => 100755 website/.gitignore mode change 100644 => 100755 website/README.md create mode 100644 website/components/AdDetector.tsx create mode 100644 website/components/Navbar.tsx create mode 100644 website/components/special.tsx create mode 100644 website/configurations/gtag.ts create mode 100644 website/hooks/usePlatform.ts delete mode 100644 website/index.html create mode 100644 website/misc/MarkdownComponentDefs.tsx create mode 100755 website/next-env.d.ts create mode 100755 website/next.config.js create mode 100755 website/pages/_app.tsx create mode 100755 website/pages/api/hello.ts create mode 100755 website/pages/index.tsx create mode 100644 website/pages/other-downloads/index.tsx create mode 100644 website/pages/other-downloads/nightly-downloads.tsx rename website/{src/pages/StableDownloads.tsx => pages/other-downloads/stable-downloads.tsx} (53%) delete mode 100644 website/public/_redirects rename website/{src/assets => public}/android-chrome-192x192.png (100%) rename website/{src/assets => public}/android-chrome-512x512.png (100%) rename website/{src/assets => public}/apple-touch-icon.png (100%) rename website/{src/assets => public}/favicon-16x16.png (100%) rename website/{src/assets => public}/favicon-32x32.png (100%) rename website/{src/assets/favicon copy.ico => public/favicon.ico} (100%) rename website/{src/assets => public}/site.webmanifest (100%) rename website/{src/assets => public}/spotube-screenshot-web.jpg (100%) delete mode 100644 website/src/App.tsx delete mode 100644 website/src/assets/favicon.ico delete mode 100644 website/src/components/Navbar.tsx delete mode 100644 website/src/components/special.tsx delete mode 100644 website/src/hooks/usePlatform.ts delete mode 100644 website/src/index.css delete mode 100644 website/src/index.tsx delete mode 100644 website/src/misc/MarkdownComponentDefs.tsx delete mode 100644 website/src/pages/NightlyDownloads.tsx delete mode 100644 website/src/pages/OtherDownloads.tsx delete mode 100644 website/src/pages/Root.tsx create mode 100755 website/styles/globals.css mode change 100644 => 100755 website/tsconfig.json delete mode 100644 website/vite.config.ts diff --git a/website/.eslintrc.json b/website/.eslintrc.json new file mode 100755 index 00000000..22c30ebe --- /dev/null +++ b/website/.eslintrc.json @@ -0,0 +1,6 @@ +{ + "extends": [ + "next/core-web-vitals", + "prettier" + ] +} \ No newline at end of file diff --git a/website/.gitignore b/website/.gitignore old mode 100644 new mode 100755 index 76add878..737d8721 --- a/website/.gitignore +++ b/website/.gitignore @@ -1,2 +1,35 @@ -node_modules -dist \ No newline at end of file +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* +.pnpm-debug.log* + +# local env files +.env*.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/website/README.md b/website/README.md old mode 100644 new mode 100755 index 2aef81ba..c87e0421 --- a/website/README.md +++ b/website/README.md @@ -1,3 +1,34 @@ -# Website +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). -The official Website of Spotube \ No newline at end of file +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/website/components/AdDetector.tsx b/website/components/AdDetector.tsx new file mode 100644 index 00000000..622c272d --- /dev/null +++ b/website/components/AdDetector.tsx @@ -0,0 +1,123 @@ +import { + Button, + Heading, + Modal, + ModalBody, + ModalContent, + ModalFooter, + ModalHeader, + ModalOverlay, + Stack, + Text, + useDisclosure, + VStack, +} from "@chakra-ui/react"; +import { FC, ReactNode, useEffect, useState } from "react"; + +const AdDetector: FC<{ children: ReactNode }> = ({ children }) => { + const [adBlockEnabled, setAdBlockEnabled] = useState(false); + const { isOpen, onOpen, onClose } = useDisclosure(); + const [joke, setJoke] = useState>({}); + + useEffect(() => { + (async () => { + const googleAdUrl = + "https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"; + try { + await fetch(new Request(googleAdUrl)); + } catch (e) { + setAdBlockEnabled(true); + setJoke( + await ( + await fetch( + "https://v2.jokeapi.dev/joke/Any?blacklistFlags=racist,sexist" + ) + ).json() + ); + onOpen(); + } + })(); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + return ( + <> + + + + Support the Creatorđź’š + +

+ Open source developers work really hard to provide the best, + secure & efficient software experience for you & people all around + the world. Most of the time we work without any wages at all but + we need minimum support to live & these Ads Helps Us earn + the minimum wage that we need to live.{" "} + + So, please support Spotube by disabling the AdBlocker on this + page or by sponsoring or donating to our collectives directly + +

+ + + + + + + {!adBlockEnabled ? ( + children + ) : ( + + + + Here's something interesting: + + {joke.joke ?? ( + <> +

{joke.setup}

+

{joke.delivery}

+ + )} + + + + + Be grateful for all the favors you get. But don't let it + become a pile of debt. Try returning them as soon as you can. + You'll feel relieved + + + - Kingkor Roy Tirtho + + + + )} + + ); +}; + +export default AdDetector; diff --git a/website/components/Navbar.tsx b/website/components/Navbar.tsx new file mode 100644 index 00000000..da8bdefc --- /dev/null +++ b/website/components/Navbar.tsx @@ -0,0 +1,48 @@ +import { + Button, + ButtonGroup, + Heading, + HStack, + IconButton, + useColorMode, +} from "@chakra-ui/react"; +import NavLink from "next/link"; +import { GoLightBulb } from "react-icons/go"; +import { FiSun, } from "react-icons/fi"; + +const Navbar = () => { + const { colorMode, toggleColorMode } = useColorMode(); + return ( + + + + + Spotube + + + + + + + + + + + + : } + aria-label="Dark Mode Toggle" + onClick={() => { + toggleColorMode(); + }} + /> + + ); +}; + +export default Navbar; diff --git a/website/components/special.tsx b/website/components/special.tsx new file mode 100644 index 00000000..93b2d565 --- /dev/null +++ b/website/components/special.tsx @@ -0,0 +1,72 @@ +import Script from "next/script"; +import { FC, useId } from "react"; + +type AdComponent = FC<{ + slot: string; +}>; + +export const DisplayAd: AdComponent = ({ slot }) => { + const id = useId(); + return ( + <> + + + + ); +}; + +export const GridMultiplexAd: AdComponent = ({ slot }) => { + const id = useId(); + return ( + <> + + + + ); +}; + +export const InFeedAd = () => { + const id = useId(); + return ( + <> + + + + ); +}; diff --git a/website/configurations/gtag.ts b/website/configurations/gtag.ts new file mode 100644 index 00000000..01dcba50 --- /dev/null +++ b/website/configurations/gtag.ts @@ -0,0 +1,17 @@ +export const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_ID; + +// https://developers.google.com/analytics/devguides/collection/gtagjs/pages +export const pageview = (url: any) => { + (window as any).gtag("config", GA_TRACKING_ID, { + page_path: url, + }); +}; + +// https://developers.google.com/analytics/devguides/collection/gtagjs/events +export const event = ({ action, category, label, value }: any) => { + (window as any).gtag("event", action, { + event_category: category, + event_label: label, + value: value, + }); +}; diff --git a/website/hooks/usePlatform.ts b/website/hooks/usePlatform.ts new file mode 100644 index 00000000..ae1f4747 --- /dev/null +++ b/website/hooks/usePlatform.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; + +export enum Platform { + linux = "Linux", + windows = "Windows", + mac = "Mac", + android = "Android", +} + +export function usePlatform(): Platform { + const [platform, setPlatform] = useState(Platform.linux); + + useEffect(() => { + const platform = ( + ((navigator as unknown as any).userAgentData?.platform as + | string + | undefined) ?? navigator.platform + ).toLowerCase(); + + if (platform.includes("windows")) setPlatform(Platform.windows); + else if (platform.includes("mac")) setPlatform(Platform.mac); + else if (platform.includes("android")) setPlatform(Platform.android); + }, []); + + return platform; +} diff --git a/website/index.html b/website/index.html deleted file mode 100644 index 98541bb6..00000000 --- a/website/index.html +++ /dev/null @@ -1,52 +0,0 @@ - - - - - - - - - - - Spotube - - - - - - - -
- - - - diff --git a/website/misc/MarkdownComponentDefs.tsx b/website/misc/MarkdownComponentDefs.tsx new file mode 100644 index 00000000..7e0ee614 --- /dev/null +++ b/website/misc/MarkdownComponentDefs.tsx @@ -0,0 +1,13 @@ +import { Link as Anchor, Heading, Text, chakra } from "@chakra-ui/react"; + +export const MarkdownComponentDefs = { + a: (props: any) => , + h1: (props: any) => , + h2: (props: any) => , + h3: (props: any) => , + h4: (props: any) => , + h5: (props: any) => , + h6: (props: any) => , + p: (props: any) => , + li: (props: any) => , +}; diff --git a/website/next-env.d.ts b/website/next-env.d.ts new file mode 100755 index 00000000..4f11a03d --- /dev/null +++ b/website/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/website/next.config.js b/website/next.config.js new file mode 100755 index 00000000..ae887958 --- /dev/null +++ b/website/next.config.js @@ -0,0 +1,7 @@ +/** @type {import('next').NextConfig} */ +const nextConfig = { + reactStrictMode: true, + swcMinify: true, +} + +module.exports = nextConfig diff --git a/website/package.json b/website/package.json index b49ad1fd..24cf1331 100644 --- a/website/package.json +++ b/website/package.json @@ -1,30 +1,34 @@ { - "name": "vite-template-solid", - "version": "0.0.0", - "description": "", + "name": "website", + "version": "0.1.0", + "private": true, "scripts": { - "start": "vite", - "dev": "vite", - "build": "vite build", - "serve": "vite preview" - }, - "license": "MIT", - "devDependencies": { - "typescript": "^4.7.4", - "vite": "^3.0.0", - "vite-plugin-solid": "^2.3.0" + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" }, "dependencies": { - "@hope-ui/solid": "^0.6.2", + "@chakra-ui/react": "^2.2.4", + "@chakra-ui/theme-tools": "^2.0.5", + "@emotion/react": "^11", + "@emotion/styled": "^11", "@octokit/rest": "^19.0.3", - "@stitches/core": "^1.2.8", - "isomorphic-fetch": "^3.0.0", - "remark-gfm": "^3.0.1", - "solid-app-router": "^0.4.1", - "solid-cached-resource": "^0.3.0", - "solid-icons": "^0.5.0", - "solid-js": "^1.4.7", - "solid-markdown": "^1.2.0", - "solid-transition-group": "^0.0.10" + "framer-motion": "^6", + "next": "12.2.2", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-icons": "^4.4.0", + "react-markdown": "^8.0.3", + "remark-gfm": "^3.0.1" + }, + "devDependencies": { + "@types/node": "18.0.5", + "@types/react": "18.0.15", + "@types/react-dom": "18.0.6", + "eslint": "8.20.0", + "eslint-config-next": "12.2.2", + "eslint-config-prettier": "^8.5.0", + "typescript": "4.7.4" } } diff --git a/website/pages/_app.tsx b/website/pages/_app.tsx new file mode 100755 index 00000000..ea3a15df --- /dev/null +++ b/website/pages/_app.tsx @@ -0,0 +1,125 @@ +import "../styles/globals.css"; +import type { AppProps } from "next/app"; +import { + ChakraProvider, + extendTheme, + withDefaultColorScheme, +} from "@chakra-ui/react"; +import Navbar from "components/Navbar"; +import { mode } from "@chakra-ui/theme-tools"; +import Head from "next/head"; +import Script from "next/script"; +import * as gtag from "configurations/gtag"; +import { useRouter } from "next/router"; +import { useEffect } from "react"; +import AdDetector from "components/AdDetector"; + +const customTheme = extendTheme( + { + styles: { + global: (props: any) => ({ + body: { + bg: mode("white", "#171717")(props), + }, + }), + }, + colors: { + green: { + 50: "#d4f3df", + 100: "#b7ecca", + 200: "#9be4b4", + 300: "#61d48a", + 400: "#45cd74", + 500: "#32ba62", + 600: "#2b9e53", + 700: "#238144", + 800: "#1b6435", + 900: "#134826", + }, + components: { + Link: { + baseStyle: { + color: "green", + }, + }, + }, + }, + }, + withDefaultColorScheme({ colorScheme: "green" }) +); + +function MyApp({ Component, pageProps }: AppProps) { + const router = useRouter(); + useEffect(() => { + const handleRouteChange = (url: string) => { + gtag.pageview(url); + }; + router.events.on("routeChangeComplete", handleRouteChange); + router.events.on("hashChangeComplete", handleRouteChange); + return () => { + router.events.off("routeChangeComplete", handleRouteChange); + router.events.off("hashChangeComplete", handleRouteChange); + }; + }, [router.events]); + + return ( + <> +