🐛 Fix preview font, update linting and snapshots

wei · Dec 19, 2024 · b809885 · b809885
1 parent 7c667c2
commit b809885
Show file tree

Hide file tree

Showing 22 changed files with 61 additions and 117 deletions.
diff --git a/...ts/Socialify-UI-is-consistent-for-preview-config-page-1-Mobile-Chrome-linux.png b/...ts/Socialify-UI-is-consistent-for-preview-config-page-1-Mobile-Chrome-linux.png
diff --git a/...apshots/Socialify-UI-is-consistent-for-preview-config-page-1-chromium-linux.png b/...apshots/Socialify-UI-is-consistent-for-preview-config-page-1-chromium-linux.png
diff --git a/...ts/Socialify-UI-is-consistent-for-preview-config-page-2-Mobile-Chrome-linux.png b/...ts/Socialify-UI-is-consistent-for-preview-config-page-2-Mobile-Chrome-linux.png
diff --git a/...apshots/Socialify-UI-is-consistent-for-preview-config-page-2-chromium-linux.png b/...apshots/Socialify-UI-is-consistent-for-preview-config-page-2-chromium-linux.png
diff --git a/...ows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png b/...ows-error-when-svg-data-uri-input-length-exceeds-the-limit-1-chromium-linux.png
diff --git a/LICENSE b/LICENSE
@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Wei He
+Copyright (c) 2024 Wei He <https://wei.mit-license.org>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

diff --git a/app/api/stats/route.ts b/app/api/stats/route.ts
@@ -1,18 +1,19 @@
 import 'server-only'
