Create featured page

index.html

@@ -46,8 +46,8 @@
           },
           {
             "@type": "WebPage",
-            "url": "https://bookracy.org/random",
-            "name": "Random"
+            "url": "https://bookracy.org/library",
+            "name": "Library"
           },
           {
             "@type": "WebPage",

sitemap.xml

@@ -32,9 +32,9 @@
     <priority>0.6</priority>
   </url>
 
-  <!-- Random Page -->
+  <!-- Library Page -->
   <url>
-    <loc>https://www.bookracy.org/random</loc>
+    <loc>https://www.bookracy.org/library</loc>
     <lastmod>2024-08-14</lastmod>
     <changefreq>daily</changefreq>
     <priority>0.5</priority>

src/api/backend/search/search.ts

@@ -1,9 +1,10 @@
 import { useQuery } from "@tanstack/react-query";
 import { BaseRequest, client } from "../base";
-import { SearchParams, SearchResultItem } from "./types";
+import { BookItemResponse } from "../types";
+import { SearchParams } from "./types";
 
 export const getBooks = (params: SearchParams) => {
-  return client<BaseRequest<SearchResultItem>>("/books", {
+  return client<BaseRequest<BookItemResponse>>("/books", {
     query: params,
   });
 };

src/api/backend/search/types.ts

@@ -1,18 +1,3 @@
-export interface SearchResultItem {
-  authors: string;
-  book_content: string;
-  book_filetype: string;
-  book_image: string;
-  book_lang: string;
-  book_size: string;
-  book_source: string;
-  custom_subtitle: string;
-  link: string;
-  md5: string;
-  publication: string[];
-  title: string;
-}
-
 export interface SearchParams {
   query: string;
   lang: string;

src/api/backend/trending/trending.ts

@@ -0,0 +1,14 @@
+import { queryOptions } from "@tanstack/react-query";
+import { ofetch } from "ofetch";
+import { BookItemResponse } from "../types";
+
+export const getTrending = async () => {
+  return ofetch<Record<string, BookItemResponse[]>>("https://raw.githubusercontent.com/bookracy/static/main/trending.json", {
+    parseResponse: (response) => JSON.parse(response),
+  });
+};
+
+export const getTrendingQueryOptions = queryOptions({
+  queryKey: ["trending"],
+  queryFn: getTrending,
+});

src/api/backend/types.ts

@@ -0,0 +1,14 @@
+export interface BookItemResponse {
+  authors: string;
+  book_content: string;
+  book_filetype: string;
+  book_image: string;
+  book_lang: string;
+  book_size: string;
+  book_source: string;
+  custom_subtitle: string;
+  link: string;
+  md5: string;
+  publication: string[];
+  title: string;
+}

src/components/books/book-item.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { SearchResultItem } from "@/api/backend/search/types";
+import { BookItemResponse } from "@/api/backend/types";
 import { Card, CardContent } from "../ui/card";
 import { Button } from "../ui/button";
 import { saveAs } from "@/lib/saveAs";
@@ -9,7 +9,7 @@ import { Skeleton } from "../ui/skeleton";
 import { BookOpen, DownloadIcon } from "lucide-react";
 import { EpubReader } from "./epub-reader";
 
-type BookItemProps = SearchResultItem;
+type BookItemProps = BookItemResponse;
 
 export function BookItem(props: BookItemProps) {
   const [isReaderOpen, setIsReaderOpen] = useState(false);

src/components/layout/footer.tsx

@@ -14,17 +14,17 @@ export function Footer() {
         </Link>
         <div className="flex-1" />
 
-        <a target="_blank" href={GITHUB_URL} rel="noreferrer" className="h-6 w-6">
+        <a target="_blank" href={GITHUB_URL} rel="noreferrer" className="h-6 w-6 transition-transform duration-150 hover:scale-110">
           <img src={GitHubLogo} alt="Github" className="h-6 w-6 dark:invert" />
         </a>
-        <a target="_blank" rel="noreferrer" href={DISCORD_URL}>
+        <a target="_blank" rel="noreferrer" href={DISCORD_URL} className="transition-transform duration-150 hover:scale-110">
           <img src={DiscordLogo} alt="Discord" className="h-6 w-6 dark:invert" />
         </a>
-        <a target="_blank" rel="noreferrer" href={X_URL}>
+        <a target="_blank" rel="noreferrer" href={X_URL} className="transition-transform duration-150 hover:scale-110">
           <img src={XLogo} alt="Twitter" className="h-6 w-6 dark:invert" />
         </a>
 
-        <Link to="/contact">
+        <Link to="/contact" className="transition-transform duration-150 hover:scale-110">
           <MailPlus className="h-6 w-6" />
         </Link>
       </div>

src/components/layout/sidebar.tsx

@@ -1,5 +1,4 @@
 import { ChevronLeft } from "lucide-react";
-import React from "react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
 import { useLayoutStore } from "@/stores/layout";

src/constants.ts

@@ -11,7 +11,7 @@ export const PAGE_TITLES: Partial<Record<RoutePaths<typeof routeTree>, string>>
   "/account": "Account",
   "/contact": "Contact",
   "/featured": "Featured",
-  "/random": "Random",
+  "/library": "Library",
   "/settings": "Settings",
   "/upload": "Upload",
 };

src/lib/layout.ts

@@ -1,6 +1,6 @@
 import { routeTree } from "@/routeTree.gen";
 import { RoutePaths } from "@tanstack/react-router";
-import { Blocks, House, LucideIcon, Pickaxe, Star, Upload } from "lucide-react";
+import { Blocks, House, LucideIcon, BookMarked, Star, Upload } from "lucide-react";
 
 export type Submenu = {
   href: RoutePaths<typeof routeTree>;
@@ -34,10 +34,10 @@ export function getMenuList(pathname: RoutePaths<typeof routeTree> | string): Gr
           submenus: [],
         },
         {
-          href: "/random",
-          label: "Random",
-          active: pathname === "/random",
-          icon: Pickaxe,
+          href: "/library",
+          label: "Library",
+          active: pathname === "/library",
+          icon: BookMarked,
           submenus: [],
         },
         {

src/routeTree.gen.ts

@@ -14,8 +14,8 @@ import { Route as rootRoute } from './routes/__root'
 import { Route as UploadImport } from './routes/upload'
 import { Route as SettingsImport } from './routes/settings'
 import { Route as RegisterImport } from './routes/register'
-import { Route as RandomImport } from './routes/random'
 import { Route as LoginImport } from './routes/login'
+import { Route as LibraryImport } from './routes/library'
 import { Route as FeaturedImport } from './routes/featured'
 import { Route as ContactImport } from './routes/contact'
 import { Route as AccountImport } from './routes/account'
@@ -39,13 +39,13 @@ const RegisterRoute = RegisterImport.update({
   getParentRoute: () => rootRoute,
 } as any)
 
-const RandomRoute = RandomImport.update({
-  path: '/random',
+const LoginRoute = LoginImport.update({
+  path: '/login',
   getParentRoute: () => rootRoute,
 } as any)
 
-const LoginRoute = LoginImport.update({
-  path: '/login',
+const LibraryRoute = LibraryImport.update({
+  path: '/library',
   getParentRoute: () => rootRoute,
 } as any)
 
@@ -113,20 +113,20 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof FeaturedImport
       parentRoute: typeof rootRoute
     }
+    '/library': {
+      id: '/library'
+      path: '/library'
+      fullPath: '/library'
+      preLoaderRoute: typeof LibraryImport
+      parentRoute: typeof rootRoute
+    }
     '/login': {
       id: '/login'
       path: '/login'
       fullPath: '/login'
       preLoaderRoute: typeof LoginImport
       parentRoute: typeof rootRoute
     }
-    '/random': {
-      id: '/random'
-      path: '/random'
-      fullPath: '/random'
-      preLoaderRoute: typeof RandomImport
-      parentRoute: typeof rootRoute
-    }
     '/register': {
       id: '/register'
       path: '/register'
@@ -159,8 +159,8 @@ export const routeTree = rootRoute.addChildren({
   AccountRoute,
   ContactRoute,
   FeaturedRoute,
+  LibraryRoute,
   LoginRoute,
-  RandomRoute,
   RegisterRoute,
   SettingsRoute,
   UploadRoute,
@@ -179,8 +179,8 @@ export const routeTree = rootRoute.addChildren({
         "/account",
         "/contact",
         "/featured",
+        "/library",
         "/login",
-        "/random",
         "/register",
         "/settings",
         "/upload"
@@ -201,12 +201,12 @@ export const routeTree = rootRoute.addChildren({
     "/featured": {
       "filePath": "featured.tsx"
     },
+    "/library": {
+      "filePath": "library.tsx"
+    },
     "/login": {
       "filePath": "login.tsx"
     },
-    "/random": {
-      "filePath": "random.tsx"
-    },
     "/register": {
       "filePath": "register.tsx"
     },

src/routes/featured.tsx

@@ -1,27 +1,36 @@
-import * as React from "react";
-import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Button } from "@/components/ui/button";
-import { createFileRoute, Link } from "@tanstack/react-router";
+import { createFileRoute } from "@tanstack/react-router";
+import React, { useMemo } from "react";
+import { BookItem } from "@/components/books/book-item";
+import { getTrendingQueryOptions } from "@/api/backend/trending/trending";
+import { useSuspenseQuery } from "@tanstack/react-query";
 
 export const Route = createFileRoute("/featured")({
   component: Feature,
+  async beforeLoad(ctx) {
+    await ctx.context.queryClient.ensureQueryData(getTrendingQueryOptions);
+  },
 });
 
 function Feature() {
+  const { data } = useSuspenseQuery(getTrendingQueryOptions);
+
+  const categories = useMemo(() => Object.keys(data ?? {}), [data]);
+
   return (
     <div className="flex h-full w-full justify-center">
       <div className="flex w-full flex-col">
-        <Card>
-          <CardHeader>
-            <CardTitle>Coming soon! ⏱️</CardTitle>
-            <CardDescription className="flex flex-col gap-8">
-              Sorry, Bookracy is a work in progress and this feature is not yet available. Come back later and maybe it will be 😉
-              <Link to="/" search={{ q: "" }}>
-                <Button className="w-full">Go Back</Button>
-              </Link>
-            </CardDescription>
-          </CardHeader>
-        </Card>
+        {categories.map((category: string) => (
+          <div key={category} className="mb-8">
+            <h1 className="mb-4 text-2xl font-bold">
+              {category
+                .replace("_", " ")
+                .split(" ")
+                .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+                .join(" ")}
+            </h1>
+            <div className="grid grid-cols-2 gap-4">{data[category].length > 0 ? data[category].map((book) => <BookItem key={book.md5} {...book} />) : null}</div>
+          </div>
+        ))}
       </div>
     </div>
   );

src/routes/random.tsx → src/routes/library.tsx

@@ -3,11 +3,11 @@ import { Card, CardDescription, CardHeader, CardTitle } from "@/components/ui/ca
 import { Button } from "@/components/ui/button";
 import { createFileRoute, Link } from "@tanstack/react-router";
 
-export const Route = createFileRoute("/random")({
-  component: Random,
+export const Route = createFileRoute("/library")({
+  component: Library,
 });
 
-function Random() {
+function Library() {
   return (
     <div className="flex h-full w-full justify-center">
       <div className="flex w-full flex-col">