anical first commit

Author: adenlall

.graphqlconfig

@@ -0,0 +1,4 @@
+{
+  "schema": "https://graphql.anilist.co",
+  "documents": ["app/**/*.{ts,tsx}", "lib/**/*.{ts,tsx}"]
+}

app/anime/[id]/layout.tsx

@@ -0,0 +1,14 @@
+import NavBar from "@/components/main/NavBar";
+
+export default function Layout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return (
+      <main className="">
+        <NavBar/>
+        {children}
+      </main>
+  );
+}

app/anime/[id]/page.tsx

@@ -0,0 +1,43 @@
+import { Anilist } from '@/utils/anilist';
+import type { AnimeHeaderQuery, GetAnimeQuery } from '@/lib/types/anilist';
+import VideoIcon from '~icons/gravity-ui/video';
+import AnimeDetails, { ANIME_DETAILS } from '@/components/@HooKit/AnimeDetails';
+import gql from 'graphql-tag';
+
+interface PageProps {
+  params: {
+    id: string;
+  };
+}
+
+const ANIME_HEADER = gql`
+  query AnimeHeader($id: Int) {
+    Media(id: $id, type: ANIME) {
+      ...AnimeDetails
+    }
+  }
+  ${ANIME_DETAILS}
+`
+
+export default async function AnimePage({ params }: PageProps) {
+  const data = await Anilist<GetAnimeQuery>(ANIME_HEADER, {
+    id: parseInt((await params).id),
+  }) as AnimeHeaderQuery;
+
+  return (
+    <div>
+      <AnimeDetails data={{
+        coverImage: data.Media?.coverImage,
+        description: data.Media?.description,
+        genres: data.Media?.genres,
+        title: data.Media?.title,
+        format: data.Media?.format,
+        reviews: data.Media?.reviews,
+        studios: data.Media?.studios,
+        favourites: data.Media?.favourites,
+        meanScore: data.Media?.meanScore,
+        staff: data.Media?.staff,
+      }} />
+    </div>
+  );
+}

app/api/auth/callback/route.ts

@@ -0,0 +1,75 @@
+import { NextRequest } from 'next/server';
+import { cookies } from 'next/headers';
+import { fetchAniList } from '@/lib/auth';
+
+export async function GET(request: NextRequest) {
+  const searchParams = request.nextUrl.searchParams;
+  const code = searchParams.get('code');
+
+  if (!code) {
+    return new Response('No code provided', { status: 400 });
+  }
+
+  try {
+    const tokenResponse = await fetch('https://anilist.co/api/v2/oauth/token', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        Accept: 'application/json',
+      },
+      body: JSON.stringify({
+        grant_type: 'authorization_code',
+        client_id: process.env.ANILIST_CLIENT_ID,
+        client_secret: process.env.ANILIST_CLIENT_SECRET,
+        redirect_uri: process.env.ANILIST_REDIRECT_URI,
+        code: code,
+      }),
+    });
+
+    const data = await tokenResponse.json();
+
+    if (!tokenResponse.ok) {
+      throw new Error(data.error || 'Failed to get token');
+    }
+
+    // Set the cookie
+    const cookieStore = await cookies();
+    cookieStore.set('anilist_token', data.access_token, {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24 * 7 * 1, // 1 week
+    });
+
+    const userData = await fetchAniList<any>(
+      `query {
+        Viewer {
+          id
+          name
+          avatar {
+            large
+          }
+        }
+      }`,
+      {},
+      data.access_token
+    );
+    const viewer = userData.data.Viewer;  
+    cookieStore.set('user', JSON.stringify({name:viewer.name, id:viewer.id, avatar:viewer.avatar.large}), {
+      httpOnly: true,
+      secure: process.env.NODE_ENV === 'production',
+      sameSite: 'lax',
+      maxAge: 60 * 60 * 24 * 7 * 4, // 4 week
+    });
+
+    return new Response(null, {
+      status: 302,
+      headers: {
+        Location: '/profile',
+      },
+    });
+  } catch (error) {
+    console.error('Token exchange error:', error);
+    return new Response('Authentication failed', { status: 500 });
+  }
+}

app/api/image/route.ts

@@ -0,0 +1,33 @@
+import { load } from 'cheerio';
+
+export async function GET(request: Request) {
+
+    const { searchParams } = new URL(request.url)
+    const q = searchParams.get('q');
+    if (!q) {
+        return Response.json({ error: 'Query parameter is required' }, {
+            status: 500
+        });
+    }
+    const url = `https://www.google.com/search?q=${encodeURIComponent(q + " studio logo")}&tbm=isch&tbs=iar:s&sca_esv=9801acaddd243ef2&gbv=1&sei=bkoIZ_HiJ5-Li-gPusGmMA`;
+    try {
+        const response = await fetch(url, {
+            cache: 'force-cache'
+        });
+        const html = await response.text();
+        const $ = load(html);
+        const firstImageUrl = $('.GpQGbf > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > div:nth-child(1) > table:nth-child(1) > tbody:nth-child(1) > tr:nth-child(1) > td:nth-child(1) > a:nth-child(1) > div:nth-child(1) > img:nth-child(1)').attr('src');
+        if (firstImageUrl) {
+            return Response.json({ url: firstImageUrl });
+        } else {
+            return Response.json({ error: 'No image found', url }, {
+                status: 500
+            });
+        }
+
+    } catch (error) {
+        return Response.json({ error: 'An error occurred while searching for images', details: error, url }, {
+            status: 500
+        });
+    }
+}