+import { GITHUB_API_ENDPOINT } from '@/common/constants'
 import { type NextRequest, NextResponse } from 'next/server'
 
 export const runtime = 'edge'
 
 export async function GET(_req: NextRequest): Promise<NextResponse> {
   const response = await fetch(
-    `https://api.github.com/search/code?per_page=1&q=${encodeURIComponent(
+    `${GITHUB_API_ENDPOINT}/search/code?per_page=1&q=${encodeURIComponent(
       'socialify.git.ci'
     )}`,
     {
       method: 'GET',
       headers: {
-        Accept: 'application/vnd.github.v3+json',
-        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
+        accept: 'application/vnd.github.v3+json',
+        authorization: `Bearer ${process.env.GITHUB_TOKEN}`,
         'content-type': 'application/json',
       },
     }

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,4 +1,5 @@
 import { GoogleTagManager } from '@next/third-parties/google'
+import clsx from 'clsx'
 import type { Metadata, Viewport } from 'next'
 import { Inter } from 'next/font/google'
 import { JSX, type ReactNode } from 'react'
@@ -16,26 +17,8 @@ const inter = Inter({
 export const metadata: Metadata = {
   title: 'GitHub Socialify',
   description: '💞 Socialify your project. 🌐 Share with the world!',
-  generator: 'Next.js',
   applicationName: 'GitHub Socialify',
-  keywords: [
-    'github',
-    'social',
-    'sharing',
-    'badges',
-    'hacktoberfest',
-    'social-image',
-  ],
-  authors: [
-    {
-      name: 'Wei He',
-      url: 'https://linkedin.com/in/weihe',
-    },
-    {
-      name: 'Rahul Tarak',
-      url: 'https://linkedin.com/in/rahul-tarak',
-    },
-  ],
+  keywords: ['github', 'social', 'sharing', 'badges', 'social-image'],
   openGraph: {
     images: [
       {
@@ -65,7 +48,10 @@ export default function RootLayout({
         <meta property="x-socialify-version" content={version} />
       </head>
       <body
-        className={`${inter.className} flex flex-col min-h-dvh socialify-bg`}
+        className={clsx(
+          'flex flex-col min-h-dvh socialify-bg',
+          inter.className
+        )}
       >
         <Header />
         <main className="flex-1 flex">{children}</main>

diff --git a/common/__snapshots__/constants.test.ts.snap b/common/__snapshots__/constants.test.ts.snap
diff --git a/common/constants.test.ts b/common/constants.test.ts
diff --git a/common/constants.ts b/common/constants.ts
@@ -1,5 +1,5 @@
-// GitHub constants.
-export const GITHUB_GRAPHQL_ENDPOINT: string = 'https://api.github.com/graphql'
+export const GITHUB_API_ENDPOINT: string = 'https://api.github.com'
+
+export const GITHUB_GRAPHQL_ENDPOINT: string = GITHUB_API_ENDPOINT + '/graphql'
 
-// Socialify constants.
 export const SOCIALIFY_GRAPHQL_ENDPOINT: string = '/api/graphql'
diff --git a/jest.config.ts b/jest.config.ts
@@ -6,17 +6,11 @@ import { pathsToModuleNameMapper } from 'ts-jest'
 import { compilerOptions } from './tsconfig.json'
 
 const createJestConfig = nextJest({
-  // Provide the path to your Next.js app to load next.config.js
-  // and .env files in your test environment.
   dir: './',
 })
 
 // Add any custom config to be passed to Jest.
 const customJestConfig: Config.InitialOptions = {
-  // Add more setup options before each test is run
-  // setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
-  // if using TypeScript with a baseUrl set to the root directory
-  // then you need the below for alias' to work.
   preset: 'ts-jest',
   moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
     prefix: '<rootDir>/',
@@ -39,11 +33,6 @@ const customJestConfig: Config.InitialOptions = {
     '[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$',
     '^.+\\.module\\.(css|sass|scss)$',
   ],
-  // "transform": {
-  //   "^.+\\.(js|jsx|ts|tsx)$": "<rootDir>/node_modules/babel-jest",
-  //   "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-  //   "^(?!.*\\.(js|jsx|ts|tsx|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-  // },
 }
 
 // createJestConfig is exported this way to ensure that next/jest can load

diff --git a/package.json b/package.json
@@ -64,7 +64,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@types/jest": "^29.5.14",
-    "@types/react": "19.0.1",
+    "@types/react": "^19.0.1",
     "autoprefixer": "^10.4.20",
     "daisyui": "^4.12.22",
     "husky": "^9.1.7",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/configuration/config.tsx b/src/components/configuration/config.tsx
@@ -84,12 +84,10 @@ export default function Config({
   // biome-ignore lint/correctness/useExhaustiveDependencies: only update on searchParamsString change.
   useEffect(() => {
     function handleRouteChange(searchParamsString: string): void {
-      // Short-circuit if repository is not found.
       if (!repository) return
 
       const newConfig = getOptionalConfig(repository)
 
-      // Short-circuit if no newConfig is found.
       if (!newConfig) return
 
       const params = new URLSearchParams(searchParamsString)
@@ -131,7 +129,6 @@ export default function Config({
     handleRouteChange(searchParamsString)
   }, [searchParamsString])
 
-  // Short-circuit to render null if no repository is found.
   if (!repository) return null
 
   return (

diff --git a/src/components/configuration/inputWrapper.tsx b/src/components/configuration/inputWrapper.tsx
@@ -1,4 +1,5 @@
 import type ConfigType from '@/common/types/configType'
+import clsx from 'clsx'
 
 export type InputProps = {
   title: string
@@ -30,7 +31,9 @@ const InputWrapper = ({
         {alt && <span className="label-text-alt font-semibold">{alt}</span>}
       </label>
       <input
-        className={`input input-sm input-bordered font-semibold w-full ${error ? 'input-error' : ''}`}
+        className={clsx('input input-sm input-bordered font-semibold w-full', {
+          'input-error': error,
+        })}
         type="text"
         value={value || ''}
         disabled={!!disabled}

diff --git a/src/components/configuration/selectWrapper.tsx b/src/components/configuration/selectWrapper.tsx
@@ -1,13 +1,12 @@
 import type ConfigType from '@/common/types/configType'
 
-// biome-ignore format: added alignment for clarity.
 interface SelectWrapperProps {
-  title        : string
-  alt         ?: string
-  keyName      : keyof ConfigType
-  map          : { key: string; label: any }[]
-  value        : string
-  handleChange : (value: any, key: keyof ConfigType) => void
+  title: string
+  alt?: string
+  keyName: keyof ConfigType
+  map: { key: string; label: any }[]
+  value: string
+  handleChange: (value: any, key: keyof ConfigType) => void
 }
 
 const SelectWrapper = ({

diff --git a/src/components/mainWrapper.tsx b/src/components/mainWrapper.tsx
@@ -27,10 +27,8 @@ export default function MainWrapper({
     }
   }, [response])
 
-  // Short-circuit to render null if no response or repository is found.
   if (!response || !response.repository) return null
 
-  // Destructure the response object to get the repository.
   const { repository }: RepoQueryResponse = response
 
   return (

diff --git a/src/components/preview/preview.tsx b/src/components/preview/preview.tsx
@@ -1,4 +1,4 @@
-import classnames from 'clsx'
+import clsx from 'clsx'
 import { JSX, useContext } from 'react'
 import { MdContentCopy, MdDownload } from 'react-icons/md'
 
@@ -27,7 +27,7 @@ export default function Preview(): JSX.Element {
   return (
     <section className="mb-3">
       <div
-        className={classnames(
+        className={clsx(
           'relative cursor-pointer rounded-lg shadow-2xl overflow-hidden',
           'w-[320px] h-[160px]',
           'min-[384px]:w-[384px] min-[384px]:h-[192px]',
@@ -52,7 +52,7 @@ export default function Preview(): JSX.Element {
         }
       >
         <div
-          className={classnames(
+          className={clsx(
             'origin-top-left',
             'scale-[0.25]',
             'min-[384px]:scale-[0.3]',
@@ -61,18 +61,14 @@ export default function Preview(): JSX.Element {
             'min-[640px]:scale-[0.5]'
           )}
         >
-          <head>
-            <link
-              href={`https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap`}
-              rel="stylesheet"
-              key="preview-card-fonts-1"
-            />
-            <link
-              href={`https://fonts.googleapis.com/css2?family=${config.font}:wght@200;400;500&display=swap`}
-              rel="stylesheet"
-              key="preview-card-fonts-2"
-            />
-          </head>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Jost:wght@400&display=swap"
+            rel="stylesheet"
+          />
+          <link
+            href={`https://fonts.googleapis.com/css2?family=${config.font}:wght@200;400;500&display=swap`}
+            rel="stylesheet"
+          />
           <CardThemeWrapper {...config} />
         </div>
         <img
@@ -89,7 +85,7 @@ export default function Preview(): JSX.Element {
       <div className="card mt-3 mx-auto w-fit bg-neutral shadow-xl">
         <div className="card-body px-3 py-2">
           <div
-            className={classnames(
+            className={clsx(
               'flex justify-center items-center content-center gap-2'
             )}
           >

diff --git a/src/components/preview/previewHelpers.ts b/src/components/preview/previewHelpers.ts
@@ -2,12 +2,10 @@ import { toClipboard } from 'copee'
 
 import toaster from '@/src/components/toaster'
 
-// -----------------------------------------------------------------------------
-// biome-ignore format: added alignment for clarity.
 export interface ConstructImageUrlProps {
-  type              : 'absolute' | 'relative'
-  format            : string
-  currentPath       : string
+  type: 'absolute' | 'relative'
+  format: string
+  currentPath: string
   searchParamsString: string
 }
 
@@ -17,16 +15,15 @@ export function constructImageUrl({
   currentPath,
   searchParamsString,
 }: ConstructImageUrlProps): string {
-  const relativeImageUrl: string = `${currentPath}/${format}${searchParamsString.length > 0 ? `?${searchParamsString}` : ''}`
+  const imageUrl = `${currentPath}/${format}${searchParamsString ? `?${searchParamsString}` : ''}`
 
   if (type === 'absolute') {
-    return `${window.location.protocol}//${window.location.host}${relativeImageUrl}`
+    return `${window.location.origin}${imageUrl}`
+  } else {
+    return imageUrl
   }
-
-  return relativeImageUrl
 }
 
-// -----------------------------------------------------------------------------
 export function copyImageUrl(absoluteImageUrl: string): void {
   const success = toClipboard(absoluteImageUrl)
   if (success) {
@@ -36,7 +33,6 @@ export function copyImageUrl(absoluteImageUrl: string): void {
   }
 }
 
-// -----------------------------------------------------------------------------
 export function copyMarkdown({
   absoluteImageUrl,
   repoName,
@@ -48,7 +44,6 @@ export function copyMarkdown({
   }
 }
 
-// -----------------------------------------------------------------------------
 export function copyImageTag({
   absoluteImageUrl,
   repoName,
@@ -60,7 +55,6 @@ export function copyImageTag({
   }
 }
 
-// -----------------------------------------------------------------------------
 export function copyOpenGraphTags(absoluteImageUrl: string): void {
   const ogTag = `
 <meta property="og:image" content="${absoluteImageUrl}" />
@@ -73,13 +67,11 @@ export function copyOpenGraphTags(absoluteImageUrl: string): void {
   }
 }
 
-// -----------------------------------------------------------------------------
-// biome-ignore format: added alignment for clarity.
 export interface HandleDownloadProps {
-  customRelativeImageUrl  : string
+  customRelativeImageUrl: string
   fallbackRelativeImageUrl: string
-  fileType                : string
-  repoName                : string
+  fileType: string
+  repoName: string
 }
 
 export function handleDownload({

diff --git a/src/components/toaster.tsx b/src/components/toaster.tsx
@@ -1,3 +1,4 @@
+import clsx from 'clsx'
 import { toast as hotToast } from 'react-hot-toast'
 import {
   MdCheckCircleOutline,
@@ -28,7 +29,7 @@ const _helper = (type: keyof typeof ToastTypeMap) => {
     hotToast.custom(
       <div
         aria-live="assertive"
-        className={`alert ${className} w-fit shadow-lg`}
+        className={clsx('alert w-fit shadow-lg', className)}
         data-testid={`toast-${type}`}
         role="alert"
       >