diff --git a/bun.lock b/bun.lock index 17c5159d4..3d26f747d 100644 --- a/bun.lock +++ b/bun.lock @@ -223,8 +223,9 @@ "postcss-nested": "^7.0.2", "postcss-preset-env": "^11.1.1", "quicklime": "^1.2.0", - "react": "^19.2.0", - "react-dom": "^19.2.0", + "react": "^19.2.6", + "react-dom": "^19.2.6", + "react-error-boundary": "^6.1.1", "react-markdown": "^10.1.0", "react-promise-suspense": "^0.3.4", "sharp": "^0.34.5", @@ -2502,6 +2503,8 @@ "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="], + "react-error-boundary": ["react-error-boundary@6.1.1", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-BrYwPOdXi5mqkk5lw+Uvt0ThHx32rCt3BkukS4X23A2AIWDPSGX6iaWTc0y9TU/mHDA/6qOSGel+B2ERkOvD1w=="], + "react-markdown": ["react-markdown@10.1.0", "", { "dependencies": { "@types/hast": "^3.0.0", "@types/mdast": "^4.0.0", "devlop": "^1.0.0", "hast-util-to-jsx-runtime": "^2.0.0", "html-url-attributes": "^3.0.0", "mdast-util-to-hast": "^13.0.0", "remark-parse": "^11.0.0", "remark-rehype": "^11.0.0", "unified": "^11.0.0", "unist-util-visit": "^5.0.0", "vfile": "^6.0.0" }, "peerDependencies": { "@types/react": ">=18", "react": ">=18" } }, "sha512-qKxVopLT/TyA6BX3Ue5NwabOsAzm0Q7kAPwq6L+wWDwisYs7R8vZ0nRXqq6rkueboxpkjvLGU9fWifiX/ZZFxQ=="], "react-promise-suspense": ["react-promise-suspense@0.3.4", "", { "dependencies": { "fast-deep-equal": "^2.0.1" } }, "sha512-I42jl7L3Ze6kZaq+7zXWSunBa3b1on5yfvUW6Eo/3fFOj6dZ5Bqmcd264nJbTK/gn1HjjILAjSwnZbV4RpSaNQ=="], @@ -3078,6 +3081,10 @@ "@blitzkit/website-ue/googleapis": ["googleapis@171.4.0", "", { "dependencies": { "google-auth-library": "^10.2.0", "googleapis-common": "^8.0.0" } }, "sha512-xybFL2SmmUgIifgsbsRQYRdNrSAYwxWZDmkZTGjUIaRnX5jPqR8el/cEvo6rCqh7iaZx6MfEPS/lrDgZ0bymkg=="], + "@blitzkit/website-ue/react": ["react@19.2.6", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="], + + "@blitzkit/website-ue/react-dom": ["react-dom@19.2.6", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.6" } }, "sha512-0prMI+hvBbPjsWnxDLxlCGyM8PN6UuWjEUCYmZhO67xIV9Xasa/r/vDnq+Xyq4Lo27g8QSbO5YzARu0D1Sps3g=="], + "@blitzkit/website-ue/vite": ["vite@7.3.1", "", { "dependencies": { "esbuild": "^0.27.0", "fdir": "^6.5.0", "picomatch": "^4.0.3", "postcss": "^8.5.6", "rollup": "^4.43.0", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "jiti": ">=1.21.0", "less": "^4.0.0", "lightningcss": "^1.21.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "jiti", "less", "lightningcss", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-w+N7Hifpc3gRjZ63vYBXA56dvvRlNWRczTdmCBBa+CotUzAPf5b7YMdMR/8CQoeYE5LX3W4wj6RYTgonm1b9DA=="], "@discordjs/rest/@discordjs/collection": ["@discordjs/collection@2.1.1", "", {}, "sha512-LiSusze9Tc7qF03sLCujF5iZp7K+vRNEDBZ86FT9aQAv3vxMLihUvKvpsCWiQ2DJq1tVckopKm1rxomgNUc9hg=="], @@ -3218,7 +3225,7 @@ "utif2/pako": ["pako@1.0.11", "", {}, "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="], - "varuna/react": ["react@19.2.5", "", {}, "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="], + "varuna/react": ["react@19.2.6", "", {}, "sha512-sfWGGfavi0xr8Pg0sVsyHMAOziVYKgPLNrS7ig+ivMNb3wbCBw3KxtflsGBAwD3gYQlE/AEZsTLgToRrSCjb0Q=="], "vscode-json-languageservice/jsonc-parser": ["jsonc-parser@3.3.1", "", {}, "sha512-HUgH65KyejrUFPvHFPbqOY0rsFip3Bo5wb4ngvdi1EpCYWUQDC5V+Y7mZws+DLkr4M//zQJoanu1SP+87Dv1oQ=="], diff --git a/packages/i18n/strings/en.json b/packages/i18n/strings/en.json index e9b37e735..838c434d0 100644 --- a/packages/i18n/strings/en.json +++ b/packages/i18n/strings/en.json @@ -1,4 +1,12 @@ { + "error": { + "heading": "BlitzKit ran into a critical error", + "message": "Sorry about the inconvenience! You have a couple of options.", + "view": "View error", + "reload": "Reload", + "support": "Support" + }, + "nations": { "0": "Unspecified", "1": "USSR", diff --git a/packages/website-ue/package.json b/packages/website-ue/package.json index c32028e30..f08fc86f7 100644 --- a/packages/website-ue/package.json +++ b/packages/website-ue/package.json @@ -45,8 +45,9 @@ "postcss-nested": "^7.0.2", "postcss-preset-env": "^11.1.1", "quicklime": "^1.2.0", - "react": "^19.2.0", - "react-dom": "^19.2.0", + "react": "^19.2.6", + "react-dom": "^19.2.6", + "react-error-boundary": "^6.1.1", "react-markdown": "^10.1.0", "react-promise-suspense": "^0.3.4", "sharp": "^0.34.5", diff --git a/packages/website-ue/src/components/Button/index.module.css b/packages/website-ue/src/components/Button/index.module.css index a2d3e1d1a..0a5c62aff 100644 --- a/packages/website-ue/src/components/Button/index.module.css +++ b/packages/website-ue/src/components/Button/index.module.css @@ -40,14 +40,18 @@ color: var(--accent-1); } - &[data-variant="ghost"] { + &[data-variant="ghost"], + &[data-variant="outline"] { background: none; - color: var(--accent-11); + color: var(--accent-12); + } + &[data-variant="ghost"] { padding: 0; } - &[data-variant="surface"] { + &[data-variant="surface"], + &[data-variant="outline"] { outline: var(--space-1) solid var(--accent-6); } } diff --git a/packages/website-ue/src/components/Button/index.tsx b/packages/website-ue/src/components/Button/index.tsx index bc5a4736e..13a254500 100644 --- a/packages/website-ue/src/components/Button/index.tsx +++ b/packages/website-ue/src/components/Button/index.tsx @@ -6,7 +6,7 @@ import styles from "./index.module.css"; export interface ButtonProps extends ComponentProps<"button"> { color?: Color; radius?: `${1 | 2 | 3}` | "max"; - variant?: "solid" | "surface" | "soft" | "inverted" | "ghost"; + variant?: "solid" | "surface" | "soft" | "inverted" | "ghost" | "outline"; size?: "regular"; } diff --git a/packages/website-ue/src/components/ErrorDisplay.astro b/packages/website-ue/src/components/ErrorDisplay.astro new file mode 100644 index 000000000..297ee5f16 --- /dev/null +++ b/packages/website-ue/src/components/ErrorDisplay.astro @@ -0,0 +1,72 @@ +--- +import { api } from "../api/dynamic"; +import { discordLink } from "../config/socials"; +import { Button } from "./Button"; +import { Heading } from "./Heading"; +import { Link } from "./Link"; +import { Text } from "./Text"; + +interface Props { + locale: string; +} + +const { locale } = Astro.props; +const strings = await api.strings(locale); +--- + + + +
+
+ {strings.error.heading} + {strings.error.message} +
+ +
+ + + + + + + + + +
+
diff --git a/packages/website-ue/src/components/ErrorWrapper.tsx b/packages/website-ue/src/components/ErrorWrapper.tsx new file mode 100644 index 000000000..ed4c7ab90 --- /dev/null +++ b/packages/website-ue/src/components/ErrorWrapper.tsx @@ -0,0 +1,20 @@ +import type { ReactNode } from "react"; +import { ErrorBoundary } from "react-error-boundary"; + +interface Props { + children: ReactNode; +} + +export function ErrorWrapper({ children }: Props) { + return ( + { + console.log("what?"); + document.body.classList.add("error"); + }} + > + {children} + + ); +} diff --git a/packages/website-ue/src/components/Footer.astro b/packages/website-ue/src/components/Footer.astro index ede22290e..b71a3247e 100644 --- a/packages/website-ue/src/components/Footer.astro +++ b/packages/website-ue/src/components/Footer.astro @@ -2,6 +2,7 @@ import { DiscordLogoIcon, GitHubLogoIcon } from "@radix-ui/react-icons"; import packageJson from "../../../../package.json"; import { api } from "../api/dynamic"; +import { discordLink } from "../config/socials"; import { BlitzKitIcon } from "../icons/BlitzKit"; import { Code } from "./Code"; import { Link } from "./Link"; @@ -84,11 +85,7 @@ const strings = await api.strings(locale);