refactor: generate urls with a tag

hyochan · hyochan · commit 77c14a050e98 · 2025-11-28T08:07:53.000+09:00
diff --git a/app/[lang]/(home)/Hero/StatsUrlCards.tsx b/app/[lang]/(home)/Hero/StatsUrlCards.tsx
@@ -2,7 +2,7 @@
 
 import type {ReactElement} from 'react';
 import {CopyToClipboard} from 'react-copy-to-clipboard';
-import {useSnackbar} from 'react-simple-snackbar';
+import toast from 'react-hot-toast';
 import {track} from '@amplitude/analytics-browser';
 import {CopyIcon} from '@primer/octicons-react';
 import {useRouter} from 'next/navigation';
@@ -13,36 +13,44 @@ import Button from '../../(common)/Button';
 import type {PluginType} from '../Home';
 
 const rootUrl = `${process.env.NEXT_PUBLIC_ROOT_URL}/api`;
+const baseUrl = process.env.NEXT_PUBLIC_ROOT_URL;
 
 type Props = {
   t: Translates['home'];
   login: string;
-  svgStatsURL: string;
+  svgStatsURLDisplay: string;
+  svgStatsURLCopy: string;
   svgTrophiesURL: string;
   selectedPluginType: PluginType;
 };
 
 export default function StatsUrlCard({
   t,
   login,
-  svgStatsURL,
+  svgStatsURLDisplay,
+  svgStatsURLCopy,
   svgTrophiesURL,
 }: Props): ReactElement {
   const router = useRouter();
-  const [openSnackbar] = useSnackbar();
   const {login: authLogin} = useAuthContext();
 
   const copyURLToClipboard = (type: 'stats' | 'trophies'): void => {
-    openSnackbar(`${t.urlCopiedToClipboard}`);
-    track('Copy URL to clipboard', {login, type});
+    toast.success(t.urlCopiedToClipboard);
+
+    if (process.env.NEXT_PUBLIC_AMPLITUDE_KEY) {
+      track('Copy URL to clipboard', {login, type});
+    }
   };
 
-  const trophiesURL = `![${login} github-trophies](${rootUrl}/github-trophies?login=${login})`;
+  // For display (markdown)
+  const trophiesURLDisplay = `![${login} github-trophies](${rootUrl}/github-trophies?login=${login})`;
+  // For copying (HTML)
+  const trophiesURLCopy = `<a href="${baseUrl}/stats/${login}"><img src="${rootUrl}/github-trophies?login=${login}" width="600" /></a>`;
 
   return (
     <div className="mb-[32px] self-stretch relative flex flex-col">
       {/* Stats URL */}
-      <CopyToClipboard text={svgStatsURL}>
+      <CopyToClipboard text={svgStatsURLCopy}>
         {/* @ts-ignore */}
         <div className="bg-basic relative flex-1 p-4 flex flex-col flex-wrap mt-2 mb-3 rounded-md">
           <div
@@ -53,14 +61,14 @@ export default function StatsUrlCard({
           >
             <div className="px-[18px] py-[8px] flex flex-row items-center">
               <CopyIcon className="text-contrast" />
-              <p className="body3 text-contrast pl-3">{svgStatsURL}</p>
+              <p className="body3 text-contrast pl-3">{svgStatsURLDisplay}</p>
             </div>
           </div>
         </div>
       </CopyToClipboard>
       {/* Trophies URL */}
       {svgTrophiesURL ? (
-        <CopyToClipboard text={trophiesURL}>
+        <CopyToClipboard text={trophiesURLCopy}>
           {/* @ts-ignore */}
           <div className="bg-basic relative flex-1 p-4 flex flex-col flex-wrap rounded-md">
             <div
@@ -71,7 +79,7 @@ export default function StatsUrlCard({
             >
               <div className="px-[18px] py-[8px] flex flex-row items-center">
                 <CopyIcon className="text-contrast" />
-                <p className="body3 text-contrast pl-3">{trophiesURL}</p>
+                <p className="body3 text-contrast pl-3">{trophiesURLDisplay}</p>
               </div>
             </div>
           </div>
diff --git a/app/[lang]/(home)/Hero/index.tsx b/app/[lang]/(home)/Hero/index.tsx
@@ -21,13 +21,18 @@ import {useMediaQuery} from 'usehooks-ts';
 import GreatFrontEnd from '../../(common)/GreatFrontEnd';
 
 const rootUrl = `${process.env.NEXT_PUBLIC_ROOT_URL}/api`;
+const baseUrl = process.env.NEXT_PUBLIC_ROOT_URL;
 
-const generateSvgUrlToCopy = (login: string, isBasic?: boolean): string => {
-  if (isBasic) {
-    return `![${login} github-stats](${rootUrl}/github-stats?login=${login})`;
-  }
+// For display (markdown format)
+const generateSvgUrlToDisplay = (login: string, isBasic?: boolean): string => {
+  const apiEndpoint = isBasic ? 'github-stats' : 'github-stats-advanced';
+  return `![${login} github-stats](${rootUrl}/${apiEndpoint}?login=${login})`;
+};
 
-  return `![${login} github-stats](${rootUrl}/github-stats-advanced?login=${login})`;
+// For copying (HTML format)
+const generateSvgUrlToCopy = (login: string, isBasic?: boolean): string => {
+  const apiEndpoint = isBasic ? 'github-stats' : 'github-stats-advanced';
+  return `<a href="${baseUrl}/stats/${login}"><img src="${rootUrl}/${apiEndpoint}?login=${login}" width="600" /></a>`;
 };
 
 type SvgType = 'basic' | 'advanced' | 'trophies';
@@ -64,7 +69,8 @@ function Hero({t, statsInfo}: Props): ReactElement {
   const [searchLogin, setSearchedUID] = useState('');
   const [githubSVG, setGithubSVG] = useState<string | null>(null);
   const [noTrophies, setNoTrophies] = useState(false);
-  const [svgStatsURL, setSvgStatsURL] = useState<string>('');
+  const [svgStatsURLDisplay, setSvgStatsURLDisplay] = useState<string>('');
+  const [svgStatsURLCopy, setSvgStatsURLCopy] = useState<string>('');
   const [isBasic, setIsBasic] = useState<boolean | undefined>(undefined);
   const {register, formState, handleSubmit} = useForm();
 
@@ -80,13 +86,15 @@ function Hero({t, statsInfo}: Props): ReactElement {
         const base64dataStats = btoa(unescape(encodeURIComponent(svgStats)));
         setGithubSVG(base64dataStats);
 
-        setSvgStatsURL(generateSvgUrlToCopy(login, false));
+        setSvgStatsURLDisplay(generateSvgUrlToDisplay(login, false));
+        setSvgStatsURLCopy(generateSvgUrlToCopy(login, false));
         setSearchedUID(login);
         setIsBasic(false);
         setNoTrophies(false);
       } catch (err) {
         setGithubSVG(null);
-        setSvgStatsURL('');
+        setSvgStatsURLDisplay('');
+        setSvgStatsURLCopy('');
         setIsBasic(undefined);
       }
     }
@@ -202,7 +210,8 @@ function Hero({t, statsInfo}: Props): ReactElement {
               buttons={[{label: t.basic}, {label: t.advanced}]}
               onClick={(index) => {
                 const shouldBeBasic = index === 0;
-                setSvgStatsURL(generateSvgUrlToCopy(login, shouldBeBasic));
+                setSvgStatsURLDisplay(generateSvgUrlToDisplay(login, shouldBeBasic));
+                setSvgStatsURLCopy(generateSvgUrlToCopy(login, shouldBeBasic));
                 setIsBasic(shouldBeBasic);
 
                 track('Press Stat Tab', {login, basic: shouldBeBasic});
@@ -243,11 +252,12 @@ function Hero({t, statsInfo}: Props): ReactElement {
                 />
               </div>
             ) : null}
-            {svgStatsURL ? (
+            {svgStatsURLDisplay ? (
               <StatsUrlCard
                 t={t}
                 selectedPluginType={selectedPluginType}
-                svgStatsURL={svgStatsURL}
+                svgStatsURLDisplay={svgStatsURLDisplay}
+                svgStatsURLCopy={svgStatsURLCopy}
                 svgTrophiesURL={
                   !noTrophies ? getSVGUrl('trophies', searchLogin) : ''
                 }
diff --git a/bun.lock b/bun.lock
@@ -25,7 +25,7 @@
         "react-dom": "^19.2.0",
         "react-hamburger-menu": "^1.2.1",
         "react-hook-form": "^7.66.1",
-        "react-simple-snackbar": "^1.1.11",
+        "react-hot-toast": "^2.6.0",
         "server-only": "^0.0.1",
         "tiny-invariant": "^1.3.3",
         "typescript": "5.9.3",
@@ -1094,8 +1094,6 @@
 
     "dom-accessibility-api": ["dom-accessibility-api@0.5.16", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
 
-    "dom-helpers": ["dom-helpers@5.2.1", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
-
     "dom-serializer": ["dom-serializer@2.0.0", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
 
     "domelementtype": ["domelementtype@2.3.0", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
@@ -1290,6 +1288,8 @@
 
     "globby": ["globby@11.1.0", "", { "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", "fast-glob": "^3.2.9", "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" } }, "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="],
 
+    "goober": ["goober@2.1.18", "", { "peerDependencies": { "csstype": "^3.0.10" } }, "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw=="],
+
     "gopd": ["gopd@1.2.0", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
 
     "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
@@ -1740,14 +1740,12 @@
 
     "react-hook-form": ["react-hook-form@7.66.1", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-2KnjpgG2Rhbi+CIiIBQQ9Df6sMGH5ExNyFl4Hw9qO7pIqMBR8Bvu9RQyjl3JM4vehzCh9soiNUM/xYMswb2EiA=="],
 
+    "react-hot-toast": ["react-hot-toast@2.6.0", "", { "dependencies": { "csstype": "^3.1.3", "goober": "^2.1.16" }, "peerDependencies": { "react": ">=16", "react-dom": ">=16" } }, "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg=="],
+
     "react-is": ["react-is@17.0.2", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
 
     "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 
-    "react-simple-snackbar": ["react-simple-snackbar@1.1.11", "", { "dependencies": { "@babel/runtime": "^7.13.10", "react-transition-group": "^4.4.1" }, "peerDependencies": { "react": "16.x", "react-dom": "16.x" } }, "sha512-l+RMkIoqnOXBQaQbirk4yGaEH5Jeynup/AQBGaq7hCPIIraOQi2RFVthZIM4Ms6sFtdSYxQ8emN4/jI30l7gXw=="],
-
-    "react-transition-group": ["react-transition-group@4.4.5", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
-
     "read-cache": ["read-cache@1.0.0", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
 
     "read-cmd-shim": ["read-cmd-shim@6.0.0", "", {}, "sha512-1zM5HuOfagXCBWMN83fuFI/x+T/UhZ7k+KIzhrHXcQoeX5+7gmaDYjELQHmmzIodumBHeByBJT4QYS7ufAgs7A=="],
diff --git a/environment.d.ts b/environment.d.ts
@@ -22,17 +22,3 @@ declare module '*.svg?component' {
   const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
   export default content;
 }
-
-declare module 'react-simple-snackbar' {
-  import type React from 'react';
-
-  interface SnackbarProps {}
-
-  const Snackbar: React.FC<SnackbarProps>;
-
-  export const useSnackbar = (): any => {
-    return [openSnackbar, closeSnackbar];
-  };
-
-  export default Snackbar;
-}
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
     "react-dom": "^19.2.0",
     "react-hamburger-menu": "^1.2.1",
     "react-hook-form": "^7.66.1",
-    "react-simple-snackbar": "^1.1.11",
+    "react-hot-toast": "^2.6.0",
     "server-only": "^0.0.1",
     "tiny-invariant": "^1.3.3",
     "typescript": "5.9.3",
diff --git a/src/components/RootProvider.tsx b/src/components/RootProvider.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import type {ReactElement, ReactNode} from 'react';
-import SnackbarProvider from 'react-simple-snackbar';
+import {Toaster} from 'react-hot-toast';
 
 import {AuthProvider} from './AuthProvider';
 
@@ -19,9 +19,32 @@ export default function RootProvider({
 }): ReactElement {
   return (
     <LocaleProvider initialLocale={initialLocale}>
-      <SnackbarProvider>
-        <AuthProvider>{children}</AuthProvider>
-      </SnackbarProvider>
+      <AuthProvider>
+        {children}
+        <Toaster
+          position="bottom-center"
+          toastOptions={{
+            duration: 2000,
+            success: {
+              style: {
+                background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+                color: '#fff',
+                padding: '12px 20px',
+                borderRadius: '12px',
+                fontSize: '14px',
+                fontWeight: '500',
+                boxShadow: '0 10px 25px rgba(102, 126, 234, 0.3)',
+                maxWidth: 'fit-content',
+                minWidth: 'auto',
+              },
+              iconTheme: {
+                primary: '#fff',
+                secondary: '#667eea',
+              },
+            },
+          }}
+        />
+      </AuthProvider>
     </LocaleProvider>
   );
 }

-Original file line number
+Diff line change
         "react-dom": "^19.2.0",
         "react-hamburger-menu": "^1.2.1",
         "react-hook-form": "^7.66.1",
 -        "react-simple-snackbar": "^1.1.11",
 +        "react-hot-toast": "^2.6.0",
         "server-only": "^0.0.1",
         "tiny-invariant": "^1.3.3",
         "typescript": "5.9.3",
     "dom-accessibility-api": ["[email protected]", "", {}, "sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg=="],
 -    "dom-helpers": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.8.7", "csstype": "^3.0.2" } }, "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA=="],
+-
     "dom-serializer": ["[email protected]", "", { "dependencies": { "domelementtype": "^2.3.0", "domhandler": "^5.0.2", "entities": "^4.2.0" } }, "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg=="],
     "domelementtype": ["[email protected]", "", {}, "sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw=="],
     "globby": ["[email protected]", "", { "dependencies": { "array-union": "^2.1.0", "dir-glob": "^3.0.1", "fast-glob": "^3.2.9", "ignore": "^5.2.0", "merge2": "^1.4.1", "slash": "^3.0.0" } }, "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g=="],
 +    "goober": ["[email protected]", "", { "peerDependencies": { "csstype": "^3.0.10" } }, "sha512-2vFqsaDVIT9Gz7N6kAL++pLpp41l3PfDuusHcjnGLfR6+huZkl6ziX+zgVC3ZxpqWhzH6pyDdGrCeDhMIvwaxw=="],
++
     "gopd": ["[email protected]", "", {}, "sha512-ZUKRh6/kUFoAiTAtTYPZJ3hw9wNxx+BIBOijnlG9PnrJsCcSjs1wyyD6vJpaYtgnzDrKYRSqf3OO6Rfa93xsRg=="],
     "graceful-fs": ["[email protected]", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
     "react-hook-form": ["[email protected]", "", { "peerDependencies": { "react": "^16.8.0 || ^17 || ^18 || ^19" } }, "sha512-2KnjpgG2Rhbi+CIiIBQQ9Df6sMGH5ExNyFl4Hw9qO7pIqMBR8Bvu9RQyjl3JM4vehzCh9soiNUM/xYMswb2EiA=="],
 +    "react-hot-toast": ["[email protected]", "", { "dependencies": { "csstype": "^3.1.3", "goober": "^2.1.16" }, "peerDependencies": { "react": ">=16", "react-dom": ">=16" } }, "sha512-bH+2EBMZ4sdyou/DPrfgIouFpcRLCJ+HoCA32UoAYHn6T3Ur5yfcDCeSr5mwldl6pFOsiocmrXMuoCJ1vV8bWg=="],
++
     "react-is": ["[email protected]", "", {}, "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="],
     "react-refresh": ["[email protected]", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
 -    "react-simple-snackbar": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.13.10", "react-transition-group": "^4.4.1" }, "peerDependencies": { "react": "16.x", "react-dom": "16.x" } }, "sha512-l+RMkIoqnOXBQaQbirk4yGaEH5Jeynup/AQBGaq7hCPIIraOQi2RFVthZIM4Ms6sFtdSYxQ8emN4/jI30l7gXw=="],
+-
 -    "react-transition-group": ["[email protected]", "", { "dependencies": { "@babel/runtime": "^7.5.5", "dom-helpers": "^5.0.1", "loose-envify": "^1.4.0", "prop-types": "^15.6.2" }, "peerDependencies": { "react": ">=16.6.0", "react-dom": ">=16.6.0" } }, "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g=="],
+-
     "read-cache": ["[email protected]", "", { "dependencies": { "pify": "^2.3.0" } }, "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA=="],
     "read-cmd-shim": ["[email protected]", "", {}, "sha512-1zM5HuOfagXCBWMN83fuFI/x+T/UhZ7k+KIzhrHXcQoeX5+7gmaDYjELQHmmzIodumBHeByBJT4QYS7ufAgs7A=="],