feat: metadata, changelog index

wanderer-moe · Sep 3, 2024 · 80f8d56 · 80f8d56
1 parent a772806
commit 80f8d56
Show file tree

Hide file tree

Showing 7 changed files with 82 additions and 139 deletions.
diff --git a/src/app/error.tsx b/src/app/error.tsx
@@ -8,7 +8,7 @@ import { usePathname } from "next/navigation";
 import { LogLevel } from "next-axiom/dist/logger";
 
 export const metadata: Metadata = {
-    title: "internal server error • wanderer.moe",
+    title: "Internal Server Error • wanderer.moe",
     description:
         "Centralized game assets database (previously wtf.dromzeh.dev)",
 };

diff --git a/src/app/not-found.tsx b/src/app/not-found.tsx
@@ -3,7 +3,7 @@ import Link from "next/link";
 import { Button } from "~/components/ui/button";
 
 export const metadata: Metadata = {
-    title: "page not found • wanderer.moe",
+    title: "Page Not Found • wanderer.moe",
     description:
         "Centralized game assets database (previously wtf.dromzeh.dev)",
 };

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -2,9 +2,10 @@ import { Metadata } from "next";
 import { DescriptionImage } from "~/components/desc-image";
 import { GamesGrid } from "~/components/games/games-grid";
 import { InfoGrid } from "~/components/info/info-grid";
+import { HomeChangelogHandler } from "~/components/changelog/changelog-handler";
 
 export const metadata: Metadata = {
-    title: "home • wanderer.moe",
+    title: "Home • wanderer.moe",
     description:
         "Centralized game assets database (previously wtf.dromzeh.dev)",
 };
