dogpawhat.tech / preloading-example
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

biome

Ciarán Curley c75ff84a f00b64f7

+437 -282
+33 -9
.vscode/settings.json
··· 1 1 { 2 - "files.watcherExclude": { 3 - "**/routeTree.gen.ts": true 4 - }, 5 - "search.exclude": { 6 - "**/routeTree.gen.ts": true 7 - }, 8 - "files.readonlyInclude": { 9 - "**/routeTree.gen.ts": true 10 - } 2 + "files.watcherExclude": { 3 + "**/routeTree.gen.ts": true 4 + }, 5 + "search.exclude": { 6 + "**/routeTree.gen.ts": true 7 + }, 8 + "files.readonlyInclude": { 9 + "**/routeTree.gen.ts": true 10 + }, 11 + "[javascript]": { 12 + "editor.defaultFormatter": "biomejs.biome" 13 + }, 14 + "[javascriptreact]": { 15 + "editor.defaultFormatter": "biomejs.biome" 16 + }, 17 + "[typescript]": { 18 + "editor.defaultFormatter": "biomejs.biome" 19 + }, 20 + "[typescriptreact]": { 21 + "editor.defaultFormatter": "biomejs.biome" 22 + }, 23 + "[json]": { 24 + "editor.defaultFormatter": "biomejs.biome" 25 + }, 26 + "[jsonc]": { 27 + "editor.defaultFormatter": "biomejs.biome" 28 + }, 29 + "[css]": { 30 + "editor.defaultFormatter": "biomejs.biome" 31 + }, 32 + "editor.codeActionsOnSave": { 33 + "source.organizeImports.biome": "explicit" 34 + } 11 35 }
+31
biome.json
··· 1 + { 2 + "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json", 3 + "vcs": { 4 + "enabled": false, 5 + "clientKind": "git", 6 + "useIgnoreFile": false 7 + }, 8 + "files": { 9 + "ignoreUnknown": false, 10 + "ignore": ["src/routeTree.gen.ts"], 11 + "include": ["src/*", ".vscode/*", "index.html", "vite.config.js"] 12 + }, 13 + "formatter": { 14 + "enabled": true, 15 + "indentStyle": "tab" 16 + }, 17 + "organizeImports": { 18 + "enabled": true 19 + }, 20 + "linter": { 21 + "enabled": true,pn 22 + "rules": { 23 + "recommended": true 24 + } 25 + }, 26 + "javascript": { 27 + "formatter": { 28 + "quoteStyle": "double" 29 + } 30 + } 31 + }
+5 -5
components.json
··· 11 11 "prefix": "" 12 12 }, 13 13 "aliases": { 14 - "components": "@/components", 15 - "utils": "@/lib/utils", 16 - "ui": "@/components/ui", 17 - "lib": "@/lib", 18 - "hooks": "@/hooks" 14 + "components": "~/components", 15 + "utils": "~/lib/utils", 16 + "ui": "~/components/ui", 17 + "lib": "~/lib", 18 + "hooks": "~/hooks" 19 19 }, 20 20 "iconLibrary": "lucide" 21 21 }
+6 -1
package.json
··· 7 7 "start": "vite --port 3000", 8 8 "build": "vite build && tsc", 9 9 "serve": "vite preview", 10 - "test": "vitest run" 10 + "test": "vitest run", 11 + "format": "biome format", 12 + "lint": "biome lint", 13 + "check": "biome check" 11 14 }, 12 15 "dependencies": { 13 16 "@tailwindcss/vite": "^4.0.6", ··· 26 29 "tailwindcss-animate": "^1.0.7" 27 30 }, 28 31 "devDependencies": { 32 + "@biomejs/biome": "1.9.4", 29 33 "@testing-library/dom": "^10.4.0", 30 34 "@testing-library/react": "^16.2.0", 31 35 "@types/react": "^19.0.8", ··· 39 43 }, 40 44 "pnpm": { 41 45 "onlyBuiltDependencies": [ 46 + "@biomejs/biome", 42 47 "esbuild" 43 48 ] 44 49 }
+91
pnpm-lock.yaml
··· 51 51 specifier: ^1.0.7 52 52 version: 1.0.7(tailwindcss@4.1.5) 53 53 devDependencies: 54 + '@biomejs/biome': 55 + specifier: 1.9.4 56 + version: 1.9.4 54 57 '@testing-library/dom': 55 58 specifier: ^10.4.0 56 59 version: 10.4.0 ··· 185 188 '@babel/types@7.27.1': 186 189 resolution: {integrity: sha512-+EzkxvLNfiUeKMgy/3luqfsCWFRXLb7U6wNQTk60tovuckwB15B191tJWvpp4HjiQWdJkCxO3Wbvc6jlk3Xb2Q==} 187 190 engines: {node: '>=6.9.0'} 191 + 192 + '@biomejs/biome@1.9.4': 193 + resolution: {integrity: sha512-1rkd7G70+o9KkTn5KLmDYXihGoTaIGO9PIIN2ZB7UJxFrWw04CZHPYiMRjYsaDvVV7hP1dYNRLxSANLaBFGpog==} 194 + engines: {node: '>=14.21.3'} 195 + hasBin: true 196 + 197 + '@biomejs/cli-darwin-arm64@1.9.4': 198 + resolution: {integrity: sha512-bFBsPWrNvkdKrNCYeAp+xo2HecOGPAy9WyNyB/jKnnedgzl4W4Hb9ZMzYNbf8dMCGmUdSavlYHiR01QaYR58cw==} 199 + engines: {node: '>=14.21.3'} 200 + cpu: [arm64] 201 + os: [darwin] 202 + 203 + '@biomejs/cli-darwin-x64@1.9.4': 204 + resolution: {integrity: sha512-ngYBh/+bEedqkSevPVhLP4QfVPCpb+4BBe2p7Xs32dBgs7rh9nY2AIYUL6BgLw1JVXV8GlpKmb/hNiuIxfPfZg==} 205 + engines: {node: '>=14.21.3'} 206 + cpu: [x64] 207 + os: [darwin] 208 + 209 + '@biomejs/cli-linux-arm64-musl@1.9.4': 210 + resolution: {integrity: sha512-v665Ct9WCRjGa8+kTr0CzApU0+XXtRgwmzIf1SeKSGAv+2scAlW6JR5PMFo6FzqqZ64Po79cKODKf3/AAmECqA==} 211 + engines: {node: '>=14.21.3'} 212 + cpu: [arm64] 213 + os: [linux] 214 + 215 + '@biomejs/cli-linux-arm64@1.9.4': 216 + resolution: {integrity: sha512-fJIW0+LYujdjUgJJuwesP4EjIBl/N/TcOX3IvIHJQNsAqvV2CHIogsmA94BPG6jZATS4Hi+xv4SkBBQSt1N4/g==} 217 + engines: {node: '>=14.21.3'} 218 + cpu: [arm64] 219 + os: [linux] 220 + 221 + '@biomejs/cli-linux-x64-musl@1.9.4': 222 + resolution: {integrity: sha512-gEhi/jSBhZ2m6wjV530Yy8+fNqG8PAinM3oV7CyO+6c3CEh16Eizm21uHVsyVBEB6RIM8JHIl6AGYCv6Q6Q9Tg==} 223 + engines: {node: '>=14.21.3'} 224 + cpu: [x64] 225 + os: [linux] 226 + 227 + '@biomejs/cli-linux-x64@1.9.4': 228 + resolution: {integrity: sha512-lRCJv/Vi3Vlwmbd6K+oQ0KhLHMAysN8lXoCI7XeHlxaajk06u7G+UsFSO01NAs5iYuWKmVZjmiOzJ0OJmGsMwg==} 229 + engines: {node: '>=14.21.3'} 230 + cpu: [x64] 231 + os: [linux] 232 + 233 + '@biomejs/cli-win32-arm64@1.9.4': 234 + resolution: {integrity: sha512-tlbhLk+WXZmgwoIKwHIHEBZUwxml7bRJgk0X2sPyNR3S93cdRq6XulAZRQJ17FYGGzWne0fgrXBKpl7l4M87Hg==} 235 + engines: {node: '>=14.21.3'} 236 + cpu: [arm64] 237 + os: [win32] 238 + 239 + '@biomejs/cli-win32-x64@1.9.4': 240 + resolution: {integrity: sha512-8Y5wMhVIPaWe6jw2H+KlEm4wP/f7EW3810ZLmDlrEEy5KvBsb9ECEfu/kMWD484ijfQ8+nIi0giMgu9g1UAuuA==} 241 + engines: {node: '>=14.21.3'} 242 + cpu: [x64] 243 + os: [win32] 188 244 189 245 '@csstools/color-helpers@5.0.2': 190 246 resolution: {integrity: sha512-JqWH1vsgdGcw2RR6VliXXdA0/59LttzlU8UlRT/iUUsEeWfYq8I+K0yhihEUTTHLRm1EXvpsCx3083EU15ecsA==} ··· 1591 1647 dependencies: 1592 1648 '@babel/helper-string-parser': 7.27.1 1593 1649 '@babel/helper-validator-identifier': 7.27.1 1650 + 1651 + '@biomejs/biome@1.9.4': 1652 + optionalDependencies: 1653 + '@biomejs/cli-darwin-arm64': 1.9.4 1654 + '@biomejs/cli-darwin-x64': 1.9.4 1655 + '@biomejs/cli-linux-arm64': 1.9.4 1656 + '@biomejs/cli-linux-arm64-musl': 1.9.4 1657 + '@biomejs/cli-linux-x64': 1.9.4 1658 + '@biomejs/cli-linux-x64-musl': 1.9.4 1659 + '@biomejs/cli-win32-arm64': 1.9.4 1660 + '@biomejs/cli-win32-x64': 1.9.4 1661 + 1662 + '@biomejs/cli-darwin-arm64@1.9.4': 1663 + optional: true 1664 + 1665 + '@biomejs/cli-darwin-x64@1.9.4': 1666 + optional: true 1667 + 1668 + '@biomejs/cli-linux-arm64-musl@1.9.4': 1669 + optional: true 1670 + 1671 + '@biomejs/cli-linux-arm64@1.9.4': 1672 + optional: true 1673 + 1674 + '@biomejs/cli-linux-x64-musl@1.9.4': 1675 + optional: true 1676 + 1677 + '@biomejs/cli-linux-x64@1.9.4': 1678 + optional: true 1679 + 1680 + '@biomejs/cli-win32-arm64@1.9.4': 1681 + optional: true 1682 + 1683 + '@biomejs/cli-win32-x64@1.9.4': 1684 + optional: true 1594 1685 1595 1686 '@csstools/color-helpers@5.0.2': {} 1596 1687
+13 -13
src/components/Header.tsx
··· 1 - import { Link } from '@tanstack/react-router' 1 + import { Link } from "@tanstack/react-router"; 2 2 3 3 export default function Header() { 4 - return ( 5 - <header className="p-2 flex gap-2 bg-white text-black justify-between"> 6 - <nav className="flex flex-row"> 7 - <div className="px-2 font-bold"> 8 - <Link to="/">Home</Link> 9 - </div> 4 + return ( 5 + <header className="p-2 flex gap-2 bg-white text-black justify-between"> 6 + <nav className="flex flex-row"> 7 + <div className="px-2 font-bold"> 8 + <Link to="/">Home</Link> 9 + </div> 10 10 11 - <div className="px-2 font-bold"> 12 - <Link to="/demo/tanstack-query">TanStack Query</Link> 13 - </div> 14 - </nav> 15 - </header> 16 - ) 11 + <div className="px-2 font-bold"> 12 + <Link to="/demo/tanstack-query">TanStack Query</Link> 13 + </div> 14 + </nav> 15 + </header> 16 + ); 17 17 }
+2 -2
src/integrations/tanstack-query/layout.tsx
··· 1 - import { ReactQueryDevtools } from '@tanstack/react-query-devtools' 1 + import { ReactQueryDevtools } from "@tanstack/react-query-devtools"; 2 2 3 3 export default function LayoutAddition() { 4 - return <ReactQueryDevtools buttonPosition="bottom-right" /> 4 + return <ReactQueryDevtools buttonPosition="bottom-right" />; 5 5 }
+8 -8
src/integrations/tanstack-query/root-provider.tsx
··· 1 - import { QueryClient, QueryClientProvider } from '@tanstack/react-query' 1 + import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 2 2 3 - const queryClient = new QueryClient() 3 + const queryClient = new QueryClient(); 4 4 5 5 export function getContext() { 6 - return { 7 - queryClient, 8 - } 6 + return { 7 + queryClient, 8 + }; 9 9 } 10 10 11 11 export function Provider({ children }: { children: React.ReactNode }) { 12 - return ( 13 - <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> 14 - ) 12 + return ( 13 + <QueryClientProvider client={queryClient}>{children}</QueryClientProvider> 14 + ); 15 15 }
+3 -3
src/lib/utils.ts
··· 1 - import { clsx, type ClassValue } from "clsx" 2 - import { twMerge } from "tailwind-merge" 1 + import { type ClassValue, clsx } from "clsx"; 2 + import { twMerge } from "tailwind-merge"; 3 3 4 4 export function cn(...inputs: ClassValue[]) { 5 - return twMerge(clsx(inputs)) 5 + return twMerge(clsx(inputs)); 6 6 }
+30 -30
src/main.tsx
··· 1 - import { StrictMode } from 'react' 2 - import ReactDOM from 'react-dom/client' 3 - import { RouterProvider, createRouter } from '@tanstack/react-router' 1 + import { RouterProvider, createRouter } from "@tanstack/react-router"; 2 + import { StrictMode } from "react"; 3 + import ReactDOM from "react-dom/client"; 4 4 5 - import * as TanstackQuery from './integrations/tanstack-query/root-provider' 5 + import * as TanstackQuery from "./integrations/tanstack-query/root-provider"; 6 6 7 7 // Import the generated route tree 8 - import { routeTree } from './routeTree.gen' 8 + import { routeTree } from "./routeTree.gen"; 9 9 10 - import './styles.css' 11 - import reportWebVitals from './reportWebVitals.ts' 10 + import "./styles.css"; 11 + import reportWebVitals from "./reportWebVitals.ts"; 12 12 13 13 // Create a new router instance 14 14 const router = createRouter({ 15 - routeTree, 16 - context: { 17 - ...TanstackQuery.getContext(), 18 - }, 19 - defaultPreload: 'intent', 20 - scrollRestoration: true, 21 - defaultStructuralSharing: true, 22 - defaultPreloadStaleTime: 0, 23 - }) 15 + routeTree, 16 + context: { 17 + ...TanstackQuery.getContext(), 18 + }, 19 + defaultPreload: "intent", 20 + scrollRestoration: true, 21 + defaultStructuralSharing: true, 22 + defaultPreloadStaleTime: 0, 23 + }); 24 24 25 25 // Register the router instance for type safety 26 - declare module '@tanstack/react-router' { 27 - interface Register { 28 - router: typeof router 29 - } 26 + declare module "@tanstack/react-router" { 27 + interface Register { 28 + router: typeof router; 29 + } 30 30 } 31 31 32 32 // Render the app 33 - const rootElement = document.getElementById('app') 33 + const rootElement = document.getElementById("app"); 34 34 if (rootElement && !rootElement.innerHTML) { 35 - const root = ReactDOM.createRoot(rootElement) 36 - root.render( 37 - <StrictMode> 38 - <TanstackQuery.Provider> 39 - <RouterProvider router={router} /> 40 - </TanstackQuery.Provider> 41 - </StrictMode>, 42 - ) 35 + const root = ReactDOM.createRoot(rootElement); 36 + root.render( 37 + <StrictMode> 38 + <TanstackQuery.Provider> 39 + <RouterProvider router={router} /> 40 + </TanstackQuery.Provider> 41 + </StrictMode>, 42 + ); 43 43 } 44 44 45 45 // If you want to start measuring performance in your app, pass a function 46 46 // to log results (for example: reportWebVitals(console.log)) 47 47 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals 48 - reportWebVitals() 48 + reportWebVitals();
+11 -11
src/reportWebVitals.ts
··· 1 1 const reportWebVitals = (onPerfEntry?: () => void) => { 2 - if (onPerfEntry && onPerfEntry instanceof Function) { 3 - import('web-vitals').then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { 4 - onCLS(onPerfEntry) 5 - onINP(onPerfEntry) 6 - onFCP(onPerfEntry) 7 - onLCP(onPerfEntry) 8 - onTTFB(onPerfEntry) 9 - }) 10 - } 11 - } 2 + if (onPerfEntry && onPerfEntry instanceof Function) { 3 + import("web-vitals").then(({ onCLS, onINP, onFCP, onLCP, onTTFB }) => { 4 + onCLS(onPerfEntry); 5 + onINP(onPerfEntry); 6 + onFCP(onPerfEntry); 7 + onLCP(onPerfEntry); 8 + onTTFB(onPerfEntry); 9 + }); 10 + } 11 + }; 12 12 13 - export default reportWebVitals 13 + export default reportWebVitals;
+15 -15
src/routes/__root.tsx
··· 1 - import { Outlet, createRootRouteWithContext } from '@tanstack/react-router' 2 - import { TanStackRouterDevtools } from '@tanstack/react-router-devtools' 1 + import { Outlet, createRootRouteWithContext } from "@tanstack/react-router"; 2 + import { TanStackRouterDevtools } from "@tanstack/react-router-devtools"; 3 3 4 - import Header from '../components/Header' 4 + import Header from "../components/Header"; 5 5 6 - import TanstackQueryLayout from '../integrations/tanstack-query/layout' 6 + import TanstackQueryLayout from "../integrations/tanstack-query/layout"; 7 7 8 - import type { QueryClient } from '@tanstack/react-query' 8 + import type { QueryClient } from "@tanstack/react-query"; 9 9 10 10 interface MyRouterContext { 11 - queryClient: QueryClient 11 + queryClient: QueryClient; 12 12 } 13 13 14 14 export const Route = createRootRouteWithContext<MyRouterContext>()({ 15 - component: () => ( 16 - <> 17 - <Header /> 15 + component: () => ( 16 + <> 17 + <Header /> 18 18 19 - <Outlet /> 20 - <TanStackRouterDevtools /> 19 + <Outlet /> 20 + <TanStackRouterDevtools /> 21 21 22 - <TanstackQueryLayout /> 23 - </> 24 - ), 25 - }) 22 + <TanstackQueryLayout /> 23 + </> 24 + ), 25 + });
+21 -21
src/routes/demo.tanstack-query.tsx
··· 1 - import { createFileRoute } from '@tanstack/react-router' 2 - import { useQuery } from '@tanstack/react-query' 1 + import { useQuery } from "@tanstack/react-query"; 2 + import { createFileRoute } from "@tanstack/react-router"; 3 3 4 - export const Route = createFileRoute('/demo/tanstack-query')({ 5 - component: TanStackQueryDemo, 6 - }) 4 + export const Route = createFileRoute("/demo/tanstack-query")({ 5 + component: TanStackQueryDemo, 6 + }); 7 7 8 8 function TanStackQueryDemo() { 9 - const { data } = useQuery({ 10 - queryKey: ['people'], 11 - queryFn: () => 12 - Promise.resolve([{ name: 'John Doe' }, { name: 'Jane Doe' }]), 13 - initialData: [], 14 - }) 9 + const { data } = useQuery({ 10 + queryKey: ["people"], 11 + queryFn: () => 12 + Promise.resolve([{ name: "John Doe" }, { name: "Jane Doe" }]), 13 + initialData: [], 14 + }); 15 15 16 - return ( 17 - <div className="p-4"> 18 - <h1 className="text-2xl mb-4">People list from Swapi</h1> 19 - <ul> 20 - {data.map((person) => ( 21 - <li key={person.name}>{person.name}</li> 22 - ))} 23 - </ul> 24 - </div> 25 - ) 16 + return ( 17 + <div className="p-4"> 18 + <h1 className="text-2xl mb-4">People list from Swapi</h1> 19 + <ul> 20 + {data.map((person) => ( 21 + <li key={person.name}>{person.name}</li> 22 + ))} 23 + </ul> 24 + </div> 25 + ); 26 26 }
+35 -35
src/routes/index.tsx
··· 1 - import { createFileRoute } from '@tanstack/react-router' 2 - import logo from '../logo.svg' 1 + import { createFileRoute } from "@tanstack/react-router"; 2 + import logo from "../logo.svg"; 3 3 4 - export const Route = createFileRoute('/')({ 5 - component: App, 6 - }) 4 + export const Route = createFileRoute("/")({ 5 + component: App, 6 + }); 7 7 8 8 function App() { 9 - return ( 10 - <div className="text-center"> 11 - <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]"> 12 - <img 13 - src={logo} 14 - className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]" 15 - alt="logo" 16 - /> 17 - <p> 18 - Edit <code>src/routes/index.tsx</code> and save to reload. 19 - </p> 20 - <a 21 - className="text-[#61dafb] hover:underline" 22 - href="https://reactjs.org" 23 - target="_blank" 24 - rel="noopener noreferrer" 25 - > 26 - Learn React 27 - </a> 28 - <a 29 - className="text-[#61dafb] hover:underline" 30 - href="https://tanstack.com" 31 - target="_blank" 32 - rel="noopener noreferrer" 33 - > 34 - Learn TanStack 35 - </a> 36 - </header> 37 - </div> 38 - ) 9 + return ( 10 + <div className="text-center"> 11 + <header className="min-h-screen flex flex-col items-center justify-center bg-[#282c34] text-white text-[calc(10px+2vmin)]"> 12 + <img 13 + src={logo} 14 + className="h-[40vmin] pointer-events-none animate-[spin_20s_linear_infinite]" 15 + alt="logo" 16 + /> 17 + <p> 18 + Edit <code>src/routes/index.tsx</code> and save to reload. 19 + </p> 20 + <a 21 + className="text-[#61dafb] hover:underline" 22 + href="https://reactjs.org" 23 + target="_blank" 24 + rel="noopener noreferrer" 25 + > 26 + Learn React 27 + </a> 28 + <a 29 + className="text-[#61dafb] hover:underline" 30 + href="https://tanstack.com" 31 + target="_blank" 32 + rel="noopener noreferrer" 33 + > 34 + Learn TanStack 35 + </a> 36 + </header> 37 + </div> 38 + ); 39 39 }
+116 -116
src/styles.css
··· 1 - @import 'tailwindcss'; 1 + @import "tailwindcss"; 2 2 3 3 @plugin "tailwindcss-animate"; 4 4 5 5 @custom-variant dark (&:is(.dark *)); 6 6 7 7 body { 8 - @apply m-0; 9 - font-family: 10 - -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 11 - 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; 12 - -webkit-font-smoothing: antialiased; 13 - -moz-osx-font-smoothing: grayscale; 8 + @apply m-0; 9 + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 10 + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 11 + sans-serif; 12 + -webkit-font-smoothing: antialiased; 13 + -moz-osx-font-smoothing: grayscale; 14 14 } 15 15 16 16 code { 17 - font-family: 18 - source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; 17 + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 18 + monospace; 19 19 } 20 20 21 21 :root { 22 - --background: oklch(1 0 0); 23 - --foreground: oklch(0.141 0.005 285.823); 24 - --card: oklch(1 0 0); 25 - --card-foreground: oklch(0.141 0.005 285.823); 26 - --popover: oklch(1 0 0); 27 - --popover-foreground: oklch(0.141 0.005 285.823); 28 - --primary: oklch(0.21 0.006 285.885); 29 - --primary-foreground: oklch(0.985 0 0); 30 - --secondary: oklch(0.967 0.001 286.375); 31 - --secondary-foreground: oklch(0.21 0.006 285.885); 32 - --muted: oklch(0.967 0.001 286.375); 33 - --muted-foreground: oklch(0.552 0.016 285.938); 34 - --accent: oklch(0.967 0.001 286.375); 35 - --accent-foreground: oklch(0.21 0.006 285.885); 36 - --destructive: oklch(0.577 0.245 27.325); 37 - --destructive-foreground: oklch(0.577 0.245 27.325); 38 - --border: oklch(0.92 0.004 286.32); 39 - --input: oklch(0.92 0.004 286.32); 40 - --ring: oklch(0.871 0.006 286.286); 41 - --chart-1: oklch(0.646 0.222 41.116); 42 - --chart-2: oklch(0.6 0.118 184.704); 43 - --chart-3: oklch(0.398 0.07 227.392); 44 - --chart-4: oklch(0.828 0.189 84.429); 45 - --chart-5: oklch(0.769 0.188 70.08); 46 - --radius: 0.625rem; 47 - --sidebar: oklch(0.985 0 0); 48 - --sidebar-foreground: oklch(0.141 0.005 285.823); 49 - --sidebar-primary: oklch(0.21 0.006 285.885); 50 - --sidebar-primary-foreground: oklch(0.985 0 0); 51 - --sidebar-accent: oklch(0.967 0.001 286.375); 52 - --sidebar-accent-foreground: oklch(0.21 0.006 285.885); 53 - --sidebar-border: oklch(0.92 0.004 286.32); 54 - --sidebar-ring: oklch(0.871 0.006 286.286); 22 + --background: oklch(1 0 0); 23 + --foreground: oklch(0.141 0.005 285.823); 24 + --card: oklch(1 0 0); 25 + --card-foreground: oklch(0.141 0.005 285.823); 26 + --popover: oklch(1 0 0); 27 + --popover-foreground: oklch(0.141 0.005 285.823); 28 + --primary: oklch(0.21 0.006 285.885); 29 + --primary-foreground: oklch(0.985 0 0); 30 + --secondary: oklch(0.967 0.001 286.375); 31 + --secondary-foreground: oklch(0.21 0.006 285.885); 32 + --muted: oklch(0.967 0.001 286.375); 33 + --muted-foreground: oklch(0.552 0.016 285.938); 34 + --accent: oklch(0.967 0.001 286.375); 35 + --accent-foreground: oklch(0.21 0.006 285.885); 36 + --destructive: oklch(0.577 0.245 27.325); 37 + --destructive-foreground: oklch(0.577 0.245 27.325); 38 + --border: oklch(0.92 0.004 286.32); 39 + --input: oklch(0.92 0.004 286.32); 40 + --ring: oklch(0.871 0.006 286.286); 41 + --chart-1: oklch(0.646 0.222 41.116); 42 + --chart-2: oklch(0.6 0.118 184.704); 43 + --chart-3: oklch(0.398 0.07 227.392); 44 + --chart-4: oklch(0.828 0.189 84.429); 45 + --chart-5: oklch(0.769 0.188 70.08); 46 + --radius: 0.625rem; 47 + --sidebar: oklch(0.985 0 0); 48 + --sidebar-foreground: oklch(0.141 0.005 285.823); 49 + --sidebar-primary: oklch(0.21 0.006 285.885); 50 + --sidebar-primary-foreground: oklch(0.985 0 0); 51 + --sidebar-accent: oklch(0.967 0.001 286.375); 52 + --sidebar-accent-foreground: oklch(0.21 0.006 285.885); 53 + --sidebar-border: oklch(0.92 0.004 286.32); 54 + --sidebar-ring: oklch(0.871 0.006 286.286); 55 55 } 56 56 57 57 .dark { 58 - --background: oklch(0.141 0.005 285.823); 59 - --foreground: oklch(0.985 0 0); 60 - --card: oklch(0.141 0.005 285.823); 61 - --card-foreground: oklch(0.985 0 0); 62 - --popover: oklch(0.141 0.005 285.823); 63 - --popover-foreground: oklch(0.985 0 0); 64 - --primary: oklch(0.985 0 0); 65 - --primary-foreground: oklch(0.21 0.006 285.885); 66 - --secondary: oklch(0.274 0.006 286.033); 67 - --secondary-foreground: oklch(0.985 0 0); 68 - --muted: oklch(0.274 0.006 286.033); 69 - --muted-foreground: oklch(0.705 0.015 286.067); 70 - --accent: oklch(0.274 0.006 286.033); 71 - --accent-foreground: oklch(0.985 0 0); 72 - --destructive: oklch(0.396 0.141 25.723); 73 - --destructive-foreground: oklch(0.637 0.237 25.331); 74 - --border: oklch(0.274 0.006 286.033); 75 - --input: oklch(0.274 0.006 286.033); 76 - --ring: oklch(0.442 0.017 285.786); 77 - --chart-1: oklch(0.488 0.243 264.376); 78 - --chart-2: oklch(0.696 0.17 162.48); 79 - --chart-3: oklch(0.769 0.188 70.08); 80 - --chart-4: oklch(0.627 0.265 303.9); 81 - --chart-5: oklch(0.645 0.246 16.439); 82 - --sidebar: oklch(0.21 0.006 285.885); 83 - --sidebar-foreground: oklch(0.985 0 0); 84 - --sidebar-primary: oklch(0.488 0.243 264.376); 85 - --sidebar-primary-foreground: oklch(0.985 0 0); 86 - --sidebar-accent: oklch(0.274 0.006 286.033); 87 - --sidebar-accent-foreground: oklch(0.985 0 0); 88 - --sidebar-border: oklch(0.274 0.006 286.033); 89 - --sidebar-ring: oklch(0.442 0.017 285.786); 58 + --background: oklch(0.141 0.005 285.823); 59 + --foreground: oklch(0.985 0 0); 60 + --card: oklch(0.141 0.005 285.823); 61 + --card-foreground: oklch(0.985 0 0); 62 + --popover: oklch(0.141 0.005 285.823); 63 + --popover-foreground: oklch(0.985 0 0); 64 + --primary: oklch(0.985 0 0); 65 + --primary-foreground: oklch(0.21 0.006 285.885); 66 + --secondary: oklch(0.274 0.006 286.033); 67 + --secondary-foreground: oklch(0.985 0 0); 68 + --muted: oklch(0.274 0.006 286.033); 69 + --muted-foreground: oklch(0.705 0.015 286.067); 70 + --accent: oklch(0.274 0.006 286.033); 71 + --accent-foreground: oklch(0.985 0 0); 72 + --destructive: oklch(0.396 0.141 25.723); 73 + --destructive-foreground: oklch(0.637 0.237 25.331); 74 + --border: oklch(0.274 0.006 286.033); 75 + --input: oklch(0.274 0.006 286.033); 76 + --ring: oklch(0.442 0.017 285.786); 77 + --chart-1: oklch(0.488 0.243 264.376); 78 + --chart-2: oklch(0.696 0.17 162.48); 79 + --chart-3: oklch(0.769 0.188 70.08); 80 + --chart-4: oklch(0.627 0.265 303.9); 81 + --chart-5: oklch(0.645 0.246 16.439); 82 + --sidebar: oklch(0.21 0.006 285.885); 83 + --sidebar-foreground: oklch(0.985 0 0); 84 + --sidebar-primary: oklch(0.488 0.243 264.376); 85 + --sidebar-primary-foreground: oklch(0.985 0 0); 86 + --sidebar-accent: oklch(0.274 0.006 286.033); 87 + --sidebar-accent-foreground: oklch(0.985 0 0); 88 + --sidebar-border: oklch(0.274 0.006 286.033); 89 + --sidebar-ring: oklch(0.442 0.017 285.786); 90 90 } 91 91 92 92 @theme inline { 93 - --color-background: var(--background); 94 - --color-foreground: var(--foreground); 95 - --color-card: var(--card); 96 - --color-card-foreground: var(--card-foreground); 97 - --color-popover: var(--popover); 98 - --color-popover-foreground: var(--popover-foreground); 99 - --color-primary: var(--primary); 100 - --color-primary-foreground: var(--primary-foreground); 101 - --color-secondary: var(--secondary); 102 - --color-secondary-foreground: var(--secondary-foreground); 103 - --color-muted: var(--muted); 104 - --color-muted-foreground: var(--muted-foreground); 105 - --color-accent: var(--accent); 106 - --color-accent-foreground: var(--accent-foreground); 107 - --color-destructive: var(--destructive); 108 - --color-destructive-foreground: var(--destructive-foreground); 109 - --color-border: var(--border); 110 - --color-input: var(--input); 111 - --color-ring: var(--ring); 112 - --color-chart-1: var(--chart-1); 113 - --color-chart-2: var(--chart-2); 114 - --color-chart-3: var(--chart-3); 115 - --color-chart-4: var(--chart-4); 116 - --color-chart-5: var(--chart-5); 117 - --radius-sm: calc(var(--radius) - 4px); 118 - --radius-md: calc(var(--radius) - 2px); 119 - --radius-lg: var(--radius); 120 - --radius-xl: calc(var(--radius) + 4px); 121 - --color-sidebar: var(--sidebar); 122 - --color-sidebar-foreground: var(--sidebar-foreground); 123 - --color-sidebar-primary: var(--sidebar-primary); 124 - --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 125 - --color-sidebar-accent: var(--sidebar-accent); 126 - --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 127 - --color-sidebar-border: var(--sidebar-border); 128 - --color-sidebar-ring: var(--sidebar-ring); 93 + --color-background: var(--background); 94 + --color-foreground: var(--foreground); 95 + --color-card: var(--card); 96 + --color-card-foreground: var(--card-foreground); 97 + --color-popover: var(--popover); 98 + --color-popover-foreground: var(--popover-foreground); 99 + --color-primary: var(--primary); 100 + --color-primary-foreground: var(--primary-foreground); 101 + --color-secondary: var(--secondary); 102 + --color-secondary-foreground: var(--secondary-foreground); 103 + --color-muted: var(--muted); 104 + --color-muted-foreground: var(--muted-foreground); 105 + --color-accent: var(--accent); 106 + --color-accent-foreground: var(--accent-foreground); 107 + --color-destructive: var(--destructive); 108 + --color-destructive-foreground: var(--destructive-foreground); 109 + --color-border: var(--border); 110 + --color-input: var(--input); 111 + --color-ring: var(--ring); 112 + --color-chart-1: var(--chart-1); 113 + --color-chart-2: var(--chart-2); 114 + --color-chart-3: var(--chart-3); 115 + --color-chart-4: var(--chart-4); 116 + --color-chart-5: var(--chart-5); 117 + --radius-sm: calc(var(--radius) - 4px); 118 + --radius-md: calc(var(--radius) - 2px); 119 + --radius-lg: var(--radius); 120 + --radius-xl: calc(var(--radius) + 4px); 121 + --color-sidebar: var(--sidebar); 122 + --color-sidebar-foreground: var(--sidebar-foreground); 123 + --color-sidebar-primary: var(--sidebar-primary); 124 + --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); 125 + --color-sidebar-accent: var(--sidebar-accent); 126 + --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); 127 + --color-sidebar-border: var(--sidebar-border); 128 + --color-sidebar-ring: var(--sidebar-ring); 129 129 } 130 130 131 131 @layer base { 132 - * { 133 - @apply border-border outline-ring/50; 134 - } 135 - body { 136 - @apply bg-background text-foreground; 137 - } 132 + * { 133 + @apply border-border outline-ring/50; 134 + } 135 + body { 136 + @apply bg-background text-foreground; 137 + } 138 138 }
+17 -13
vite.config.js
··· 1 - import { defineConfig } from "vite"; 2 - import viteReact from "@vitejs/plugin-react"; 3 1 import tailwindcss from "@tailwindcss/vite"; 2 + import viteReact from "@vitejs/plugin-react"; 3 + import { defineConfig } from "vite"; 4 4 5 - import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; 6 5 import { resolve } from "node:path"; 6 + import { TanStackRouterVite } from "@tanstack/router-plugin/vite"; 7 7 8 8 // https://vitejs.dev/config/ 9 9 export default defineConfig({ 10 - plugins: [TanStackRouterVite({ autoCodeSplitting: true }), viteReact(), tailwindcss()], 11 - test: { 12 - globals: true, 13 - environment: "jsdom", 14 - }, 15 - resolve: { 16 - alias: { 17 - '@': resolve(__dirname, './src'), 18 - }, 19 - } 10 + plugins: [ 11 + TanStackRouterVite({ autoCodeSplitting: true }), 12 + viteReact(), 13 + tailwindcss(), 14 + ], 15 + test: { 16 + globals: true, 17 + environment: "jsdom", 18 + }, 19 + resolve: { 20 + alias: { 21 + "@": resolve(__dirname, "./src"), 22 + }, 23 + }, 20 24 });