Citali/v2.app.gaertan.art
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Dockerfile, add raw view

Browse Source
This commit is contained in:
Citali
2025-12-21 13:27:12 +01:00
parent 9bb649c9e2
commit b1541f8777
35 changed files with 2811 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
src/app/(normal)/artworks/animalstudies/page.tsx Normal file
View File

@ -0,0 +1,34 @@
import ArtworkThumbGallery from "@/components/artworks/ArtworkThumbGallery";
import { prisma } from "@/lib/prisma";
export default async function AnimalStudiesPage() {
const artworks = await prisma.artwork.findMany({
where: {
categories: {
some: {
name: "Animal Studies"
}
},
published: true
},
include: {
file: true,
metadata: true,
tags: true,
variants: true
},
orderBy: [{ sortKey: "asc" }, { id: "asc" }]
})
// console.log(JSON.stringify(artworks, null, 4))
return (
<div className="flex flex-col gap-4 p-4">
<div>
<h1 className="text-2xl font-bold text-center">Animal studies</h1>
</div>
<ArtworkThumbGallery items={artworks} fit={{ mode: "fixedWidth", width: 300 }} />
</div>
);
}

162
src/app/(normal)/artworks/single/[id]/page.tsx Normal file
View File

@ -0,0 +1,162 @@
import { prisma } from "@/lib/prisma";
import { cn } from "@/lib/utils";
import { LayersIcon, QuoteIcon, TagIcon } from "lucide-react";
import Image from "next/image";
import Link from "next/link";
export default async function SingleArtworkPage({ params }: { params: { id: string } }) {
const { id } = await params;
const artwork = await prisma.artwork.findUnique({
where: {
id,
},
include: {
file: true,
gallery: true,
metadata: true,
albums: true,
categories: true,
colors: { include: { color: true } },
tags: true,
variants: true
}
})
if (!artwork) return <div>Artwork with this ID could not be found</div>
const { width, height } = artwork.variants.find((v) => v.type === "resized") ?? { width: 0, height: 0 }
const colors =
artwork.colors?.map((c) => c.color?.hex).filter((hex): hex is string => Boolean(hex)) ?? []
const gradientColors = colors.length
? colors.join(", ")
: "rgba(0,0,0,0.1), rgba(0,0,0,0.03)"
return (
<div className="px-8 py-4">
<div className="flex flex-col items-center gap-4">
<div>
<h1 className="text-2xl font-bold mb-4 pb-4">{artwork.name}</h1>
</div>
<div className="group rounded-lg border overflow-hidden hover:shadow-lg transition-shadow bg-background relative">
<div className="relative w-full bg-muted items-center justify-center"
style={{ aspectRatio: "4 / 3" }}
>
<Link href={`/raw/${artwork.id}`}>
<Image
src={`/api/image/resized/${artwork.file.fileKey}.webp`}
alt={artwork.altText || "Artwork"}
fill={!width || !height}
width={width}
height={height}
className={cn("object-cover transition duration-300")}
/>
</Link>
{/* {image.nsfw && (
<div className="absolute top-1 left-1 z-10 flex gap-1">
<TagBadge
label="NSFW"
variant="destructive"
icon={<EyeOffIcon size={12} />}
className="text-xs px-2 py-0.5 inline-flex items-center"
/>
</div>
)} */}
</div>
{/* {!isLarge && (
<div className="p-4">
<h2 className="text-lg font-semibold truncate text-center">{image.imageName}</h2>
</div>
)} */}
</div>
<div
className="rounded-lg"
style={{
background: `linear-gradient(135deg, ${gradientColors})`,
}}>
<div
className="overflow-hidden border rounded-lg m-0.5 p-4 shadow w-full max-w-xl space-y-3 bg-white dark:bg-black"
>
{artwork.altText && (
<div className="flex items-center gap-2">
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-px" />
<span className="text-sm text-muted-foreground">{artwork.altText}</span>
</div>
)}
{artwork.description && (
<div className="flex items-center gap-2">
<QuoteIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-px" />
<span className="text-sm text-muted-foreground">{artwork.description}</span>
</div>
)}
{/* {creationLabel && (
<div className="flex items-center gap-2">
<CalendarDaysIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
<span className="text-sm text-muted-foreground">{creationLabel}</span>
</div>
)}
{album && (
<div className="flex items-center gap-2 flex-wrap">
<ImagesIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-[1px]" />
<Link href={`/galleries/${album.gallery?.slug}/${album.slug}`} className="text-sm underline">
{album.name}
</Link>
</div>
)} */}
{artwork.categories.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<LayersIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-1px" />
{artwork.categories.map((cat) => (
<Link
key={cat.id}
href={`/categories/${cat.id}`}
className="text-sm underline"
>
{cat.name}
</Link>
))}
</div>
)}
{artwork.tags.length > 0 && (
<div className="flex items-center gap-2 flex-wrap">
<TagIcon className="shrink-0 w-4 h-4 text-muted-foreground mt-1px" />
{artwork.tags.map((tag) => (
<Link
key={tag.id}
href={`/tags/${tag.id}`}
className="text-sm underline"
>
{tag.name}
</Link>
))}
</div>
)}
</div>
</div>
{/* <ImageCard image={image} gallerySlug={image.album?.gallery?.slug} albumSlug={image.album?.slug} size="large" />
<section className="py-8 flex flex-col gap-4">
{image.artist && <ArtistInfoBox artist={image.artist} />}
<ImageMetadataBox
album={image.album}
categories={image.categories}
tags={image.tags}
creationDate={image.creationDate}
creationYear={image.creationYear}
creationMonth={image.creationMonth}
altText={image.altText}
description={image.description}
/>
</section> */}
</div>
</div >
);
}

