Flag deprecated environment variables

src/admin/insights/AdminAppInsights.tsx

@@ -10,6 +10,7 @@ import {
 } from '@/photo/db/query';
 import AdminAppInsightsClient from './AdminAppInsightsClient';
 import { getAllInsights, getGitHubMetaForCurrentApp } from '.';
+import { USED_DEPRECATED_ENV_VARS } from '@/app/config';
 
 export default async function AdminAppInsights() {
   const [
@@ -47,6 +48,7 @@ export default async function AdminAppInsights() {
         photosCountNeedSync,
         photosCountPortrait,
       })}
+      usedDeprecatedEnvVars={USED_DEPRECATED_ENV_VARS}
       photoStats={{
         photosCount,
         photosCountHidden,

src/admin/insights/AdminAppInsightsClient.tsx

@@ -3,7 +3,7 @@
 import ScoreCard from '@/components/ScoreCard';
 import ScoreCardRow from '@/components/ScoreCardRow';
 import { dateRangeForPhotos } from '@/photo';
-import { FaCircleInfo, FaRegCalendar } from 'react-icons/fa6';
+import { FaArrowRight, FaCircleInfo, FaRegCalendar } from 'react-icons/fa6';
 import { MdAspectRatio } from 'react-icons/md';
 import { PiWarningBold } from 'react-icons/pi';
 import { TbSparkles } from 'react-icons/tb';
@@ -17,9 +17,10 @@ import {
   TEMPLATE_REPO_URL_FORK,
   TEMPLATE_REPO_URL_README,
   CATEGORY_VISIBILITY,
+  USED_DEPRECATED_ENV_VARS,
 } from '@/app/config';
 import {
-  AdminAppInsights,
+  getAllInsights,
   getGitHubMetaForCurrentApp,
   hasTemplateRecommendations,
   PhotoStats,
@@ -88,6 +89,7 @@ const renderHighlightText = (
 export default function AdminAppInsightsClient({
   codeMeta,
   insights,
+  usedDeprecatedEnvVars,
   photoStats: {
     photosCount,
     photosCountHidden,
@@ -102,12 +104,14 @@ export default function AdminAppInsightsClient({
   },
 }: {
   codeMeta?: Awaited<ReturnType<typeof getGitHubMetaForCurrentApp>>
-  insights: AdminAppInsights
+  insights: ReturnType<typeof getAllInsights>
+  usedDeprecatedEnvVars: typeof USED_DEPRECATED_ENV_VARS
   photoStats: PhotoStats
 }) {
   const { shouldDebugInsights: debug } = useAppState();
 
   const {
+    deprecatedEnvVars,
     noFork,
     forkBehind,
     noAi,
@@ -250,6 +254,36 @@ export default function AdminAppInsightsClient({
       <ScoreCard title="Template recommendations">
         {(hasTemplateRecommendations(insights) || debug)
           ? <>
+            {(deprecatedEnvVars || debug) && <ScoreCardRow
+              icon={<PiWarningBold
+                size={17}
+                className={clsx(
+                  'translate-x-[0.5px]',
+                  TEXT_COLOR_WARNING,
+                )}
+              />}
+              content={isExpanded => renderHighlightText(
+                'Update environment variables',
+                'yellow',
+                !isExpanded,
+              )}
+              expandContent={<div className="flex flex-col gap-2">
+                Future versions of this template will not build correctly
+                when including the following deprecated environment variables:
+                <div className="space-y-1">
+                  {usedDeprecatedEnvVars.map(({ old, replacement }) => (
+                    <div
+                      key={old}
+                      className="flex items-center gap-2"
+                    >
+                      <div className="text-xs">{old}</div>
+                      <FaArrowRight size={10} />
+                      <EnvVar variable={replacement} className="w-full" />
+                    </div>
+                  ))}
+                </div>
+              </div>}
+            />}
             {(noAiRateLimiting || debug) && <ScoreCardRow
               icon={<PiWarningBold
                 size={17}

src/admin/insights/index.ts

@@ -12,6 +12,7 @@ import {
   HAS_STATIC_OPTIMIZATION,
   GRID_HOMEPAGE_ENABLED,
   AI_CONTENT_GENERATION_ENABLED,
+  HAS_DEPRECATED_ENV_VARS,
 } from '@/app/config';
 import { PhotoDateRange } from '@/photo';
 import { getGitHubMeta } from '@/platforms/github';
@@ -25,6 +26,7 @@ const AdminAppInsightCode = [
 type AdminAppInsightCode = typeof AdminAppInsightCode[number];
 
 const _INSIGHTS_TEMPLATE = [
+  'deprecatedEnvVars',
   'noAi',
   'noAiRateLimiting',
   'noConfiguredDomain',
@@ -89,6 +91,7 @@ export const getSignificantInsights = ({
   } = APP_CONFIGURATION;
 
   return {
+    deprecatedEnvVars: HAS_DEPRECATED_ENV_VARS,
     forkBehind: Boolean(codeMeta?.isBehind),
     noAiRateLimiting: isAiTextGenerationEnabled && !hasRedisStorage,
     noConfiguredDomain: !hasDomain,
@@ -108,13 +111,14 @@ export const indicatorStatusForSignificantInsights = ({
   });
 
   const {
+    deprecatedEnvVars,
     forkBehind,
     noAiRateLimiting,
     noConfiguredDomain,
     photosNeedSync,
   } = insights;
 
-  if (noAiRateLimiting || noConfiguredDomain) {
+  if (deprecatedEnvVars || noAiRateLimiting || noConfiguredDomain) {
     return 'yellow';
   } else if (forkBehind || photosNeedSync) {
     return 'blue';

src/app/config.ts

@@ -504,24 +504,37 @@ export const APP_CONFIGURATION = {
   commitUrl: VERCEL_GIT_COMMIT_URL,
 };
 
-const ALL_LEGACY_ENV_VARS = [
-  { old: 'NEXT_PUBLIC_SITE_DOMAIN', new: 'NEXT_PUBLIC_DOMAIN' },
-  { old: 'NEXT_PUBLIC_SITE_DESCRIPTION', new: 'NEXT_PUBLIC_NAV_CAPTION' },
-  { old: 'NEXT_PUBLIC_SITE_TITLE', new: 'NEXT_PUBLIC_META_TITLE' },
-  { old: 'NEXT_PUBLIC_SITE_ABOUT', new: 'NEXT_PUBLIC_PAGE_ABOUT' },
-  // eslint-disable-next-line max-len
-  { old: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES', new: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS' },
-  // eslint-disable-next-line max-len
-  { old: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES', new: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES' },
-  { old: 'NEXT_PUBLIC_PRO_MODE', new: 'NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS' },
-  { old: 'NEXT_PUBLIC_HIDE_SOCIAL', new: 'NEXT_PUBLIC_SOCIAL_NETWORKS' },
-];
+const ALL_DEPRECATED_ENV_VARS = [{
+  old: 'NEXT_PUBLIC_SITE_DOMAIN',
+  replacement: 'NEXT_PUBLIC_DOMAIN',
+}, {
+  old: 'NEXT_PUBLIC_SITE_DESCRIPTION',
+  replacement: 'NEXT_PUBLIC_NAV_CAPTION',
+}, {
+  old: 'NEXT_PUBLIC_SITE_TITLE',
+  replacement: 'NEXT_PUBLIC_META_TITLE',
+}, {
+  old: 'NEXT_PUBLIC_SITE_ABOUT',
+  replacement: 'NEXT_PUBLIC_PAGE_ABOUT',
+}, {
+  old: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PAGES',
+  replacement: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTOS',
+}, {
+  old: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_OG_IMAGES',
+  replacement: 'NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_OG_IMAGES',
+}, {
+  old: 'NEXT_PUBLIC_PRO_MODE',
+  replacement: 'NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS',
+}, {
+  old: 'NEXT_PUBLIC_HIDE_SOCIAL',
+  replacement: 'NEXT_PUBLIC_SOCIAL_NETWORKS',
+}];
 
-export const USED_LEGACY_ENV_VARS = ALL_LEGACY_ENV_VARS
+export const USED_DEPRECATED_ENV_VARS = ALL_DEPRECATED_ENV_VARS
   .filter(({ old }) => Boolean(process.env[old]));
 
-export const DOES_APP_HAVE_LEGACY_ENV_VARS =
-  USED_LEGACY_ENV_VARS.length > 0;
+export const HAS_DEPRECATED_ENV_VARS =
+  USED_DEPRECATED_ENV_VARS.length > 0;
 
 export const IS_APP_READY =
   APP_CONFIGURATION.hasDatabase &&