diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..d330a4c --- /dev/null +++ b/.editorconfig @@ -0,0 +1,17 @@ +# http://editorconfig.org +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true + +[*.md] +trim_trailing_whitespace = false + +[Makefile] +indent_style = tab +indent_size = 4 diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml new file mode 100644 index 0000000..5fb2562 --- /dev/null +++ b/.github/workflows/ci.yml @@ -0,0 +1,59 @@ +name: Deploy tweaks to GitHub Pages + +on: + push: + branches: ['main'] + + # Allows you to run this workflow manually from the Actions tab + workflow_dispatch: + +# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages +permissions: + contents: write + pages: write + id-token: write + +# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. +# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. +concurrency: + group: 'pages' + cancel-in-progress: false + +jobs: + build: + runs-on: ubuntu-latest + steps: + - name: Checkout + uses: actions/checkout@v4 + + - uses: oven-sh/setup-bun@v1 + with: + bun-version: latest + + - run: bun ci + + - name: Validate Tweaks + run: bun test + + - run: bun run build + + - name: Setup Pages + uses: actions/configure-pages@v4 + + - name: Upload artifact + uses: actions/upload-pages-artifact@v3 + with: + path: './dist' + + deploy: + needs: build + environment: + name: github-pages + url: ${{ steps.deployment.outputs.page_url }} + runs-on: ubuntu-latest + steps: + - name: Setup Pages + uses: actions/configure-pages@v4 + - name: Deploy to GitHub Pages + id: deployment + uses: actions/deploy-pages@v4 diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..c09d625 --- /dev/null +++ b/.gitignore @@ -0,0 +1,8 @@ +node_modules/ +tweaks/schema.json +tweaks/tweaks.json +tweaks/*.md +# Ignore any sub directories under tweaks +tweaks/*/ +dist/ +*.py diff --git a/.postcssrc.json b/.postcssrc.json new file mode 100644 index 0000000..9ac0be0 --- /dev/null +++ b/.postcssrc.json @@ -0,0 +1,8 @@ +{ + "plugins": { + "autoprefixer": {}, + "tailwindcss/nesting": {}, + "tailwindcss": {}, + "cssnano": {} + } +} diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..b088170 --- /dev/null +++ b/.prettierrc @@ -0,0 +1,7 @@ +{ + "trailingComma": "es5", + "semi": true, + "singleQuote": true, + "editorconfig": true, + "printWidth": 120 +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..509f1b3 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,23 @@ +{ + "css.customData": [".vscode/tailwind.json"], + "nixEnvSelector.suggestion": false, + "editor.detectIndentation": false, + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true, + "editor.codeActionsOnSave": ["source.addMissingImports", "source.fixAll.eslint"], + "[nix]": { + "editor.defaultFormatter": "jnoortheen.nix-ide" + }, + "nix.enableLanguageServer": true, + "nix.serverPath": "nixd", + "[toml]": { + "editor.defaultFormatter": "tamasfe.even-better-toml" + }, + "[rust]": { + "editor.defaultFormatter": "rust-lang.rust-analyzer" + }, + "nixEnvSelector.nixFile": "${workspaceFolder}/shell.nix", + "nixEnvSelector.args": "--impure", + "tailwindCSS.suggestions": true, + "tailwindCSS.experimental.classRegex": ["className: '(.*)'"] +} diff --git a/.vscode/tailwind.json b/.vscode/tailwind.json new file mode 100644 index 0000000..96a1f57 --- /dev/null +++ b/.vscode/tailwind.json @@ -0,0 +1,55 @@ +{ + "version": 1.1, + "atDirectives": [ + { + "name": "@tailwind", + "description": "Use the `@tailwind` directive to insert Tailwind's `base`, `components`, `utilities` and `screens` styles into your CSS.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#tailwind" + } + ] + }, + { + "name": "@apply", + "description": "Use the `@apply` directive to inline any existing utility classes into your own custom CSS. This is useful when you find a common utility pattern in your HTML that you’d like to extract to a new component.", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#apply" + } + ] + }, + { + "name": "@responsive", + "description": "You can generate responsive variants of your own classes by wrapping their definitions in the `@responsive` directive:\n```css\n@responsive {\n .alert {\n background-color: #E53E3E;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#responsive" + } + ] + }, + { + "name": "@screen", + "description": "The `@screen` directive allows you to create media queries that reference your breakpoints by **name** instead of duplicating their values in your own CSS:\n```css\n@screen sm {\n /* ... */\n}\n```\n…gets transformed into this:\n```css\n@media (min-width: 640px) {\n /* ... */\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#screen" + } + ] + }, + { + "name": "@variants", + "description": "Generate `hover`, `focus`, `active` and other **variants** of your own utilities by wrapping their definitions in the `@variants` directive:\n```css\n@variants hover, focus {\n .btn-brand {\n background-color: #3182CE;\n }\n}\n```\n", + "references": [ + { + "name": "Tailwind Documentation", + "url": "https://tailwindcss.com/docs/functions-and-directives#variants" + } + ] + } + ] +} diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..df09573 --- /dev/null +++ b/LICENSE @@ -0,0 +1,7 @@ +Copyright 2023 Rainbow Café + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..e9f5960 --- /dev/null +++ b/Makefile @@ -0,0 +1,6 @@ +develop: +ifeq ($(shell printenv IN_NIX_SHELL),) + @nix develop --impure --command $(shell printenv SHELL) +else + $(info You are already running in a nix shell!) +endif diff --git a/README.md b/README.md new file mode 100644 index 0000000..d8bfb51 --- /dev/null +++ b/README.md @@ -0,0 +1,8 @@ +## Protontweaks UI + +> [!IMPORTANT] +> This is the Protontweaks UI repository, you can find its sister repositories at the following links! + +- [CLI](https://github.com/rain-cafe/protontweaks) +- [App](https://github.com/rain-cafe/protontweaks-ui) _you are here_ +- [Database](https://github.com/rain-cafe/protontweaks-db) diff --git a/bun.lockb b/bun.lockb new file mode 100755 index 0000000..75186a9 Binary files /dev/null and b/bun.lockb differ diff --git a/flake.lock b/flake.lock new file mode 100644 index 0000000..921dc8d --- /dev/null +++ b/flake.lock @@ -0,0 +1,27 @@ +{ + "nodes": { + "nixpkgs": { + "locked": { + "lastModified": 1709479366, + "narHash": "sha256-n6F0n8UV6lnTZbYPl1A9q1BS0p4hduAv1mGAP17CVd0=", + "owner": "NixOS", + "repo": "nixpkgs", + "rev": "b8697e57f10292a6165a20f03d2f42920dfaf973", + "type": "github" + }, + "original": { + "owner": "NixOS", + "ref": "nixos-unstable", + "repo": "nixpkgs", + "type": "github" + } + }, + "root": { + "inputs": { + "nixpkgs": "nixpkgs" + } + } + }, + "root": "root", + "version": 7 +} diff --git a/flake.nix b/flake.nix new file mode 100644 index 0000000..c001c22 --- /dev/null +++ b/flake.nix @@ -0,0 +1,15 @@ +{ + description = "Orchestrator"; + + inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable"; + + outputs = { nixpkgs, ... }: let + forAllSystems = nixpkgs.lib.genAttrs nixpkgs.lib.systems.flakeExposed; + in { + # Devshell for bootstrapping; acessible via 'nix develop' or 'nix-shell' (legacy) + devShells = forAllSystems (systems: + let pkgs = nixpkgs.legacyPackages.${systems}; + in import ./shell.nix { inherit pkgs; } + ); + }; +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..0d76cee --- /dev/null +++ b/index.html @@ -0,0 +1,28 @@ + + + + + + + + + Protontweaks + + + + + +
+ + + + diff --git a/nixpkgs.nix b/nixpkgs.nix new file mode 100644 index 0000000..e6e07cb --- /dev/null +++ b/nixpkgs.nix @@ -0,0 +1,8 @@ +# A nixpkgs instance that is grabbed from the pinned nixpkgs commit in the lock file +# Useful to avoid using channels when using legacy nix commands +let lock = (builtins.fromJSON (builtins.readFile ./flake.lock)).nodes.nixpkgs.locked; +in +import (fetchTarball { + url = "https://github.com/nixos/nixpkgs/archive/${lock.rev}.tar.gz"; + sha256 = lock.narHash; +}) diff --git a/package.json b/package.json new file mode 100644 index 0000000..795fbc0 --- /dev/null +++ b/package.json @@ -0,0 +1,33 @@ +{ + "name": "protontweaks-db", + "type": "module", + "scripts": { + "ci": "bun install --frozen-lockfile", + "dev": "vite dev", + "build": "vite build" + }, + "dependencies": { + "@rain-cafe/js-utils": "^1.0.0", + "@rain-cafe/react-utils": "^2.3.0", + "@tanstack/react-query": "^5.24.8", + "clsx": "^2.1.0", + "lucide-react": "^0.344.0", + "react": "^18.2.0", + "react-dom": "^18.2.0", + "react-router-dom": "^6.22.2", + "sonner": "^1.4.3", + "tailwind-merge": "^2.2.1" + }, + "devDependencies": { + "@types/bun": "^1.0.8", + "@types/react": "^18.2.62", + "@types/react-dom": "^18.2.19", + "@vitejs/plugin-react": "^4.2.1", + "autoprefixer": "^10.4.18", + "cssnano": "^6.0.5", + "postcss": "^8.4.35", + "tailwindcss": "^3.4.1", + "vite": "^5.1.5", + "vitest": "^1.3.1" + } +} diff --git a/shell.nix b/shell.nix new file mode 100644 index 0000000..0a5bd48 --- /dev/null +++ b/shell.nix @@ -0,0 +1,15 @@ +# Shell for bootstrapping flake-enabled nix and home-manager +# Enter it through 'nix develop' or (legacy) 'nix-shell' + +{ pkgs ? (import ./nixpkgs.nix) { } }: { + default = pkgs.mkShell { + # Enable experimental features without having to specify the argument + NIX_CONFIG = "experimental-features = nix-command flakes"; + buildInputs = with pkgs; [ + nixpkgs-fmt + nixd + bun + nodejs_20 + ]; + }; +} diff --git a/src/App.tsx b/src/App.tsx new file mode 100644 index 0000000..5e17693 --- /dev/null +++ b/src/App.tsx @@ -0,0 +1,35 @@ +import { useState, type FC } from 'react'; +import { Outlet, useNavigate } from 'react-router-dom'; +import { AppHeader } from './components/AppHeader'; +import { SearchContext } from './context/search'; +import { Toaster } from 'sonner'; +import { AppFooter } from './components/AppFooter'; + +export const Component: FC = () => { + const navigate = useNavigate(); + const [search, setSearch] = useState(''); + + return ( + + { + navigate('/'); + setSearch(value); + }} + /> +
+ + +
+ + + ); +}; diff --git a/src/components/AppFooter.tsx b/src/components/AppFooter.tsx new file mode 100644 index 0000000..0a9980a --- /dev/null +++ b/src/components/AppFooter.tsx @@ -0,0 +1,47 @@ +import { type FC } from 'react'; +import { Link } from 'react-router-dom'; +import { Bug, Code2 } from 'lucide-react'; +import { Button } from './Button'; + +export const AppFooter: FC = () => { + return ( +
+
+
+ Built with ❤️ by the{' '} + + Rainbow Cafe + {' '} + Team~ +
+
+ This site uses data from Steam as well as data provided by{' '} + + SteamDB + {' '} + via{' '} + + Algolia + + . +
+
+ This site has no affiliation with Valve Software. This site uses data from All game images and logos are + property of their respective owners. +
+
+
+ + +
+
+ ); +}; diff --git a/src/components/AppHeader.tsx b/src/components/AppHeader.tsx new file mode 100644 index 0000000..ac16ff7 --- /dev/null +++ b/src/components/AppHeader.tsx @@ -0,0 +1,77 @@ +import { useEffect, type FC, useState } from 'react'; +import { useSearch } from '../context/search'; +import { Link, useParams } from 'react-router-dom'; +import { ArrowUp, Edit } from 'lucide-react'; +import { cn } from '../utils/cn'; +import { Button } from './Button'; + +type Props = { + onChange?: (value: string) => void; +}; + +export const AppHeader: FC = ({ onChange }) => { + const search = useSearch(); + const [sticky, setSticky] = useState(false); + const { id } = useParams(); + + useEffect(() => { + const listener = () => { + setSticky(window.scrollY > 0); + }; + + window.addEventListener('scroll', listener, { passive: true }); + + return () => { + window.removeEventListener('scroll', listener); + }; + }); + + return ( + <> +
+
+ + Protontweaks + +
+ onChange?.(e.target.value)} + /> + +
+
+ + + ); +}; diff --git a/src/components/AppImage.tsx b/src/components/AppImage.tsx new file mode 100644 index 0000000..2b5fe70 --- /dev/null +++ b/src/components/AppImage.tsx @@ -0,0 +1,25 @@ +import { type FC } from 'react'; +import { Link } from 'react-router-dom'; +import { cn } from '../utils/cn'; + +type Props = { + className?: string; + id: string; + to?: string; +}; + +export const AppImage: FC = ({ className, id, to }) => { + return to ? ( + + + + ) : ( + + ); +}; diff --git a/src/components/Button.tsx b/src/components/Button.tsx new file mode 100644 index 0000000..47ccd51 --- /dev/null +++ b/src/components/Button.tsx @@ -0,0 +1,71 @@ +import { type ComponentProps, type FC, type ReactNode } from 'react'; +import { Link } from 'react-router-dom'; +import { cn } from '../utils/cn'; + +type SharedProps = { + children?: ReactNode; + className?: string; +}; + +type LinkProps = SharedProps & { + to: string; + target?: ComponentProps<'a'>['target']; +}; + +type ButtonProps = SharedProps & { + onClick?: () => void; +}; + +type Props = LinkProps | ButtonProps; + +const isLink = (props: Props): props is LinkProps => { + return Object.hasOwn(props, 'to'); +}; + +export const Button: FC = (props) => { + if (isLink(props)) { + if (props.to.startsWith('#')) { + return ( +