28
src/app/(normal)/layout.tsx Normal file
View File

@ -0,0 +1,28 @@
import Banner from "@/components/global/Banner";
import Footer from "@/components/global/Footer";
import Header from "@/components/global/Header";
import { Toaster } from "@/components/ui/sonner";
export default function NormalLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<div className="flex flex-col min-h-screen min-w-screen">
<div>
<Banner />
</div>
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60">
<Header />
</header>
<main className="container mx-auto">
{children}
</main>
<footer className="mt-auto p-4 h-14 border-t bg-background/95 backdrop-blur supports-backdrop-filter:bg-background/60 ">
<Footer />
</footer>
<Toaster />
</div>
);
}

11
src/app/(raw)/layout.tsx Normal file
View File

@ -0,0 +1,11 @@
export default function RawLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
return (
<>
{children}
</>
);
}

38
src/app/(raw)/raw/[artworkId]/page.tsx Normal file
View File

@ -0,0 +1,38 @@
import RawCloseButton from "@/components/artworks/RawCloseButton";
import { prisma } from "@/lib/prisma";
import NextImage from "next/image";
import { notFound } from "next/navigation";
export default async function RawArtworkPage({ params }: { params: { artworkId: string } }) {
const { artworkId } = await params;
const artwork = await prisma.artwork.findUnique({
where: { id: artworkId },
include: {
file: true,
variants: true
},
});
if (!artwork) return notFound();
const variant = artwork.variants.find(v => v.type === "modified");
if (!variant) return notFound();
const targetHref = `/artworks/single/${artwork.id}`;
return (
<div
className="fixed inset-0 z-50 flex items-center justify-center"
// style={backgroundStyle}
>
<RawCloseButton targetHref={targetHref} />
<NextImage
src={`/api/image/modified/${artwork.file.fileKey}.webp`}
alt={artwork.altText || artwork.name}
width={variant.width}
height={variant.height}
className="object-contain rounded-lg max-h-[calc(100vh-2rem)] max-w-[calc(100vw-2rem)]"
/>
</div>
);
}

34
src/app/api/image/[...key]/route.ts Normal file
View File

@ -0,0 +1,34 @@
import { s3 } from "@/lib/s3";
import { GetObjectCommand } from "@aws-sdk/client-s3";
import "dotenv/config";
export async function GET(req: Request, { params }: { params: { key: string[] } }) {
const { key } = await params;
const s3Key = key.join("/");
try {
const command = new GetObjectCommand({
Bucket: `${process.env.BUCKET_NAME}`,
Key: s3Key,
});
const response = await s3.send(command);
if (!response.Body) {
return new Response("No body", { status: 500 });
}
const contentType = response.ContentType ?? "application/octet-stream";
return new Response(response.Body as ReadableStream, {
headers: {
"Content-Type": contentType,
"Cache-Control": "public, max-age=3600",
"Content-Disposition": "inline", // use 'attachment' to force download
},
});
} catch (err) {
console.log(err)
return new Response("Image not found", { status: 404 });
}
}

127
src/app/globals.css
View File

