🐛 partial-rework

package.json

@@ -28,7 +28,6 @@
     "eslint": "8.27.0",
     "eslint-config-next": "13.0.3",
     "postcss": "^8.4.19",
-    "react-color": "^2.19.3",
     "react-icons": "^4.7.1",
     "tailwindcss": "^3.2.4"
   }

pages/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react'
-import { SketchPicker } from 'react-color'
 import { execSync } from 'child_process'
+import axios from 'axios'
 
 import { BiStar } from 'react-icons/bi'
 
@@ -10,21 +10,11 @@ import Footer from '@/components/Footer'
 import Splash from '@/components/Splash'
 import Content from '@/components/Content'
 
-export default function Index({ git }: any) {
+export default function Index({ git, contributors, stargazers }: any) {
   const [hex, setHex] = useState('#6644FF')
   const [hexText, setHexText] = useState('#6644FF')
   const [content, setContent] = useState('')
 
-  // Interface element states.
-  const [showPicker, setShowPicker] = useState<boolean>(false)
-
-  // Stargazers states.
-  const [stars, setStars] = useState<number>(0)
-  const [stargazers, setStargazers] = useState<any>([])
-
-  // Contributors states.
-  const [contributors, setContributors] = useState<any>([])
-
   // Dynamically change the theme based on the hex.
   const borderHover = {
     in: (obj: any) => obj.style.borderColor = hex,
@@ -37,72 +27,38 @@ export default function Index({ git }: any) {
 
     // Ensures that any given hex color can be seen infront of a white background.
     // -->> Implementation by https://github.com/vanling - Thanks!
-    setHexText(shade.contrast(hex, hex, '#000'))
+    setHexText(shade.contrast(hex, hex, '#a3a3a3'))
 
     // Update the css object.
     setContent(shade.wrap(hex))
   }, [hex])
 
-  useEffect(() => {
-    // Fetch stars from github repo.
-    fetch('https://api.github.com/repos/ThijmenGThN/directus-themebuilder').then((raw: any) => raw.json().then((res: any) => setStars(res.stargazers_count)))
-    // Fetch contributors from github repo.
-    fetch('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/contributors').then((raw: any) => raw.json().then((res: any) => {
-      setContributors(
-        res.filter(({ login }: { login: string }) => login != "ThijmenGThN") // Having this project as a repo of mine is enough credit for me :)
-      )
-    }))
-    // Fetch stargazers from github repo.
-    fetch('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/stargazers').then((raw: any) => raw.json().then((res: any) => {
-      setStargazers(
-        res.filter(({ login }: { login: string }) => login != "ThijmenGThN") // Having this project as a repo of mine is enough credit for me :)
-          .reverse()
-      )
-    }))
-  }, [])
-
   return (
     <div className='flex flex-col min-h-screen'>
-      <div className="container mx-auto px-5 grow mb-10">
+      <div className="container mx-auto flex flex-col px-5 grow mb-10">
         {/* ----- SECTION: Interface ----- */}
         <Splash hex={hex} />
-        <div className='mt-10 flex flex-col gap-2'>
+
+        <div className='mt-10 flex flex-col gap-2 mx-auto'>
           <p className='font-semibold'>
-            Hex Color
+            Color Palette
           </p>
 
-          <div className='flex gap-2 relative'>
-            <div className='border-neutral-300 border-2 rounded-lg hover:cursor-pointer hover:border-violet-500 hover:border-3'
-              onClick={() => setShowPicker(!showPicker)}
-              onMouseOver={({ target }) => borderHover.in(target)}
-              onMouseOut={({ target }) => borderHover.out(target)}
-            >
-              <div className='m-3 w-9 h-9 rounded pointer-events-none' style={{ backgroundColor: hex }} />
+          <div className='flex gap-2'>
+            <div className='border-2 border-neutral-300 rounded-lg overflow-hidden'>
+              <input type="color"
+                value={hex}
+                onChange={(({ target }) => console.log(target.value))}
+              />
             </div>
 
-            {
-              showPicker && (
-                <SketchPicker className="absolute z-10 top-16 mt-2"
-                  onChange={(color: any) => { setHex(color.hex) }}
-                  color={hex}
-                />
-              )
-            }
-
-            <input placeholder='#6644FF' value={hex}
-              className="p-4 font-semibold border-2 outline-0 border-neutral-300 rounded-lg w-full hover:border-violet-500 hover:border-3"
-              onMouseOver={({ target }) => borderHover.in(target)}
-              onMouseOut={({ target }) => borderHover.out(target)}
-              onChange={({ target }) => { setHex(target.value.trim()) }} style={{ color: hexText }}
-            />
-
             <a href="https://github.com/ThijmenGThN/directus-themebuilder/stargazers" target="_blank" rel="noreferrer"
-              className='bg-white border-neutral-300 border-2 items-center rounded-lg flex gap-3 text-xl px-6 py-4 hover:cursor-pointer hover:border-violet-500 hover:border-3'
+              className='bg-white border-neutral-300 border-2 items-center rounded-lg flex gap-3 text-xl my-auto px-6 py-4 hover:cursor-pointer hover:border-violet-500 hover:border-3'
               onMouseOver={({ target }) => borderHover.in(target)}
               onMouseOut={({ target }) => borderHover.out(target)}
             >
               <BiStar className='pointer-events-none' />
-              <p className='pointer-events-none'>{stars}</p>
+              <p className='pointer-events-none'>{stargazers.count}</p>
             </a>
           </div>
         </div>
@@ -118,7 +74,7 @@ export default function Index({ git }: any) {
             onMouseOut={({ target }) => borderHover.out(target)}
           >
             {
-              contributors.map((gazer: any, index: number) => (
+              contributors.people.map((gazer: any, index: number) => (
                 <a className='flex rounded-lg items-center gap-4 border-2 grow justify-center py-4 px-6 border-neutral-300 hover:border-3'
                   key={index} href={gazer.html_url} target="_blank" rel="noreferrer"
                 >
@@ -138,7 +94,7 @@ export default function Index({ git }: any) {
             onMouseOut={({ target }) => borderHover.out(target)}
           >
             {
-              stargazers.map((gazer: any, index: number) => (
+              stargazers.people.map((gazer: any, index: number) => (
                 <a className='flex rounded-lg items-center gap-4 border-2 grow justify-center py-4 px-6 border-neutral-300 hover:border-3'
                   key={index} href={gazer.html_url} target="_blank" rel="noreferrer"
                 >
@@ -159,12 +115,32 @@ export default function Index({ git }: any) {
 }
 
 export async function getServerSideProps() {
-  return {
-    props: {
-      git: {
-        buildId: execSync('git rev-parse --short HEAD').toString(),
-        latestTag: execSync('git describe --abbrev=0 --tags').toString()
-      }
+  let props: any = {
+    git: {
+      buildId: execSync('git rev-parse --short HEAD').toString(),
+      latestTag: execSync('git describe --abbrev=0 --tags').toString()
+    }
+  }
+
+  try {
+    props['contributors'] = {
+      people: (await axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/contributors')).data.filter(({ login }: { login: string }) => login != "ThijmenGThN")
+    }
+
+    props['stargazers'] = {
+      count: (await axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder')).data.stargazers_count,
+      people: (await axios.get('https://api.github.com/repos/ThijmenGThN/directus-themebuilder/stargazers')).data.filter(({ login }: { login: string }) => login != "ThijmenGThN").reverse()
+    }
+  } catch (error) {
+    props['contributors'] = {
+      people: [{ avatar_url: '/defaults/user.png', login: ' Failed to load..' }]
+    }
+
+    props['stargazers'] = {
+      count: 0,
+      people: [{ avatar_url: '/defaults/user.png', login: ' Failed to load..' }]
     }
   }
+
+  return { props }
 }

source/components/Splash.tsx

@@ -18,7 +18,7 @@ export default function Splash({ hex }: { hex: string }) {
                 </svg>
             </div>
             Theme Builder
-            <p className='text-sm italic text-neutral-400 font-mono'>Transform Directus with a splash of color<br />- made simple for you</p>
+            <p className='text-sm italic text-neutral-400 font-mono'>Transform Directus with a splash of color<br />- streamlined for effortless use</p>
         </div>
     )
 }