add blog preview Image, blog to sidebar and realms first in game list

BibliothecaDAO · Oct 8, 2024 · 94b910e · 94b910e
1 parent a85f1e7
commit 94b910e
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 25 deletions.
diff --git a/apps/nextjs/keystatic.config.ts b/apps/nextjs/keystatic.config.ts
@@ -171,6 +171,10 @@ export default config({
           label: "Banner Image",
           directory: "public/content/blogs",
         }),
+        previewImage: fields.image({
+          label: "Preview Image",
+          directory: "public/content/blogs",
+        }),
         subtitle: fields.text({ label: "Subtitle" }),
         content: fields.markdoc({
           label: "Content",

diff --git a/apps/nextjs/src/app/(app)/blogs/BlogCard.tsx b/apps/nextjs/src/app/(app)/blogs/BlogCard.tsx
@@ -4,29 +4,37 @@ import { Badge } from "@realms-world/ui/components/ui/badge";
 import { Card } from "@realms-world/ui/components/ui/card";
 import type { CollectionEntry } from "@/utils/keystatic";
 
+export const BlogCard = ({
+  blog,
+  slug,
+}: {
+  blog: CollectionEntry<"blogs">;
+  slug: string;
+}) => {
+  return (
+    <Card>
+      <Link href={`/blogs/${slug}`} className="flex flex-col">
+        <Image
+          className="min-h-[400px] w-full rounded-l object-cover"
+          src={`/content/blogs/${slug}/${blog.previewImage ?? blog.image}`}
+          width={500}
+          height={500}
+          alt={blog.title}
+        />
+        <div className="align-center p-4">
+          <Badge>
+            {" "}
+            <time dateTime={blog?.publishDate || ""}>
+              {new Date(blog?.publishDate || "").toLocaleDateString()}
+            </time>
+          </Badge>
 
-export const BlogCard = ({ blog, slug }: { blog: CollectionEntry<'blogs'>, slug: string }) => {
-    return (
-        <Card>
-            <Link href={`/blogs/${slug}`} className="flex flex-col">
-                <Image
-                    className="min-h-[400px] w-full rounded-l object-cover"
-                    src={`/content/blogs/${slug}/${blog.image}`}
-                    width={500}
-                    height={500}
-                    alt={blog.title}
-                />
-                <div className="align-center p-4">
-                    <Badge> <time dateTime={blog?.publishDate || ''}>
-                        {new Date(blog?.publishDate || '').toLocaleDateString()}
-                    </time></Badge>
-
-                    <h4 className="my-4 text-2xl">{blog.title}</h4>
-                    <p>{blog.subtitle}</p>
-                </div>
-            </Link>
-        </Card>
-    );
+          <h4 className="my-4 text-2xl">{blog.title}</h4>
+          <p>{blog.subtitle}</p>
+        </div>
+      </Link>
+    </Card>
+  );
 };
 
-export default BlogCard;
+export default BlogCard;
diff --git a/apps/nextjs/src/app/(app)/games/page.tsx b/apps/nextjs/src/app/(app)/games/page.tsx
@@ -11,7 +11,14 @@ export const metadata: Metadata = {
 };
 
 export default async function Page() {
-  const games = await reader.collections.games.all();
+  const allGames = await reader.collections.games.all();
+
+  const games = allGames.sort((a, b) => {
+    if (a.slug === "realms-eternum") return -1;
+    if (b.slug === "realms-eternum") return 1;
+    return 0;
+  });
+
   return (
     <PageLayout title="Onchain Games">
       <div className="mt-8 grid grid-cols-1 gap-4 px-4 sm:px-8 md:grid-cols-2 lg:grid-cols-3">

diff --git a/apps/nextjs/src/app/_components/SideMenu.tsx b/apps/nextjs/src/app/_components/SideMenu.tsx
@@ -13,7 +13,7 @@ import Gamepad from "@/icons/gamepad.svg";
 import LordsIcon from "@/icons/lords.svg";
 import RWLogo from "@/icons/rw-logo.svg";
 import SideHeaderImg from "@/icons/side-header.svg";
-import { Github, Twitter, User } from "lucide-react";
+import { Github, Newspaper, Twitter, User } from "lucide-react";
 
 import { Button } from "@realms-world/ui/components/ui/button";
 import { ScrollArea } from "@realms-world/ui/components/ui/scroll-area";
@@ -42,6 +42,11 @@ const Sidebar = () => {
       href: "/events",
       icon: <Calender className="w-[25px]" />,
     },
+    {
+      name: "Blog",
+      href: "/blogs",
+      icon: <Newspaper className="w-[25px]" />,
+    },
     {
       name: "Account",
       href: "/account",