Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix game page and cleanup #291

Merged
merged 1 commit into from
Oct 7, 2024
Merged

fix game page and cleanup #291

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 0 additions & 6 deletions apps/nextjs/src/app/(app)/account/assets/page.tsx
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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 }));
}
Loading