Tweaking at home page
This commit is contained in:
Max
parent
c36e4a7f7d
commit
f70582ce83
@ -1,4 +1,7 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"useTabs": false
|
||||
"useTabs": true,
|
||||
"printWidth": 80,
|
||||
"semi": true,
|
||||
"quoteProps": "consistent"
|
||||
}
|
||||
|
||||
95
enshi/package-lock.json
generated
95
enshi/package-lock.json
generated
@ -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",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.0.tgz",
|
||||
"integrity": "sha512-dP87DM/Y7jFlPgUZTlhx6FF5CEzOiaxp2rBCKlaXlpH5Ip/9Fg5zZ9lDOQ5o/MOfUlf36eak14zoWYpgcgGoOg==",
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/@radix-ui/react-aspect-ratio/-/react-aspect-ratio-1.1.2.tgz",
|
||||
"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",
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -70,7 +70,9 @@ export default function ArticleViewer(props: TArticleViewer) {
|
||||
|
||||
<Separator size={"4"} className="my-2" />
|
||||
|
||||
<Text>
|
||||
<Interweave content={data.content} />
|
||||
</Text>
|
||||
</ScrollArea>
|
||||
);
|
||||
}
|
||||
|
||||
@ -9,8 +9,8 @@ export default function CustomNavigationMenu() {
|
||||
|
||||
return (
|
||||
<div className="flex-1">
|
||||
<NavigationMenu.Root orientation="horizontal">
|
||||
<NavigationMenu.List className="flex items-center justify-start gap-8">
|
||||
<NavigationMenu.Root orientation="horizontal" className="h-full">
|
||||
<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" />
|
||||
|
||||
@ -6,18 +6,26 @@ import { themeAtom } from "../../../../AtomStore/AtomStore";
|
||||
export default function ThemeChangeButton() {
|
||||
const [theme, setTheme] = useAtom(themeAtom);
|
||||
|
||||
|
||||
const toggleTheme = () => {
|
||||
if(theme === 'light') {
|
||||
setTheme('dark')
|
||||
if (theme === "light") {
|
||||
setTheme("dark");
|
||||
} else {
|
||||
setTheme('light')
|
||||
}
|
||||
setTheme("light");
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<IconButton onClick={toggleTheme} className="mx-0 my-auto rounded-full p-[8px]" variant="ghost">
|
||||
{theme === 'light' ? <SunIcon /> : <MoonIcon />}
|
||||
<IconButton
|
||||
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>
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -1,26 +1,74 @@
|
||||
import { ImageIcon } from "@radix-ui/react-icons";
|
||||
import { Box, Card, Heading } from "@radix-ui/themes";
|
||||
import { CalendarIcon } from "@radix-ui/react-icons";
|
||||
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}>
|
||||
<Box className="flex size-full">
|
||||
<Box>
|
||||
<ImageIcon className="w-full h-full" />
|
||||
<Card
|
||||
className="flex cursor-pointer"
|
||||
onClick={clickHandler}
|
||||
>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,11 +1,4 @@
|
||||
import {
|
||||
Box,
|
||||
Flex,
|
||||
Heading,
|
||||
ScrollArea,
|
||||
Separator,
|
||||
Text,
|
||||
} from "@radix-ui/themes";
|
||||
import { Box, Flex, ScrollArea, 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}>
|
||||
{post.selected_posts.map((post, i) => {
|
||||
<Flex direction={"column"} gap={"4"} key={`${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>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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:
|
||||
|
||||
@ -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>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user