Change main routes for google indexing

BohdanUlich · BohdanUlich · commit 646292dfc3aa · 2025-06-04T15:43:40.000+03:00
diff --git a/app/categories/page.tsx b/app/categories/page.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import { Grid2, useMediaQuery, useTheme } from "@mui/material";
+import { CreateCategoryButton, CategoriesList } from "@/components/categories";
+import { SearchInput } from "@/components/inputs";
+import { MainLayout } from "@/components/MainLayout";
+import { FiltersModal } from "@/components/modals";
+import { CATEGORY_TYPE } from "@/types";
+import { useGetLabels } from "@/api";
+
+const Categories = () => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
+  useGetLabels({ labelType: CATEGORY_TYPE });
+
+  return (
+    <MainLayout title="Categories">
+      <Grid2
+        container
+        justifyContent="space-between"
+        direction={{ xs: "column-reverse", sm: "row" }}
+        alignItems="center"
+        gap={2}
+        flexWrap="nowrap"
+      >
+        <CreateCategoryButton fullWidth={isMobile} />
+
+        <Grid2
+          container
+          alignItems="center"
+          gap={2}
+          ml={{ xs: 0, sm: "auto" }}
+          flexWrap="nowrap"
+          width={{ xs: "100%", sm: "auto" }}
+        >
+          <SearchInput />
+
+          <FiltersModal labelType={CATEGORY_TYPE} />
+        </Grid2>
+      </Grid2>
+
+      <CategoriesList />
+    </MainLayout>
+  );
+};
+
+export default Categories;
diff --git a/app/login/page.tsx b/app/login/page.tsx
@@ -8,6 +8,7 @@ import { useState } from "react";
 import { Button, Form, TextInput, Link } from "@/components";
 import { FieldValues } from "react-hook-form";
 import { useSnackbar } from "notistack";
