Error boundary and 404 page added

AlemTuzlak · AlemTuzlak · commit 2a1477de895b · 2025-01-29T16:54:42.000+01:00
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -39,5 +39,8 @@
 		"Readme*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"README*": "AUTHORS, Authors, BACKERS*, Backers*, CHANGELOG*, CITATION*, CODEOWNERS, CODE_OF_CONDUCT*, CONTRIBUTING*, CONTRIBUTORS, COPYING*, CREDITS, Changelog*, Citation*, Code_Of_Conduct*, Codeowners, Contributing*, Contributors, Copying*, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE*, License*, MAINTAINERS, Maintainers, README-*, README_*, RELEASE_NOTES*, ROADMAP.MD, Readme-*, Readme_*, Release_Notes*, Roadmap.md, SECURITY.MD, SPONSORS*, Security.md, Sponsors*, authors, backers*, changelog*, citation*, code_of_conduct*, codeowners, contributing*, contributors, copying*, credits, governance.md, history.md, license*, maintainers, readme-*, readme_*, release_notes*, roadmap.md, security.md, sponsors*",
 		"Dockerfile": "*.dockerfile, .devcontainer.*, .dockerignore, captain-definition, compose.*, docker-compose.*, dockerfile*"
+	},
+	"[typescriptreact]": {
+		"editor.defaultFormatter": "biomejs.biome"
 	}
 }
diff --git a/app/entry.client.tsx b/app/entry.client.tsx
@@ -1,6 +1,6 @@
 import i18next from "i18next"
 import LanguageDetector from "i18next-browser-languagedetector"
-import Fetch from "i18next-fetch-backend"
+import Backend from "i18next-http-backend"
 import { StrictMode, startTransition } from "react"
 import { hydrateRoot } from "react-dom/client"
 import { I18nextProvider, initReactI18next } from "react-i18next"