@ -1,26 +1,125 @@
@import "tailwindcss";
@import "tw-animate-css";
:root {
--background: #ffffff;
--foreground: #171717;
}
@custom-variant dark (&:is(.dark *));
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
--color-sidebar-ring: var(--sidebar-ring);
--color-sidebar-border: var(--sidebar-border);
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
--color-sidebar-accent: var(--sidebar-accent);
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
--color-sidebar-primary: var(--sidebar-primary);
--color-sidebar-foreground: var(--sidebar-foreground);
--color-sidebar: var(--sidebar);
--color-chart-5: var(--chart-5);
--color-chart-4: var(--chart-4);
--color-chart-3: var(--chart-3);
--color-chart-2: var(--chart-2);
--color-chart-1: var(--chart-1);
--color-ring: var(--ring);
--color-input: var(--input);
--color-border: var(--border);
--color-destructive: var(--destructive);
--color-accent-foreground: var(--accent-foreground);
--color-accent: var(--accent);
--color-muted-foreground: var(--muted-foreground);
--color-muted: var(--muted);
--color-secondary-foreground: var(--secondary-foreground);
--color-secondary: var(--secondary);
--color-primary-foreground: var(--primary-foreground);
--color-primary: var(--primary);
--color-popover-foreground: var(--popover-foreground);
--color-popover: var(--popover);
--color-card-foreground: var(--card-foreground);
--color-card: var(--card);
--radius-sm: calc(var(--radius) - 4px);
--radius-md: calc(var(--radius) - 2px);
--radius-lg: var(--radius);
--radius-xl: calc(var(--radius) + 4px);
--radius-2xl: calc(var(--radius) + 8px);
--radius-3xl: calc(var(--radius) + 12px);
--radius-4xl: calc(var(--radius) + 16px);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
:root {
--radius: 0.625rem;
--background: oklch(1 0 0);
--foreground: oklch(0.145 0 0);
--card: oklch(1 0 0);
--card-foreground: oklch(0.145 0 0);
--popover: oklch(1 0 0);
--popover-foreground: oklch(0.145 0 0);
--primary: oklch(0.205 0 0);
--primary-foreground: oklch(0.985 0 0);
--secondary: oklch(0.97 0 0);
--secondary-foreground: oklch(0.205 0 0);
--muted: oklch(0.97 0 0);
--muted-foreground: oklch(0.556 0 0);
--accent: oklch(0.97 0 0);
--accent-foreground: oklch(0.205 0 0);
--destructive: oklch(0.577 0.245 27.325);
--border: oklch(0.922 0 0);
--input: oklch(0.922 0 0);
--ring: oklch(0.708 0 0);
--chart-1: oklch(0.646 0.222 41.116);
--chart-2: oklch(0.6 0.118 184.704);
--chart-3: oklch(0.398 0.07 227.392);
--chart-4: oklch(0.828 0.189 84.429);
--chart-5: oklch(0.769 0.188 70.08);
--sidebar: oklch(0.985 0 0);
--sidebar-foreground: oklch(0.145 0 0);
--sidebar-primary: oklch(0.205 0 0);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.97 0 0);
--sidebar-accent-foreground: oklch(0.205 0 0);
--sidebar-border: oklch(0.922 0 0);
--sidebar-ring: oklch(0.708 0 0);
}
.dark {
--background: oklch(0.145 0 0);
--foreground: oklch(0.985 0 0);
--card: oklch(0.205 0 0);
--card-foreground: oklch(0.985 0 0);
--popover: oklch(0.205 0 0);
--popover-foreground: oklch(0.985 0 0);
--primary: oklch(0.922 0 0);
--primary-foreground: oklch(0.205 0 0);
--secondary: oklch(0.269 0 0);
--secondary-foreground: oklch(0.985 0 0);
--muted: oklch(0.269 0 0);
--muted-foreground: oklch(0.708 0 0);
--accent: oklch(0.269 0 0);
--accent-foreground: oklch(0.985 0 0);
--destructive: oklch(0.704 0.191 22.216);
--border: oklch(1 0 0 / 10%);
--input: oklch(1 0 0 / 15%);
--ring: oklch(0.556 0 0);
--chart-1: oklch(0.488 0.243 264.376);
--chart-2: oklch(0.696 0.17 162.48);
--chart-3: oklch(0.769 0.188 70.08);
--chart-4: oklch(0.627 0.265 303.9);
--chart-5: oklch(0.645 0.246 16.439);
--sidebar: oklch(0.205 0 0);
--sidebar-foreground: oklch(0.985 0 0);
--sidebar-primary: oklch(0.488 0.243 264.376);
--sidebar-primary-foreground: oklch(0.985 0 0);
--sidebar-accent: oklch(0.269 0 0);
--sidebar-accent-foreground: oklch(0.985 0 0);
--sidebar-border: oklch(1 0 0 / 10%);
--sidebar-ring: oklch(0.556 0 0);
}
@layer base {
* {
@apply border-border outline-ring/50;
}
body {
@apply bg-background text-foreground;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}

16
src/app/layout.tsx
View File

@ -1,3 +1,4 @@
import { ThemeProvider } from "@/components/global/ThemeProvider";
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
@ -13,8 +14,8 @@ const geistMono = Geist_Mono({
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "Gaertan Art",
description: "The bestest artworks",
};
export default function RootLayout({
@ -23,11 +24,18 @@ export default function RootLayout({
children: React.ReactNode;
}>) {
return (
<html lang="en">
<html lang="en" suppressHydrationWarning>
<body
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
>
{children}
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem
disableTransitionOnChange
>
{children}
</ThemeProvider>
</body>
</html>
);

61
src/app/page.tsx
View File

@ -1,65 +1,8 @@
import Image from "next/image";
export default function Home() {
return (
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</a>
</div>
</main>
<div>
Home
</div>
);
}