+import { CATEGORIES_ROUTE } from "@/types";
 
 const schema = z.object({
   email: z
@@ -21,7 +22,7 @@ const Login = () => {
   const [isLoading, setIsLoading] = useState(false);
   const { enqueueSnackbar } = useSnackbar();
   const searchParams = useSearchParams();
-  const callbackUrl = searchParams.get("callbackUrl") || "/";
+  const callbackUrl = searchParams.get("callbackUrl") || CATEGORIES_ROUTE;
 
   const onSubmit = async (data: FieldValues) => {
     setIsLoading(true);
@@ -35,7 +36,7 @@ const Login = () => {
       if (res?.error) {
         enqueueSnackbar(`${res?.error}`, { variant: "error" });
       } else {
-        window.location.assign("/");
+        window.location.assign(CATEGORIES_ROUTE);
       }
     } catch (err) {
       enqueueSnackbar(`${err}`, { variant: "error" });
diff --git a/app/page.tsx b/app/page.tsx
@@ -1,47 +1,158 @@
-"use client";
+import { Metadata } from "next";
+import { Container, Typography, List, ListItem, Box } from "@mui/material";
+import { Button } from "@/components/buttons";
+import Link from "next/link";
+import Image from "next/legacy/image";
+import { CATEGORIES_ROUTE } from "@/types";
+import { authConfig } from "@/configs";
+import { getServerSession } from "next-auth";
 
-import { Grid2, useMediaQuery, useTheme } from "@mui/material";
-import { CreateCategoryButton, CategoriesList } from "@/components/categories";
-import { SearchInput } from "@/components/inputs";
-import { MainLayout } from "@/components/MainLayout";
-import { FiltersModal } from "@/components/modals";
-import { CATEGORY_TYPE } from "@/types";
-import { useGetLabels } from "@/api";
+export const metadata: Metadata = {
+  title: "About My Lib - Your Personal Code Library",
+  description:
+    "My Lib is a simple and efficient way to store, organize, and reuse code snippets, scripts, configurations, and more. Create your own personal library with frontend, backend, and any programming languages.",
+  robots: "index, follow",
+};
 
-const Home = () => {
-  const theme = useTheme();
-  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  useGetLabels({ labelType: CATEGORY_TYPE });
+const LandingPage = async () => {
+  const session = await getServerSession(authConfig);
+  const userId = session?.user?.id;
 
   return (
-    <MainLayout title="Categories">
-      <Grid2
-        container
-        justifyContent="space-between"
-        direction={{ xs: "column-reverse", sm: "row" }}
-        alignItems="center"
-        gap={2}
-        flexWrap="nowrap"
-      >
-        <CreateCategoryButton fullWidth={isMobile} />
-
-        <Grid2
-          container
-          alignItems="center"
-          gap={2}
-          ml={{ xs: 0, sm: "auto" }}
-          flexWrap="nowrap"
-          width={{ xs: "100%", sm: "auto" }}
+    <Container maxWidth="lg" sx={{ py: 8 }}>
+      <Typography component="h1" variant="h2" my={3} textAlign="center">
+        My Lib: Your Universal Code & Knowledge Organizer for IT Professionals
+      </Typography>
+
+      <Typography fontSize={18}>
+        My Lib is an intuitive platform built for developers, DevOps engineers,
+        IT specialists, and anyone working with code or technical information.
+        More than just a snippet manager, it’s a versatile workspace to organize
+        your knowledge
+      </Typography>
+
+      <Box display="flex" gap={3} justifyContent="center" my={5}>
+        {userId ? (
+          <Button
+            size="large"
+            variant="contained"
+            href={CATEGORIES_ROUTE}
+            component={Link}
+            sx={{ width: "20%", height: 40 }}
+          >
+            Continue
+          </Button>
+        ) : (
+          <Button
+            size="large"
+            variant="contained"
+            href="/login"
+            component={Link}
+            sx={{ width: "20%", height: 40 }}
+          >
+            Sign in
+          </Button>
+        )}
+      </Box>
+
+      <Typography variant="h2" my={3} textAlign="center">
+        What Makes My Lib Indispensable?
+      </Typography>
+
+      <Typography fontSize={18} mb={2}>
+        🚀 Build Your Personal Code Library Save code snippets in any language
+        (JavaScript, Python, Go, SQL, etc.) for frontend, backend, mobile
+        development, or automation tasks. The built-in code editor with syntax
+        highlighting ensures a seamless coding experience.
+      </Typography>
+
+      <Typography fontSize={18} mb={2}>
+        📂 Organize Beyond Code Store server configurations, instructions,
+        documentation, checklists, bookmarks, and even images. The rich text
+        editor lets you format content, add tables, lists, and embed media.
+      </Typography>
+
+      <Typography fontSize={18} mb={2}>
+        🏷️ Instant Access with Categories & Labels Sort data into customizable
+        categories and apply labels for precise filtering. Examples: “Docker
+        Configs,” “React Hooks,” “SQL Templates.”
+      </Typography>
+
+      <Typography fontSize={18}>
+        🔍 Find Anything in Seconds Search by category names, labels, or content
+        within code items—no more digging through messy folders, old projects,
+        or dozens of repositories. Stop wasting time scrolling through forums or
+        GitHub to rediscover solutions you’ve already used. With My Lib, every
+        piece of code, configuration, or knowledge you’ve saved is just a quick
+        search away.
+      </Typography>
+
+      <Box display={{ xs: "none", md: "block" }}>
+        <Typography component="h3" variant="h2" my={5} textAlign="center">
+          Example of usage:
+        </Typography>
+
+        <Typography variant="h4" mb={2}>
+          Home page with categories:
+        </Typography>
+
+        <Box height={560} width={1} position="relative" overflow="hidden">
+          <Image
+            src="/about/categories.png"
+            alt="Categories example"
+            objectFit="contain"
+            layout="fill"
+            quality={100}
+          />
+        </Box>
+
+        <Typography variant="h4" my={2}>
+          Code items inside category:
+        </Typography>
+
+        <Box
+          height={560}
+          width={1}
+          position="relative"
+          mt={2}
+          overflow="hidden"
         >
-          <SearchInput />
+          <Image
+            src="/about/code-items-styles.png"
+            alt="Code items example"
+            objectFit="contain"
+            layout="fill"
+            quality={100}
+          />
+        </Box>
+      </Box>
 
-          <FiltersModal labelType={CATEGORY_TYPE} />
-        </Grid2>
-      </Grid2>
+      <Typography component="h4" variant="h2" my={3} textAlign="center">
+        Key Features
+      </Typography>
 
-      <CategoriesList />
-    </MainLayout>
+      <List sx={{ fontSize: 18 }}>
+        <ListItem>
+          Create custom categories like Components, Configs, Helpers, Styles.
+        </ListItem>
+        <ListItem>
+          Assign labels (e.g., FE, BE, env, MUI) for easy filtering.
+        </ListItem>
+        <ListItem>Search categories by name for quick access.</ListItem>
+        <ListItem>
+          Add rich descriptions with a powerful editor supporting text
+          formatting, code snippets, images, links, and more.
+        </ListItem>
+        <ListItem>
+          Use Monaco Editor for syntax highlighting and better coding
+          experience.
+        </ListItem>
+        <ListItem>
+          Fast filter and search code items by tags and names.
+        </ListItem>
+      </List>
+    </Container>
   );
 };
 
-export default Home;
+export default LandingPage;
diff --git a/app/registration/page.tsx b/app/registration/page.tsx
@@ -7,6 +7,7 @@ import { Button, Form, TextInput, Link } from "@/components";
 import { fetchService } from "@/services";
 import { useSnackbar } from "notistack";
 import { signIn } from "next-auth/react";
+import { CATEGORIES_ROUTE } from "@/types";
 
 const schema = z
   .object({
@@ -47,7 +48,7 @@ const Registration = () => {
       });
 
       if (!result?.error && result?.status === 200) {
-        window.location.assign("/");
+        window.location.assign(CATEGORIES_ROUTE);
 
         enqueueSnackbar("Sign up successful. Welcome to My lib", {
           variant: "success",
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -17,15 +17,12 @@ import {
 } from "@mui/material";
 import { useGetUser } from "@/hooks";
 import { useColorMode } from "@/providers";
-import { usePathname } from "next/navigation";
-import { ABOUT_PAGE_ROUTE } from "@/types";
+import { CATEGORIES_ROUTE } from "@/types";
 
 export const Header = () => {
   const { userName, userImage, userId, userEmail } = useGetUser();
   const [anchorElUser, setAnchorElUser] = useState<null | HTMLElement>(null);
   const { theme, toggleTheme } = useColorMode();
-  const pathName = usePathname();
-  const isAboutPage = pathName === ABOUT_PAGE_ROUTE;
 
   const onOpenUserMenu = (event: MouseEvent<HTMLElement>) => {
     setAnchorElUser(event.currentTarget);
@@ -50,7 +47,7 @@ export const Header = () => {
             variant="h6"
             noWrap
             component={Link}
-            href="/"
+            href={userId ? CATEGORIES_ROUTE : "/"}
             color="primary"
             sx={{
               display: "flex",
@@ -103,7 +100,7 @@ export const Header = () => {
                   <Typography
                     component={Link}
                     width={1}
-                    href={ABOUT_PAGE_ROUTE}
+                    href="/"
                     color="primary"
                   >
                     About
@@ -118,19 +115,6 @@ export const Header = () => {
               </Menu>
             </Box>
           )}
-
-          {!userId && !isAboutPage && (
-            <Box sx={{ flexGrow: 0 }}>
-              <Typography
-                component={Link}
-                width={1}
-                href={ABOUT_PAGE_ROUTE}
-                color="primary"
-              >
-                About
-              </Typography>
-            </Box>
-          )}
         </Toolbar>
       </Container>
     </AppBar>
diff --git a/middleware.ts b/middleware.ts
@@ -1,5 +1,5 @@
 export { default } from "next-auth/middleware";
 
 export const config = {
-  matcher: ["/", "/code-items/:path*"],
+  matcher: ["/categories", "/code-items/:path*"],
 };
diff --git a/next-sitemap.config.js b/next-sitemap.config.js
@@ -3,33 +3,14 @@ module.exports = {
   siteUrl: "https://my-lib-pro.netlify.app",
   generateRobotsTxt: true,
   outDir: "./public",
-  exclude: ["/", "/code-items*", "/login", "/registration"],
+  exclude: ["/categories", "/code-items*", "/login", "/registration"],
   robotsTxtOptions: {
     policies: [
       {
         userAgent: "*",
-        allow: "/about",
-        disallow: ["/", "/code-items*", "/login", "/registration"],
+        allow: "/",
+        disallow: ["/categories", "/code-items*", "/login", "/registration"],
       },
     ],
   },
-
-  transform: async (config, path) => {
-    const defaultEntry = {
-      loc: path,
-      changefreq: "monthly",
-      priority: 0.5,
-      lastmod: new Date().toISOString(),
-    };
-
-    if (path === "/about") {
-      return {
-        ...defaultEntry,
-        changefreq: "monthly",
-        priority: 0.9,
-      };
-    }
-
-    return defaultEntry;
-  },
 };
diff --git a/types/constants.ts b/types/constants.ts
@@ -19,4 +19,4 @@ export const LIGHT_TEXT = "light-text";
 export const DARK_TEXT = "dark-text";
 
 // Routes
-export const ABOUT_PAGE_ROUTE = "/about";
+export const CATEGORIES_ROUTE = "/categories";