@@ -13,7 +13,7 @@ async function hydrate() {
 	await i18next
 		.use(initReactI18next) // Tell i18next to use the react-i18next plugin
 		.use(LanguageDetector) // Setup a client-side language detector
-		.use(Fetch) // Setup your backend
+		.use(Backend) // Setup your backend
 		.init({
 			...i18n, // spread the configuration
 			// This function detects the namespaces your routes rendered while SSR use
diff --git a/app/library/icon/icons/icon.svg b/app/library/icon/icons/icon.svg
@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0">
 <defs>
-<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" id="ShoppingCart"><circle cx="8" cy="21" r="1"></circle><circle cx="19" cy="21" r="1"></circle><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"></path></symbol>
+<symbol viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ghost" id="Ghost"><path d="M9 10h.01"></path><path d="M15 10h.01"></path><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"></path></symbol>
 </defs>
 </svg>
diff --git a/app/library/icon/icons/types.ts b/app/library/icon/icons/types.ts
@@ -1,7 +1,7 @@
 // This file is generated by icon spritesheet generator
 
 export const iconNames = [
-  "ShoppingCart",
+  "Ghost",
 ] as const
 
 export type IconName = typeof iconNames[number]
diff --git a/app/root.tsx b/app/root.tsx
@@ -1,5 +1,5 @@
 import { useTranslation } from "react-i18next"
-import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router"
+import { Links, Meta, Outlet, Scripts, ScrollRestoration, isRouteErrorResponse, useRouteError } from "react-router"
 import type { LinksFunction } from "react-router"
 import { useChangeLanguage } from "remix-i18next/react"
 import type { Route } from "./+types/root"
@@ -49,3 +49,21 @@ export const Layout = ({ children }: { children: React.ReactNode }) => {
 		</html>
 	)
 }
+
+export const ErrorBoundary = () => {
+	const error = useRouteError()
+	const { t } = useTranslation()
+
+	const errorStatusCode = isRouteErrorResponse(error) ? error.status : "500"
+
+	return (
+		<div className="placeholder-index relative h-full min-h-screen w-screen flex items-center justify-center dark:bg-white sm:pb-16 sm:pt-8">
+			<div className="relative mx-auto max-w-[90rem] sm:px-6 lg:px-8">
+				<div className="relative  min-h-72 flex flex-col justify-center sm:overflow-hidden sm:rounded-2xl p-1 md:p-4 lg:p-6">
+					<h1 className="text-center w-full text-red-600 text-2xl pb-2">{t(`error.${errorStatusCode}.title`)}</h1>
+					<p className="text-lg text-center w-full">{t(`error.${errorStatusCode}.description`)}</p>
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/app/routes/$.tsx b/app/routes/$.tsx
@@ -0,0 +1,38 @@
+import { useTranslation } from "react-i18next"
+import { Link, useNavigate } from "react-router"
+import { Icon } from "~/library/icon/Icon"
+
+export default function Route404() {
+	const navigate = useNavigate()
+	const { t } = useTranslation()
+
+	return (
+		<div className="min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 flex items-center justify-center p-4">
+			<div className="max-w-2xl w-full text-center">
+				<div className="mb-8 flex justify-center">
+					<Icon name="Ghost" className="h-24 w-24 text-indigo-600 animate-float" />
+				</div>
+
+				<h1 className="text-6xl font-bold text-gray-900 mb-4">404</h1>
+				<h2 className="text-3xl font-semibold text-gray-800 mb-4">{t("error.404.title")}</h2>
+				<p className="text-gray-600 mb-8 text-lg">{t("error.404.description")}</p>
+
+				<div className="flex flex-col sm:flex-row gap-4 justify-center">
+					<button
+						type="button"
+						onClick={() => navigate(-1)}
+						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-300"
+					>
+						{t("navigation.back")}
+					</button>
+					<Link
+						to="/"
+						className="inline-flex cursor-pointer items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 transition-colors duration-300"
+					>
+						{t("navigation.home")}
+					</Link>
+				</div>
+			</div>
+		</div>
+	)
+}
diff --git a/app/tailwind.css b/app/tailwind.css
@@ -2,4 +2,15 @@
 
 @theme {
 	/* Your theme styles go here */
+	--animate-float: float 3s ease-in-out infinite;
+
+	@keyframes float {
+		0%,
+		100% {
+			transform: translateY(0);
+		}
+		50% {
+			transform: translateY(-10px);
+		}
+	}
 }
diff --git a/package.json b/package.json
@@ -33,7 +33,7 @@
 		"hono": "4.6.12",
 		"i18next": "24.2.1",
 		"i18next-browser-languagedetector": "8.0.0",
-		"i18next-fetch-backend": "6.0.0",
+		"i18next-http-backend": "3.0.2",
 		"isbot": "5.1.17",
 		"pretty-cache-header": "1.0.0",
 		"react": "19.0.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/resources/icons/ghost.svg b/resources/icons/ghost.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-ghost"><path d="M9 10h.01"/><path d="M15 10h.01"/><path d="M12 2a8 8 0 0 0-8 8v12l3-3 2.5 2.5L12 19l2.5 2.5L17 19l3 3V10a8 8 0 0 0-8-8z"/></svg>
diff --git a/resources/icons/shopping-cart.svg b/resources/icons/shopping-cart.svg
diff --git a/resources/locales/bs/common.json b/resources/locales/bs/common.json
@@ -1,3 +1,25 @@
 {
-	"hi": "React Router je zakon!"
+	"hi": "React Router je zakon!",
+	"navigation": {
+		"back": "Idi nazad",
+		"home": "Nazad na početnu"
+	},
+	"error": {
+		"500": {
+			"title": "Nešto je krenulo po zlu!",
+			"description": "Izgleda da se nešto desilo na serveru."
+		},
+		"404": {
+			"title": "Stranica nije pronađena.",
+			"description": "Izgleda da stranica koju tražite ne postoji."
+		},
+		"403": {
+			"title": "Nemate pristup!",
+			"description": "Izgleda da nemate pristup ovoj stranici."
+		},
+		"200": {
+			"title": "Nešto je krenulo po zlu!",
+			"description": "Izgleda da se nešto desilo na serveru."
+		}
+	}
 }
diff --git a/resources/locales/en/common.json b/resources/locales/en/common.json
@@ -1,3 +1,25 @@
 {
-	"hi": "React Router is awesome!"
+	"hi": "React Router is awesome!",
+	"navigation": {
+		"back": "Go back",
+		"home": "Back to home"
+	},
+	"error": {
+		"500": {
+			"title": "Something went wrong!",
+			"description": "Looks like something unexpected happened on the server."
+		},
+		"404": {
+			"title": "Page Not found!",
+			"description": "Oops! The page you're looking for seems to have vanished into thin air."
+		},
+		"403": {
+			"title": "Unauthorized!",
+			"description": "Looks like you can't access this page."
+		},
+		"200": {
+			"title": "Something went wrong!",
+			"description": "Looks like something unexpected happened on the server."
+		}
+	}
 }
diff --git a/vite.config.ts b/vite.config.ts
@@ -36,6 +36,9 @@ export default defineConfig({
 			withTypes: true,
 		}),
 	],
+	build: {
+		assetsInlineLimit: 0,
+	},
 	server: {
 		open: true,
 		// biome-ignore lint/nursery/noProcessEnv: Its ok to use process.env here

Original file line number	Diff line number	Diff line change
`@@ -39,5 +39,8 @@`
`39`	`39`	"Readme": "AUTHORS, Authors, BACKERS, Backers, CHANGELOG, CITATION, CODEOWNERS, CODE_OF_CONDUCT, CONTRIBUTING, CONTRIBUTORS, COPYING, CREDITS, Changelog, Citation, Code_Of_Conduct, Codeowners, Contributing, Contributors, Copying, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE, License, MAINTAINERS, Maintainers, README-, README_, RELEASE_NOTES, ROADMAP.MD, Readme-, Readme_, Release_Notes, Roadmap.md, SECURITY.MD, SPONSORS, Security.md, Sponsors, authors, backers, changelog, citation, code_of_conduct, codeowners, contributing, contributors, copying, credits, governance.md, history.md, license, maintainers, readme-, readme_, release_notes, roadmap.md, security.md, sponsors",
`40`	`40`	"README": "AUTHORS, Authors, BACKERS, Backers, CHANGELOG, CITATION, CODEOWNERS, CODE_OF_CONDUCT, CONTRIBUTING, CONTRIBUTORS, COPYING, CREDITS, Changelog, Citation, Code_Of_Conduct, Codeowners, Contributing, Contributors, Copying, Credits, GOVERNANCE.MD, Governance.md, HISTORY.MD, History.md, LICENSE, License, MAINTAINERS, Maintainers, README-, README_, RELEASE_NOTES, ROADMAP.MD, Readme-, Readme_, Release_Notes, Roadmap.md, SECURITY.MD, SPONSORS, Security.md, Sponsors, authors, backers, changelog, citation, code_of_conduct, codeowners, contributing, contributors, copying, credits, governance.md, history.md, license, maintainers, readme-, readme_, release_notes, roadmap.md, security.md, sponsors",
`41`	`41`	`"Dockerfile": ".dockerfile, .devcontainer., .dockerignore, captain-definition, compose., docker-compose., dockerfile*"`
	`42`	`+ },`
	`43`	`+ "[typescriptreact]": {`
	`44`	`+ "editor.defaultFormatter": "biomejs.biome"`
`42`	`45`	`}`
`43`	`46`	`}`