diff --git a/web/package.json b/web/package.json index 3213f22..f6775cd 100644 --- a/web/package.json +++ b/web/package.json @@ -74,6 +74,7 @@ "tailwindcss": "^3.1.3", "typescript": "^4.7.3", "vite": "^4.3.9", + "vite-plugin-svgr": "^3.2.0", "vite-plugin-pwa": "^0.14.6", "workbox-window": "^6.5.4", "zod": "^3.21.4", diff --git a/web/pnpm-lock.yaml b/web/pnpm-lock.yaml index 3012926..c422b28 100644 --- a/web/pnpm-lock.yaml +++ b/web/pnpm-lock.yaml @@ -146,6 +146,9 @@ dependencies: vite-plugin-pwa: specifier: ^0.14.6 version: 0.14.6(vite@4.3.9)(workbox-build@6.5.4)(workbox-window@6.5.4) + vite-plugin-svgr: + specifier: ^3.2.0 + version: 3.2.0(rollup@2.79.1)(vite@4.3.9) workbox-window: specifier: ^6.5.4 version: 6.5.4 @@ -1826,6 +1829,21 @@ packages: rollup: 2.79.1 dev: false + /@rollup/pluginutils@5.0.2(rollup@2.79.1): + resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.1 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 2.79.1 + dev: false + /@rollup/pluginutils@5.0.2(rollup@3.21.5): resolution: {integrity: sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==} engines: {node: '>=14.0.0'} @@ -1850,6 +1868,127 @@ packages: string.prototype.matchall: 4.0.8 dev: false + /@svgr/babel-plugin-add-jsx-attribute@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-khWbXesWIP9v8HuKCl2NU2HNAyqpSQ/vkIl36Nbn4HIwEYSRWL0H7Gs6idJdha2DkpFDWlsqMELvoCE8lfFY6Q==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-remove-jsx-attribute@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-iiZaIvb3H/c7d3TH2HBeK91uI2rMhZNwnsIrvd7ZwGLkFw6mmunOCoVnjdYua662MqGFxlN9xTq4fv9hgR4VXQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-remove-jsx-empty-expression@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-sQQmyo+qegBx8DfFc04PFmIO1FP1MHI1/QEpzcIcclo5OAISsOJPW76ZIs0bDyO/DBSJEa/tDa1W26pVtt0FRw==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-replace-jsx-attribute-value@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-i6MaAqIZXDOJeikJuzocByBf8zO+meLwfQ/qMHIjCcvpnfvWf82PFvredEZElErB5glQFJa2KVKk8N2xV6tRRA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-svg-dynamic-title@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-BoVSh6ge3SLLpKC0pmmN9DFlqgFy4NxNgdZNLPNJWBUU7TQpDWeBuyVuDW88iXydb5Cv0ReC+ffa5h3VrKfk1w==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-svg-em-dimensions@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-tNDcBa+hYn0gO+GkP/AuNKdVtMufVhU9fdzu+vUQsR18RIJ9RWe7h/pSBY338RO08wArntwbDk5WhQBmhf2PaA==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-transform-react-native-svg@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-qw54u8ljCJYL2KtBOjI5z7Nzg8LnSvQOP5hPKj77H4VQL4+HdKbAT5pnkkZLmHKYwzsIHSYKXxHouD8zZamCFQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-plugin-transform-svg-component@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-CcFECkDj98daOg9jE3Bh3uyD9kzevCAnZ+UtzG6+BQG/jOQ2OA3jHnX6iG4G1MCJkUQFnUvEv33NvQfqrb/F3A==} + engines: {node: '>=12'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + dev: false + + /@svgr/babel-preset@7.0.0(@babel/core@7.21.8): + resolution: {integrity: sha512-EX/NHeFa30j5UjldQGVQikuuQNHUdGmbh9kEpBKofGUtF0GUPJ4T4rhoYiqDAOmBOxojyot36JIFiDUHUK1ilQ==} + engines: {node: '>=14'} + peerDependencies: + '@babel/core': ^7.0.0-0 + dependencies: + '@babel/core': 7.21.8 + '@svgr/babel-plugin-add-jsx-attribute': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-remove-jsx-attribute': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-remove-jsx-empty-expression': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-replace-jsx-attribute-value': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-svg-dynamic-title': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-svg-em-dimensions': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-transform-react-native-svg': 7.0.0(@babel/core@7.21.8) + '@svgr/babel-plugin-transform-svg-component': 7.0.0(@babel/core@7.21.8) + dev: false + + /@svgr/core@7.0.0: + resolution: {integrity: sha512-ztAoxkaKhRVloa3XydohgQQCb0/8x9T63yXovpmHzKMkHO6pkjdsIAWKOS4bE95P/2quVh1NtjSKlMRNzSBffw==} + engines: {node: '>=14'} + dependencies: + '@babel/core': 7.21.8 + '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8) + camelcase: 6.3.0 + cosmiconfig: 8.1.3 + transitivePeerDependencies: + - supports-color + dev: false + + /@svgr/hast-util-to-babel-ast@7.0.0: + resolution: {integrity: sha512-42Ej9sDDEmsJKjrfQ1PHmiDiHagh/u9AHO9QWbeNx4KmD9yS5d1XHmXUNINfUcykAU+4431Cn+k6Vn5mWBYimQ==} + engines: {node: '>=14'} + dependencies: + '@babel/types': 7.21.5 + entities: 4.5.0 + dev: false + + /@svgr/plugin-jsx@7.0.0: + resolution: {integrity: sha512-SWlTpPQmBUtLKxXWgpv8syzqIU8XgFRvyhfkam2So8b3BE0OS0HPe5UfmlJ2KIC+a7dpuuYovPR2WAQuSyMoPw==} + engines: {node: '>=14'} + dependencies: + '@babel/core': 7.21.8 + '@svgr/babel-preset': 7.0.0(@babel/core@7.21.8) + '@svgr/hast-util-to-babel-ast': 7.0.0 + svg-parser: 2.0.4 + transitivePeerDependencies: + - supports-color + dev: false + /@swc/core-darwin-arm64@1.3.56: resolution: {integrity: sha512-DZcu7BzDaLEdWHabz9DRTP0yEBLqkrWmskFcD5BX0lGAvoIvE4duMnAqi5F2B3X7630QioHRCYFoRw2WkeE3Cw==} engines: {node: '>=10'} @@ -2534,6 +2673,11 @@ packages: engines: {node: '>= 6'} dev: false + /camelcase@6.3.0: + resolution: {integrity: sha512-Gmy6FhYlCY7uOElZUSbxo2UCDH8owEk996gkbrpsgGtrJLM3J7jGxl9Ic7Qwwj4ivOE5AWZWRMecDdF7hqGjFA==} + engines: {node: '>=10'} + dev: false + /caniuse-lite@1.0.30001486: resolution: {integrity: sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==} dev: false @@ -2636,6 +2780,16 @@ packages: yaml: 1.10.2 dev: false + /cosmiconfig@8.1.3: + resolution: {integrity: sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==} + engines: {node: '>=14'} + dependencies: + import-fresh: 3.3.0 + js-yaml: 4.1.0 + parse-json: 5.2.0 + path-type: 4.0.0 + dev: false + /cross-spawn@7.0.3: resolution: {integrity: sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==} engines: {node: '>= 8'} @@ -2787,6 +2941,11 @@ packages: resolution: {integrity: sha512-L9zlje9bIw0h+CwPQumiuVlfMcV4boxRjFIWDcLfFqTZNbkwOExBzfmswytHawObQX4OUhtNv8gIiB21kOurIg==} dev: false + /entities@4.5.0: + resolution: {integrity: sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==} + engines: {node: '>=0.12'} + dev: false + /error-ex@1.3.2: resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==} dependencies: @@ -4839,6 +4998,10 @@ packages: engines: {node: '>= 0.4'} dev: false + /svg-parser@2.0.4: + resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==} + dev: false + /tailwindcss@3.1.3(postcss@8.4.14): resolution: {integrity: sha512-PRJNYdSIthrb8hjmAyymEyEN8Yo61TMXpzyFUpxULeeyRn3Y3gpvuw6FlRTKrJvK7thSGKRnhT36VovVx4WeMA==} engines: {node: '>=12.13.0'} @@ -5114,6 +5277,20 @@ packages: - supports-color dev: false + /vite-plugin-svgr@3.2.0(rollup@2.79.1)(vite@4.3.9): + resolution: {integrity: sha512-Uvq6niTvhqJU6ga78qLKBFJSDvxWhOnyfQSoKpDPMAGxJPo5S3+9hyjExE5YDj6Lpa4uaLkGc1cBgxXov+LjSw==} + peerDependencies: + vite: ^2.6.0 || 3 || 4 + dependencies: + '@rollup/pluginutils': 5.0.2(rollup@2.79.1) + '@svgr/core': 7.0.0 + '@svgr/plugin-jsx': 7.0.0 + vite: 4.3.9(@types/node@18.0.0) + transitivePeerDependencies: + - rollup + - supports-color + dev: false + /vite@4.3.9(@types/node@18.0.0): resolution: {integrity: sha512-qsTNZjO9NoJNW7KnOrgYwczm0WctJ8m/yqYAMAK9Lxt4SoySUfS5S8ia9K7JHpa3KEeMfyF8LoJ3c5NeBJy6pg==} engines: {node: ^14.18.0 || >=16.0.0} diff --git a/web/public/logo.png b/web/public/logo.png deleted file mode 100644 index 6ffb3b8..0000000 Binary files a/web/public/logo.png and /dev/null differ diff --git a/web/public/logo512.png b/web/public/logo512.png deleted file mode 100644 index 1e8a318..0000000 Binary files a/web/public/logo512.png and /dev/null differ diff --git a/web/src/components/alerts/NotFound.tsx b/web/src/components/alerts/NotFound.tsx index 21a9112..8d3fb84 100644 --- a/web/src/components/alerts/NotFound.tsx +++ b/web/src/components/alerts/NotFound.tsx @@ -4,20 +4,22 @@ */ import { Link } from "react-router-dom"; -import logo from "@app/logo.png"; +import { ReactComponent as Logo } from "@app/logo.svg"; export const NotFound = () => { return (
-
Logo
+
+ +

- Oops, looks like there was a little too much brr! + Oops, looks like there was a little too much brr!

In case you think this a bug rather than too much brr,

- feel free to report this to our + feel free to report this to our {" "} { href="https://github.com/autobrr/autobrr" className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-sky-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100" > - GitHub page + GitHub page {" or to "} { href="https://discord.gg/WQ2eUycxyT" className="text-gray-700 dark:text-gray-200 underline font-semibold underline-offset-2 decoration-purple-500 hover:decoration-2 hover:text-black hover:dark:text-gray-100" > - our official Discord channel + our official Discord channel - . + .

- Otherwise, let us help you to get you back on track for more brr! + Otherwise, let us help you to get you back on track for more brr!

diff --git a/web/src/logo.png b/web/src/logo.png deleted file mode 100644 index 6ffb3b8..0000000 Binary files a/web/src/logo.png and /dev/null differ diff --git a/web/public/logo.svg b/web/src/logo.svg similarity index 100% rename from web/public/logo.svg rename to web/src/logo.svg diff --git a/web/src/screens/Base.tsx b/web/src/screens/Base.tsx index 97a738c..3372a94 100644 --- a/web/src/screens/Base.tsx +++ b/web/src/screens/Base.tsx @@ -12,7 +12,7 @@ import { useMutation, useQuery } from "@tanstack/react-query"; import toast from "react-hot-toast"; import { AuthContext } from "@utils/Context"; -import logo from "@app/logo.png"; +import { ReactComponent as Logo } from "@app/logo.svg"; import { APIClient } from "@api/APIClient"; import Toast from "@components/notifications/Toast"; import { classNames } from "@utils"; @@ -70,16 +70,7 @@ export default function Base() {
- Logo - Logo +
diff --git a/web/src/screens/auth/login.tsx b/web/src/screens/auth/login.tsx index 448b5a2..5cf8046 100644 --- a/web/src/screens/auth/login.tsx +++ b/web/src/screens/auth/login.tsx @@ -10,7 +10,7 @@ import { useMutation } from "@tanstack/react-query"; import toast from "react-hot-toast"; import { Tooltip } from "react-tooltip"; -import logo from "@app/logo.png"; +import { ReactComponent as Logo } from "@app/logo.svg"; import { APIClient } from "@api/APIClient"; import { AuthContext } from "@utils/Context"; import { PasswordInput, TextInput } from "@components/inputs/text"; @@ -64,7 +64,7 @@ export const Login = () => { return (
- logo +

autobrr

diff --git a/web/src/screens/auth/onboarding.tsx b/web/src/screens/auth/onboarding.tsx index 22cc481..83ec37d 100644 --- a/web/src/screens/auth/onboarding.tsx +++ b/web/src/screens/auth/onboarding.tsx @@ -9,7 +9,7 @@ import { useNavigate } from "react-router-dom"; import { APIClient } from "@api/APIClient"; import { TextField, PasswordField } from "@components/inputs"; -import logo from "@app/logo.png"; +import { ReactComponent as Logo } from "@app/logo.svg"; interface InputValues { username: string; @@ -46,7 +46,7 @@ export const Onboarding = () => { return (
- logo +

autobrr

diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts index 151aa68..b1f45c7 100644 --- a/web/src/vite-env.d.ts +++ b/web/src/vite-env.d.ts @@ -1 +1,2 @@ -/// \ No newline at end of file +/// +/// diff --git a/web/vite.config.ts b/web/vite.config.ts index 0407f8a..811251a 100644 --- a/web/vite.config.ts +++ b/web/vite.config.ts @@ -3,6 +3,8 @@ import { fileURLToPath, URL } from "node:url"; import react from "@vitejs/plugin-react-swc"; import { VitePWA } from "vite-plugin-pwa"; import { defineConfig, loadEnv } from "vite"; +import svgr from "vite-plugin-svgr"; + // https://vitejs.dev/config/ export default ({ mode }: { mode: any }) => { // early load .env file @@ -11,20 +13,16 @@ export default ({ mode }: { mode: any }) => { return defineConfig({ base: "", - plugins: [react(), VitePWA({ + plugins: [react(), svgr(), VitePWA({ registerType: "autoUpdate", injectRegister: "inline", scope: "{{.BaseUrl}}", // strategies: "injectManifest", useCredentials: true, includeAssets: [ - "favicon.svg", - "favicon.ico", - "robots.txt", - "logo.png", - "apple-touch-icon-*.png", - "manifest.webmanifest", - "assets/**/*" + // looks inside "public" folder + // manifest's icons are automatic added + "favicon.ico" ], manifest: { name: "autobrr", @@ -33,31 +31,30 @@ export default ({ mode }: { mode: any }) => { theme_color: "#141415", background_color: "#141415", icons: [ - { - src: "logo.png", - sizes: "192x192", - type: "image/png" - }, { src: "logo192.png", sizes: "192x192", type: "image/png" }, { - src: "logo512.png", - sizes: "512x512", + src: "apple-touch-icon-iphone-60x60.png", + sizes: "60x60", type: "image/png" }, { - src: "logo512.png", - sizes: "512x512", - type: "image/png", - purpose: "any maskable" + src: "apple-touch-icon-ipad-76x76.png", + sizes: "76x76", + type: "image/png" }, { src: "apple-touch-icon-iphone-retina-120x120.png", sizes: "120x120", type: "image/png" + }, + { + src: "apple-touch-icon-ipad-retina-152x152.png", + sizes: "152x152", + type: "image/png" } ], start_url: "{{.BaseUrl}}", @@ -65,7 +62,8 @@ export default ({ mode }: { mode: any }) => { display: "standalone" }, workbox: { - globPatterns: ["**/*.{js,css,html,svg}"], + // looks inside "dist" folder + globPatterns: ["**/*.{js,css,html,svg,woff2}"], sourcemap: true, navigateFallbackDenylist: [/^\/api/] }