Debug node version

src/admin/insights/AdminAppInsights.tsx

@@ -43,6 +43,7 @@ export default async function AdminAppInsights() {
     <AdminAppInsightsClient
       codeMeta={codeMeta}
       nextVersion={APP_CONFIGURATION.nextVersion}
+      nodeVersion={APP_CONFIGURATION.nodeVersion}
       insights={getAllInsights({
         codeMeta,
         photosCount,

src/admin/insights/AdminAppInsightsClient.tsx

@@ -50,6 +50,7 @@ import { ReactNode } from 'react';
 import MaskedScroll from '@/components/MaskedScroll';
 import IconNext from '@/components/icons/IconNext';
 import Link from 'next/link';
+import IconNode from '@/components/icons/IconNode';
 
 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
@@ -116,6 +117,7 @@ const renderWarningIconSmall =
 export default function AdminAppInsightsClient({
   codeMeta,
   nextVersion,
+  nodeVersion,
   insights,
   usedDeprecatedEnvVars,
   photoStats: {
@@ -133,6 +135,7 @@ export default function AdminAppInsightsClient({
 }: {
   codeMeta?: Awaited<ReturnType<typeof getGitHubMetaForCurrentApp>>
   nextVersion: string
+  nodeVersion: string
   insights: ReturnType<typeof getAllInsights>
   usedDeprecatedEnvVars: typeof USED_DEPRECATED_ENV_VARS
   photoStats: PhotoStats
@@ -281,7 +284,7 @@ export default function AdminAppInsightsClient({
             </a>}
           />
           <ScoreCardRow
-            icon={<IconNext className="self-start translate-y-px" />}
+            icon={<IconNext className="translate-y-px" />}
             content={<Link
               // eslint-disable-next-line max-len
               href={`https://github.com/vercel/next.js/releases/tag/v${nextVersion}`}
@@ -290,6 +293,12 @@ export default function AdminAppInsightsClient({
               Next.js {nextVersion}
             </Link>}
           />
+          <ScoreCardRow
+            icon={<IconNode className="translate-y-px" />}
+            content={<span>
+              Node.js {nodeVersion}
+            </span>}
+          />
         </ScoreCard>
       </>}
       <ScoreCard title="Template recommendations">

src/app/config.ts

@@ -529,6 +529,7 @@ export const APP_CONFIGURATION = {
   isAdminSqlDebugEnabled: ADMIN_SQL_DEBUG_ENABLED,
   // Misc
   nextVersion: dependencies.next,
+  nodeVersion: process.version,
   baseUrl: BASE_URL,
   baseUrlShare: BASE_URL_SHARE,
   commitSha: VERCEL_GIT_COMMIT_SHA_SHORT,

src/components/icons/IconNext.tsx

@@ -3,8 +3,10 @@
 import clsx from 'clsx/lite';
 
 export default function IconNext({
+  size = '1em',
   className,
 }: {
+  size?: string | number
   className?: string
 }) {
   return (
@@ -13,7 +15,7 @@ export default function IconNext({
       'border border-transparent dark:border-white/40 rounded-full',
       className,
     )}>
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180" width="1em" height="1em">
+      <svg width={size} height={size} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 180 180">
         <mask height="180" id=":r8:mask0_408_134" maskUnits="userSpaceOnUse" width="180" x="0" y="0" style={{ maskType: 'alpha' }}>
           <circle cx="90" cy="90" fill="black" r="90"></circle>
         </mask>

src/components/icons/IconNode.tsx

@@ -0,0 +1,40 @@
+/* eslint-disable max-len */
+
+export default function IconNode({
+  size = '1em',
+  className,
+}: {
+  size?: string | number
+  className?: string
+}) {
+  return (
+    <svg width={size} height={size} viewBox="0 0 44 50" xmlns="http://www.w3.org/2000/svg" className={className}>
+      <defs>
+        <clipPath id="hexClip">
+          <path d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
+        </clipPath>
+        <linearGradient id="main" x1="30.33" y1="8.56" x2="14.9" y2="44.7" gradientUnits="userSpaceOnUse">
+          <stop stopColor="#3F8B3D"/>
+          <stop offset="0.64" stopColor="#3F873F"/>
+          <stop offset="0.93" stopColor="#3DA92E"/>
+          <stop offset="1" stopColor="#3DAE2B"/>
+        </linearGradient>
+        <linearGradient id="r1" x1="18.8" y1="26.8" x2="68" y2="0.4" gradientUnits="userSpaceOnUse">
+          <stop offset="0.14" stopColor="#3F873F"/>
+          <stop offset="0.4" stopColor="#52A044"/>
+          <stop offset="0.71" stopColor="#64B749"/>
+          <stop offset="0.91" stopColor="#6ABF4B"/>
+        </linearGradient>
+        <linearGradient id="r2" x1="0.25" y1="24.5" x2="44" y2="24.5" gradientUnits="userSpaceOnUse">
+          <stop offset="0.09" stopColor="#6ABF4B"/>
+          <stop offset="0.29" stopColor="#64B749"/>
+          <stop offset="0.6" stopColor="#52A044"/>
+          <stop offset="0.86" stopColor="#3F873F"/>
+        </linearGradient>
+      </defs>
+      <path fill="url(#main)" d="M22.8725 0.4166C22.136 0 21.2616 0 20.5253 0.4166L1.1505 11.6694C0.4142 12.0862 0 12.8733 0 13.707V36.2584C0 37.0921 0.4602 37.8791 1.1505 38.296L20.5253 49.5487C21.2616 49.9653 22.136 49.9653 22.8725 49.5487L42.2471 38.296C42.9836 37.8791 43.3976 37.0921 43.3976 36.2584V13.707C43.3976 12.8733 42.9375 12.0862 42.2471 11.6694L22.8725 0.4166Z" />
+      <polygon fill="url(#r1)" clipPath="url(#hexClip)" points="21.698901,-1.046618 43.20532,11.948247 21.698901,51.072715 0.152778,38.055107" />
+      <polygon fill="url(#r2)" clipPath="url(#hexClip)" points="21.698901,-1.046618 0.152778,11.948247 21.698901,51.072715 43.20532,38.055107" />
+    </svg>
+  );
+}