app/globals.css

@@ -3,19 +3,203 @@
 @tailwind utilities;
 
 :root {
-  --background: #ffffff;
-  --foreground: #171717;
+  --card-width: 12em;
+    --card-height: 18em;
+  }
+  
+  h1 {
+    @apply text-3xl font-bold
+  }
+  
+  h2 {
+    @apply text-xl font-semibold
+  }
+  
+  .grid-list {
+    @apply 2xl:grid-cols-7 xl:grid-cols-6 lg:grid-cols-4 md:grid-cols-3 grid-cols-2
+  }
+  
+  .z-2 {
+    z-index: 2;
+  }
+  
+  li {
+    @apply mr-1
+  }
+  
+  .join li {
+    margin: 0 !important;
+  }
+  
+  .primary {
+    @apply bg-primary text-primary-content;
+  }
+  
+  .secondary {
+    @apply bg-secondary text-secondary-content;
+  }
+  
+  .accent {
+    @apply bg-accent text-accent-content;
+  }
+  
+  .error {
+    @apply bg-error text-error-content;
+  }
+  
+  .info {
+    @apply bg-info text-info-content;
+  }
+  
+  .success {
+    @apply bg-success text-success-content;
+  }
+  
+  .base {
+    @apply bg-base-100 text-base-content;
+  }
+  
+  .base-content {
+    @apply bg-base-content text-base-100;
+  }
+  
+  .flex-center {
+    @apply flex items-center justify-center
+  }
+  
+  .flex-center-col {
+    @apply flex flex-col items-center justify-center
+  }
+  
+  .flex-center-row {
+    @apply flex flex-row items-center justify-center
+  }
+  
+  .scroll-shadows {
+    max-height: 150px;
+    overflow: auto;
+  
+    background:
+      /* Shadow Cover TOP */
+      linear-gradient(oklch(var(--b2)) 30%,
+        rgba(255, 255, 255, 0)) center top,
+  
+      /* Shadow Cover BOTTOM */
+      linear-gradient(rgba(255, 255, 255, 0),
+        oklch(var(--b2)) 70%) center bottom,
+  
+      /* Shadow TOP */
+      radial-gradient(farthest-side at 50% 0,
+        oklch(var(--b1)),
+        #ff000000) center top,
+  
+      /* Shadow BOTTOM */
+      radial-gradient(farthest-side at 50% 100%,
+        oklch(var(--b1)),
+        #ff000000) center bottom;
+  
+    background-repeat: no-repeat;
+    background-size: 100% 40px, 100% 40px, 100% 14px, 100% 14px;
+    background-attachment: local, local, scroll, scroll;
+  }
+  
+  .inline-1 {
+    display: -webkit-box;
+    -webkit-line-clamp: 1;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+  }
+  
+  .grid-rows-min {
+    grid-auto-rows: min-content;
+  }
+  
+  .skeleton-b1-b2 {
+    background-color: var(--fallback-b1, oklch(var(--b1)/var(--tw-bg-opacity)));
+    background-image: linear-gradient(105deg,
+        transparent 0%,
+        transparent 40%,
+        var(--fallback-b2, oklch(var(--b2)/1)) 50%,
+        transparent 60%,
+        transparent 100%);
+  }
+  
+  .skeleton-b1-b3 {
+    background-color: var(--fallback-b1, oklch(var(--b1)/var(--tw-bg-opacity)));
+    background-image: linear-gradient(105deg,
+        transparent 0%,
+        transparent 40%,
+        var(--fallback-b3, oklch(var(--b3)/1)) 50%,
+        transparent 60%,
+        transparent 100%);
+  }
+  
+  .skeleton-b2-b1 {
+    background-color: var(--fallback-b2, oklch(var(--b2)/var(--tw-bg-opacity)));
+    background-image: linear-gradient(105deg,
+        transparent 0%,
+        transparent 40%,
+        var(--fallback-b1, oklch(var(--b1)/1)) 50%,
+        transparent 60%,
+        transparent 100%);
+  }
+  
+  .full {
+    @apply w-full h-full
+  }
+  
+  
+  /******************
+        ** INLINE STYLES **
+        ******************/
+  .card-width {
+    width: var(--card-width);
+  }
+  
+  .card-height {
+    height: var(--card-height);
+  }
+  
+  .inline-text {
+    overflow: hidden;
+    -o-text-overflow: ellipsis;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --background: #0a0a0a;
-    --foreground: #ededed;
-  }
+.inline-text-1 {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.inline-text-2 {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2 !important;
+  -webkit-box-orient: vertical;
 }
 
-body {
-  color: var(--foreground);
-  background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+.inline-text-3 {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
 }
+
+.inline-text-auto {
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}