Ategon/Jamjar
1
0
Fork 0
mirror of https://github.com/Ategon/Jamjar.git synced 2025-02-12 06:16:21 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Compare commits

base: Ategon:c204a548156832ac973f8d7d5b445ef1bf726be5
Branches Tags
Ategon:main
..
compare: Ategon:10b92acfeae9b528a933eedfb08e86c797651c86
Branches Tags
Ategon:main

No commits in common. "c204a548156832ac973f8d7d5b445ef1bf726be5" and "10b92acfeae9b528a933eedfb08e86c797651c86" have entirely different histories.
c204a54815 ... 10b92acfea

15 changed files with 136 additions and 210 deletions
Show stats Expand all files Collapse all files

3
.dockerignore
View file

@ -1,3 +0,0 @@
.next
node_modules

13
Dockerfile
View file

@ -1,13 +0,0 @@
FROM node:18-alpine
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
EXPOSE 3000
CMD ["npm", "start"]

13
README.md
View file

@ -2,15 +2,4 @@
Frontend for a game jam site Frontend for a game jam site
To run using next.js (for development) Under construction currently, I just quickly slapped together a splash page in 30 mins to show instead of the usual site progress and it will slowly get added back and polished over time
```
npm i
npm run dev
```
To run using docker and docker compose
```
docker compose up --build -d
```

9
docker-compose.yml
View file

@ -1,9 +0,0 @@
version: "3.8"
services:
nextjs-app:
build:
context: .
ports:
- "127.0.0.1:3004:3000"
environment:
NODE_ENV: production

BIN
public/images/aelios.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 130 KiB

BIN
public/images/edikoyo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 56 KiB

29
src/app/app/page.tsx
View file

@ -1,29 +0,0 @@
import Posts from "@/components/posts";
import Timers from "@/components/timers";
import { Image } from "@nextui-org/react";
export default function Home() {
return (
<div>
<div className="absolute left-0 top-0 w-full h-full z-0">
<Image
src="/images/bg.jpg"
alt="Home background"
className="object-cover w-full h-full"
radius="none"
loading="eager"
removeWrapper
/>
<div className="absolute left-0 top-0 w-full h-full bg-gradient-to-r from-black/50 to-transparent z-10" />
</div>
<div className="z-10 relative flex">
<div>
<Posts />
</div>
<div className="w-1/3 flex justify-end">
<Timers />
</div>
</div>
</div>
);
}

45
src/app/layout.tsx
View file

@ -1,8 +1,8 @@
import type { Metadata } from "next"; import type { Metadata } from "next";
import { Inter } from "next/font/google"; import { Inter } from "next/font/google";
import "./globals.css"; import "./globals.css";
import { NextUIProvider } from "@nextui-org/react";
import Navbar from "../components/navbar"; import Navbar from "../components/navbar";
import Providers from "./providers";
const inter = Inter({ subsets: ["latin"] }); const inter = Inter({ subsets: ["latin"] });
@ -19,15 +19,54 @@ export default function RootLayout({
return ( return (
<html lang="en"> <html lang="en">
<body className={inter.className}> <body className={inter.className}>
<Providers> <NextUIProvider>
<div className="dark"> <div className="dark">
<div className="bg-zinc-100 dark:bg-zinc-950 min-h-screen"> <div className="bg-zinc-100 dark:bg-zinc-950 min-h-screen">
<Navbar /> <Navbar />
<div className="max-w-8xl mx-auto">{children}</div> <div className="max-w-8xl mx-auto">{children}</div>
</div> </div>
</div> </div>
</Providers> </NextUIProvider>
</body> </body>
</html> </html>
); );
} }
// import type { Metadata } from "next";
// import localFont from "next/font/local";
// import "./globals.css";
// import Providers from "./providers";
// const geistSans = localFont({
// src: "./fonts/GeistVF.woff",
// variable: "--font-geist-sans",
// weight: "100 900",
// });
// const geistMono = localFont({
// src: "./fonts/GeistMonoVF.woff",
// variable: "--font-geist-mono",
// weight: "100 900",
// });
// export const metadata: Metadata = {
// title: "Create Next App",
// description: "Generated by create next app",
// };
// export default function RootLayout({
// children,
// }: Readonly<{
// children: React.ReactNode;
// }>) {
// return (
// <html lang="en">
// <body
// className={`${geistSans.variable} ${geistMono.variable} antialiased`}
// >
// <Providers>
// {children}
// </Providers>
// </body>
// </html>
// );
// }

