Refine app insight rules

2025-02-13 23:03:15 -06:00 · 2025-02-13 23:03:15 -06:00 · 03ac8be368
commit 03ac8be368
parent b3010ca397
8 changed files with 100 additions and 46 deletions
--- a/src/admin/github/index.ts
+++ b/src/admin/github/index.ts
@ -22,11 +22,23 @@ interface RepoParams {

 // Website urls

+export const getGitHubOwnerUrl = ({
+  owner = TEMPLATE_REPO_OWNER,
+}: RepoParams = {}) =>
+  `https://github.com/${owner}`;
+
 export const getGitHubRepoUrl = ({
  owner = TEMPLATE_REPO_OWNER,
  repo = TEMPLATE_REPO_NAME,
 }: RepoParams = {}) =>
-  `https://github.com/${owner}/${repo}`;
+  `${getGitHubOwnerUrl({ owner })}/${repo}`;
+
+export const getGitHubBranchUrl = ({
+  owner = TEMPLATE_REPO_OWNER,
+  repo = TEMPLATE_REPO_NAME,
+  branch = DEFAULT_BRANCH,
+}: RepoParams = {}) =>
+  `${getGitHubRepoUrl({ owner, repo })}/tree/${branch}`;

 export const getGitHubCompareUrl = ({
  owner,
@ -112,7 +124,10 @@ export const getGitHubPublicFork = async (
 };

 const getGitHubMeta = async (params: RepoParams) => {
-  const url = getGitHubRepoUrl(params);
+  const urlOwner = getGitHubOwnerUrl(params);
+  const urlRepo = getGitHubRepoUrl(params);
+  const urlBranch = getGitHubBranchUrl(params);
+
  const isBaseRepo = isRepoBaseRepo(params);

  const [
@ -145,7 +160,9 @@ const getGitHubMeta = async (params: RepoParams) => {

  return {
    ...params,
-    url,
+    urlOwner,
+    urlRepo,
+    urlBranch,
    isForkedFromBase,
    isBaseRepo,
    behindBy,
@ -162,7 +179,9 @@ export const getGitHubMetaWithFallback = (params: RepoParams) =>
      console.error('Error retrieving GitHub meta', { params, error: e });
      return {
        ...params,
-        url: undefined,
+        urlOwner: undefined,
+        urlRepo: undefined,
+        urlBranch: undefined,
        isForkedFromBase: false,
        isBaseRepo: undefined,
        behindBy: undefined,
--- a/src/admin/insights/AdminAppInsights.tsx
+++ b/src/admin/insights/AdminAppInsights.tsx
@ -8,7 +8,11 @@ import {
 import AdminAppInsightsClient from './AdminAppInsightsClient';
 import {
  APP_CONFIGURATION,
+  GRID_HOMEPAGE_ENABLED,
+  HAS_STATIC_OPTIMIZATION,
+  IS_DEVELOPMENT,
  IS_VERCEL_GIT_PROVIDER_GITHUB,
+  MATTE_PHOTOS,
  VERCEL_GIT_BRANCH,
  VERCEL_GIT_COMMIT_SHA,
  VERCEL_GIT_REPO_OWNER,
@ -23,8 +27,9 @@ const commit  = VERCEL_GIT_COMMIT_SHA;

 export default async function AdminAppInsights() {
  const [
-    { count, dateRange },
-    { count: countHidden },
+    { count: photosCount, dateRange },
+    { count: photosCountHidden },
+    { count: photosCountPortrait },
    tags,
    cameras,
    filmSimulations,
@ -32,6 +37,7 @@ export default async function AdminAppInsights() {
  ] = await Promise.all([
    getPhotosMeta({ hidden: 'include' }),
    getPhotosMeta({ hidden: 'only' }),
+    getPhotosMeta({ maximumAspectRatio: 0.9 }),
    getUniqueTags(),
    getUniqueCameras(),
    getUniqueFilmSimulations(),
@ -43,7 +49,7 @@ export default async function AdminAppInsights() {
    hasVercelBlobStorage,
  } = APP_CONFIGURATION;

-  const codeMeta = IS_VERCEL_GIT_PROVIDER_GITHUB
+  const codeMeta = IS_VERCEL_GIT_PROVIDER_GITHUB || IS_DEVELOPMENT
    ? await getGitHubMetaWithFallback({
      owner,
      repo,
@ -56,23 +62,24 @@ export default async function AdminAppInsights() {
    <AdminAppInsightsClient
      codeMeta={codeMeta}
      recommendations={{
-        fork: true,
-        forkBehind: true,
-        ai: isAiTextGenerationEnabled,
-        aiRateLimiting: isAiTextGenerationEnabled && !hasVercelBlobStorage,
-        photoMatting: true,
-        gridFirst: true,
+        noFork: !codeMeta?.isForkedFromBase && !codeMeta?.isBaseRepo,
+        forkBehind: Boolean(codeMeta?.isBehind),
+        noAi: !isAiTextGenerationEnabled,
+        noAiRateLimiting: isAiTextGenerationEnabled && !hasVercelBlobStorage,
+        photoMatting: photosCountPortrait > 0 && !MATTE_PHOTOS,
+        gridFirst: photosCount > 32 && !GRID_HOMEPAGE_ENABLED,
+        noStaticOptimization: !HAS_STATIC_OPTIMIZATION,
      }}
      photoStats={{
-        photosCount: count,
-        photosCountHidden: countHidden,
+        photosCount,
+        photosCountHidden,
        tagsCount: tags.length,
        camerasCount: cameras.length,
        filmSimulationsCount: filmSimulations.length,
        lensesCount: lenses.length,
        dateRange,
      }}
-      debug
+      debug={IS_DEVELOPMENT}
    />
  );
 }
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@ -16,7 +16,7 @@ import {
 import { MdLightbulbOutline } from 'react-icons/md';
 import { PiWarningBold } from 'react-icons/pi';
 import { TbCone } from 'react-icons/tb';
-import { getGitHubMetaWithFallback } from './github';
+import { getGitHubMetaWithFallback } from '../github';
 import { BiGitBranch, BiGitCommit, BiLogoGithub } from 'react-icons/bi';
 import {
  TEMPLATE_REPO_BRANCH,
@ -24,13 +24,17 @@ import {
  TEMPLATE_REPO_NAME,
  VERCEL_GIT_COMMIT_SHA_SHORT,
 } from '@/app-core/config';
-import { AdminAppInsight } from './insights';
+import { AdminAppInsight } from '.';

 const DEBUG_COMMIT_SHA = '4cd29ed';
 const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';

 export default function AdminAppInsightsClient({
  codeMeta,
+  recommendations: {
+    noAi,
+    noAiRateLimiting,
+  },
  photoStats: {
    photosCount,
    photosCountHidden,
@ -68,20 +72,33 @@ export default function AdminAppInsightsClient({
              className="flex flex-wrap gap-x-4 gap-y-1 overflow-auto"
            >
              <div className="flex items-center gap-1 *:whitespace-nowrap">
-                <div>{codeMeta?.owner ?? TEMPLATE_REPO_OWNER}</div>
+                <a
+                  href={codeMeta?.urlOwner}
+                  target="blank"
+                >
+                  {codeMeta?.owner ?? TEMPLATE_REPO_OWNER}
+                </a>
                <div>/</div>
-                <div>{codeMeta?.repo ?? TEMPLATE_REPO_NAME}</div>
+                <a
+                  href={codeMeta?.urlRepo}
+                  target="blank"
+                >
+                  {codeMeta?.repo ?? TEMPLATE_REPO_NAME}
+                </a>
              </div>
              <div className="flex items-center gap-1 min-w-0">
                <div><BiGitBranch size={17} /></div>
-                <div className="truncate">
+                <a
+                  className="truncate"
+                  href={codeMeta?.urlBranch}
+                  target="blank"
+                >
                  {codeMeta?.branch ?? TEMPLATE_REPO_BRANCH}
-                </div>
+                </a>
              </div>
            </div>}
          />
          <ScoreCardRow
-            // icon={<BiLogoGithub size={17} />}
            icon={<BiGitCommit size={18} className="translate-y-[0px]" />}
            content={<div className="flex items-center gap-2">
              <div className="text-medium">
@ -106,7 +123,7 @@ export default function AdminAppInsightsClient({
        </ScoreCard>
      </>}
      <ScoreCard title="Template recommendations">
-        <ScoreCardRow
+        {(noAiRateLimiting || debug) && <ScoreCardRow
          icon={<PiWarningBold
            size={17}
            className="translate-x-[0.5px] text-amber-600"
@ -114,7 +131,13 @@ export default function AdminAppInsightsClient({
          content="AI enabled without rate limiting"
          // eslint-disable-next-line max-len
          additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting."
-        />
+        />}
+        {(noAi || debug) && <ScoreCardRow
+          icon={<MdLightbulbOutline size={19} />}
+          content="Enable AI text generation to improve photo descriptions"
+          // eslint-disable-next-line max-len
+          additionalContent="Create Vercel KV store and link it to this project in order to enable rate limiting."
+        />}
        <ScoreCardRow
          icon={<MdLightbulbOutline size={19} />}
          // eslint-disable-next-line max-len
--- a/src/admin/insights/index.ts
+++ b/src/admin/insights/index.ts
@ -1,7 +1,8 @@
 export type AdminAppInsight =
-  'fork' |
+  'noFork' |
  'forkBehind' |
-  'ai' |
-  'aiRateLimiting' |
+  'noAi' |
+  'noAiRateLimiting' |
  'photoMatting' |
-  'gridFirst';
+  'gridFirst' |
+  'noStaticOptimization';
--- a/src/app-core/config.ts
+++ b/src/app-core/config.ts
@ -175,6 +175,11 @@ export const STATICALLY_OPTIMIZED_PHOTO_CATEGORIES =
  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORIES === '1';
 export const STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES =
  process.env.NEXT_PUBLIC_STATICALLY_OPTIMIZE_PHOTO_CATEGORY_OG_IMAGES === '1';
+export const HAS_STATIC_OPTIMIZATION =
+  STATICALLY_OPTIMIZED_PHOTOS ||
+  STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES ||
+  STATICALLY_OPTIMIZED_PHOTO_CATEGORIES ||
+  STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES;
 export const PRESERVE_ORIGINAL_UPLOADS =
  process.env.NEXT_PUBLIC_PRESERVE_ORIGINAL_UPLOADS === '1' ||
  // Legacy environment variable name
@ -285,11 +290,7 @@ export const APP_CONFIGURATION = {
  hasAiTextAutoGeneratedFields:
    Boolean(process.env.AI_TEXT_AUTO_GENERATED_FIELDS),
  // Performance
-  isStaticallyOptimized: (
-    STATICALLY_OPTIMIZED_PHOTOS ||
-    STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES ||
-    STATICALLY_OPTIMIZED_PHOTO_CATEGORIES
-  ),
+  isStaticallyOptimized: HAS_STATIC_OPTIMIZATION,
  arePhotosStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTOS,
  arePhotoOGImagesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES,
  arePhotoCategoriesStaticallyOptimized: STATICALLY_OPTIMIZED_PHOTO_CATEGORIES,
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@ -72,11 +72,8 @@ export default function RootLayout({
    >
      <body>
        <AppStateProvider>
-          <SwrConfigClient>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme={DEFAULT_THEME}
-            >
+          <ThemeProvider attribute="class" defaultTheme={DEFAULT_THEME}>
+            <SwrConfigClient>
              <main className={clsx(
                'mx-3 mb-3',
                'lg:mx-6 lg:mb-6',
@ -96,12 +93,12 @@ export default function RootLayout({
                <Footer />
              </main>
              <CommandK />
-            </ThemeProvider>
-          </SwrConfigClient>
-          <Analytics debug={false} />
-          <SpeedInsights debug={false}  />
-          <PhotoEscapeHandler />
-          <ToasterWithThemes />
+            </SwrConfigClient>
+            <Analytics debug={false} />
+            <SpeedInsights debug={false}  />
+            <PhotoEscapeHandler />
+            <ToasterWithThemes />
+          </ThemeProvider>
        </AppStateProvider>
      </body>
    </html>
--- a/src/components/ScoreCardRow.tsx
+++ b/src/components/ScoreCardRow.tsx
@ -32,7 +32,7 @@ export default function ScoreCardRow({
          {content}
        </div>
        {isExpanded &&
-          <div className="text-sm text-medium">
+          <div className="text-medium">
            {additionalContent}
          </div>}
      </div>
--- a/src/photo/db/index.ts
+++ b/src/photo/db/index.ts
@ -17,6 +17,7 @@ export type GetPhotosOptions = {
  limit?: number
  offset?: number
  query?: string
+  maximumAspectRatio?: number
  takenBefore?: Date
  takenAfterInclusive?: Date
  updatedBefore?: Date
@ -36,6 +37,7 @@ export const getWheresFromOptions = (
    takenAfterInclusive,
    updatedBefore,
    query,
+    maximumAspectRatio,
    tag,
    camera,
    lens,
@ -73,6 +75,10 @@ export const getWheresFromOptions = (
    wheres.push(`CONCAT(title, ' ', caption, ' ', semantic_description) ILIKE $${valuesIndex++}`);
    wheresValues.push(`%${query.toLocaleLowerCase()}%`);
  }
+  if (maximumAspectRatio) {
+    wheres.push(`aspect_ratio <= $${valuesIndex++}`);
+    wheresValues.push(maximumAspectRatio);
+  }
  if (tag) {
    wheres.push(`$${valuesIndex++}=ANY(tags)`);
    wheresValues.push(tag);