🎨 (Header) Moved GitHub corner styling to global.css, removed styled-…

…jsx dep.

common/__snapshots__/constants.test.ts.snap

@@ -3,5 +3,6 @@
 exports[`constants matches snapshot 1`] = `
 {
   "GITHUB_GRAPHQL_ENDPOINT": "https://api.github.com/graphql",
+  "SOCIALIFY_GRAPHQL_ENDPOINT": "/api/graphql",
 }
 `;

common/constants.test.ts

@@ -1,4 +1,4 @@
-import * as constants from './constants'
+import * as constants from '@/common/constants'
 
 describe('constants', () => {
   test('matches snapshot', () => {

common/constants.ts

@@ -1,4 +1,5 @@
 // GitHub constants.
-export const GITHUB_GRAPHQL_ENDPOINT = 'https://api.github.com/graphql'
+export const GITHUB_GRAPHQL_ENDPOINT: string = 'https://api.github.com/graphql'
 
 // Socialify constants.
+export const SOCIALIFY_GRAPHQL_ENDPOINT: string = '/api/graphql'

common/github/repoQuery.ts

@@ -1,3 +1,4 @@
+import { SOCIALIFY_GRAPHQL_ENDPOINT } from '@/common/constants'
 import { HOST_PREFIX } from '@/common/helpers'
 
 export const getRepoDetails = async (owner: string, name: string) => {
@@ -40,7 +41,7 @@ export const getRepoDetails = async (owner: string, name: string) => {
     },
   }
 
-  const res = await fetch(`${HOST_PREFIX}/graphql`, {
+  const res = await fetch(`${HOST_PREFIX}${SOCIALIFY_GRAPHQL_ENDPOINT}`, {
     method: 'POST',
     headers: {
       'content-type': 'application/json',

next.config.js

@@ -23,10 +23,6 @@ const nextConfig = {
         source: '/:_owner/:_name/jpg',
         destination: '/api/png',
       },
-      {
-        source: '/graphql',
-        destination: '/api/graphql',
-      },
     ]
   },
   async headers() {

package.json

@@ -44,7 +44,6 @@
     "react-icons": "^5.4.0",
     "satori": "^0.10.14",
     "simple-icons": "^13.20.0",
-    "styled-jsx": "^5.1.6",
     "use-debounce": "^10.0.4",
     "yoga-wasm-web": "^0.3.3"
   },

src/components/error/error.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import ErrorContent from './error'
+import ErrorContent from '@/src/components/error/error'
 
 test('Error renders', () => {
   const { container } = render(

src/components/footer/footer.test.tsx

@@ -1,5 +1,5 @@
+import Footer from '@/src/components/footer/footer'
 import { render } from '@testing-library/react'
-import Footer from './footer'
 
 jest.mock('@/common/helpers', () => ({
   version: '0.0.0',

src/components/header/__snapshots__/header.test.tsx.snap

@@ -1,14 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Header renders 1`] = `
-<header
-  class="jsx-4e1e8caf692508b2"
->
+<header>
   <div
-    class="jsx-4e1e8caf692508b2 navbar"
+    class="navbar"
   >
     <div
-      class="jsx-4e1e8caf692508b2 flex-1"
+      class="flex-1"
     >
       <a
         class="btn btn-ghost text-xl text-white font-extrabold"
@@ -33,7 +31,7 @@ exports[`Header renders 1`] = `
       </a>
     </div>
     <div
-      class="jsx-4e1e8caf692508b2 flex-0 no-screenshot"
+      class="flex-0 no-screenshot"
     >
       <a
         class="invisible sm:visible mr-6"
@@ -43,7 +41,6 @@ exports[`Header renders 1`] = `
       >
         <img
           alt="Socialify - 💞 Socialify your project. 🌐 Share with the world! | Product Hunt"
-          class="jsx-4e1e8caf692508b2"
           height="54"
           src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=271993&theme=dark"
           width="250"
@@ -54,21 +51,20 @@ exports[`Header renders 1`] = `
         href="https://github.com/wei/socialify"
       >
         <svg
-          class="jsx-4e1e8caf692508b2 github-svg w-16 h-16 scale-125 fill-gray-50 text-base-300"
+          class="github-svg w-16 h-16 scale-125 fill-gray-50 text-base-300"
           viewBox="0 0 250 250"
         >
           <path
-            class="jsx-4e1e8caf692508b2"
             d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"
           />
           <path
-            class="jsx-4e1e8caf692508b2 octo-arm"
+            class="octo-arm"
             d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
             fill="currentColor"
             style="transform-origin: 130px 106px;"
           />
           <path
-            class="jsx-4e1e8caf692508b2 octo-body"
+            class="octo-body"
             d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
             fill="currentColor"
           />

src/components/header/header.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import Header from './header'
+import Header from '@/src/components/header/header'
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(),

src/components/header/header.tsx

@@ -53,39 +53,6 @@ const Header: React.FC = () => {
           </Link>
         </div>
       </div>
-
-      <style jsx>{`
-        .github-svg:hover .octo-arm {
-          animation: octocat-wave 560ms ease-in-out;
-        }
-
-        @keyframes octocat-wave {
-          0%,
-          100% {
-            transform: rotate(0);
-          }
-
-          20%,
-          60% {
-            transform: rotate(-25deg);
-          }
-
-          40%,
-          80% {
-            transform: rotate(10deg);
-          }
-        }
-
-        @media (max-width: 500px) {
-          .github-svg:hover .octo-arm {
-            animation: none;
-          }
-
-          .github-svg .octo-arm {
-            animation: octocat-wave 560ms ease-in-out;
-          }
-        }
-      `}</style>
     </header>
   )
 }

src/components/preview/badge.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import Badge from './badge'
+import Badge from '@/src/components/preview/badge'
 
 test('Badge renders', () => {
   const { container } = render(

src/components/preview/cardThemeWrapper.test.tsx

@@ -2,7 +2,7 @@ import { render } from '@testing-library/react'
 
 import type Configuration from '@/common/types/configType'
 import { Font, Pattern, Theme } from '@/common/types/configType'
-import Card from './cardThemeWrapper'
+import Card from '@/src/components/preview/cardThemeWrapper'
 
 test('Card #1 renders', () => {
   const config: Configuration = {

src/components/repo/repo.test.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react'
 
-import Repo from './repo'
+import Repo from '@/src/components/repo/repo'
 
 test('Repo renders', () => {
   const { container } = render(<Repo />)

styles/global.css

@@ -6,4 +6,36 @@
   .socialify-bg {
     @apply bg-gradient-to-r from-[#231e43] via-[#191630] to-[#15103e]
   }
-}
+
+  /* GitHub corner. */
+  .github-svg:hover .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+
+  @keyframes octocat-wave {
+    0%,
+    100% {
+      transform: rotate(0);
+    }
+
+    20%,
+    60% {
+      transform: rotate(-25deg);
+    }
+
+    40%,
+    80% {
+      transform: rotate(10deg);
+    }
+  }
+
+  @media (max-width: 500px) {
+    .github-svg:hover .octo-arm {
+      animation: none;
+    }
+
+    .github-svg .octo-arm {
+      animation: octocat-wave 560ms ease-in-out;
+    }
+  }
+}