@@ -20,6 +21,7 @@ export default async function Home() {
                     description="Centralized game assets database"
                 />
                 <GamesGrid />
+                <HomeChangelogHandler />
                 <InfoGrid />
             </div>
         </main>

diff --git a/src/components/changelog/changelog-handler.tsx b/src/components/changelog/changelog-handler.tsx
@@ -4,21 +4,31 @@ import { useEffect, useState } from "react";
 import { getChangeLog } from "~/lib/api/client";
 import { Skeleton } from "~/components/ui/skeleton";
 import { Card } from "~/components/ui/card";
+import {
+    Tooltip,
+    TooltipContent,
+    TooltipProvider,
+    TooltipTrigger,
+} from "~/components/ui/tooltip";
 import { ChangeLogRoute, DiscordUser } from "~/lib/types";
 import Image from "next/image";
 import Link from "next/link";
 
-function ChangelogSkeleton() {
+function ChangelogSkeleton({ toShow }: { toShow: number }) {
     return (
         <div className="flex flex-col gap-4">
-            {[...Array(12)].map((_, i) => (
-                <Skeleton key={i} className="h-[150px]" />
+            {[...Array(toShow)].map((_, i) => (
+                <Skeleton key={i} className="h-[90px]" />
             ))}
         </div>
     );
 }
 
-export function ChangelogHandler() {
+interface ChangelogHandlerProps {
+    toShow?: number;
+}
+
+export function ChangelogHandler({ toShow }: ChangelogHandlerProps) {
     const [changelog, setChangelog] = useState<ChangeLogRoute["messages"]>([]);
     const [isLoading, setIsLoading] = useState(true);
 
@@ -35,7 +45,7 @@ export function ChangelogHandler() {
     }, []);
 
     if (isLoading) {
-        return <ChangelogSkeleton />;
+        return <ChangelogSkeleton toShow={toShow ?? 12} />;
     }
 
     const removeFromContent = [
@@ -52,7 +62,10 @@ export function ChangelogHandler() {
         const channelRegex = /<#\d+>/g;
 
         let formattedContent = content.replace(emoteRegex, "");
-        formattedContent = formattedContent.replace(channelRegex, "[channel]");
+        formattedContent = formattedContent.replace(
+            channelRegex,
+            "[server channel]",
+        );
 
         formattedContent = formattedContent.replace(urlRegex, (match, url) => {
             return `<URL>${url}</URL>`;
@@ -72,7 +85,7 @@ export function ChangelogHandler() {
                     (user) => user.id === userId,
                 );
                 return mentionedUser
-                    ? `<MENTION>${userId}:${mentionedUser.username}</MENTION>`
+                    ? `<MENTION>${userId}:${mentionedUser.username}:${mentionedUser.global_name}</MENTION>`
                     : match;
             },
         );
@@ -107,16 +120,25 @@ export function ChangelogHandler() {
                     part.startsWith("<MENTION>") &&
                     part.endsWith("</MENTION>")
                 ) {
-                    const [userId, username] = part.slice(9, -10).split(":");
+                    const [userId, username, global_name] = part
+                        .slice(9, -10)
+                        .split(":");
                     return (
-                        <Link
-                            key={index}
-                            href={`https://discord.com/users/${userId}`}
-                            className="text-primary transition-150 transition-all ease-linear hover:text-muted-foreground"
-                            prefetch={false}
-                        >
-                            @{username}
-                        </Link>
+                        <TooltipProvider delayDuration={100}>
+                            <Tooltip>
+                                <TooltipTrigger>
+                                    <Link
+                                        key={index}
+                                        href={`https://discord.com/users/${userId}`}
+                                        className="text-primary transition-150 transition-all ease-linear hover:text-muted-foreground"
+                                        prefetch={false}
+                                    >
+                                        @{global_name}
+                                    </Link>
+                                </TooltipTrigger>
+                                <TooltipContent>@{username}</TooltipContent>
+                            </Tooltip>
+                        </TooltipProvider>
                     );
                 }
                 return <span key={index}>{part}</span>;
@@ -126,7 +148,7 @@ export function ChangelogHandler() {
     return (
         <div className="flex flex-col gap-4">
             {changelog.length > 0 ? (
-                changelog.map((message) => (
+                changelog.slice(0, toShow).map((message) => (
                     <Card
                         className="p-4 text-muted-foreground"
                         key={message.id}
@@ -137,34 +159,39 @@ export function ChangelogHandler() {
                                     <Image
                                         src={`https://cdn.discordapp.com/avatars/${message.author.id}/${message.author.avatar}.png`}
                                         alt={message.author.username}
-                                        width={24}
+                                        width={20}
                                         className="rounded-full"
-                                        height={24}
+                                        height={20}
                                     />
-                                    <p className="text-primary">
+                                    <p className="text-sm text-primary">
                                         {message.author.username}
                                     </p>
                                 </div>
-                                <p className="text-muted-foreground">
+                                <p className="text-muted-foreground text-sm">
                                     {new Date(
                                         message.timestamp,
                                     ).toLocaleDateString()}
                                 </p>
                             </div>
-                            {message.content
-                                .replace(
-                                    new RegExp(
-                                        removeFromContent.join("|"),
-                                        "g",
-                                    ),
-                                    "",
-                                )
-                                .split("\n")
-                                .map((line, index) => (
-                                    <p key={index}>
-                                        {formatContent(line, message.mentions)}
-                                    </p>
-                                ))}
+                            <div className="text-xs">
+                                {message.content
+                                    .replace(
+                                        new RegExp(
+                                            removeFromContent.join("|"),
+                                            "g",
+                                        ),
+                                        "",
+                                    )
+                                    .split("\n")
+                                    .map((line, index) => (
+                                        <p key={index}>
+                                            {formatContent(
+                                                line,
+                                                message.mentions,
+                                            )}
+                                        </p>
+                                    ))}
+                            </div>
                         </div>
                     </Card>
                 ))
@@ -174,3 +201,17 @@ export function ChangelogHandler() {
         </div>
     );
 }
+
+export function HomeChangelogHandler() {
+    return (
+        <div className="flex flex-col gap-4">
+            <div className="flex flex-col">
+                <h2 className="text-lg font-semibold">Changelog</h2>
+                <p className="text-muted-foreground text-sm">
+                    wanderer.moe's most recent changes, fetched from Discord
+                </p>
+            </div>
+            <ChangelogHandler toShow={2} />
+        </div>
+    );
+}
diff --git a/src/components/info/info-grid.tsx b/src/components/info/info-grid.tsx
@@ -48,7 +48,7 @@ export function InfoGrid() {
     return (
         <div>
             <div className="flex flex-col mb-4">
-                <h2 className="text-xl font-semibold">Other</h2>
+                <h2 className="text-xl font-semibold">Socials</h2>
                 <p className="text-sm text-muted-foreground">
                     Socials and other information regarding wanderer.moe
                 </p>

diff --git a/src/components/nav/nav-bar.tsx b/src/components/nav/nav-bar.tsx
@@ -2,7 +2,6 @@
 
 import Link from "next/link";
 
-import { NavSidebar } from "./nav-sidebar";
 import { ArrowRightIcon } from "lucide-react";
 import { AssetDownloadIndicator } from "../asset/download-indicator";
 import { CommandSearch } from "./command";
@@ -29,7 +28,6 @@ export default function NavBar() {
                 <div className="flex flex-row gap-2 items-center">
                     <AssetDownloadIndicator />
                     <CommandSearch />
-                    <NavSidebar />
                 </div>
             </nav>
         </header>

diff --git a/src/components/nav/nav-sidebar.tsx b/src/components/nav/nav-sidebar.tsx