Tweaking at home page

enshi/.prettierrc

@@ -1,4 +1,7 @@
 {
   "tabWidth": 4,
-  "useTabs": false
+  "useTabs": true,
+  "printWidth": 80,
+  "semi": true,
+  "quoteProps": "consistent"
 }

enshi/package-lock.json

@@ -8,6 +8,7 @@
       "name": "enshi",
       "version": "0.1.8",
       "dependencies": {
+        "@radix-ui/react-aspect-ratio": "^1.1.2",
         "@radix-ui/react-dialog": "^1.1.2",
         "@radix-ui/react-form": "^0.1.0",
         "@radix-ui/react-icons": "^1.3.2",
@@ -20,6 +21,7 @@
         "@tanstack/react-query-devtools": "^5.61.0",
         "@types/quill": "^2.0.14",
         "axios": "^1.7.7",
+        "dayjs": "^1.11.13",
         "html-react-parser": "^5.1.16",
         "i18n": "^0.15.1",
         "i18next": "^23.14.0",
@@ -1296,12 +1298,12 @@
       }
     },
     "node_modules/@radix-ui/react-aspect-ratio": {
-      "version": "1.1.0",
+      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.2.tgz",
-      "integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
+      "integrity": "sha512-TaJxYoCpxJ7vfEkv2PTNox/6zzmpKXT6ewvCuf2tTOIVN45/Jahhlld29Yw4pciOXS2Xq91/rSGEdmEnUWZCqA==",
       "license": "MIT",
       "dependencies": {
-        "@radix-ui/react-primitive": "2.0.0"
+        "@radix-ui/react-primitive": "2.0.2"
       },
       "peerDependencies": {
         "@types/react": "*",
@@ -1318,6 +1320,62 @@
         }
       }
     },
+    "node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.2.tgz",
+      "integrity": "sha512-Ec/0d38EIuvDF+GZjcMU/Ze6MxntVJYO/fRlCPhCaVUyPY9WTalHJw54tp9sXeJo3tlShWpy41vQRgLRGOuz+w==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.2"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@radix-ui/react-aspect-ratio/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.2.tgz",
+      "integrity": "sha512-YAKxaiGsSQJ38VzKH86/BPRC4rh+b1Jpa+JneA5LRE7skmLPNAyeG8kPJj/oo4STLvlrs8vkf/iYyc3A5stYCQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/react-avatar": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz",
@@ -2935,6 +2993,29 @@
         }
       }
     },
+    "node_modules/@radix-ui/themes/node_modules/@radix-ui/react-aspect-ratio": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
+      "integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@radix-ui/themes/node_modules/@radix-ui/react-dialog": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.1.tgz",
@@ -4216,6 +4297,12 @@
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
       "license": "MIT"
     },
+    "node_modules/dayjs": {
+      "version": "1.11.13",
+      "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.13.tgz",
+      "integrity": "sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==",
+      "license": "MIT"
+    },
     "node_modules/debug": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.7.tgz",

enshi/package.json

@@ -11,6 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@radix-ui/react-aspect-ratio": "^1.1.2",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-form": "^0.1.0",
     "@radix-ui/react-icons": "^1.3.2",
@@ -23,6 +24,7 @@
     "@tanstack/react-query-devtools": "^5.61.0",
     "@types/quill": "^2.0.14",
     "axios": "^1.7.7",
+    "dayjs": "^1.11.13",
     "html-react-parser": "^5.1.16",
     "i18n": "^0.15.1",
     "i18next": "^23.14.0",

enshi/src/App.tsx

@@ -3,6 +3,8 @@ import "@radix-ui/themes/styles.css";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import "axios";
+import dayjs from "dayjs";
+import relativeTime from 'dayjs/plugin/relativeTime';
 import { useAtomValue } from "jotai";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import queryClient from "./api/QueryClient/QueryClient";
@@ -11,6 +13,9 @@ import { themeAtom } from "./AtomStore/AtomStore";
 import ToastProvider from "./Components/ToastProvider/ToastProvider";
 import { routes } from "./routes/routes";
 
+
+dayjs.extend(relativeTime)
+
 const router = createBrowserRouter(routes);
 
 export default function App() {

enshi/src/Components/ArticleViewer/ArticleViewer.tsx

@@ -70,7 +70,9 @@ export default function ArticleViewer(props: TArticleViewer) {
 
 			<Separator size={"4"} className="my-2" />
 
+			<Text>
 				<Interweave content={data.content} />
+			</Text>
 		</ScrollArea>
 	);
 }

