mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-12-10 17:07:30 +00:00
feat: initialize website project
This commit is contained in:
Kingkor Roy Tirtho
parent
9b9822cc3c
commit
fc22f615cb
13
website/.eslintignore
Normal file
13
website/.eslintignore
Normal file
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
31
website/.eslintrc.cjs
Normal file
31
website/.eslintrc.cjs
Normal file
@ -0,0 +1,31 @@
|
||||
/** @type { import("eslint").Linter.Config } */
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:svelte/recommended',
|
||||
'prettier'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: ['@typescript-eslint'],
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020,
|
||||
extraFileExtensions: ['.svelte']
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
parser: 'svelte-eslint-parser',
|
||||
parserOptions: {
|
||||
parser: '@typescript-eslint/parser'
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
@ -1,6 +0,0 @@
|
||||
{
|
||||
"extends": [
|
||||
"next/core-web-vitals",
|
||||
"prettier"
|
||||
]
|
||||
}
|
||||
43
website/.gitignore
vendored
Executable file → Normal file
43
website/.gitignore
vendored
Executable file → Normal file
@ -1,35 +1,10 @@
|
||||
# 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
|
||||
node_modules
|
||||
/build
|
||||
/.svelte-kit
|
||||
/package
|
||||
.env
|
||||
.env.*
|
||||
!.env.example
|
||||
vite.config.js.timestamp-*
|
||||
vite.config.ts.timestamp-*
|
||||
|
||||
1
website/.npmrc
Normal file
1
website/.npmrc
Normal file
@ -0,0 +1 @@
|
||||
engine-strict=true
|
||||
4
website/.prettierignore
Normal file
4
website/.prettierignore
Normal file
@ -0,0 +1,4 @@
|
||||
# Ignore files for PNPM, NPM and YARN
|
||||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
@ -1,4 +1,8 @@
|
||||
{
|
||||
"singleQuote": false,
|
||||
"useTabs": false
|
||||
}
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
"printWidth": 100,
|
||||
"plugins": ["prettier-plugin-svelte"],
|
||||
"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
|
||||
}
|
||||
|
||||
120
website/.vscode/settings.json
vendored
Normal file
120
website/.vscode/settings.json
vendored
Normal file
@ -0,0 +1,120 @@
|
||||
{
|
||||
"prettier.documentSelectors": [
|
||||
"**/*.svelte"
|
||||
],
|
||||
"tailwindCSS.classAttributes": [
|
||||
"class",
|
||||
"accent",
|
||||
"active",
|
||||
"animIndeterminate",
|
||||
"aspectRatio",
|
||||
"background",
|
||||
"badge",
|
||||
"bgBackdrop",
|
||||
"bgDark",
|
||||
"bgDrawer",
|
||||
"bgLight",
|
||||
"blur",
|
||||
"border",
|
||||
"button",
|
||||
"buttonAction",
|
||||
"buttonBack",
|
||||
"buttonClasses",
|
||||
"buttonComplete",
|
||||
"buttonDismiss",
|
||||
"buttonNeutral",
|
||||
"buttonNext",
|
||||
"buttonPositive",
|
||||
"buttonTextCancel",
|
||||
"buttonTextConfirm",
|
||||
"buttonTextFirst",
|
||||
"buttonTextLast",
|
||||
"buttonTextNext",
|
||||
"buttonTextPrevious",
|
||||
"buttonTextSubmit",
|
||||
"caretClosed",
|
||||
"caretOpen",
|
||||
"chips",
|
||||
"color",
|
||||
"controlSeparator",
|
||||
"controlVariant",
|
||||
"cursor",
|
||||
"display",
|
||||
"element",
|
||||
"fill",
|
||||
"fillDark",
|
||||
"fillLight",
|
||||
"flex",
|
||||
"flexDirection",
|
||||
"gap",
|
||||
"gridColumns",
|
||||
"height",
|
||||
"hover",
|
||||
"inactive",
|
||||
"indent",
|
||||
"justify",
|
||||
"meter",
|
||||
"padding",
|
||||
"position",
|
||||
"regionAnchor",
|
||||
"regionBackdrop",
|
||||
"regionBody",
|
||||
"regionCaption",
|
||||
"regionCaret",
|
||||
"regionCell",
|
||||
"regionChildren",
|
||||
"regionChipList",
|
||||
"regionChipWrapper",
|
||||
"regionCone",
|
||||
"regionContent",
|
||||
"regionControl",
|
||||
"regionDefault",
|
||||
"regionDrawer",
|
||||
"regionFoot",
|
||||
"regionFootCell",
|
||||
"regionFooter",
|
||||
"regionHead",
|
||||
"regionHeadCell",
|
||||
"regionHeader",
|
||||
"regionIcon",
|
||||
"regionInput",
|
||||
"regionInterface",
|
||||
"regionInterfaceText",
|
||||
"regionLabel",
|
||||
"regionLead",
|
||||
"regionLegend",
|
||||
"regionList",
|
||||
"regionListItem",
|
||||
"regionNavigation",
|
||||
"regionPage",
|
||||
"regionPanel",
|
||||
"regionRowHeadline",
|
||||
"regionRowMain",
|
||||
"regionSummary",
|
||||
"regionSymbol",
|
||||
"regionTab",
|
||||
"regionTrail",
|
||||
"ring",
|
||||
"rounded",
|
||||
"select",
|
||||
"shadow",
|
||||
"slotDefault",
|
||||
"slotFooter",
|
||||
"slotHeader",
|
||||
"slotLead",
|
||||
"slotMessage",
|
||||
"slotMeta",
|
||||
"slotPageContent",
|
||||
"slotPageFooter",
|
||||
"slotPageHeader",
|
||||
"slotSidebarLeft",
|
||||
"slotSidebarRight",
|
||||
"slotTrail",
|
||||
"spacing",
|
||||
"text",
|
||||
"track",
|
||||
"transition",
|
||||
"width",
|
||||
"zIndex"
|
||||
]
|
||||
}
|
||||
50
website/README.md
Executable file → Normal file
50
website/README.md
Executable file → Normal file
@ -1,34 +1,38 @@
|
||||
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).
|
||||
# create-svelte
|
||||
|
||||
## Getting Started
|
||||
Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/main/packages/create-svelte).
|
||||
|
||||
First, run the development server:
|
||||
## Creating a project
|
||||
|
||||
If you're seeing this, you've probably already done this step. Congrats!
|
||||
|
||||
```bash
|
||||
# create a new project in the current directory
|
||||
npm create svelte@latest
|
||||
|
||||
# create a new project in my-app
|
||||
npm create svelte@latest my-app
|
||||
```
|
||||
|
||||
## Developing
|
||||
|
||||
Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
|
||||
|
||||
```bash
|
||||
npm run dev
|
||||
# or
|
||||
yarn dev
|
||||
|
||||
# or start the server and open the app in a new browser tab
|
||||
npm run dev -- --open
|
||||
```
|
||||
|
||||
Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
|
||||
## Building
|
||||
|
||||
You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
|
||||
To create a production version of your app:
|
||||
|
||||
[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`.
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
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.
|
||||
You can preview the production build with `npm run preview`.
|
||||
|
||||
## 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.
|
||||
> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
|
||||
|
||||
@ -1,133 +0,0 @@
|
||||
import {
|
||||
Button,
|
||||
CloseButton,
|
||||
Heading,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalContent,
|
||||
ModalFooter,
|
||||
ModalHeader,
|
||||
ModalOverlay,
|
||||
Stack,
|
||||
Text,
|
||||
Tooltip,
|
||||
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<Record<string, any>>({});
|
||||
|
||||
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 (
|
||||
<>
|
||||
<Modal isOpen={isOpen} onClose={onClose}>
|
||||
<ModalOverlay />
|
||||
<ModalContent mt="5" mx="3">
|
||||
<ModalHeader>Support the Creator💚</ModalHeader>
|
||||
<ModalBody>
|
||||
<p>
|
||||
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 <b> Ads Helps Us</b> earn
|
||||
the minimum wage that we need to live.{" "}
|
||||
<Text color="green.500" fontWeight="bold" textAlign="justify">
|
||||
So, please support Spotube by disabling the AdBlocker on this
|
||||
page or by sponsoring or donating to our collectives directly
|
||||
</Text>
|
||||
</p>
|
||||
</ModalBody>
|
||||
<ModalFooter>
|
||||
<Button onClick={() => window.location.reload()}>
|
||||
Reload without AdBlocker
|
||||
</Button>
|
||||
</ModalFooter>
|
||||
</ModalContent>
|
||||
</Modal>
|
||||
{!adBlockEnabled ? (
|
||||
children
|
||||
) : (
|
||||
<Stack
|
||||
direction="column"
|
||||
w="100vw"
|
||||
h="100vh"
|
||||
justifyContent="space-between"
|
||||
alignItems="center"
|
||||
p="5"
|
||||
pos="relative"
|
||||
>
|
||||
<Tooltip label="You made me sad 😢">
|
||||
<CloseButton
|
||||
pos="absolute"
|
||||
right="5"
|
||||
variant="ghost"
|
||||
onClick={() => setAdBlockEnabled(false)}
|
||||
/>
|
||||
</Tooltip>
|
||||
<VStack spacing="2" alignItems="flex-start">
|
||||
<Heading size="sm">Here's something interesting:</Heading>
|
||||
<Heading size="md">
|
||||
{joke.joke ?? (
|
||||
<>
|
||||
<p>{joke.setup}</p>
|
||||
<p>{joke.delivery}</p>
|
||||
</>
|
||||
)}
|
||||
</Heading>
|
||||
</VStack>
|
||||
<VStack justifySelf="flex-end">
|
||||
<Heading
|
||||
mt="10"
|
||||
size={{
|
||||
base: "lg",
|
||||
lg: "xl",
|
||||
}}
|
||||
maxW="700px"
|
||||
textAlign="justify"
|
||||
lineHeight="1.5"
|
||||
>
|
||||
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
|
||||
</Heading>
|
||||
<Heading
|
||||
size={{
|
||||
lg: "lg",
|
||||
base: "md",
|
||||
}}
|
||||
alignSelf="flex-end"
|
||||
>
|
||||
- Kingkor Roy Tirtho
|
||||
</Heading>
|
||||
</VStack>
|
||||
</Stack>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default AdDetector;
|
||||
@ -1,138 +0,0 @@
|
||||
import { Link, Flex, Box, chakra, Image, Button, Text } from "@chakra-ui/react";
|
||||
import { BlogPost } from "pages/blog";
|
||||
import { FC } from "react";
|
||||
import NavLink from "next/link";
|
||||
|
||||
const ArticleCard: FC<BlogPost> = ({
|
||||
metadata: {
|
||||
author,
|
||||
author_avatar_url,
|
||||
cover_image,
|
||||
tags,
|
||||
title,
|
||||
summary,
|
||||
date,
|
||||
},
|
||||
slug,
|
||||
}) => {
|
||||
return (
|
||||
<Box
|
||||
mx="auto"
|
||||
rounded="lg"
|
||||
shadow="md"
|
||||
bg="white"
|
||||
_dark={{
|
||||
bg: "#212121",
|
||||
}}
|
||||
maxW="2xl"
|
||||
>
|
||||
<Image
|
||||
roundedTop="lg"
|
||||
w="full"
|
||||
h={64}
|
||||
fit="cover"
|
||||
src={cover_image}
|
||||
alt="Article"
|
||||
/>
|
||||
|
||||
<Box p={6}>
|
||||
<Box>
|
||||
{tags.map((tag, i) => {
|
||||
return (
|
||||
<chakra.span
|
||||
key={i}
|
||||
px={3}
|
||||
py={1}
|
||||
mx="1"
|
||||
bg="gray.600"
|
||||
color="gray.100"
|
||||
fontSize="sm"
|
||||
fontWeight="700"
|
||||
rounded="md"
|
||||
>
|
||||
{tag}
|
||||
</chakra.span>
|
||||
);
|
||||
})}
|
||||
<NavLink href={`/blog/${slug}`} passHref>
|
||||
<Link
|
||||
display="block"
|
||||
color="gray.800"
|
||||
_dark={{
|
||||
color: "white",
|
||||
}}
|
||||
fontWeight="bold"
|
||||
fontSize="2xl"
|
||||
mt={2}
|
||||
_hover={{
|
||||
color: "gray.600",
|
||||
textDecor: "underline",
|
||||
}}
|
||||
>
|
||||
{title}
|
||||
</Link>
|
||||
</NavLink>
|
||||
<chakra.p
|
||||
mt={2}
|
||||
fontSize="sm"
|
||||
color="gray.600"
|
||||
_dark={{
|
||||
color: "gray.400",
|
||||
}}
|
||||
>
|
||||
{summary}
|
||||
</chakra.p>
|
||||
</Box>
|
||||
|
||||
<Box mt={4}>
|
||||
<Flex
|
||||
alignItems="center"
|
||||
justify="space-between"
|
||||
flexDirection={{ base: "column", md: "row" }}
|
||||
>
|
||||
<Flex alignItems="center">
|
||||
<Image
|
||||
h={10}
|
||||
fit="cover"
|
||||
rounded="full"
|
||||
src={author_avatar_url}
|
||||
alt="Avatar"
|
||||
/>
|
||||
<Text
|
||||
mx={2}
|
||||
fontWeight="bold"
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.200",
|
||||
}}
|
||||
>
|
||||
{author}
|
||||
</Text>
|
||||
<chakra.span
|
||||
mx={1}
|
||||
fontSize="sm"
|
||||
color="gray.600"
|
||||
_dark={{
|
||||
color: "gray.300",
|
||||
}}
|
||||
>
|
||||
{date}
|
||||
</chakra.span>
|
||||
</Flex>
|
||||
<NavLink href={`/blog/${slug}`} passHref>
|
||||
<Button
|
||||
_hover={{ textDecor: "none" }}
|
||||
colorScheme="purple"
|
||||
as={Link}
|
||||
>
|
||||
Read the Full Article
|
||||
</Button>
|
||||
</NavLink>
|
||||
</Flex>
|
||||
</Box>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default ArticleCard;
|
||||
@ -1,25 +0,0 @@
|
||||
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="100%"
|
||||
whiteSpace="pre-wrap"
|
||||
overflowX="auto"
|
||||
wordBreak="break-word"
|
||||
>
|
||||
<chakra.code>{children}</chakra.code>
|
||||
</chakra.pre>
|
||||
);
|
||||
};
|
||||
@ -1,118 +0,0 @@
|
||||
import {
|
||||
Menu,
|
||||
ButtonGroup,
|
||||
Button,
|
||||
MenuButton,
|
||||
IconButton,
|
||||
MenuList,
|
||||
MenuItem,
|
||||
Link as Anchor,
|
||||
} from "@chakra-ui/react";
|
||||
import { Platform, usePlatform } from "hooks/usePlatform";
|
||||
import React from "react";
|
||||
import {
|
||||
FaApple,
|
||||
FaCaretDown,
|
||||
FaUbuntu,
|
||||
FaLinux,
|
||||
FaWindows,
|
||||
FaAndroid,
|
||||
} from "react-icons/fa";
|
||||
import { MdOutlineFileDownload } from "react-icons/md";
|
||||
|
||||
const baseURL = "https://github.com/KRTirtho/spotube/releases/latest/download/";
|
||||
|
||||
const DownloadLinks = Object.freeze({
|
||||
[Platform.linux]: [
|
||||
{
|
||||
name: "deb",
|
||||
url: baseURL + "Spotube-linux-x86_64.deb",
|
||||
icon: <FaUbuntu />,
|
||||
},
|
||||
{
|
||||
name: "tar",
|
||||
url: baseURL + "Spotube-linux-x86_64.tar.xz",
|
||||
icon: <FaLinux />,
|
||||
},
|
||||
{
|
||||
name: "AppImage",
|
||||
url: baseURL + "Spotube-linux-x86_64.AppImage",
|
||||
icon: <FaLinux />,
|
||||
},
|
||||
],
|
||||
[Platform.android]: [
|
||||
{
|
||||
name: "apk",
|
||||
url: baseURL + "Spotube-android-all-arch.apk",
|
||||
icon: <FaAndroid />,
|
||||
},
|
||||
],
|
||||
[Platform.mac]: [
|
||||
{
|
||||
name: "dmg",
|
||||
url: baseURL + "Spotube-macos-universal.dmg",
|
||||
icon: <FaApple />,
|
||||
},
|
||||
],
|
||||
[Platform.windows]: [
|
||||
{
|
||||
name: "exe",
|
||||
url: baseURL + "Spotube-windows-x86_64-setup.exe",
|
||||
icon: <FaWindows />,
|
||||
},
|
||||
{
|
||||
name: "nupkg",
|
||||
url: baseURL + "Spotube-windows-x86_64.nupkg ",
|
||||
icon: <FaWindows />,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const DownloadButton = () => {
|
||||
const platform = usePlatform();
|
||||
|
||||
const allPlatforms = Object.entries(Platform)
|
||||
.map(([, value]) => {
|
||||
return DownloadLinks[value].map((s) => ({
|
||||
...s,
|
||||
name: `${value} (.${s.name})`,
|
||||
}));
|
||||
})
|
||||
.flat(1);
|
||||
|
||||
const currentPlatform = DownloadLinks[platform][0];
|
||||
return (
|
||||
<Menu placement="bottom-end">
|
||||
<ButtonGroup spacing="0.5">
|
||||
<Button
|
||||
variant="solid"
|
||||
as={Anchor}
|
||||
href={currentPlatform.url}
|
||||
_hover={{ textDecoration: "none" }}
|
||||
leftIcon={
|
||||
<MdOutlineFileDownload fontSize="24"/>
|
||||
}
|
||||
>
|
||||
Download for {platform} (.{currentPlatform.name})
|
||||
</Button>
|
||||
<MenuButton
|
||||
aria-label="Show More Downloads"
|
||||
as={IconButton}
|
||||
variant="solid"
|
||||
icon={<FaCaretDown />}
|
||||
/>
|
||||
</ButtonGroup>
|
||||
<MenuList>
|
||||
{allPlatforms.map(({ name, url, icon }) => {
|
||||
return (
|
||||
<MenuItem key={url} as={Anchor} href={url} icon={icon}>
|
||||
{name}
|
||||
</MenuItem>
|
||||
);
|
||||
})}
|
||||
</MenuList>
|
||||
</Menu>
|
||||
);
|
||||
};
|
||||
|
||||
export default DownloadButton;
|
||||
@ -1,88 +0,0 @@
|
||||
import { Flex, chakra, Link, IconButton } from "@chakra-ui/react";
|
||||
|
||||
import { FaGithub, FaRedditAlien } from "react-icons/fa";
|
||||
import { FiTwitter } from "react-icons/fi";
|
||||
|
||||
const Footer = () => {
|
||||
return (
|
||||
<Flex
|
||||
w="full"
|
||||
as="footer"
|
||||
flexDir={{
|
||||
base: "column",
|
||||
sm: "row",
|
||||
}}
|
||||
align="center"
|
||||
justify="space-between"
|
||||
px="6"
|
||||
py="4"
|
||||
bg="white"
|
||||
_dark={{
|
||||
bg: "#282828",
|
||||
}}
|
||||
>
|
||||
<chakra.a
|
||||
href="#"
|
||||
fontSize="xl"
|
||||
fontWeight="bold"
|
||||
color="gray.600"
|
||||
_dark={{
|
||||
color: "white",
|
||||
_hover: {
|
||||
color: "gray.300",
|
||||
},
|
||||
}}
|
||||
_hover={{
|
||||
color: "gray.700",
|
||||
}}
|
||||
>
|
||||
Spotube
|
||||
</chakra.a>
|
||||
|
||||
<chakra.p
|
||||
py={{
|
||||
base: "2",
|
||||
sm: "0",
|
||||
}}
|
||||
color="gray.800"
|
||||
_dark={{
|
||||
color: "white",
|
||||
}}
|
||||
>
|
||||
© {new Date().getFullYear()}, Spotube. All rights reserved
|
||||
</chakra.p>
|
||||
|
||||
<Flex mx="-2">
|
||||
<IconButton
|
||||
colorScheme="gray"
|
||||
as={Link}
|
||||
aria-label="Github Link"
|
||||
href="https://github.com/KRTirtho/spotube"
|
||||
target="_blank"
|
||||
icon={<FaGithub />}
|
||||
variant="link"
|
||||
/>
|
||||
<IconButton
|
||||
colorScheme="gray"
|
||||
as={Link}
|
||||
aria-label="Twitter Link"
|
||||
href="https://twitter.com/@KrTirtho"
|
||||
target="_blank"
|
||||
icon={<FiTwitter />}
|
||||
variant="link"
|
||||
/>
|
||||
<IconButton
|
||||
colorScheme="gray"
|
||||
as={Link}
|
||||
aria-label="Reddit Link"
|
||||
href="https://reddit.com/r/FlutterDev/search/?q=spotube&restrict_sr=1&sr_nsfw="
|
||||
target="_blank"
|
||||
icon={<FaRedditAlien />}
|
||||
variant="link"
|
||||
/>
|
||||
</Flex>
|
||||
</Flex>
|
||||
);
|
||||
};
|
||||
|
||||
export default Footer;
|
||||
@ -1,218 +0,0 @@
|
||||
import {
|
||||
Box,
|
||||
Button,
|
||||
chakra,
|
||||
CloseButton,
|
||||
Flex,
|
||||
Heading,
|
||||
HStack,
|
||||
IconButton,
|
||||
Link,
|
||||
useColorMode,
|
||||
useColorModeValue,
|
||||
useDisclosure,
|
||||
VisuallyHidden,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import NavLink from "next/link";
|
||||
import { GoLightBulb } from "react-icons/go";
|
||||
import { FiGithub, FiSun } from "react-icons/fi";
|
||||
import Image from "next/image";
|
||||
import React from "react";
|
||||
import { AiOutlineMenu } from "react-icons/ai";
|
||||
import { BsHeartFill } from "react-icons/bs";
|
||||
|
||||
const Navbar = () => {
|
||||
const bg = useColorModeValue("white", "gray.800");
|
||||
const mobileNav = useDisclosure();
|
||||
const { colorMode, toggleColorMode } = useColorMode();
|
||||
return (
|
||||
<React.Fragment>
|
||||
<chakra.header
|
||||
bg={bg}
|
||||
w="full"
|
||||
px={{
|
||||
base: 1,
|
||||
sm: 3,
|
||||
}}
|
||||
py={2}
|
||||
shadow="md"
|
||||
_dark={{
|
||||
bgColor: "#212121",
|
||||
}}
|
||||
>
|
||||
<Flex alignItems="center" justifyContent="space-between">
|
||||
<Flex align="center">
|
||||
<NavLink href="/">
|
||||
<Image
|
||||
src="/spotube-logo.svg"
|
||||
alt="Logo"
|
||||
height="60"
|
||||
width="60"
|
||||
layout="fixed"
|
||||
/>
|
||||
</NavLink>
|
||||
<VisuallyHidden>Spotube</VisuallyHidden>
|
||||
<NavLink href="/" passHref>
|
||||
<Heading p="2" as="a" size="lg" mr="2">
|
||||
Spotube
|
||||
</Heading>
|
||||
</NavLink>
|
||||
</Flex>
|
||||
<HStack display="flex" alignItems="center" spacing={1}>
|
||||
<HStack
|
||||
spacing={1}
|
||||
mr={1}
|
||||
color="brand.500"
|
||||
display={{
|
||||
base: "none",
|
||||
md: "inline-flex",
|
||||
}}
|
||||
>
|
||||
<NavLink href="/other-downloads" passHref>
|
||||
<Button as="a" colorScheme="gray" variant="ghost">
|
||||
Downloads
|
||||
</Button>
|
||||
</NavLink>
|
||||
<NavLink href="/blog" passHref>
|
||||
<Button as="a" variant="ghost" colorScheme="gray">
|
||||
Blog
|
||||
</Button>
|
||||
</NavLink>
|
||||
<NavLink href="/about" passHref>
|
||||
<Button as="a" variant="ghost" colorScheme="gray">
|
||||
About
|
||||
</Button>
|
||||
</NavLink>
|
||||
<Button
|
||||
as={Link}
|
||||
href="https://github.com/KRTirtho/spotube"
|
||||
bgColor="black"
|
||||
color="white"
|
||||
target="_blank"
|
||||
_hover={{
|
||||
textDecor: "none",
|
||||
bgColor: "blackAlpha.800",
|
||||
}}
|
||||
_active={{
|
||||
bgColor: "blackAlpha.700",
|
||||
}}
|
||||
rightIcon={<FiGithub />}
|
||||
>
|
||||
Give us a ⭐ on
|
||||
</Button>
|
||||
</HStack>
|
||||
<Button
|
||||
size={{
|
||||
base: "sm",
|
||||
md: "sm",
|
||||
lg: "md",
|
||||
}}
|
||||
as={Link}
|
||||
href="https://opencollective.com/spotube"
|
||||
bgColor="pink.100"
|
||||
color="pink.500"
|
||||
_hover={{
|
||||
bgColor: "pink.200",
|
||||
textDecor: "none",
|
||||
}}
|
||||
_active={{
|
||||
bgColor: "pink.100",
|
||||
}}
|
||||
rightIcon={<BsHeartFill />}
|
||||
target="_blank"
|
||||
>
|
||||
Donate us
|
||||
</Button>
|
||||
<IconButton
|
||||
variant="ghost"
|
||||
icon={colorMode == "light" ? <GoLightBulb /> : <FiSun />}
|
||||
aria-label="Dark Mode Toggle"
|
||||
onClick={() => {
|
||||
toggleColorMode();
|
||||
}}
|
||||
/>
|
||||
<Box
|
||||
display={{
|
||||
base: "inline-flex",
|
||||
md: "none",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
display={{
|
||||
base: "flex",
|
||||
md: "none",
|
||||
}}
|
||||
aria-label="Open menu"
|
||||
fontSize="20px"
|
||||
color="gray.800"
|
||||
_dark={{
|
||||
color: "inherit",
|
||||
}}
|
||||
variant="ghost"
|
||||
icon={<AiOutlineMenu />}
|
||||
onClick={mobileNav.onOpen}
|
||||
/>
|
||||
|
||||
<VStack
|
||||
pos="absolute"
|
||||
top={0}
|
||||
left={0}
|
||||
right={0}
|
||||
display={mobileNav.isOpen ? "flex" : "none"}
|
||||
flexDirection="column"
|
||||
p={2}
|
||||
pb={4}
|
||||
m={2}
|
||||
bg={bg}
|
||||
spacing={3}
|
||||
rounded="sm"
|
||||
shadow="sm"
|
||||
>
|
||||
<CloseButton
|
||||
aria-label="Close menu"
|
||||
onClick={mobileNav.onClose}
|
||||
/>
|
||||
<NavLink href="/other-downloads" passHref>
|
||||
<Button w="full" as="a" colorScheme="gray" variant="ghost">
|
||||
Downloads
|
||||
</Button>
|
||||
</NavLink>
|
||||
<NavLink href="/blog" passHref>
|
||||
<Button w="full" as="a" variant="ghost" colorScheme="gray">
|
||||
Blog
|
||||
</Button>
|
||||
</NavLink>
|
||||
<NavLink href="/about" passHref>
|
||||
<Button w="full" as="a" variant="ghost" colorScheme="gray">
|
||||
About
|
||||
</Button>
|
||||
</NavLink>
|
||||
<Button
|
||||
as={Link}
|
||||
href="https://github.com/KRTirtho/spotube"
|
||||
bgColor="black"
|
||||
color="white"
|
||||
target="_blank"
|
||||
w="full"
|
||||
_hover={{
|
||||
textDecor: "none",
|
||||
bgColor: "blackAlpha.800",
|
||||
}}
|
||||
_active={{
|
||||
bgColor: "blackAlpha.700",
|
||||
}}
|
||||
rightIcon={<FiGithub />}
|
||||
>
|
||||
Give us a ⭐ on
|
||||
</Button>
|
||||
</VStack>
|
||||
</Box>
|
||||
</HStack>
|
||||
</Flex>
|
||||
</chakra.header>
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
|
||||
export default Navbar;
|
||||
@ -1,153 +0,0 @@
|
||||
import {
|
||||
Flex,
|
||||
Box,
|
||||
Icon,
|
||||
chakra,
|
||||
Image,
|
||||
HStack,
|
||||
IconButton,
|
||||
Link,
|
||||
CircularProgress,
|
||||
} from "@chakra-ui/react";
|
||||
import { MdEmail, MdLocationOn } from "react-icons/md";
|
||||
import { BsFillBriefcaseFill } from "react-icons/bs";
|
||||
import { FC } from "react";
|
||||
import { FaGithub } from "react-icons/fa";
|
||||
import { FiTwitter } from "react-icons/fi";
|
||||
import { octokit } from "configurations/ocotokit";
|
||||
import useSWR from "swr";
|
||||
|
||||
interface UserDetailedCardProps {
|
||||
username: string;
|
||||
emoji: string;
|
||||
}
|
||||
|
||||
const UserDetailedCard: FC<UserDetailedCardProps> = ({ username, emoji }) => {
|
||||
const { data } = useSWR(`user-${username}}`, () =>
|
||||
octokit.users.getByUsername({ username })
|
||||
);
|
||||
|
||||
if (!data) {
|
||||
return <CircularProgress />;
|
||||
}
|
||||
|
||||
return (
|
||||
<Box
|
||||
w="xs"
|
||||
bg="white"
|
||||
_dark={{
|
||||
bg: "#212121",
|
||||
}}
|
||||
shadow="xl"
|
||||
rounded="lg"
|
||||
overflow="hidden"
|
||||
>
|
||||
<Image
|
||||
w="full"
|
||||
h={56}
|
||||
fit="cover"
|
||||
objectPosition="center"
|
||||
src={data.data.avatar_url}
|
||||
alt="avatar"
|
||||
/>
|
||||
|
||||
<Flex
|
||||
alignItems="center"
|
||||
px={6}
|
||||
py={3}
|
||||
bg="#1c1c1c"
|
||||
_light={{ bg: "gray.50" }}
|
||||
>
|
||||
<span>{emoji}</span>
|
||||
<chakra.h1 mx={3} fontWeight="bold" fontSize="lg">
|
||||
{data.data.name ?? data.data.login}
|
||||
</chakra.h1>
|
||||
</Flex>
|
||||
|
||||
<Box py={4} px={6}>
|
||||
<chakra.p
|
||||
py={2}
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.400",
|
||||
}}
|
||||
>
|
||||
{data.data.bio}
|
||||
</chakra.p>
|
||||
|
||||
{data.data.company && (
|
||||
<Flex
|
||||
alignItems="center"
|
||||
mt={4}
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.200",
|
||||
}}
|
||||
>
|
||||
<Icon as={BsFillBriefcaseFill} h={6} w={6} mr={2} />
|
||||
|
||||
<chakra.h1 px={2} fontSize="sm">
|
||||
{data.data.company}
|
||||
</chakra.h1>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{data.data.location && (
|
||||
<Flex
|
||||
alignItems="center"
|
||||
mt={4}
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.200",
|
||||
}}
|
||||
>
|
||||
<Icon as={MdLocationOn} h={6} w={6} mr={2} />
|
||||
|
||||
<chakra.h1 px={2} fontSize="sm">
|
||||
{data.data.location}
|
||||
</chakra.h1>
|
||||
</Flex>
|
||||
)}
|
||||
{data.data.email && (
|
||||
<Flex
|
||||
alignItems="center"
|
||||
mt={4}
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.200",
|
||||
}}
|
||||
>
|
||||
<Icon as={MdEmail} h={6} w={6} mr={2} />
|
||||
<chakra.h1 px={2} fontSize="sm">
|
||||
{data.data.email}
|
||||
</chakra.h1>
|
||||
</Flex>
|
||||
)}
|
||||
<HStack justify="center" pt="4">
|
||||
<IconButton
|
||||
colorScheme="gray"
|
||||
as={Link}
|
||||
aria-label="Github Link"
|
||||
href={data.data.html_url}
|
||||
target="_blank"
|
||||
icon={<FaGithub />}
|
||||
variant="link"
|
||||
/>
|
||||
{data.data.twitter_username && (
|
||||
<IconButton
|
||||
colorScheme="gray"
|
||||
as={Link}
|
||||
aria-label="Twitter Link"
|
||||
href={`https://twitter.com/${data.data.twitter_username}`}
|
||||
target="_blank"
|
||||
icon={<FiTwitter />}
|
||||
variant="link"
|
||||
/>
|
||||
)}
|
||||
</HStack>
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
|
||||
export default UserDetailedCard;
|
||||
@ -1,72 +0,0 @@
|
||||
import Script from "next/script";
|
||||
import { FC, useId } from "react";
|
||||
|
||||
type AdComponent = FC<{
|
||||
slot: string;
|
||||
}>;
|
||||
|
||||
export const DisplayAd: AdComponent = ({ slot }) => {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<ins
|
||||
className="adsbygoogle"
|
||||
style={{ display: "block" }}
|
||||
data-ad-client={process.env.NEXT_PUBLIC_ADSENSE_ID}
|
||||
data-ad-slot={slot}
|
||||
data-ad-format="auto"
|
||||
data-full-width-responsive="true"
|
||||
></ins>
|
||||
<Script
|
||||
id={id + "#" + slot}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(adsbygoogle = window.adsbygoogle || []).push({});`,
|
||||
}}
|
||||
></Script>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const GridMultiplexAd: AdComponent = ({ slot }) => {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<ins
|
||||
className="adsbygoogle"
|
||||
style={{ display: "block" }}
|
||||
data-ad-format="autorelaxed"
|
||||
data-ad-client={process.env.NEXT_PUBLIC_ADSENSE_ID}
|
||||
data-ad-slot={slot}
|
||||
></ins>
|
||||
<Script
|
||||
id={id + "#" + slot}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(adsbygoogle = window.adsbygoogle || []).push({});`,
|
||||
}}
|
||||
></Script>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const InFeedAd = () => {
|
||||
const id = useId();
|
||||
return (
|
||||
<>
|
||||
<ins
|
||||
className="adsbygoogle"
|
||||
style={{ display: "block" }}
|
||||
data-ad-format="fluid"
|
||||
data-ad-layout-key="-e5+6n-34-bt+x0"
|
||||
data-ad-client="ca-pub-6419300932495863"
|
||||
data-ad-slot="6460144484"
|
||||
></ins>
|
||||
<Script
|
||||
id={id}
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `(adsbygoogle = window.adsbygoogle || []).push({});`,
|
||||
}}
|
||||
></Script>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
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,
|
||||
});
|
||||
};
|
||||
@ -1,3 +0,0 @@
|
||||
import { Octokit } from "@octokit/rest";
|
||||
|
||||
export const octokit: Octokit = new Octokit();
|
||||
@ -1,26 +0,0 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { detectOS } from "detect-browser";
|
||||
|
||||
export enum Platform {
|
||||
linux = "Linux",
|
||||
windows = "Windows",
|
||||
mac = "Mac",
|
||||
android = "Android",
|
||||
}
|
||||
|
||||
export function usePlatform(): Platform {
|
||||
const [platform, setPlatform] = useState(Platform.linux);
|
||||
|
||||
useEffect(() => {
|
||||
const detectedPlatform = detectOS(navigator.userAgent)?.toLowerCase();
|
||||
|
||||
if (!detectedPlatform) return;
|
||||
|
||||
if (detectedPlatform.includes("windows")) setPlatform(Platform.windows);
|
||||
else if (detectedPlatform.includes("mac")) setPlatform(Platform.mac);
|
||||
else if (detectedPlatform.includes("android"))
|
||||
setPlatform(Platform.android);
|
||||
}, []);
|
||||
|
||||
return platform;
|
||||
}
|
||||
@ -1,43 +0,0 @@
|
||||
import {
|
||||
Link as Anchor,
|
||||
Heading,
|
||||
Text,
|
||||
chakra,
|
||||
Code,
|
||||
HStack,
|
||||
Divider,
|
||||
Box,
|
||||
} from "@chakra-ui/react";
|
||||
import { Options } from "react-markdown";
|
||||
|
||||
export const MarkdownComponentDefs: Options["components"] = {
|
||||
a: (props: any) => <Anchor {...props} color="blue.500" />,
|
||||
h1: (props: any) => <Heading {...props} size="xl" mt="5" mb="1.5" />,
|
||||
h2: (props: any) => <Heading {...props} size="lg" mt="5" mb="1.5" />,
|
||||
h3: (props: any) => <Heading {...props} size="md" mt="5" mb="1.5" />,
|
||||
h4: (props: any) => <Heading {...props} size="sm" />,
|
||||
h5: (props: any) => <Heading {...props} size="xs" />,
|
||||
h6: (props: any) => <Heading {...props} size="xs" />,
|
||||
p: (props: any) => <Text {...props} />,
|
||||
li: (props: any) => <chakra.li {...props} ml="4" />,
|
||||
code: (props) => (
|
||||
<Code
|
||||
{...props}
|
||||
p={!props.inline ? 5 : 0}
|
||||
overflow="scroll"
|
||||
colorScheme="gray"
|
||||
maxW="full"
|
||||
/>
|
||||
),
|
||||
blockquote: (props) => {
|
||||
return (
|
||||
<HStack bgColor="blackAlpha.300" py="3" px="2">
|
||||
<Box borderLeft="2px solid gray" pl="2">
|
||||
<Text as="span" fontSize="sm">
|
||||
{props.children}
|
||||
</Text>
|
||||
</Box>
|
||||
</HStack>
|
||||
);
|
||||
},
|
||||
};
|
||||
5
website/next-env.d.ts
vendored
5
website/next-env.d.ts
vendored
@ -1,5 +0,0 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@ -1,7 +0,0 @@
|
||||
/** @type {import('next').NextConfig} */
|
||||
const nextConfig = {
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
}
|
||||
|
||||
module.exports = nextConfig
|
||||
4958
website/package-lock.json
generated
Normal file
4958
website/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@ -1,43 +1,52 @@
|
||||
{
|
||||
"name": "website",
|
||||
"version": "0.1.0",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babel/core": "^7.18.6",
|
||||
"@chakra-ui/react": "^2.2.4",
|
||||
"@chakra-ui/system": "^2.2.2",
|
||||
"@chakra-ui/theme-tools": "^2.0.5",
|
||||
"@emotion/react": "^11",
|
||||
"@emotion/styled": "^11",
|
||||
"@octokit/rest": "^19.0.3",
|
||||
"@types/progress": "^2.0.5",
|
||||
"detect-browser": "^5.3.0",
|
||||
"framer-motion": "^6",
|
||||
"gray-matter": "^4.0.3",
|
||||
"next": "12.2.2",
|
||||
"nextjs-progressbar": "^0.0.14",
|
||||
"react": "18.2.0",
|
||||
"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"
|
||||
"dev": "vite dev",
|
||||
"build": "vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --check . && eslint .",
|
||||
"format": "prettier --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "18.0.5",
|
||||
"@types/react": "18.0.15",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"@types/react-syntax-highlighter": "^15.5.3",
|
||||
"eslint": "8.20.0",
|
||||
"eslint-config-next": "12.2.2",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"typescript": "4.7.4"
|
||||
"@playwright/test": "^1.28.1",
|
||||
"@skeletonlabs/skeleton": "2.8.0",
|
||||
"@skeletonlabs/tw-plugin": "0.3.1",
|
||||
"@sveltejs/adapter-static": "^3.0.1",
|
||||
"@sveltejs/kit": "^2.0.0",
|
||||
"@sveltejs/vite-plugin-svelte": "^3.0.0",
|
||||
"@tailwindcss/typography": "0.5.10",
|
||||
"@types/eslint": "8.56.0",
|
||||
"@types/node": "20.11.16",
|
||||
"@typescript-eslint/eslint-plugin": "^6.0.0",
|
||||
"@typescript-eslint/parser": "^6.0.0",
|
||||
"autoprefixer": "10.4.17",
|
||||
"eslint": "^8.56.0",
|
||||
"eslint-config-prettier": "^9.1.0",
|
||||
"eslint-plugin-svelte": "^2.35.1",
|
||||
"mdsvex": "^0.11.0",
|
||||
"postcss": "8.4.35",
|
||||
"prettier": "^3.1.1",
|
||||
"prettier-plugin-svelte": "^3.1.2",
|
||||
"svelte": "^4.2.7",
|
||||
"svelte-check": "^3.6.0",
|
||||
"tailwindcss": "3.4.1",
|
||||
"tslib": "^2.4.1",
|
||||
"typescript": "^5.0.0",
|
||||
"vite": "^5.0.3",
|
||||
"vite-plugin-tailwind-purgecss": "0.2.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@floating-ui/dom": "1.6.1",
|
||||
"@octokit/rest": "^20.0.2",
|
||||
"highlight.js": "11.9.0",
|
||||
"lucide-svelte": "^0.323.0",
|
||||
"remark-container": "^0.1.2",
|
||||
"remark-github": "^12.0.0"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,138 +0,0 @@
|
||||
import "../styles/globals.css";
|
||||
import type { AppProps } from "next/app";
|
||||
import {
|
||||
ChakraProvider,
|
||||
extendTheme,
|
||||
withDefaultColorScheme,
|
||||
} from "@chakra-ui/react";
|
||||
import Navbar from "components/Navbar";
|
||||
import { chakra } from "@chakra-ui/react";
|
||||
import { mode } from "@chakra-ui/theme-tools";
|
||||
import Head from "next/head";
|
||||
import { useRouter } from "next/router";
|
||||
// import Script from "next/script";
|
||||
// import * as gtag from "configurations/gtag";
|
||||
// import AdDetector from "components/AdDetector";
|
||||
import Footer from "components/Footer";
|
||||
import NextNProgress from "nextjs-progressbar";
|
||||
|
||||
const customTheme = extendTheme(
|
||||
{
|
||||
initialColorMode: 'system',
|
||||
useSystemColorMode: true,
|
||||
styles: {
|
||||
global: (props: any) => ({
|
||||
body: {
|
||||
bg: mode("white", "#171717")(props),
|
||||
},
|
||||
}),
|
||||
},
|
||||
colors: {
|
||||
blue: {
|
||||
50: "#e6f2ff",
|
||||
100: "#e6f2ff",
|
||||
200: "#e6f2ff",
|
||||
300: "#1681bd",
|
||||
400: "#1681bd",
|
||||
500: "#3a4da5",
|
||||
600: "#2d3c7d",
|
||||
700: "#1f2b55",
|
||||
800: "#121c2e",
|
||||
900: "#080e18",
|
||||
},
|
||||
components: {
|
||||
Link: {
|
||||
baseStyle: {
|
||||
color: "blue",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
withDefaultColorScheme({ colorScheme: "blue" })
|
||||
);
|
||||
|
||||
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 (
|
||||
<>
|
||||
{/* <Script
|
||||
async
|
||||
onError={(e) => {
|
||||
console.error("Script failed to load", e);
|
||||
}}
|
||||
src={`https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=${process.env.NEXT_PUBLIC_ADSENSE_ID}`}
|
||||
crossOrigin="anonymous"
|
||||
/> */}
|
||||
{/* Global Site Tag (gtag.js) - Google Analytics */}
|
||||
{/* <Script
|
||||
strategy="afterInteractive"
|
||||
src={`https://www.googletagmanager.com/gtag/js?id=${gtag.GA_TRACKING_ID}`}
|
||||
/> */}
|
||||
{/* <Script
|
||||
id="gtag-init"
|
||||
strategy="afterInteractive"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
function gtag(){dataLayer.push(arguments);}
|
||||
gtag('js', new Date());
|
||||
gtag('config', '${gtag.GA_TRACKING_ID}', {
|
||||
page_path: window.location.pathname,
|
||||
});
|
||||
`,
|
||||
}}
|
||||
/> */}
|
||||
<ChakraProvider theme={customTheme}>
|
||||
<Head>
|
||||
<link
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/apple-touch-icon.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/favicon-32x32.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/favicon-16x16.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<title>Spotube</title>
|
||||
</Head>
|
||||
<NextNProgress color="#00a7a4" />
|
||||
<chakra.div
|
||||
minH="100vh"
|
||||
display="flex"
|
||||
flexDir="column"
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<div>
|
||||
<Navbar />
|
||||
<Component {...pageProps} />
|
||||
</div>
|
||||
<Footer />
|
||||
</chakra.div>
|
||||
</ChakraProvider>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyApp;
|
||||
@ -1,68 +0,0 @@
|
||||
import {
|
||||
Center,
|
||||
CircularProgress,
|
||||
Heading,
|
||||
HStack,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import UserDetailedCard from "components/UserDetailedCard";
|
||||
import { octokit } from "configurations/ocotokit";
|
||||
import useSwr from "swr";
|
||||
|
||||
const maintainers = ["KRTirtho", "RustyApple"];
|
||||
|
||||
const About = () => {
|
||||
const { data } = useSwr("contributors", () =>
|
||||
octokit.repos.listContributors({
|
||||
owner: "KRTirtho",
|
||||
repo: "spotube",
|
||||
})
|
||||
);
|
||||
|
||||
return (
|
||||
<VStack my="20" mx="10">
|
||||
<Heading>Maintainers</Heading>
|
||||
|
||||
<HStack pb="20" gap="40px" wrap="wrap" justify="center" align="start">
|
||||
{data ? (
|
||||
data.data.map((contributor) => {
|
||||
if (!maintainers.includes(contributor.login!)) return;
|
||||
return (
|
||||
<UserDetailedCard
|
||||
key={contributor.id}
|
||||
emoji="⚡"
|
||||
username={contributor.login!}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Center>
|
||||
<CircularProgress />
|
||||
</Center>
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<Heading>Valuable Code Contributors💝</Heading>
|
||||
<HStack gap="40px" wrap="wrap" justify="center" align="start">
|
||||
{data ? (
|
||||
data.data.map((contributor) => {
|
||||
if (maintainers.includes(contributor.login!)) return;
|
||||
return (
|
||||
<UserDetailedCard
|
||||
key={contributor.id}
|
||||
emoji="💪💝"
|
||||
username={contributor.login!}
|
||||
/>
|
||||
);
|
||||
})
|
||||
) : (
|
||||
<Center>
|
||||
<CircularProgress />
|
||||
</Center>
|
||||
)}
|
||||
</HStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default About;
|
||||
@ -1,119 +0,0 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { GetStaticPaths, GetStaticProps, NextPage } from "next";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import matter from "gray-matter";
|
||||
import { BlogMetadata } from ".";
|
||||
import gfm from "remark-gfm";
|
||||
import gemoji from "remark-gemoji";
|
||||
import { MarkdownComponentDefs } from "misc/MarkdownComponentDefs";
|
||||
import {
|
||||
Box,
|
||||
chakra,
|
||||
Flex,
|
||||
Heading,
|
||||
Image,
|
||||
Text,
|
||||
VStack,
|
||||
} from "@chakra-ui/react";
|
||||
import Head from "next/head";
|
||||
|
||||
interface Props {
|
||||
metadata: BlogMetadata;
|
||||
content: string;
|
||||
}
|
||||
|
||||
const BlogPost: NextPage<Props> = ({
|
||||
content,
|
||||
metadata: { author, author_avatar_url, cover_image, date, tags, title },
|
||||
}) => {
|
||||
return (
|
||||
<VStack>
|
||||
<Head>
|
||||
<title>{title}</title>
|
||||
</Head>
|
||||
<Box w="full" maxH="xl" overflow="hidden" mb="5">
|
||||
<Image fit="cover" src={cover_image} alt={title} />
|
||||
</Box>
|
||||
<VStack
|
||||
align="start"
|
||||
spacing="4"
|
||||
maxW={{
|
||||
base: "full",
|
||||
lg: "70%",
|
||||
xl: "60%",
|
||||
}}
|
||||
py="5"
|
||||
px="10"
|
||||
w="full"
|
||||
>
|
||||
<Flex alignItems="center">
|
||||
<Image
|
||||
h="12"
|
||||
fit="cover"
|
||||
rounded="full"
|
||||
src={author_avatar_url}
|
||||
alt="Avatar"
|
||||
/>
|
||||
<VStack spacing="0">
|
||||
<Text
|
||||
mx={2}
|
||||
fontWeight="bold"
|
||||
color="gray.700"
|
||||
_dark={{
|
||||
color: "gray.200",
|
||||
}}
|
||||
>
|
||||
{author}
|
||||
</Text>
|
||||
<chakra.span
|
||||
mx={1}
|
||||
fontSize="sm"
|
||||
color="gray.600"
|
||||
_dark={{
|
||||
color: "gray.300",
|
||||
}}
|
||||
>
|
||||
{date}
|
||||
</chakra.span>
|
||||
</VStack>
|
||||
</Flex>
|
||||
<Heading>{title}</Heading>
|
||||
<ReactMarkdown
|
||||
components={MarkdownComponentDefs}
|
||||
remarkPlugins={[gfm, gemoji]}
|
||||
>
|
||||
{content}
|
||||
</ReactMarkdown>
|
||||
</VStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default BlogPost;
|
||||
|
||||
export const getStaticPaths: GetStaticPaths = async () => {
|
||||
const paths = fs.readdirSync("posts").map((file) => {
|
||||
return {
|
||||
params: {
|
||||
slug: file.replace(".md", ""),
|
||||
},
|
||||
};
|
||||
});
|
||||
return {
|
||||
paths,
|
||||
fallback: false,
|
||||
};
|
||||
};
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async (ctx) => {
|
||||
const { content, data } = matter(
|
||||
fs.readFileSync(path.join("posts", `${ctx.params?.slug}.md`), "utf-8")
|
||||
);
|
||||
return {
|
||||
props: {
|
||||
content,
|
||||
metadata: data as BlogMetadata,
|
||||
},
|
||||
};
|
||||
};
|
||||
@ -1,66 +0,0 @@
|
||||
import fs from "fs";
|
||||
import path from "path";
|
||||
import { GetStaticProps, NextPage } from "next";
|
||||
import matter from "gray-matter";
|
||||
import ArticleCard from "components/ArticleCard";
|
||||
import { VStack } from "@chakra-ui/react";
|
||||
import Head from "next/head";
|
||||
|
||||
export interface BlogMetadata {
|
||||
title: string;
|
||||
cover_image: string;
|
||||
author: string;
|
||||
date: string;
|
||||
author_avatar_url: string;
|
||||
tags: string[];
|
||||
summary: string;
|
||||
}
|
||||
|
||||
export interface BlogPost {
|
||||
slug: string;
|
||||
metadata: BlogMetadata;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
posts: BlogPost[];
|
||||
}
|
||||
|
||||
export const getStaticProps: GetStaticProps<Props> = async () => {
|
||||
const posts = fs.readdirSync("posts").map((file) => {
|
||||
return {
|
||||
slug: file.replace(".md", ""),
|
||||
metadata: matter(fs.readFileSync(path.join("posts", file)))
|
||||
.data as BlogMetadata,
|
||||
};
|
||||
});
|
||||
|
||||
return {
|
||||
props: {
|
||||
posts: posts.sort(
|
||||
// @ts-ignore
|
||||
(a, b) => new Date(b.metadata.date) - new Date(a.metadata.date)
|
||||
),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const Blog: NextPage<Props> = ({ posts }) => {
|
||||
return (
|
||||
<VStack mx="5" my="5" spacing="7">
|
||||
<Head>
|
||||
<title>Spotube - Blogs</title>
|
||||
</Head>
|
||||
{posts.map((post) => {
|
||||
return (
|
||||
<ArticleCard
|
||||
key={post.slug}
|
||||
metadata={post.metadata}
|
||||
slug={post.slug}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default Blog;
|
||||
@ -1,180 +0,0 @@
|
||||
import {
|
||||
Heading,
|
||||
VStack,
|
||||
chakra,
|
||||
HStack,
|
||||
Text,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import DownloadButton from "components/DownloadButton";
|
||||
import Image from 'next/image';
|
||||
|
||||
const Root = () => {
|
||||
const textColor = useColorModeValue("#171717", "#f5f5f5");
|
||||
|
||||
return (
|
||||
<>
|
||||
<VStack spacing="$4" alignItems="stretch">
|
||||
<chakra.section
|
||||
h="60vh"
|
||||
bgColor={useColorModeValue("#f5f5f5", "#171717")}
|
||||
bgImage="url(/spotube-screenshot-web.jpg)"
|
||||
bgRepeat="no-repeat"
|
||||
bgSize="contain"
|
||||
bgPos={useColorModeValue("right", "left")}
|
||||
>
|
||||
<VStack mt="10" mx="6" spacing="4" alignItems={useColorModeValue("flex-start", "flex-end")}>
|
||||
<chakra.section
|
||||
p={{ base: "5", md: "0" }}
|
||||
borderRadius="2xl"
|
||||
bgColor={{
|
||||
base: "#f5f5f599",
|
||||
md: "transparent",
|
||||
}}
|
||||
>
|
||||
<Heading color={textColor} size="2xl">
|
||||
Spotube
|
||||
</Heading>
|
||||
<Heading color={textColor} size="lg" maxW="500px">
|
||||
A fast, modern, lightweight & efficient Spotify Music Client for
|
||||
every platform
|
||||
</Heading>
|
||||
</chakra.section>
|
||||
<DownloadButton />
|
||||
</VStack>
|
||||
</chakra.section>
|
||||
{/* <DisplayAd slot="9501208974" /> */}
|
||||
<chakra.div bgGradient="linear-gradient(180deg, rgba(249,207,143,1) 0%, rgba(250,250,250,1) 45%)">
|
||||
<VStack
|
||||
p="5"
|
||||
mt="10"
|
||||
pos="relative"
|
||||
_before={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: -1,
|
||||
display: "block",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
background: "url('/headline-2b.png') rgba(0, 0, 0, 0.9)",
|
||||
bgSize: "contain",
|
||||
bgRepeat: "no-repeat",
|
||||
bgPos: "center",
|
||||
filter: "blur(2px)",
|
||||
}}
|
||||
flexDirection={{ base: "column", md: "row" }} // Stack content vertically on mobile, reverse order on desktop
|
||||
alignItems="center" // Center align content vertically on mobile
|
||||
textAlign="center" // Center align text horizontally on mobile
|
||||
>
|
||||
<chakra.div maxW="600px">
|
||||
<Image
|
||||
src="/headline-1.png"
|
||||
m="10"
|
||||
bgRepeat="no-repeat"
|
||||
bgSize="contain"
|
||||
h="60vh"
|
||||
width="1020"
|
||||
height="780"
|
||||
layout="intrinsic"
|
||||
alt="Headline 2"
|
||||
/>
|
||||
</chakra.div>
|
||||
<chakra.div
|
||||
maxW="500px"
|
||||
bgGradient={{
|
||||
base: "radial-gradient(circle, #ffffff 23%, rgba(0,0,0,0) 82%)",
|
||||
md: "radial-gradient(circle, #ffffff00 23%, rgba(0,0,0,0) 82%)",
|
||||
}}
|
||||
color="gray.800"
|
||||
>
|
||||
<Heading>Access all your Spotify Music & Playlists</Heading>
|
||||
<Text>
|
||||
You can use all your Spotify tracks & playlists here. Everything
|
||||
will be in Sync & some action taken from Spotube will also
|
||||
reflect on your Spotify Account.
|
||||
</Text>
|
||||
</chakra.div>
|
||||
</VStack>
|
||||
</chakra.div>
|
||||
<VStack
|
||||
p="5"
|
||||
mt="10"
|
||||
pos="relative"
|
||||
_before={{
|
||||
content: "''",
|
||||
position: "absolute",
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: -1,
|
||||
display: "block",
|
||||
height: "100%",
|
||||
width: "100%",
|
||||
background: "url('/headline-2b.png') rgba(0, 0, 0, 0.9)",
|
||||
bgSize: "contain",
|
||||
bgRepeat: "no-repeat",
|
||||
bgPos: "center",
|
||||
filter: "blur(2px)",
|
||||
}}
|
||||
>
|
||||
<chakra.div maxW="600px">
|
||||
<Image
|
||||
src="/headline-2a.svg"
|
||||
width="1920"
|
||||
height="1080"
|
||||
layout="intrinsic"
|
||||
alt="Headline 2"
|
||||
/>
|
||||
</chakra.div>
|
||||
<chakra.div
|
||||
maxW="600px"
|
||||
color="gray.50"
|
||||
bgColor="blackAlpha.500"
|
||||
p="3"
|
||||
borderRadius="3xl"
|
||||
>
|
||||
<Heading>On your Mobile, PC, Tablet everywhere</Heading>
|
||||
<Text>
|
||||
Spotube is available for all "Major" Platforms including
|
||||
<b> Linux, Android, Windows & MacOS </b>natively unlike Spotify
|
||||
Desktop App which uses Electron, that is basically the entire
|
||||
Chrome
|
||||
</Text>
|
||||
</chakra.div>
|
||||
</VStack>
|
||||
{/* <DisplayAd slot="9501208974" /> */}
|
||||
<HStack wrap="wrap-reverse" justify="center" px="8" align="center">
|
||||
<chakra.div maxW="400px">
|
||||
<Heading>Open Source, privacy respecting & No ads</Heading>
|
||||
<Text>
|
||||
Spotube is an Open Source App being developed & maintained by
|
||||
Kingkor Roy Tirtho & is built by the Contributions of
|
||||
the Community and Contributors
|
||||
</Text>
|
||||
</chakra.div>
|
||||
<chakra.div maxW="500px">
|
||||
<Image
|
||||
src="/headline-3.svg"
|
||||
width="1920"
|
||||
height="1080"
|
||||
layout="intrinsic"
|
||||
alt="Headline 2"
|
||||
/>
|
||||
</chakra.div>
|
||||
</HStack>
|
||||
<VStack py="10" alignItems="center" textAlign="center">
|
||||
<div>
|
||||
<Heading size="lg">Download Now</Heading>
|
||||
<Text>
|
||||
Download Spotube for every platform you want. It's available everywhere.
|
||||
</Text>
|
||||
</div>
|
||||
<DownloadButton />
|
||||
</VStack>
|
||||
</VStack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Root;
|
||||
@ -1,109 +0,0 @@
|
||||
import {
|
||||
Link as Anchor,
|
||||
Heading,
|
||||
VStack,
|
||||
chakra,
|
||||
Box,
|
||||
Flex,
|
||||
Stack,
|
||||
HStack,
|
||||
useColorModeValue,
|
||||
} from "@chakra-ui/react";
|
||||
import NavLink from "next/link";
|
||||
// import { GridMultiplexAd } from "components/special";
|
||||
import { GiBackwardTime } from "react-icons/gi";
|
||||
import { FiPackage } from "react-icons/fi";
|
||||
import { HiOutlineSparkles } from "react-icons/hi";
|
||||
import { useRouter } from "next/router";
|
||||
import { FC } from "react";
|
||||
|
||||
function OtherDownloads() {
|
||||
const router = useRouter();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Flex justify="center">
|
||||
<VStack my="20" mx="5" maxW="3xl" spacing="28">
|
||||
<VStack spacing="2" align="start">
|
||||
<Heading size="2xl">Other ways to install?</Heading>
|
||||
<Heading size="md">
|
||||
Here's some alternative ways & versions of Spotube that you
|
||||
can install try out
|
||||
</Heading>
|
||||
</VStack>
|
||||
<Stack direction={["column", null, "row"]} spacing="4">
|
||||
<OtherDownloadLinkItem
|
||||
href={"/package-manager"}
|
||||
icon={<FiPackage />}
|
||||
>
|
||||
Package Managers & AppStores
|
||||
</OtherDownloadLinkItem>
|
||||
<OtherDownloadLinkItem
|
||||
href="/nightly-downloads"
|
||||
icon={<HiOutlineSparkles />}
|
||||
color={useColorModeValue("red.500", "red.200")}
|
||||
bgColor={useColorModeValue("red.100", "red.800")}
|
||||
>
|
||||
Nightly versions
|
||||
</OtherDownloadLinkItem>
|
||||
<OtherDownloadLinkItem
|
||||
href={"/stable-downloads"}
|
||||
icon={<GiBackwardTime />}
|
||||
>
|
||||
Previous versions
|
||||
</OtherDownloadLinkItem>
|
||||
(Nightly releases)
|
||||
</Stack>
|
||||
</VStack>
|
||||
</Flex>
|
||||
{/* <GridMultiplexAd slot="4575915852" /> */}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
export default OtherDownloads;
|
||||
|
||||
interface OtherDownloadLinkItemType {
|
||||
href: string;
|
||||
icon: React.ReactNode;
|
||||
color?: string;
|
||||
bgColor?: string;
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
const OtherDownloadLinkItem: FC<OtherDownloadLinkItemType> = ({
|
||||
href,
|
||||
icon,
|
||||
color,
|
||||
bgColor,
|
||||
children,
|
||||
}) => {
|
||||
const router = useRouter();
|
||||
const dColor = useColorModeValue("blue.500", "blue.200");
|
||||
const dBColor = useColorModeValue("blue.100", "blue.800");
|
||||
|
||||
return (
|
||||
<NavLink href={router.pathname + href} passHref style={{ width: "100%" }}>
|
||||
<Anchor color={color ?? dColor} w="100%">
|
||||
<Box
|
||||
w="100%"
|
||||
h="40"
|
||||
bgColor={bgColor ?? dBColor}
|
||||
display="flex"
|
||||
flexDirection="column"
|
||||
alignItems="center"
|
||||
justifyContent="center"
|
||||
p="5"
|
||||
borderRadius="lg"
|
||||
fontSize="1.2rem"
|
||||
textAlign="center"
|
||||
>
|
||||
<chakra.p mb="2" fontSize="4xl">
|
||||
{icon}
|
||||
</chakra.p>
|
||||
{children}
|
||||
</Box>
|
||||
</Anchor>
|
||||
</NavLink>
|
||||
);
|
||||
};
|
||||
@ -1,118 +0,0 @@
|
||||
import {
|
||||
Link as Anchor,
|
||||
Button,
|
||||
Heading,
|
||||
Table,
|
||||
Td,
|
||||
Th,
|
||||
VStack,
|
||||
chakra,
|
||||
Text,
|
||||
Tr,
|
||||
HStack,
|
||||
} from "@chakra-ui/react";
|
||||
import { octokit } from "configurations/ocotokit";
|
||||
import { GetServerSideProps, NextPage } from "next";
|
||||
// import { GridMultiplexAd } from "components/special";
|
||||
import NavLink from "next/link";
|
||||
import { ReleaseResponse } from "./stable-downloads";
|
||||
|
||||
type NightlyProps = ReleaseResponse;
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<
|
||||
NightlyProps
|
||||
> = async () => {
|
||||
const { data } = await octokit.repos.getReleaseByTag({
|
||||
owner: "KRTirtho",
|
||||
repo: "spotube",
|
||||
tag: "nightly",
|
||||
});
|
||||
return {
|
||||
props: {
|
||||
tag_name: data.tag_name,
|
||||
id: data.id,
|
||||
body: data.body,
|
||||
assets: data.assets.map((asset) => ({
|
||||
id: asset.id,
|
||||
name: asset.name,
|
||||
browser_download_url: asset.browser_download_url,
|
||||
})),
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const NightlyDownloads: NextPage<NightlyProps> = (props) => {
|
||||
return (
|
||||
<>
|
||||
<VStack>
|
||||
<VStack
|
||||
alignSelf="center"
|
||||
alignItems="flex-start"
|
||||
spacing="4"
|
||||
maxW="500px"
|
||||
overflow="auto"
|
||||
m="5"
|
||||
>
|
||||
<Heading size="2xl">Nightly Release</Heading>
|
||||
<Text>Download latest & most bleeding edge version of Spotube</Text>
|
||||
<Text size="sm" color="red.500" textAlign="justify">
|
||||
Disclaimer!: Nightly versions are untested and not the final version
|
||||
of spotube. So it can consists of many hidden or unknown bugs but at
|
||||
the same time will be opted with latest & greatest features too. So
|
||||
use it at your own risk! If you don't know what you're
|
||||
doing than we recommend you to download the{" "}
|
||||
<NavLink href="/" passHref>
|
||||
<Anchor color="blue.500">latest stable version of</Anchor>
|
||||
</NavLink>{" "}
|
||||
Spotube
|
||||
</Text>
|
||||
<VStack
|
||||
p="2"
|
||||
w="100%"
|
||||
borderRadius="md"
|
||||
spacing="4"
|
||||
bgColor="gray.50"
|
||||
_dark={{ bgColor: "gray.900" }}
|
||||
>
|
||||
{Object.entries(props.assets).map(
|
||||
([_, { name, id, browser_download_url }], i) => {
|
||||
const segments = name.split("-");
|
||||
const platform = segments[1];
|
||||
const executable = segments[segments.length - 1].split(".")[1];
|
||||
return (
|
||||
<HStack
|
||||
key={id}
|
||||
p="4"
|
||||
w="100%"
|
||||
borderRadius="md"
|
||||
bgColor="gray.100"
|
||||
_dark={{ bgColor: "gray.800" }}
|
||||
>
|
||||
<Text w="200px" textTransform="capitalize">
|
||||
{platform}{" "}
|
||||
<chakra.span color="gray.500">({executable})</chakra.span>
|
||||
</Text>
|
||||
<Anchor
|
||||
overflowWrap="break-word"
|
||||
wordBreak="break-word"
|
||||
w="full"
|
||||
href={browser_download_url}
|
||||
color="blue.500"
|
||||
>
|
||||
{name}
|
||||
</Anchor>
|
||||
</HStack>
|
||||
);
|
||||
}
|
||||
)}
|
||||
</VStack>
|
||||
</VStack>
|
||||
<chakra.div w="full">
|
||||
{/* <GridMultiplexAd slot="3192619797" /> */}
|
||||
</chakra.div>
|
||||
</VStack>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default NightlyDownloads;
|
||||
@ -1,117 +0,0 @@
|
||||
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" w="full" maxW="2xl">
|
||||
<Heading>Installation using Package Managers</Heading>
|
||||
<Text>
|
||||
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)
|
||||
</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'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>
|
||||
);
|
||||
}
|
||||
@ -1,195 +0,0 @@
|
||||
import {
|
||||
Accordion,
|
||||
AccordionButton,
|
||||
AccordionIcon,
|
||||
AccordionItem,
|
||||
AccordionPanel,
|
||||
Link as Anchor,
|
||||
Heading,
|
||||
HStack,
|
||||
Text,
|
||||
VStack,
|
||||
chakra,
|
||||
} from "@chakra-ui/react";
|
||||
import { Octokit, RestEndpointMethodTypes } from "@octokit/rest";
|
||||
import ReactMarkdown from "react-markdown";
|
||||
import { Platform } from "hooks/usePlatform";
|
||||
import gfm from "remark-gfm";
|
||||
// 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",
|
||||
linux = "linux",
|
||||
mac = "mac",
|
||||
windows = "windows",
|
||||
android = "android",
|
||||
}
|
||||
|
||||
export type ReleaseResponse = {
|
||||
id: number;
|
||||
body: string | null | undefined;
|
||||
tag_name: string;
|
||||
assets: {
|
||||
id: number;
|
||||
name: string;
|
||||
browser_download_url: string;
|
||||
}[];
|
||||
};
|
||||
|
||||
type Props = {
|
||||
data: ReleaseResponse[];
|
||||
};
|
||||
|
||||
export const getServerSideProps: GetServerSideProps<Props> = async ({
|
||||
res,
|
||||
}) => {
|
||||
res.setHeader(
|
||||
"Cache-Control",
|
||||
"public, s-maxage=10, stale-while-revalidate=59"
|
||||
);
|
||||
const { data } = await octokit.repos.listReleases({
|
||||
owner: "KRTirtho",
|
||||
repo: "spotube",
|
||||
});
|
||||
const releaseResponse: ReleaseResponse[] = data
|
||||
.map((data) => {
|
||||
return {
|
||||
tag_name: data.tag_name,
|
||||
id: data.id,
|
||||
body: data.body,
|
||||
assets: data.assets.map((asset) => ({
|
||||
id: asset.id,
|
||||
name: asset.name,
|
||||
browser_download_url: asset.browser_download_url,
|
||||
})),
|
||||
};
|
||||
})
|
||||
.filter((release) => release.tag_name !== "nightly");
|
||||
return {
|
||||
props: {
|
||||
data: releaseResponse,
|
||||
},
|
||||
};
|
||||
};
|
||||
|
||||
const StableDownloads: NextPage<Props> = ({ data }) => {
|
||||
return (
|
||||
<VStack alignItems="center">
|
||||
<VStack alignItems="stretch" m="3">
|
||||
<Heading size="xl">Previous Versions</Heading>
|
||||
<Text my="5">
|
||||
If any of your version is not working correctly than you can download
|
||||
& use previous versions of Spotube too
|
||||
</Text>
|
||||
|
||||
<VStack
|
||||
alignItems="flex-start"
|
||||
spacing="3"
|
||||
mr="1"
|
||||
>
|
||||
{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 key={release.id} py="3" w="full">
|
||||
<Heading size="md">
|
||||
Version{" "}
|
||||
<Text as="span" color="blue.500">
|
||||
{release.tag_name}
|
||||
</Text>{" "}
|
||||
{i == 0 && "(Latest)"}
|
||||
</Heading>
|
||||
{Object.entries(releaseSome).map(([type, assets], i) => {
|
||||
return (
|
||||
<HStack
|
||||
key={i}
|
||||
spacing={0}
|
||||
p="2"
|
||||
alignItems="flex-start"
|
||||
bgColor="gray.50"
|
||||
_dark={{ bgColor: "gray.900" }}
|
||||
>
|
||||
<Heading
|
||||
w={90}
|
||||
p="2"
|
||||
colorScheme="blue"
|
||||
borderRadius="5px 0 0 5px"
|
||||
borderRight="none"
|
||||
size="sm"
|
||||
>
|
||||
{type[0].toUpperCase() + type.slice(1)}
|
||||
</Heading>
|
||||
<VStack
|
||||
alignItems="flex-start"
|
||||
w={{
|
||||
base: "full",
|
||||
sm: "72",
|
||||
}}
|
||||
spacing={2}
|
||||
>
|
||||
{assets.map((asset) => {
|
||||
return (
|
||||
<Anchor
|
||||
key={asset.id}
|
||||
color="blue.500"
|
||||
width="full"
|
||||
p="1.5"
|
||||
href={asset.browser_download_url}
|
||||
target="_blank"
|
||||
referrerPolicy="no-referrer"
|
||||
bgColor="gray.100"
|
||||
_dark={{ bgColor: "gray.800" }}
|
||||
borderRadius="md"
|
||||
>
|
||||
{asset.name}
|
||||
</Anchor>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
</HStack>
|
||||
);
|
||||
})}
|
||||
<Accordion defaultIndex={i} allowToggle>
|
||||
<AccordionItem>
|
||||
<AccordionButton>
|
||||
Release Notes <AccordionIcon />
|
||||
</AccordionButton>
|
||||
<AccordionPanel>
|
||||
<ReactMarkdown
|
||||
components={MarkdownComponentDefs}
|
||||
remarkPlugins={[gfm, gemoji]}
|
||||
>
|
||||
{release.body ?? ""}
|
||||
</ReactMarkdown>
|
||||
</AccordionPanel>
|
||||
</AccordionItem>
|
||||
</Accordion>
|
||||
</VStack>
|
||||
);
|
||||
})}
|
||||
</VStack>
|
||||
</VStack>
|
||||
</VStack>
|
||||
);
|
||||
};
|
||||
|
||||
export default StableDownloads;
|
||||
12
website/playwright.config.ts
Normal file
12
website/playwright.config.ts
Normal file
@ -0,0 +1,12 @@
|
||||
import type { PlaywrightTestConfig } from '@playwright/test';
|
||||
|
||||
const config: PlaywrightTestConfig = {
|
||||
webServer: {
|
||||
command: 'npm run build && npm run preview',
|
||||
port: 4173
|
||||
},
|
||||
testDir: 'tests',
|
||||
testMatch: /(.+\.)?(test|spec)\.[jt]s/
|
||||
};
|
||||
|
||||
export default config;
|
||||
File diff suppressed because it is too large
Load Diff
6
website/postcss.config.cjs
Normal file
6
website/postcss.config.cjs
Normal file
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
@ -1,84 +0,0 @@
|
||||
---
|
||||
title: Getting Started With Spotube
|
||||
cover_image: https://github.com/KRTirtho/spotube/raw/master/assets/spotube-screenshot.png
|
||||
date: "July 16, 2022"
|
||||
author: Kingkor Roy Tirtho
|
||||
author_avatar_url: https://avatars.githubusercontent.com/u/61944859?v=4
|
||||
tags:
|
||||
- getting-started
|
||||
- spotube
|
||||
summary: You installed Spotube, don't know what to do now? Then don't worry we Gotchu covered here. We'll guide you through the basics of using Spotube & how you can use it to enrich your daily life with music.
|
||||
---
|
||||
|
||||
So installing Spotube is done. It’s a new app & although most of the things can be understood just by using the app as the UI is descriptive but still sometimes newcomers become overwhelmed by its UI & functionalities. In this article, we’re going to guide you through the problems that you can face while using Spotube by misunderstanding
|
||||
|
||||
## Login with Spotify
|
||||
|
||||
The most common issue with Spotube when someone uses it for the first is with its Login mechanism. Spotube is a Spotify client. And Spotify clients usually require *Premium Accounts* as the Spotify Server only allows premium accounts to download music. But **in Spotube you don’t need a Premium Account**
|
||||
|
||||
Since Spotube doesn’t require premium accounts it needs to special workarounds to supply the Music for Free. Thus, the Login mechanism in Spotube is a bit lengthy, but it’s actually more secure than any other Spotify Clients as the data stays in your Account & doesn’t need to go through a middleware unlike other Spotify Clients
|
||||
|
||||
Now, let’s get through the login Part. For Login, you’ll need two special things
|
||||
|
||||
- Client ID
|
||||
- Client Secret
|
||||
|
||||
**What is a Client ID?**
|
||||
|
||||
Client ID is kind of a Public key (ID) that is a unique identifier for the Spotify API client & is usually used to pair with Client Secret
|
||||
|
||||
**What is a Client Secret?**
|
||||
|
||||
A client secret is **a secret known only to the application instance and the authorization server**. It protects Spotify Data by only granting tokens to authorized requestors
|
||||
|
||||
Now In Spotube, tap on the Settings Icon in the Sidebar/Bottom Bar & click on the **Login With Spotify** button.
|
||||
|
||||
Now you’ll have to open a browser & have to go to [developers.spotify.com/dashboard](https://developers.spotify.com/dashboard) & press the Login button
|
||||
|
||||
|
||||
|
||||
After Login, create a Spotify Developer App by clicking on the CREATE AN APP button. Give the App a name & description & hit CREATE. Finally, the view will look somewhat similar to below
|
||||
|
||||
|
||||
|
||||
Now comes the **Most Important Part…**
|
||||
|
||||
First Tap on the App to enter the dashboard page. In there, tap EDIT SETTINGS & a Dialog with multiple configuration will Open
|
||||
|
||||
|
||||
|
||||
Now find the **Redirect Uris** and type/paste `http://localhost:4304/auth/spotify/callback` in the field and press Add. Finally scroll down to the bottom section of the Dialog and press the SAVE button to save the changes
|
||||
|
||||
|
||||
|
||||
Now close the Dialog & see in the Left/Below of the EDIT SETTINGS button, there you’ll find **Client ID** and a SHOW CLIENT SECRET button. Copy the *Client ID* & paste it in the Spotube’s Text Field. Then tap/click on the SHOW CLIENT SECRET button to reveal the **Client Secret.** Finally, copy the **Client Secret** & paste it in the Spotube’s corresponding Text Field
|
||||
|
||||
|
||||
|
||||
Finally, press on the *Submit Button* which will open a Browser Window/Tab (desktop) or a Browser Application (android). Press/Click ALLOW button in that page & now you’re successfully Logged In with your Spotify Account in Spotube
|
||||
|
||||
Close the Browser Tab (optional) & Go back to Spotube and Enjoy your lifetime (probably) free Music
|
||||
|
||||
## Playing Playlists & Tracks
|
||||
|
||||
You can play any playlists in the Home Screen of Spotube just by pressing the Play button of the playlist. But this is not just it. You can also play any playlist from starting from any track of the playlist and this available in all platform unlike Spotify which doesn't allow this kind stupid simple stuff in the Mobile App
|
||||
Just tap on any Playlist's Cover Image & from the track list, tap the little Play button next to the track from which you want the playlist to start playing.
|
||||
|
||||
|
||||
|
||||
|
||||
## Sing along with any Song with **Synced Lyrics** just like Karaoke
|
||||
|
||||
Yes, Spotube support Synced Lyrics too (most of the popular English songs). So, if you wanna sing along with your favorite Music Track but don't know the Lyrics Spotube got you covered & now even you can sing along. Here's how, just play any playlist/album/track & press on the Lyrics Tab in the Sidebar (desktop/tablet) or Bottom Bar (mobile) & the Synced Lyrics will automatically start playing with the Audio Track
|
||||
|
||||
|
||||
|
||||
|
||||
## Discover Weekly Playlist
|
||||
|
||||
Spotube categorizes playlists by Genre & always shows the most trending playlists in the home screen. In Spotube the Music isn't personalized & it shows you the playlists with best music. So the experience is more vast & what you experience is genuinely what you love & want to listen to not forced or manipulated to
|
||||
|
||||
But there's one question, **where the heck is my Discover Weekly playlist**?
|
||||
It's there. But doesn't show up in the home screen because it's a special kind of playlist that Spotify doesn't allow third-party clients to access unless the User specifically searches for it. You can find your Discover Weekly playlist by simply searching on Spotube's search page like below
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
@ -1 +0,0 @@
|
||||
google-site-verification: google7d445d7199e703dc.html
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 336 KiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 6.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 MiB |
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 16 KiB |
@ -1 +0,0 @@
|
||||
{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
|
||||
@ -1,349 +0,0 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
viewBox="0 0 762 762"
|
||||
version="1.1"
|
||||
id="svg270"
|
||||
sodipodi:docname="spotube-logo.svg"
|
||||
inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
|
||||
xml:space="preserve"
|
||||
inkscape:export-filename="spotube-logo.png"
|
||||
inkscape:export-xdpi="96"
|
||||
inkscape:export-ydpi="96"
|
||||
width="762"
|
||||
height="762"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns:bx="https://boxy-svg.com"><sodipodi:namedview
|
||||
id="namedview272"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
showgrid="false"
|
||||
inkscape:zoom="0.76199998"
|
||||
inkscape:cx="194.22573"
|
||||
inkscape:cy="314.96064"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1001"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg270"
|
||||
inkscape:lockguides="false"><inkscape:page
|
||||
x="0"
|
||||
y="0"
|
||||
width="762"
|
||||
height="762"
|
||||
id="page3136" /><inkscape:page
|
||||
x="640.44641"
|
||||
y="132.29141"
|
||||
width="89.999939"
|
||||
height="89.999985"
|
||||
id="page3138" /></sodipodi:namedview><defs
|
||||
id="defs220"><linearGradient
|
||||
inkscape:collect="always"
|
||||
id="linearGradient5535"><stop
|
||||
style="stop-color:#00063b;stop-opacity:1;"
|
||||
offset="0.25885531"
|
||||
id="stop5531" /><stop
|
||||
style="stop-color:#004256;stop-opacity:1;"
|
||||
offset="1"
|
||||
id="stop5533" /></linearGradient><linearGradient
|
||||
id="linearGradient2809"><stop
|
||||
offset="0.113"
|
||||
style="stop-color:#5668ea;stop-opacity:1;"
|
||||
id="stop2803" /><stop
|
||||
offset="0.60799998"
|
||||
style="stop-color:#0093b1;stop-opacity:1;"
|
||||
id="stop2805" /><stop
|
||||
offset="0.94400001"
|
||||
style="stop-color:#00a29f;stop-opacity:1;"
|
||||
id="stop2807" /></linearGradient><linearGradient
|
||||
id="linearGradient938"><stop
|
||||
offset="0.113"
|
||||
style="stop-color:#5869eb;stop-opacity:1;"
|
||||
id="stop932" /><stop
|
||||
offset="0.60799998"
|
||||
style="stop-color:#0093b1;stop-opacity:1;"
|
||||
id="stop934" /><stop
|
||||
offset="0.94400001"
|
||||
style="stop-color:#02a7a4;stop-opacity:1;"
|
||||
id="stop936" /></linearGradient><radialGradient
|
||||
id="gradient-2-0"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
cx="251.179"
|
||||
cy="248.821"
|
||||
r="241.45"
|
||||
gradientTransform="translate(-1.768285,0.589104)"
|
||||
xlink:href="#gradient-2" /><linearGradient
|
||||
id="gradient-2"><stop
|
||||
offset="0.841"
|
||||
style="stop-color: rgb(255, 255, 255);"
|
||||
id="stop169" /><stop
|
||||
offset="1"
|
||||
style="stop-color: rgb(201, 201, 201);"
|
||||
id="stop171" /></linearGradient><filter
|
||||
id="drop-shadow-filter-0"
|
||||
x="-0.050892502"
|
||||
y="-0.050892502"
|
||||
width="1.1017849"
|
||||
height="1.1017849"
|
||||
bx:preset="drop-shadow 1 0 0 10 0.42 rgba(201,201,201,1)"><feGaussianBlur
|
||||
in="SourceAlpha"
|
||||
stdDeviation="10"
|
||||
id="feGaussianBlur174" /><feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
id="feOffset176" /><feComponentTransfer
|
||||
result="offsetblur"
|
||||
id="feComponentTransfer179"><feFuncA
|
||||
id="spread-ctrl"
|
||||
type="linear"
|
||||
slope="0.84" /></feComponentTransfer><feFlood
|
||||
flood-color="rgba(201,201,201,1)"
|
||||
id="feFlood181" /><feComposite
|
||||
in2="offsetblur"
|
||||
operator="in"
|
||||
id="feComposite183" /><feMerge
|
||||
id="feMerge189"><feMergeNode
|
||||
id="feMergeNode185" /><feMergeNode
|
||||
in="SourceGraphic"
|
||||
id="feMergeNode187" /></feMerge></filter><linearGradient
|
||||
id="gradient-4-3"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="47.146"
|
||||
y1="18.044001"
|
||||
x2="47.146"
|
||||
y2="75.353996"
|
||||
xlink:href="#gradient-4" /><linearGradient
|
||||
id="gradient-4"><stop
|
||||
offset="0.113"
|
||||
style="stop-color: rgb(83, 240, 111);"
|
||||
id="stop193" /><stop
|
||||
offset="0.608"
|
||||
style="stop-color: rgb(0, 177, 86);"
|
||||
id="stop195" /><stop
|
||||
offset="0.944"
|
||||
style="stop-color: rgb(2, 167, 156);"
|
||||
id="stop197" /></linearGradient><filter
|
||||
id="inner-shadow-filter-0"
|
||||
x="-0.064836091"
|
||||
y="-0.071329232"
|
||||
width="1.1296722"
|
||||
height="1.108079"
|
||||
bx:preset="inner-shadow 1 0 0 4 0.5 rgba(0,0,0,0.7)"><feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
id="feOffset200" /><feGaussianBlur
|
||||
stdDeviation="4"
|
||||
id="feGaussianBlur202"
|
||||
result="result1" /><feComposite
|
||||
operator="out"
|
||||
in="SourceGraphic"
|
||||
in2="result1"
|
||||
id="feComposite204" /><feComponentTransfer
|
||||
result="choke"
|
||||
id="feComponentTransfer208"><feFuncA
|
||||
type="linear"
|
||||
slope="1"
|
||||
id="feFuncA206" /></feComponentTransfer><feFlood
|
||||
flood-color="rgba(0,0,0,0.7)"
|
||||
result="color"
|
||||
id="feFlood210" /><feComposite
|
||||
operator="in"
|
||||
in="color"
|
||||
in2="choke"
|
||||
result="shadow"
|
||||
id="feComposite212" /><feComposite
|
||||
operator="over"
|
||||
in="shadow"
|
||||
in2="SourceGraphic"
|
||||
id="feComposite214" /></filter><linearGradient
|
||||
id="gradient-4-1"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="82.026001"
|
||||
y1="144.832"
|
||||
x2="82.026001"
|
||||
y2="264.46201"
|
||||
xlink:href="#linearGradient2809"
|
||||
gradientTransform="translate(7.2213312)" /><linearGradient
|
||||
id="gradient-4-2"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="143.69299"
|
||||
y1="22.804001"
|
||||
x2="143.69299"
|
||||
y2="264.582"
|
||||
xlink:href="#linearGradient938" /><linearGradient
|
||||
id="gradient-4-0"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
x1="205.862"
|
||||
y1="146.28"
|
||||
x2="205.862"
|
||||
y2="265.91"
|
||||
xlink:href="#gradient-4"
|
||||
gradientTransform="translate(-7.2213312)" /><filter
|
||||
style="color-interpolation-filters:sRGB"
|
||||
inkscape:label="Drop Shadow"
|
||||
id="filter2000"
|
||||
x="-0.3425389"
|
||||
y="-0.3425389"
|
||||
width="1.6850778"
|
||||
height="1.6850778"><feFlood
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
id="feFlood1990" /><feComposite
|
||||
in="flood"
|
||||
in2="SourceGraphic"
|
||||
operator="out"
|
||||
result="composite1"
|
||||
id="feComposite1992" /><feGaussianBlur
|
||||
in="composite1"
|
||||
stdDeviation="29.980818"
|
||||
result="blur"
|
||||
id="feGaussianBlur1994" /><feOffset
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset"
|
||||
id="feOffset1996" /><feComposite
|
||||
in="offset"
|
||||
in2="SourceGraphic"
|
||||
operator="atop"
|
||||
result="fbSourceGraphic"
|
||||
id="feComposite1998" /><feColorMatrix
|
||||
result="fbSourceGraphicAlpha"
|
||||
in="fbSourceGraphic"
|
||||
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
|
||||
id="feColorMatrix2062" /><feFlood
|
||||
id="feFlood2064"
|
||||
flood-opacity="1"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
in="fbSourceGraphic" /><feComposite
|
||||
in2="fbSourceGraphic"
|
||||
id="feComposite2066"
|
||||
in="flood"
|
||||
operator="out"
|
||||
result="composite1" /><feGaussianBlur
|
||||
id="feGaussianBlur2068"
|
||||
in="composite1"
|
||||
stdDeviation="28.6433"
|
||||
result="blur" /><feOffset
|
||||
id="feOffset2070"
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset" /><feComposite
|
||||
in2="fbSourceGraphic"
|
||||
id="feComposite2072"
|
||||
in="offset"
|
||||
operator="atop"
|
||||
result="fbSourceGraphic" /><feColorMatrix
|
||||
result="fbSourceGraphicAlpha"
|
||||
in="fbSourceGraphic"
|
||||
values="0 0 0 -1 0 0 0 0 -1 0 0 0 0 -1 0 0 0 0 1 0"
|
||||
id="feColorMatrix3393" /><feFlood
|
||||
id="feFlood3395"
|
||||
flood-opacity="0.352941"
|
||||
flood-color="rgb(0,0,0)"
|
||||
result="flood"
|
||||
in="fbSourceGraphic" /><feComposite
|
||||
in2="fbSourceGraphic"
|
||||
id="feComposite3397"
|
||||
in="flood"
|
||||
operator="in"
|
||||
result="composite1" /><feGaussianBlur
|
||||
id="feGaussianBlur3399"
|
||||
in="composite1"
|
||||
stdDeviation="6.59891"
|
||||
result="blur" /><feOffset
|
||||
id="feOffset3401"
|
||||
dx="0"
|
||||
dy="0"
|
||||
result="offset" /><feComposite
|
||||
in2="offset"
|
||||
id="feComposite3403"
|
||||
in="fbSourceGraphic"
|
||||
operator="over"
|
||||
result="composite2" /></filter><linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient2809"
|
||||
id="linearGradient5506"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(117.34662)"
|
||||
x1="82.026001"
|
||||
y1="144.832"
|
||||
x2="82.026001"
|
||||
y2="264.46201" /><radialGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#linearGradient5535"
|
||||
id="radialGradient5537"
|
||||
cx="143.6935"
|
||||
cy="143.69299"
|
||||
fx="143.6935"
|
||||
fy="143.69299"
|
||||
r="152.72653"
|
||||
gradientTransform="matrix(1,0,0,0.8506841,0,21.45565)"
|
||||
gradientUnits="userSpaceOnUse" /></defs><circle
|
||||
style="opacity:1;fill:#242832;fill-opacity:1;stroke:#000000;stroke-width:10;stroke-dasharray:none;stroke-opacity:0.961795;filter:url(#filter2000)"
|
||||
id="path1157"
|
||||
cx="381.48901"
|
||||
cy="381.48901"
|
||||
inkscape:label="path1157"
|
||||
r="235.79112"
|
||||
sodipodi:insensitive="true" /><g
|
||||
transform="matrix(0.319972,0,0,0.323174,379.08153,437.03375)"
|
||||
id="g228"><g
|
||||
style="opacity:1;fill:none;fill-rule:nonzero;stroke:none;stroke-width:0;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-dasharray:none"
|
||||
transform="matrix(3.89,0,0,3.89,-175.05,-175.05)"
|
||||
id="g226" /></g><g
|
||||
id="g236"
|
||||
style="fill:none;filter:url(#inner-shadow-filter-0)"
|
||||
transform="matrix(1.107829,0,0,1.106267,221.95533,199.03714)"><path
|
||||
d="m 78.642332,155.437 v 98.42 c 0,5.867 4.741,10.605 10.605,10.605 5.854,0 10.604995,-4.738 10.604995,-10.605 v -98.42 c 0,-5.856 -4.750995,-10.605 -10.604995,-10.605 -5.864,0 -10.605,4.744 -10.605,10.605 z"
|
||||
style="fill:none;fill-opacity:1;stroke:url(#gradient-4-1);stroke-width:9.80924px;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="path230" /><path
|
||||
d="m 29.456,264.582 h 23.351 v -116.85 c 0.064,-0.56 0.166,-1.119 0.166,-1.693 0,-50.412 40.69,-91.42 90.698,-91.42 50.002,0 90.692,41.008 90.692,91.42 0,0.771 0.113,1.518 0.228,2.263 v 116.28 h 23.354 c 16.254,0 29.442,-13.64 29.442,-30.469 v -60.936 c 0,-13.878 -8.989,-25.57 -21.261,-29.249 C 264.997,76.957 210.518,22.804 143.676,22.804 76.816,22.804 22.329,76.962 21.211,143.954 8.956,147.638 0,159.32 0,173.187 v 60.926 c 0,16.819 13.187,30.469 29.456,30.469 z"
|
||||
style="fill:url(#radialGradient5537);fill-opacity:1;stroke:url(#gradient-4-2);stroke-width:18.0661;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none"
|
||||
id="path232" /><path
|
||||
d="M 49.735541,279.35822 C 23.7214,267.48486 38.122112,248.62719 80.85964,237.45225 c 14.400662,-3.49216 25.08508,-5.12184 43.66659,-4.88901 11.61348,0.23282 24.62053,3.49216 24.62053,3.49216 0,-42.13877 -0.46471,-121.7601 -0.46471,-160.872338 4.6454,0 7.89719,-0.232827 14.40071,-0.232827 0,2.328107 0,4.190613 0,6.053093 0,2.095305 0,3.259358 0.46471,4.656212 4.6454,14.66709 11.14893,20.48736 43.66659,38.41381 41.34392,23.04827 53.42195,36.78411 53.42195,55.17616 -0.46471,17.22802 -30.65954,54.01213 -37.16306,52.61528 9.29075,-13.03741 22.2978,-27.00606 25.54958,-38.64661 4.18085,-14.20147 -7.43263,-34.2232 -26.01414,-44.69971 -14.86522,-8.8468 -50.17016,-16.52957 -59.92547,-16.52957 0,0 -0.46472,84.74317 -0.46472,116.87109 0,5.35464 -9.7553,14.89989 -15.32977,18.15925 -25.54958,15.36551 -75.25519,22.34984 -97.553043,12.33896 z"
|
||||
id="path3079"
|
||||
style="stroke-width:3.28861" /><path
|
||||
d="m 188.76763,155.437 v 98.42 c 0,5.867 4.741,10.605 10.60501,10.605 5.854,0 10.605,-4.738 10.605,-10.605 v -98.42 c 0,-5.856 -4.751,-10.605 -10.605,-10.605 -5.86401,0 -10.60501,4.744 -10.60501,10.605 z"
|
||||
style="fill:none;stroke:url(#linearGradient5506);stroke-width:9.80924px;stroke-linecap:round;stroke-linejoin:round"
|
||||
id="path5502" /></g><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g240" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g242" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g244" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g246" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g248" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g250" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g252" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g254" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g256" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g258" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g260" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g262" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g264" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g266" /><g
|
||||
transform="matrix(0.972684,0,0,0.972684,193.06382,142.14148)"
|
||||
id="g268" /></svg>
|
||||
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 323 KiB |
9
website/src/app.d.ts
vendored
Normal file
9
website/src/app.d.ts
vendored
Normal file
@ -0,0 +1,9 @@
|
||||
// See https://kit.svelte.dev/docs/types#app
|
||||
// for information about these interfaces
|
||||
// and what to do when importing types
|
||||
declare namespace App {
|
||||
// interface Locals {}
|
||||
// interface PageData {}
|
||||
// interface Error {}
|
||||
// interface Platform {}
|
||||
}
|
||||
12
website/src/app.html
Normal file
12
website/src/app.html
Normal file
@ -0,0 +1,12 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="dark">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<link rel="icon" href="%sveltekit.assets%/favicon.png" />
|
||||
<meta name="viewport" content="width=device-width" />
|
||||
%sveltekit.head%
|
||||
</head>
|
||||
<body data-sveltekit-preload-data="hover" data-theme="vintage">
|
||||
<div style="display: contents">%sveltekit.body%</div>
|
||||
</body>
|
||||
</html>
|
||||
11
website/src/app.postcss
Normal file
11
website/src/app.postcss
Normal file
@ -0,0 +1,11 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@tailwind variants;
|
||||
|
||||
/* vintage theme */
|
||||
@font-face {
|
||||
font-family: 'Abril Fatface';
|
||||
src: url('/fonts/AbrilFatface.ttf');
|
||||
font-display: swap;
|
||||
}
|
||||
1
website/src/lib/index.ts
Normal file
1
website/src/lib/index.ts
Normal file
@ -0,0 +1 @@
|
||||
// place files you want to import through the `$lib` alias in this folder.
|
||||
25
website/src/routes/+layout.svelte
Normal file
25
website/src/routes/+layout.svelte
Normal file
@ -0,0 +1,25 @@
|
||||
<script lang="ts">
|
||||
import '../app.postcss';
|
||||
|
||||
// Highlight JS
|
||||
import hljs from 'highlight.js/lib/core';
|
||||
import 'highlight.js/styles/github-dark.css';
|
||||
import { storeHighlightJs } from '@skeletonlabs/skeleton';
|
||||
import xml from 'highlight.js/lib/languages/xml'; // for HTML
|
||||
import css from 'highlight.js/lib/languages/css';
|
||||
import javascript from 'highlight.js/lib/languages/javascript';
|
||||
import typescript from 'highlight.js/lib/languages/typescript';
|
||||
|
||||
hljs.registerLanguage('xml', xml); // for HTML
|
||||
hljs.registerLanguage('css', css);
|
||||
hljs.registerLanguage('javascript', javascript);
|
||||
hljs.registerLanguage('typescript', typescript);
|
||||
storeHighlightJs.set(hljs);
|
||||
|
||||
// Floating UI for Popups
|
||||
import { computePosition, autoUpdate, flip, shift, offset, arrow } from '@floating-ui/dom';
|
||||
import { storePopup } from '@skeletonlabs/skeleton';
|
||||
storePopup.set({ computePosition, autoUpdate, flip, shift, offset, arrow });
|
||||
</script>
|
||||
|
||||
<slot />
|
||||
15
website/src/routes/+page.svelte
Normal file
15
website/src/routes/+page.svelte
Normal file
@ -0,0 +1,15 @@
|
||||
<!-- YOU CAN DELETE EVERYTHING IN THIS PAGE -->
|
||||
|
||||
<div class="container h-full mx-auto flex justify-center items-center">
|
||||
<div class="space-y-5">
|
||||
<h1 class="h1">Let's get cracking bones!</h1>
|
||||
<p>Start by exploring:</p>
|
||||
<ul>
|
||||
<li><code class="code">/src/routes/+layout.svelte</code> - barebones layout</li>
|
||||
<li><code class="code">/src/app.postcss</code> - app wide css</li>
|
||||
<li>
|
||||
<code class="code">/src/routes/+page.svelte</code> - this page, you can replace the contents
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
BIN
website/static/favicon.png
Normal file
BIN
website/static/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
website/static/fonts/AbrilFatface.ttf
Normal file
BIN
website/static/fonts/AbrilFatface.ttf
Normal file
Binary file not shown.
@ -1,16 +0,0 @@
|
||||
html,
|
||||
body {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
|
||||
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
|
||||
}
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
30
website/svelte.config.js
Normal file
30
website/svelte.config.js
Normal file
@ -0,0 +1,30 @@
|
||||
import adapter from '@sveltejs/adapter-static';
|
||||
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
|
||||
import { mdsvex } from 'mdsvex';
|
||||
import containers from 'remark-containers';
|
||||
import github from 'remark-github';
|
||||
|
||||
/** @type {import('@sveltejs/kit').Config} */
|
||||
const config = {
|
||||
extensions: ['.svelte'],
|
||||
// Consult https://kit.svelte.dev/docs/integrations#preprocessors
|
||||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
vitePreprocess(),
|
||||
mdsvex({
|
||||
extensions: ['.svx'],
|
||||
highlight: {},
|
||||
remarkPlugins: [containers, github]
|
||||
})
|
||||
],
|
||||
vitePlugin: {
|
||||
inspector: true
|
||||
},
|
||||
kit: {
|
||||
// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
|
||||
// If your environment is not supported or you settled on a specific environment, switch out the adapter.
|
||||
// See https://kit.svelte.dev/docs/adapters for more information about adapters.
|
||||
adapter: adapter()
|
||||
}
|
||||
};
|
||||
export default config;
|
||||
25
website/tailwind.config.ts
Normal file
25
website/tailwind.config.ts
Normal file
@ -0,0 +1,25 @@
|
||||
import { join } from 'path'
|
||||
import type { Config } from 'tailwindcss'
|
||||
import typography from '@tailwindcss/typography';
|
||||
import { skeleton } from '@skeletonlabs/tw-plugin'
|
||||
|
||||
export default {
|
||||
darkMode: 'class',
|
||||
content: ['./src/**/*.{html,js,svelte,ts}', join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [
|
||||
typography,
|
||||
skeleton({
|
||||
themes: {
|
||||
preset: [
|
||||
{
|
||||
name: 'vintage',
|
||||
enhancements: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
],
|
||||
} satisfies Config;
|
||||
6
website/tests/test.ts
Normal file
6
website/tests/test.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import { expect, test } from '@playwright/test';
|
||||
|
||||
test('index page has expected h1', async ({ page }) => {
|
||||
await page.goto('/');
|
||||
await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
|
||||
});
|
||||
37
website/tsconfig.json
Executable file → Normal file
37
website/tsconfig.json
Executable file → Normal file
@ -1,23 +1,18 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"noEmit": true,
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"esModuleInterop": true,
|
||||
"module": "esnext",
|
||||
"moduleResolution": "node",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true,
|
||||
"baseUrl": "."
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
|
||||
13
website/vite.config.ts
Normal file
13
website/vite.config.ts
Normal file
@ -0,0 +1,13 @@
|
||||
import { purgeCss } from 'vite-plugin-tailwind-purgecss';
|
||||
import { sveltekit } from '@sveltejs/kit/vite';
|
||||
import { defineConfig } from 'vite';
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [sveltekit(), purgeCss({
|
||||
safelist: {
|
||||
// any selectors that begin with "hljs-" will not be purged
|
||||
greedy: [/^hljs-/],
|
||||
},
|
||||
}),
|
||||
],
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user