diff --git a/src/admin/AdminAppConfigurationClient.tsx b/src/admin/AdminAppConfigurationClient.tsx
index be6889fc..f29b7f7a 100644
--- a/src/admin/AdminAppConfigurationClient.tsx
+++ b/src/admin/AdminAppConfigurationClient.tsx
@@ -4,9 +4,7 @@ import {
ComponentProps,
ReactNode,
} from 'react';
-import { clsx } from 'clsx/lite';
import ChecklistRow from '../components/ChecklistRow';
-import { FiExternalLink } from 'react-icons/fi';
import {
BiData,
BiHide,
@@ -29,6 +27,7 @@ import { PiPaintBrushHousehold } from 'react-icons/pi';
import { IoMdGrid } from 'react-icons/io';
import { CgDebug } from 'react-icons/cg';
import EnvVar from '@/components/EnvVar';
+import AdminLink from './AdminLink';
export default function AdminAppConfigurationClient({
// Storage
@@ -110,27 +109,6 @@ export default function AdminAppConfigurationClient({
simplifiedView?: boolean
isAnalyzingConfiguration?: boolean
}) {
- const renderLink = (href: string, text: string, external = true) =>
- <>
-
- {text}
-
- {external &&
- <>
-
-
- >}
- >;
-
const renderEnvVars = (variables: string[]) =>
{variables.map(envVar =>
@@ -158,7 +136,7 @@ export default function AdminAppConfigurationClient({
renderSubStatus(
type,
renderEnvVars([variable]),
- 'translate-y-[5px]',
+ 'translate-y-[3px]',
);
const renderError = ({
@@ -211,11 +189,13 @@ export default function AdminAppConfigurationClient({
: renderSubStatus('optional', <>
Vercel Postgres:
{' '}
- {renderLink(
+
+ create store
+
{' '}
and connect to project
>)}
@@ -247,11 +227,13 @@ export default function AdminAppConfigurationClient({
: renderSubStatus('optional', <>
{labelForStorage('vercel-blob')}:
{' '}
- {renderLink(
+
+ create store
+
{' '}
and connect to project
>,
@@ -261,20 +243,25 @@ export default function AdminAppConfigurationClient({
: renderSubStatus('optional', <>
{labelForStorage('cloudflare-r2')}:
{' '}
- {renderLink(
- 'https://github.com/sambecker/exif-photo-blog#cloudflare-r2',
- 'create/configure bucket',
- )}
+
+ create/configure bucket
+
>)}
{hasAwsS3Storage
? renderSubStatus('checked', 'AWS S3: connected')
: renderSubStatus('optional', <>
{labelForStorage('aws-s3')}:
{' '}
- {renderLink(
- 'https://github.com/sambecker/exif-photo-blog#aws-s3',
- 'create/configure bucket',
- )}
+
+ create/configure bucket
+
>)}
@@ -385,11 +372,13 @@ export default function AdminAppConfigurationClient({
{kvError && renderError({
connection: { provider: 'Vercel KV', error: kvError},
})}
- {renderLink(
+
+ Create Vercel KV store
+
{' '}
and connect to project in order to enable rate limiting
diff --git a/src/admin/AdminLink.tsx b/src/admin/AdminLink.tsx
new file mode 100644
index 00000000..51e53f84
--- /dev/null
+++ b/src/admin/AdminLink.tsx
@@ -0,0 +1,38 @@
+import clsx from 'clsx/lite';
+import Link from 'next/link';
+import { ComponentProps } from 'react';
+import { FiExternalLink } from 'react-icons/fi';
+export default function AdminLink({
+ href,
+ className,
+ children,
+ externalIcon,
+ ...props
+}: ComponentProps
& {
+ externalIcon?: boolean
+}) {
+ return (
+ <>
+
+ {children}
+
+ {externalIcon &&
+ <>
+
+
+ >}
+ >
+ );
+}
diff --git a/src/admin/insights/AdminAppInsightsClient.tsx b/src/admin/insights/AdminAppInsightsClient.tsx
index b9b413da..ce7a21a1 100644
--- a/src/admin/insights/AdminAppInsightsClient.tsx
+++ b/src/admin/insights/AdminAppInsightsClient.tsx
@@ -30,26 +30,17 @@ import { PATH_ADMIN_OUTDATED } from '@/app-core/paths';
import { LiaBroomSolid } from 'react-icons/lia';
import { IoMdGrid } from 'react-icons/io';
import { RiSpeedMiniLine } from 'react-icons/ri';
+import AdminLink from '../AdminLink';
const DEBUG_COMMIT_SHA = '4cd29ed';
const DEBUG_COMMIT_MESSAGE = 'Long commit message for debugging purposes';
const DEBUG_BEHIND_BY = 9;
const DEBUG_PHOTOS_COUNT_OUTDATED = 7;
-const renderLink = (text: string, href = '') =>
-
- {text}
- ;
-
const readmeAnchor = (anchor: string) =>
- renderLink(
- `README/${anchor}`,
- `${TEMPLATE_REPO_URL_README}#${anchor}`,
- );
+
+ README/{anchor}
+ ;
const renderLabeledEnvVar = (label: string, envVar: string, value = '1') =>
@@ -112,7 +103,9 @@ export default function AdminAppInsightsClient({
/>}
content="This template is not forked"
expandContent={<>
- {renderLink('Fork original template', TEMPLATE_REPO_URL_FORK)}
+
+ Fork original template
+
{' '}
to receive the latest fixes and features.
{' '}
@@ -144,7 +137,9 @@ export default function AdminAppInsightsClient({
behind
>}
expandContent={<>
- {renderLink('Sync your fork', codeMeta?.urlRepo)}
+
+ Sync your fork
+
{' '}
to receive the latest fixes and features.
>}
@@ -190,7 +185,7 @@ export default function AdminAppInsightsClient({
target="blank"
className="flex items-center gap-2"
>
-
+
{VERCEL_GIT_COMMIT_SHA_SHORT ?? DEBUG_COMMIT_SHA}
@@ -270,18 +265,18 @@ export default function AdminAppInsightsClient({
{' '}
portrait and landscape photos appear more consistent
{' '}
-
+ .
>}
/>}
{(gridFirst || debug) && }
content="Grid homepage"
expandContent={<>
- Now that you have a sufficient amount of photos, you can
+ Now that you have enough photos, consider switching your
{' '}
- enable grid homepage by setting
+ default view to grid by setting
{' '}
-
+ .
>}
/>}
}
diff --git a/src/admin/insights/AdminAppInsightsIcon.tsx b/src/admin/insights/AdminAppInsightsIcon.tsx
index e0fdd86b..dab0effb 100644
--- a/src/admin/insights/AdminAppInsightsIcon.tsx
+++ b/src/admin/insights/AdminAppInsightsIcon.tsx
@@ -2,7 +2,7 @@ import clsx from 'clsx/lite';
import { LuLightbulb } from 'react-icons/lu';
export default function AdminAppInsightsIcon({
- indicator = 'blue',
+ indicator,
}: {
indicator?: 'blue' | 'yellow'
}) {
diff --git a/src/components/ChecklistRow.tsx b/src/components/ChecklistRow.tsx
index dc0954d7..47341bbd 100644
--- a/src/components/ChecklistRow.tsx
+++ b/src/components/ChecklistRow.tsx
@@ -42,7 +42,7 @@ export default function ChecklistRow({
{experimental &&
}
-