404 page

Author: nyagami

generateRoutes.js

@@ -20,4 +20,9 @@ for (const route of routes) {
   fs.writeFileSync(filePath, routePage, "utf-8");
   siteMapContent += `${BASE_URL}${route.path}\n`;
 }
+fs.writeFileSync(
+  "./dist/404.html",
+  indexPage.replace(/<title>.+<\/title>/, `<title>404 | LNReader</title>`),
+  "utf-8"
+);
 fs.writeFileSync("./dist/sitemap.txt", siteMapContent, "utf-8");

src/404.tsx

@@ -0,0 +1,41 @@
+import Layout from "@components/Layout";
+import { useTheme } from "@hooks/useTheme";
+import { Box, Button, Divider, Typography } from "@mui/material";
+import Footer from "@routes/home/components/Footer";
+import { Link } from "react-router-dom";
+
+export default function NotFound() {
+  const theme = useTheme();
+  return (
+    <Layout
+      showSideBar={false}
+      sx={{ height: "calc(100vh - 7rem)", display: "flex" }}
+    >
+      <Box sx={{ display: "flex", height: "100%", flexDirection: "column" }}>
+        <Box sx={{ flex: 1 }}>
+          <Typography variant="h2" sx={{ fontWeight: "bold" }}>
+            404
+          </Typography>
+          <Typography variant="subtitle1" sx={{ fontWeight: "bold" }}>
+            PAGE NOT FOUND
+          </Typography>
+          <Typography sx={{ mt: 4, mb: 1, px: { xs: 1, md: 0 } }}>
+            Trying to visit a page that doesn't even exist?
+          </Typography>
+          <Typography sx={{ color: theme.error }}>How cute !</Typography>
+          <Box sx={{ my: 4 }}>
+            <Link to="/">
+              <Button variant="outlined" sx={{ borderRadius: 20 }}>
+                Back to Home
+              </Button>
+            </Link>
+          </Box>
+        </Box>
+        <Box sx={{ width: "100%" }}>
+          <Divider />
+          <Footer />
+        </Box>
+      </Box>
+    </Layout>
+  );
+}

src/App.tsx

@@ -10,6 +10,7 @@ import ReaderSettings from "@routes/guides/readerSettings";
 import Changelogs from "@routes/changelogs";
 import Contribute from "@routes/contribute";
 import Plugins from "@routes/plugins";
+import NotFound from "./404";
 
 function App() {
   const theme = useTheme();
@@ -85,6 +86,7 @@ function App() {
               <Route path="reader-settings" element={<ReaderSettings />} />
             </Route>
           </Route>
+          <Route path="*" Component={NotFound} />
         </Routes>
       </BrowserRouter>
     </ThemeProvider>

src/components/Layout/index.tsx

@@ -9,7 +9,9 @@ import routes from "../../../routes.json";
 export default function Layout({
   children,
   sx,
+  showSideBar = true,
 }: {
+  showSideBar?: boolean;
   sx?: SxProps;
   children: ReactNode;
 }) {
@@ -40,7 +42,7 @@ export default function Layout({
           ...sx,
         }}
       >
-        {location.pathname === "/" ? null : <SideBar />}
+        {showSideBar ? <SideBar /> : null}
         <Box sx={{ flex: 1 }}>{children}</Box>
       </Box>
     </Box>

src/routes/home/index.tsx

@@ -36,7 +36,7 @@ const articles: ArticleProps[] = [
 
 export default function HomePage() {
   return (
-    <Layout>
+    <Layout showSideBar={false}>
       <Box sx={{ pb: 16, px: { xs: 2, md: 4, lg: 16 } }}>
         <Banner />
         <Stack direction={{ sx: "column", sm: "row" }} sx={{ gap: 2 }}>