Skip to content

Commit

Permalink
Merge pull request #291 from BibliothecaDAO/main
Browse files Browse the repository at this point in the history 
fix game page and cleanup
  • Loading branch information
@RedBeardEth
RedBeardEth authored Oct 7, 2024
2 parents ac720c0 + 61426a8 commit e9e2534
Show file tree
Hide file tree
Showing 5 changed files with 73 additions and 64 deletions.
6 changes: 0 additions & 6 deletions apps/nextjs/src/app/(app)/account/assets/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import type { Metadata } from "next";
import AssetL2CollectionPreview from "@/app/(app)/account/assets/AssetL2CollectionPreview";

import { Collections } from "@realms-world/constants";

Expand All @@ -18,11 +17,6 @@ export default function Page() {
<>
<div className="h-full w-full space-y-20">
<Portfolio />
{/*<BridgeNftWrapper collection={Collections.REALMS} />
<AssetL2CollectionPreview collectionName={Collections.GOLDEN_TOKEN} />
<AssetL2CollectionPreview collectionName={Collections.BEASTS} />
<AssetL2CollectionPreview collectionName={Collections.BLOBERT} />
<AssetL2CollectionPreview collectionName={Collections.BANNERS} />*/}
</div>
</>
);
Expand Down
10 changes: 0 additions & 10 deletions apps/nextjs/src/app/(app)/account/assets/realms/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,6 @@
import type { Metadata } from "next";
import AssetL2CollectionPreview from "@/app/(app)/account/assets/AssetL2CollectionPreview";

import { Collections, CollectionAddresses } from "@realms-world/constants";

import { BridgeNftWrapper } from "../BridgeNftWrapper";
import { Portfolio } from "../Portfolio";
import { SUPPORTED_L2_CHAIN_ID } from "@/constants/env";