15
src/app/page.tsx
View file

@ -42,3 +42,18 @@ export default async function Home() {
</div> </div>
); );
} }
// export default function Home() {
// return (
// <div className="">
// <div>
// <Posts />
// </div>
// <div>
// <Timers />
// <Streams />
// <Announcements />
// </div>
// </div>
// );
// }

25
src/components/navbar/index.tsx
View file

@ -1,12 +1,11 @@
import { import {
Navbar as NavbarBase, Navbar as NavbarBase,
NavbarBrand,
NavbarContent, NavbarContent,
NavbarItem, NavbarItem,
} from "@nextui-org/navbar"; } from "@nextui-org/navbar";
import { Link } from "@nextui-org/link"; import { Link } from "@nextui-org/link";
import { Divider } from "@nextui-org/divider"; import { Divider } from "@nextui-org/divider";
import { Image, Tooltip } from "@nextui-org/react"; import { Tooltip } from "@nextui-org/react";
import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons"; import { SiDiscord, SiForgejo, SiGithub } from "@icons-pack/react-simple-icons";
export default function Navbar() { export default function Navbar() {
@ -16,23 +15,31 @@ export default function Navbar() {
maxWidth="2xl" maxWidth="2xl"
className="bg-transparent p-1" className="bg-transparent p-1"
> >
<NavbarBrand> {/* <NavbarBrand>
<Link <Link
href="/" href="/"
className="duration-500 ease-in-out transition-all transform hover:scale-110" className="duration-500 ease-in-out transition-all transform hover:scale-110"
> >
<Image src="/images/edikoyo.png" alt="Edikoyo logo" width={160} /> <Image src="/images/aelios.png" width={160} />
</Link> </Link>
</NavbarBrand> </NavbarBrand> */}
<NavbarContent> <NavbarContent>
<NavbarItem> {/* <NavbarItem>
<Link <Link
href="/app" href="/about"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110" className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110 hover:text-blue-700"
> >
Beta Site About
</Link> </Link>
</NavbarItem> </NavbarItem>
<NavbarItem>
<Link
href="/setup"
className="text-white flex justify-center duration-500 ease-in-out transition-all transform hover:scale-110 hover:text-blue-700"
>
Setup
</Link>
</NavbarItem> */}
</NavbarContent> </NavbarContent>
<NavbarContent justify="end"> <NavbarContent justify="end">
<NavbarItem> <NavbarItem>

81
src/components/posts/PostCard.tsx
View file

@ -1,50 +1,41 @@
import { Avatar, Button, Card, CardBody, Spacer } from "@nextui-org/react"; // import { Button, Card, CardBody, Chip, User } from "@nextui-org/react";
import { Heart, MessageCircle } from "lucide-react"; // import { Heart } from "lucide-react";
import { formatDistance } from "date-fns"; // import { formatDistance } from "date-fns";
import Link from "next/link"; // import Link from "next/link";
import { PostType } from "@/types/PostType";
export default function PostCard({ post }: { post: PostType }) { export default function PostCard() {
return ( // return (
<Card className="bg-opacity-60"> // <Card>
<CardBody> // <CardBody>
<p className="text-2xl">{post.title}</p> // <p className="text-xl">{post.title}</p>
<div className="flex items-center gap-3 text-xs text-default-500 pt-1"> // {post.flairs &&
<p>By</p> // Object.values(post.flairs).map((flair) => (
<Link // <div key={flair.id}>
href={`/u/${post.author.slug}`} // <Chip>{flair.name}</Chip>
className="flex items-center gap-2" // </div>
> // ))}
<Avatar
size="sm"
className="w-6 h-6"
src={post.author.profilePicture}
/>
<p>{post.author.name}</p>
</Link>
<p>
{formatDistance(new Date(post.createdAt), new Date(), {
addSuffix: true,
})}
</p>
</div>
<Spacer y={4} /> // <div className="flex items-center gap-3">
// <p>By</p>
// <Link href={`/u/${post.author.slug}`}>
// <User name={post.author.name} />
// </Link>
// <p>
// {formatDistance(new Date(post.createdAt), new Date(), {
// addSuffix: true,
// })}
// </p>
// </div>
<p>{post.content}</p> // <p>{post.content}</p>
// <div className="flex justify-between">
<Spacer y={4} /> // <Button>
// <Heart /> {post.likers.length}
<div className="flex gap-3"> // </Button>
<Button size="sm"> // </div>
<Heart size={16} /> {post.likers.length} // </CardBody>
</Button> // </Card>
<Button size="sm"> // );
<MessageCircle size={16} /> {0} return <div></div>;
</Button>
</div>
</CardBody>
</Card>
);
} }

41
src/components/posts/index.tsx
View file

@ -1,30 +1,29 @@
"use client"; "use client";
import { useEffect, useState } from "react"; // import { useEffect, useState } from "react";
import PostCard from "./PostCard"; // import PostCard from "./PostCard";
import { PostType } from "@/types/PostType";
export default function Posts() { export default function Posts() {
const [posts, setPosts] = useState<PostType[]>(); // const [posts, setPosts] = useState();
useEffect(() => { // useEffect(() => {
const fetchPosts = async () => { // const fetchPosts = async () => {
const response = await fetch("https://jam.edikoyo.com/api/v1/posts"); // const response = await fetch("http://localhost:3005/api/v1/posts");
setPosts(await response.json()); // setPosts(await response.json());
}; // };
fetchPosts(); // fetchPosts();
}, []); // }, []);
return ( // return (
<div className="flex flex-col gap-3 p-4"> // <div className="flex flex-col gap-3 p-4">
{posts && // {posts &&
posts.map((post) => ( // posts.map((post) => (
<div key={post.id}> // <div key={post.key}>
<PostCard post={post} /> // <PostCard post={post} />
</div> // </div>
))} // ))}
</div> // </div>
); // );
return <div></div>; return <div></div>;
} }

44
src/components/timers/Timer.tsx
View file

@ -1,44 +0,0 @@
"use client";
import { useState, useEffect } from "react";
export default function Timer({
name,
targetDate,
}: {
name: string;
targetDate: Date;
}) {
const [timeLeft, setTimeLeft] = useState(targetDate.getTime() - Date.now());
useEffect(() => {
const interval = setInterval(() => {
const newTimeLeft = targetDate.getTime() - Date.now();
if (newTimeLeft <= 0) {
clearInterval(interval);
setTimeLeft(0);
} else {
setTimeLeft(newTimeLeft);
}
}, 1000);
return () => clearInterval(interval);
}, [targetDate]);
const formatTime = (milliseconds: number) => {
const totalSeconds = Math.max(0, Math.floor(milliseconds / 1000));
const days = Math.floor(totalSeconds / 86400);
const hours = Math.floor((totalSeconds % 86400) / 3600);
// const minutes = Math.floor((totalSeconds % 3600) / 60);
// const seconds = totalSeconds % 60;
return `${days} days ${hours.toString()} hours`;
};
return (
<div>
<p>{name}</p>
<p className="text-4xl">{formatTime(timeLeft)}</p>
</div>
);
}

16
src/components/timers/index.tsx
View file

@ -1,12 +1,8 @@
import Timer from "./Timer"; "use client";
export default function Timers() { export default function Timers() {
return ( return (
<div> <div></div>
<Timer );
name="Jam Start" }
targetDate={new Date("2025-04-04T18:00:00-05:00")}
/>
</div>
);
}

12
src/types/PostType.ts
View file

@ -1,12 +0,0 @@
export interface PostType {
id: number;
title: string;
content: string;
author: {
slug: string;
profilePicture: string;
name: string;
};
createdAt: Date;
likers: [];
}