enshi/src/Components/NavBar/NavigationMenu/NavigationMenu.tsx

@@ -9,8 +9,8 @@ export default function CustomNavigationMenu() {
 
     return (
         <div className="flex-1">
-            <NavigationMenu.Root orientation="horizontal">
+            <NavigationMenu.Root orientation="horizontal" className="h-full">
-                <NavigationMenu.List className="flex items-center justify-start gap-8">
+                <NavigationMenu.List className="flex items-center justify-start h-full gap-8 my-auto">
                     <NavItem text={t("home")} to="/" />
 
                     <NavItem text={t("following")} to="/c" />

enshi/src/Components/NavBar/RightButtonBar/ThemeChangeButton/ThemeChangeButton.tsx

@@ -6,18 +6,26 @@ import { themeAtom } from "../../../../AtomStore/AtomStore";
 export default function ThemeChangeButton() {
 	const [theme, setTheme] = useAtom(themeAtom);
 
-
 	const toggleTheme = () => {
-        if(theme === 'light') {
+		if (theme === "light") {
-            setTheme('dark')
+			setTheme("dark");
 		} else {
-            setTheme('light')
+			setTheme("light");
-        }
 		}
+	};
 
 	return (
-        <IconButton onClick={toggleTheme} className="mx-0 my-auto rounded-full p-[8px]" variant="ghost">
+		<IconButton
-            {theme === 'light' ? <SunIcon /> : <MoonIcon />}
+			size={"3"}
+			onClick={toggleTheme}
+			className="mx-0 my-auto rounded-full p-[8px]"
+			variant="ghost"
+		>
+			{theme === "light" ? (
+				<SunIcon className="size-6" />
+			) : (
+				<MoonIcon className="size-6" />
+			)}
 		</IconButton>
-    )
+	);
 }

enshi/src/Components/NavBar/RightButtonBar/UserButton/UserButton.tsx

@@ -26,11 +26,11 @@ export default function UserButton() {
                 <Tooltip content={"User menu"} className="w-fit">
                     <DropdownMenu.Trigger>
                         <IconButton
-                            size={"2"}
+                            size={"3"}
                             className="items-center my-auto rounded-full"
                             variant="ghost"
                         >
-                            <PersonIcon />
+                            <PersonIcon className="size-6" />
                         </IconButton>
                     </DropdownMenu.Trigger>
                 </Tooltip>

enshi/src/Pages/RandomPostsPage/PostCard/PostCard.tsx

@@ -1,26 +1,74 @@
-import { ImageIcon } from "@radix-ui/react-icons";
+import { CalendarIcon } from "@radix-ui/react-icons";
-import { Box, Card, Heading } from "@radix-ui/themes";
+import {
+    Box,
+    Card,
+    Flex,
+    Heading,
+    Inset,
+    Text,
+    Tooltip,
+} from "@radix-ui/themes";
+import dayjs from "dayjs";
+import "dayjs/locale/ru";
+import { useMemo } from "react";
 import { useNavigate } from "react-router-dom";
 import { Post } from "../../../@types/PostTypes";
 
 export default function PostCard(props: Post) {
-    const navigate = useNavigate()
+	const navigate = useNavigate();
+
+	const parsedDate = dayjs(props.created_at)
+		.locale("ru")
+		.format("DD MMMM YYYY");
 
 	const clickHandler = () => {
-        navigate(`/posts/${props.post_id.toString()}`)
+		navigate(`/posts/${props.post_id.toString()}`);
-    }
+	};
+
+    const seed = useMemo(() => {
+        return Math.floor(Math.random() * (1 + Math.random()) * 100000);
+    }, []);
 
 	return (
-        <Card className="h-32 mb-4" onClick={clickHandler}>
+		<Card
-            <Box className="flex size-full">
+			className="flex cursor-pointer"
-                <Box>
+			onClick={clickHandler}
-                    <ImageIcon className="w-full h-full" />
+		>
+			<Box className="flex-1 h-full min-w-[550px]">
+				<Inset side={"left"} clip={"padding-box"}>
+					<img
+						className="w-full h-72"
+						src={`https://picsum.photos/seed/${seed}/550/288?grayscale`}
+						alt="Bold typography"
+					/>
+				</Inset>
 			</Box>
 
-                <Box className="px-4 pt-2">
+			<Flex
+				direction={"column"}
+				className="justify-between flex-1 w-full px-4 pt-2"
+			>
 				<Heading>{props.title}</Heading>
-                </Box>
+
-            </Box>
+				<Flex gap={"2"} className="items-end justify-start flex-1">
+					<Tooltip content={`Written at`}>
+						<Flex className="items-center gap-2">
+							<CalendarIcon className="size-6" />
+							<Text
+								size={{
+									sm: "4",
+									md: "5",
+									lg: "6",
+								}}
+								weight={"medium"}
+								className="flex items-center gap-1"
+							>
+								{`${parsedDate}`}
+							</Text>
+						</Flex>
+					</Tooltip>
+				</Flex>
+			</Flex>
 		</Card>
 	);
 }

enshi/src/Pages/RandomPostsPage/RandomPostsPage.tsx

@@ -1,11 +1,4 @@
-import {
+import { Box, Flex, ScrollArea, Text } from "@radix-ui/themes";
-    Box,
-    Flex,
-    Heading,
-    ScrollArea,
-    Separator,
-    Text,
-} from "@radix-ui/themes";
 import { useInfiniteQuery } from "@tanstack/react-query";
 import { useEffect } from "react";
 import { useTranslation } from "react-i18next";
@@ -14,7 +7,7 @@ import { SelectedPostsResponse } from "../../@types/PostTypes";
 import { axiosLocalhost } from "../../api/axios/axios";
 import PostCard from "./PostCard/PostCard";
 
-const LIMIT = 5;
+const LIMIT = 7;
 
 export default function RandomPostsPage() {
 	const { t } = useTranslation();
@@ -45,26 +38,26 @@ export default function RandomPostsPage() {
 
 	return (
 		<>
-            <Flex direction={"column"} className="w-full mx-auto overflow-hidden max-w-pc-width ">
-                <Heading size={"9"} weight={"regular"} className="text-center">
-                    {t("discover")}
-                </Heading>
-
-                <Separator size={"4"} className="my-8" />
 			<ScrollArea>
+				<Flex
+					direction={"column"}
+					className="w-full overflow-hidden sm:mx-auto max-w-pc-width "
+				>
+					<Flex direction={"column"} gap={"4"}>
 						{data?.pages.map((post, i) => {
 							return (
-                            <div key={i}>
+								<Flex direction={"column"} gap={"4"} key={`${i}`}>
-                                {post.selected_posts.map((post, i) => {
+									{post.selected_posts.map((post, j) => {
 										return (
-                                        <div key={`${i}${post.post_id}`}>
+											<div key={`${j}${post.post_id}`}>
 												<PostCard {...post} />
 											</div>
 										);
 									})}
-                            </div>
+								</Flex>
 							);
 						})}
+
 						<Box ref={ref} className="w-full mb-4 text-center">
 							{isFetching ? (
 								<Text>Loading more...</Text>
@@ -79,8 +72,9 @@ export default function RandomPostsPage() {
 								<Text>No more posts to load</Text>
 							)}
 						</Box>
-                </ScrollArea>
 					</Flex>
+				</Flex>
+			</ScrollArea>
 		</>
 	);
 }

enshi/src/index.css

@@ -1,4 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Edu+AU+VIC+WA+NT+Pre:wght@400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Pochaevsk&display=swap');
 
 @tailwind base;
 @tailwind components;
@@ -15,8 +16,7 @@
 }
 
 .radix-themes {
-	--default-font-family: "Times New Roman"; ;
+	--default-font-family: "Pochaevsk", sans-serif; 
- 
 	--heading-font-family: "Edu AU VIC WA NT Pre", cursive;
 		/* Your custom font for <Heading> components */ 
         --code-font-family:

enshi/src/layout/MainPage/MainPage.tsx

@@ -66,7 +66,7 @@ export default function MainPage() {
                     <NavBar />
                     <Box
                         flexGrow={"1"}
-                        className="flex flex-col overflow-hidden"
+                        className="flex flex-col mx-4 overflow-hidden"
                     >
                         <Outlet />
                     </Box>