export function generateMetadata(): Metadata {
return {
Expand All @@ -19,11 +14,6 @@ export default function Page() {
<>
<div className="h-full w-full space-y-20">
<BridgeNftWrapper />
{/*<BridgeNftWrapper collection={Collections.REALMS} />
<AssetL2CollectionPreview collectionName={Collections.GOLDEN_TOKEN} />
<AssetL2CollectionPreview collectionName={Collections.BEASTS} />
<AssetL2CollectionPreview collectionName={Collections.BLOBERT} />
<AssetL2CollectionPreview collectionName={Collections.BANNERS} />*/}
</div>
</>
);
Expand Down
27 changes: 13 additions & 14 deletions apps/nextjs/src/app/(app)/blogs/BlogGrid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,18 @@ import { BlogCard } from "./BlogCard";
import { reader } from "@/utils/keystatic";

export const BlogGrid = async () => {
const blogs = await reader.collections.blogs.all();
const blogsSortedByDate = blogs.sort(function (a, b) {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b?.entry.publishDate) - new Date(a?.entry.publishDate);
});
const blogs = await reader.collections.blogs.all();
const blogsSortedByDate = blogs.sort(function (a, b) {
// Turn your strings into dates, and then subtract them
// to get a value that is either negative, positive, or zero.
return new Date(b?.entry.publishDate) - new Date(a?.entry.publishDate);
});


return (
<div className="grid grid-cols-1 gap-4 md:grid-cols-3">
{blogsSortedByDate.map((blog, index) => (
<BlogCard key={index} blog={blog.entry} slug={blog.slug} />
))}
</div>
);
return (
<div className="sm:p4-4 grid grid-cols-1 gap-4 px-8 md:grid-cols-3">
{blogsSortedByDate.map((blog, index) => (
<BlogCard key={index} blog={blog.entry} slug={blog.slug} />
))}
</div>
);
};
18 changes: 8 additions & 10 deletions apps/nextjs/src/app/(app)/blogs/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,13 +54,13 @@ export default async function Page({ params }: { params: { slug: string } }) {
const errors = Markdoc.validate(node);
if (errors.length) {
console.error(errors);
throw new Error('Invalid content');
throw new Error("Invalid content");
}
const renderable = Markdoc.transform(node);

return (
<>
<div>
<div className="container mx-auto">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
Expand All @@ -77,8 +77,8 @@ export default async function Page({ params }: { params: { slug: string } }) {
<p className="mt-2 text-xl">{blog?.subtitle}</p>
<div className="mt-8 text-xl font-bold">
<span>Posted on </span>
<time dateTime={blog?.publishDate || ''}>
{new Date(blog?.publishDate || '').toLocaleDateString()}
<time dateTime={blog?.publishDate || ""}>
{new Date(blog?.publishDate || "").toLocaleDateString()}
</time>
<span> by </span>
<span>{blog?.author}</span>
Expand All @@ -91,7 +91,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
className="w-full object-cover"
height={600}
/>
<article className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ul:text-bright-yellow prose-ol:text-bright-yellow md:mt-12">
<article className="prose prose-lg mx-auto mt-6 max-w-5xl px-6 pb-6 text-xl prose-headings:text-bright-yellow prose-p:font-thin prose-p:text-bright-yellow prose-a:text-flamingo prose-strong:text-bright-yellow prose-ol:text-bright-yellow prose-ul:text-bright-yellow md:mt-12">
<div className="article-container">
{Markdoc.renderers.react(renderable, React)}
</div>
Expand All @@ -110,9 +110,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
);
}



export async function generateStaticParams() {
const blogSlugs = await reader.collections.blogs.list()
return blogSlugs.map((blogSlug) => ({ slug: blogSlug }))
}
const blogSlugs = await reader.collections.blogs.list();
return blogSlugs.map((blogSlug) => ({ slug: blogSlug }));
}
76 changes: 52 additions & 24 deletions apps/nextjs/src/app/(app)/games/[slug]/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,30 @@ import { StatusDot } from "@/app/_components/StatusDot";
import { reader } from "@/utils/keystatic";
import Markdoc from "@markdoc/markdoc";
import React from "react";
import { CHAIN_IDS_TO_NAMES, games } from "@realms-world/constants";
import { CHAIN_IDS_TO_NAMES } from "@realms-world/constants";

import { Button } from "@realms-world/ui/components/ui/button";
import { Badge } from "@realms-world/ui/components/ui/badge";
import { Tabs } from "@mui/material";
import { Breadcrumb, BreadcrumbList, BreadcrumbItem, BreadcrumbLink, BreadcrumbSeparator } from "@realms-world/ui/components/ui/breadcrumb";
import { Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext } from "@realms-world/ui/components/ui/carousel";
import { TabsList, TabsTrigger, TabsContent } from "@realms-world/ui/components/ui/tabs";
import {
Breadcrumb,
BreadcrumbList,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbSeparator,
} from "@realms-world/ui/components/ui/breadcrumb";
import {
Carousel,
CarouselContent,
CarouselItem,
CarouselPrevious,
CarouselNext,
} from "@realms-world/ui/components/ui/carousel";
import {
Tabs,
TabsList,
TabsTrigger,
TabsContent,
} from "@realms-world/ui/components/ui/tabs";

export async function generateMetadata({
params,
Expand All @@ -30,12 +46,11 @@ export default async function Page({ params }: { params: { slug: string } }) {
const keyStaticGame = await reader.collections.games.read(params.slug);

if (!keyStaticGame) return;
console.log(keyStaticGame)
const { node } = await keyStaticGame.content()
const { node } = await keyStaticGame.content();
const errors = Markdoc.validate(node);
if (errors.length) {
console.error(errors);
throw new Error('Invalid content');
throw new Error("Invalid content");
}
const renderable = Markdoc.transform(node);
const screenshotList = keyStaticGame?.screenshots;
Expand All @@ -45,14 +60,18 @@ export default async function Page({ params }: { params: { slug: string } }) {
}));

// grab studio via developer slug from game so we can spit out the studio's title instead of its slug
const studio = await reader.collections.studios.read(keyStaticGame?.developer || '')


const studio = await reader.collections.studios.read(
keyStaticGame?.developer || "",
);

const tabs = [
{
name: "Details",
content: <div className="leading-relaxed">{Markdoc.renderers.react(renderable, React)}</div>,
content: (
<div className="leading-relaxed">
{Markdoc.renderers.react(renderable, React)}
</div>
),
},

{
Expand Down Expand Up @@ -85,7 +104,6 @@ export default async function Page({ params }: { params: { slug: string } }) {
},
];


const tableData = [
{
key: "Studio",
Expand Down Expand Up @@ -178,7 +196,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
<>
{keyStaticGame?.links.homepage && (
<Button size={"xs"} variant={"outline"} asChild className="w-full">
<Link href={`${keyStaticGame?.links.homepage}`}> {keyStaticGame?.title}</Link>
<Link href={`${keyStaticGame?.links.homepage}`}>
{" "}
{keyStaticGame?.title}
</Link>
</Button>
)}
</>
Expand All @@ -187,7 +208,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
];

return (
<main className="container mx-auto px-8">
<main className="container mx-auto">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
Expand All @@ -214,9 +235,9 @@ export default async function Page({ params }: { params: { slug: string } }) {

{keyStaticGame && (
<>
<div className="w-full sm:w-9/12 sm:pr-8 px-12">
<div className="w-full px-12 sm:w-9/12 sm:pr-8">
{keyStaticGame.screenshots.length && (
<Carousel className="sm:h-96 w-full sm:max-h-[750px] sm:min-h-[750px]">
<Carousel className="w-full sm:h-96 sm:max-h-[750px] sm:min-h-[750px]">
<CarouselContent>
{list.map((image, index) => (
<CarouselItem key={index}>
Expand All @@ -225,7 +246,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
alt={image.alt}
width={1096}
height={750}
className="h-full w-full object-cover rounded border"
className="h-full w-full rounded border object-cover"
/>
</CarouselItem>
))}
Expand All @@ -238,7 +259,12 @@ export default async function Page({ params }: { params: { slug: string } }) {

<div className="pl-4 sm:w-3/12">
<div className="flex justify-center py-8">
<Image alt="" src={`/content/games/${params.slug}/${keyStaticGame?.icon}`} width={250} height={100} />
<Image
alt=""
src={`/content/games/${params.slug}/${keyStaticGame?.icon}`}
width={250}
height={100}
/>
</div>

<div className="flex-col space-y-2">
Expand All @@ -249,7 +275,10 @@ export default async function Page({ params }: { params: { slug: string } }) {
asChild
className="w-full"
>
<Link href={`${keyStaticGame?.links.homepage}`}> Play {keyStaticGame?.title}</Link>
<Link href={`${keyStaticGame?.links.homepage}`}>
{" "}
Play {keyStaticGame?.title}
</Link>
</Button>
)}

Expand Down Expand Up @@ -294,8 +323,7 @@ export default async function Page({ params }: { params: { slug: string } }) {
);
}


export async function generateStaticParams() {
const gameSlugs = await reader.collections.games.list()
return gameSlugs.map((gameSlug) => ({ slug: gameSlug }))
}
const gameSlugs = await reader.collections.games.list();
return gameSlugs.map((gameSlug) => ({ slug: gameSlug }));
}

0 comments on commit e9e2534

Please sign in to comment.