[ref] major redesign, complete project refactoring

Author: n0ky4

.env.example

@@ -4,6 +4,5 @@ namespace NodeJS {
         GITHUB_AUTHOR: string
         GITHUB_REPO: string
         COLORNAMES_REPO: string
-        DISCORD_WEBHOOK_URL: string
     }
 }

LICENSE

@@ -1,9 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
     env: {
-        AUTHOR_NAME: 'guko',
-        GITHUB_AUTHOR: 'https://github.com/gukodev',
-        GITHUB_REPO: 'https://github.com/gukodev/pyro',
+        AUTHOR_NAME: 'nokya',
+        GITHUB_AUTHOR: 'https://github.com/n0ky4',
+        GITHUB_REPO: 'https://github.com/n0ky4/pyro',
         COLORNAMES_REPO: 'https://github.com/meodai/color-names',
     },
 }

env.d.ts

@@ -1,17 +1,15 @@
 import ColorCard from '@/components/ColorCard'
 import ColorDetails from '@/components/ColorDetails'
-import ColorList from '@/components/ColorList'
-import ColorTheory from '@/components/ColorTheory'
 import Footer from '@/components/Footer'
 import NavBar from '@/components/NavBar'
-import Palette from '@/components/Palette'
 import RegenerateColorMobileButton from '@/components/RegenerateColorMobileButton'
-import ColorInfo from '@/core/ColorInfo'
 import { IColorInfo } from '@/core/types'
 import { getFullLengthHex, isValidColor, removeHash } from '@/util/colorFormat'
-import { Metadata } from 'next'
+// import { Metadata } from 'next'
+import { Items } from '@/components/Items'
+import MainContainer from '@/components/MainContainer'
+import colorInfo from '@/core/colorInfo'
 import { notFound, redirect } from 'next/navigation'
-import { Item } from '../page'
 
 interface ColorPageProps {
     params: {
@@ -24,74 +22,45 @@ interface ColorPageProps {
 
 let data: IColorInfo | null = null
 
-export async function generateMetadata(): Promise<Metadata> {
-    if (!data) return {}
+// export async function generateMetadata(): Promise<Metadata> {
+//     if (!data) return {}
 
-    const icon = {
-        url: `/favicon?hex=${removeHash(data.hex)}`,
-        type: 'image/svg+xml',
-    }
+//     const icon = {
+//         url: `/favicon?hex=${removeHash(data.hex)}`,
+//         type: 'image/svg+xml',
+//     }
 
-    return {
-        title: `pyro - ${data.hex}`,
-        themeColor: data.hex,
-        icons: {
-            icon,
-            shortcut: icon,
-        },
-    }
-}
+//     return {
+//         title: `pyro - ${data.hex}`,
+//         // themeColor: data.hex,
+//         icons: {
+//             icon,
+//             shortcut: icon,
+//         },
+//     }
+// }
 
 export default async function ColorPage({ params, searchParams }: ColorPageProps) {
-    const { color } = params
-    const fromRandom = searchParams?.r === '' || !!searchParams?.r
+    const { color } = await params
+    const rParam = (await searchParams)?.r
+    const fromRandom = rParam === '' || !rParam
 
     if (!isValidColor(color)) return notFound()
     if (removeHash(color).length === 3) return redirect(`/${getFullLengthHex(color)}`)
 
-    data = new ColorInfo().getColorInfo(color)
-
-    const items: Item[] = [
-        {
-            label: 'Tons escuros',
-            component: <Palette colors={data.palettes.shades} linkColors />,
-        },
-        {
-            label: 'Tons claros',
-            component: <Palette colors={data.palettes.tints} linkColors />,
-        },
-        {
-            label: 'Hue',
-            component: <Palette colors={data.palettes.hues} linkColors />,
-        },
-        {
-            id: 'theory',
-            component: <ColorTheory colors={data.palettes.theory} />,
-        },
-        {
-            label: 'Cores relacionadas',
-            component: <ColorList colors={data.related} />,
-        },
-    ]
+    data = colorInfo.getColorInfo(color)
 
     return (
         <>
-            <main className='mb-48'>
+            <MainContainer>
                 <RegenerateColorMobileButton fromRandom={fromRandom} />
                 <NavBar />
-                <div className='w-full max-w-screen-lg mx-auto px-4'>
-                    <div className='flex flex-col gap-8'>
-                        <ColorCard data={data} />
-                        <ColorDetails data={data} />
-                        {items.map((x) => (
-                            <div className='flex flex-col gap-2' key={x.id || x.label}>
-                                {x.label && <h1 className='text-2xl font-bold'>{x.label}</h1>}
-                                {x.component}
-                            </div>
-                        ))}
-                    </div>
+                <div className='flex flex-col gap-8'>
+                    <ColorCard data={data} />
+                    <ColorDetails data={data} />
+                    <Items data={data} />
                 </div>
-            </main>
+            </MainContainer>
             <Footer />
         </>
     )

next.config.js

@@ -1,10 +1,10 @@
-import ColorInfo from '@/core/ColorInfo'
+import colorInfo from '@/core/colorInfo'
 import { NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
 
 export async function GET() {
-    const dailyColor = new ColorInfo().getDailyColor()
+    const dailyColor = colorInfo.getDailyColor()
     return NextResponse.json(dailyColor)
 }

src/app/[color]/page.tsx

@@ -1,4 +1,4 @@
-import PaletteGenerator from '@/core/PaletteGenerator'
+import palette from '@/core/paletteGenerator'
 import { NextRequest, NextResponse } from 'next/server'
 
 export async function GET(req: NextRequest) {
@@ -11,6 +11,6 @@ export async function GET(req: NextRequest) {
         })
     }
 
-    const palette = new PaletteGenerator().getRandomPalette()
-    return NextResponse.json(palette)
+    const pal = palette.getRandomPalette()
+    return NextResponse.json(pal)
 }

src/app/api/daily-color/route.ts

@@ -1,11 +1,12 @@
-import ColorGenerator from '@/core/ColorGenerator'
+import color from '@/core/colorGenerator'
 import { NextResponse } from 'next/server'
 
 export const dynamic = 'force-dynamic'
 export const revalidate = 0
 
 export async function GET() {
-    const hex = new ColorGenerator().getRandomColor('named')
+    const hex = color.getRandomColor('named')
+
     return new NextResponse(hex, {
         headers: {
             'content-type': 'text/plain',

src/app/api/random-palette/route.ts

@@ -1,4 +1,4 @@
-import ColorInfo from '@/core/ColorInfo'
+import colorInfo from '@/core/colorInfo'
 import { formatQuery } from '@/util/format'
 import { NextRequest, NextResponse } from 'next/server'
 
@@ -15,7 +15,7 @@ export async function GET(req: NextRequest, { params }: Context) {
         const formattedQuery = formatQuery(query)
         if (!formattedQuery) return NextResponse.json({ error: true }, { status: 400 })
 
-        const suggestions = new ColorInfo().getSuggestions(formattedQuery)
+        const suggestions = colorInfo.getSuggestions(formattedQuery)
 
         return NextResponse.json({
             query,