diff --git a/src/photo/PhotoSetHeader.tsx b/src/photo/PhotoSetHeader.tsx
index f034a867..5a72f971 100644
--- a/src/photo/PhotoSetHeader.tsx
+++ b/src/photo/PhotoSetHeader.tsx
@@ -3,6 +3,7 @@ import { Photo, PhotoDateRange, dateRangeForPhotos } from '.';
import ShareButton from '@/components/ShareButton';
import AnimateItems from '@/components/AnimateItems';
import { ReactNode } from 'react';
+import { HIGH_DENSITY_GRID } from '@/site/config';
export default function PhotoSetHeader({
entity,
@@ -37,14 +38,23 @@ export default function PhotoSetHeader({
items={[
- {entity}
+
+ {entity}
+
{selectedPhotoIndex !== undefined
// eslint-disable-next-line max-len
diff --git a/src/photo/index.ts b/src/photo/index.ts
index dbf4e160..7a89f0dc 100644
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@@ -194,22 +194,28 @@ const sortPhotosByDate = (
: a.takenAt.getTime() - b.takenAt.getTime());
export const dateRangeForPhotos = (
- photos: Photo[],
+ photos: Photo[] = [],
explicitDateRange?: PhotoDateRange,
) => {
- const photosSorted = sortPhotosByDate(photos);
+ let start = '';
+ let end = '';
+ let description = '';
+
+ if (explicitDateRange || photos.length > 0) {
+ const photosSorted = sortPhotosByDate(photos);
+ start = formatDateFromPostgresString(
+ explicitDateRange?.start ?? photosSorted[photos.length - 1].takenAtNaive,
+ true,
+ );
+ end = formatDateFromPostgresString(
+ explicitDateRange?.end ?? photosSorted[0].takenAtNaive,
+ true
+ );
+ description = start === end
+ ? start
+ : `${start}–${end}`;
+ }
- const start = formatDateFromPostgresString(
- explicitDateRange?.start ?? photosSorted[photos.length - 1].takenAtNaive,
- true,
- );
- const end = formatDateFromPostgresString(
- explicitDateRange?.end ?? photosSorted[0].takenAtNaive,
- true
- );
- const description = start === end
- ? start
- : `${start}–${end}`;
return { start, end, description };
};
diff --git a/src/services/vercel-postgres.ts b/src/services/vercel-postgres.ts
index 8c91b27b..80fd6f81 100644
--- a/src/services/vercel-postgres.ts
+++ b/src/services/vercel-postgres.ts
@@ -288,6 +288,12 @@ const sqlGetPhotosFilmSimulationCount = async (
hidden IS NOT TRUE
`.then(({ rows }) => parseInt(rows[0].count, 10));
+const sqlGetPhotosDateRange = async () => sql`
+ SELECT MIN(taken_at_naive) as start, MAX(taken_at_naive) as end
+ FROM photos
+ WHERE hidden IS NOT TRUE
+`.then(({ rows }) => rows[0] as PhotoDateRange);
+
const sqlGetPhotosTagDateRange = async (tag: string) => sql`
SELECT MIN(taken_at_naive) as start, MAX(taken_at_naive) as end
FROM photos
@@ -442,6 +448,8 @@ export const getPhoto = async (id: string): Promise => {
.then(({ rows }) => rows.map(parsePhotoFromDb))
.then(photos => photos.length > 0 ? photos[0] : undefined);
};
+export const getPhotosDateRange = () =>
+ safelyQueryPhotos(sqlGetPhotosDateRange);
export const getPhotosCount = () =>
safelyQueryPhotos(sqlGetPhotosCount);
export const getPhotosCountIncludingHidden = () =>
diff --git a/src/simulation/PhotoFilmSimulation.tsx b/src/simulation/PhotoFilmSimulation.tsx
index 1531052f..08bb8a02 100644
--- a/src/simulation/PhotoFilmSimulation.tsx
+++ b/src/simulation/PhotoFilmSimulation.tsx
@@ -1,58 +1,35 @@
-import { cc } from '@/utility/css';
import { labelForFilmSimulation } from '@/vendors/fujifilm';
import PhotoFilmSimulationIcon from './PhotoFilmSimulationIcon';
-import Badge from '@/components/Badge';
-import Link from 'next/link';
import { pathForFilmSimulation } from '@/site/paths';
import { FilmSimulation } from '.';
+import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
export default function PhotoFilmSimulation({
simulation,
type = 'icon-last',
badged = true,
+ dim,
countOnHover,
}: {
simulation: FilmSimulation
- type?: 'icon-last' | 'icon-first' | 'icon-only' | 'text-only'
- badged?: boolean
countOnHover?: number
-}) {
+} & EntityLinkExternalProps) {
const { small, medium, large } = labelForFilmSimulation(simulation);
- const renderContent = () => <>
-
- {small}
-
-
- {medium}
-
- ;
-
return (
-
-
- {type !== 'icon-only' && <>
- {badged
- ?
- {renderContent()}
-
- : {renderContent()}}
- }
- {type !== 'text-only' &&
-
- }
-
- {countOnHover !== undefined &&
-
- {countOnHover}
- }
-
+ }
+ title={`Film Simulation: ${large}`}
+ type={type}
+ badged={badged}
+ dim={dim}
+ hoverEntity={countOnHover}
+ />
);
}
diff --git a/src/site/config.ts b/src/site/config.ts
index 400013a4..4da17d0e 100644
--- a/src/site/config.ts
+++ b/src/site/config.ts
@@ -59,6 +59,8 @@ export const GRID_ASPECT_RATIO = process.env.NEXT_PUBLIC_GRID_ASPECT_RATIO
export const OG_TEXT_BOTTOM_ALIGNMENT =
(process.env.NEXT_PUBLIC_OG_TEXT_ALIGNMENT ?? '').toUpperCase() === 'BOTTOM';
+export const HIGH_DENSITY_GRID = GRID_ASPECT_RATIO <= 1;
+
export const CONFIG_CHECKLIST_STATUS = {
hasPostgres: (process.env.POSTGRES_HOST ?? '').length > 0,
hasBlob: HAS_VERCEL_BLOB || HAS_AWS_S3_STORAGE,
diff --git a/src/tag/PhotoTag.tsx b/src/tag/PhotoTag.tsx
index b86eacd6..800833fc 100644
--- a/src/tag/PhotoTag.tsx
+++ b/src/tag/PhotoTag.tsx
@@ -1,44 +1,30 @@
-import Link from 'next/link';
import { pathForTag } from '@/site/paths';
import { FaTag } from 'react-icons/fa';
-import { cc } from '@/utility/css';
import { formatTag } from '.';
+import EntityLink, { EntityLinkExternalProps } from '@/components/EntityLink';
export default function PhotoTag({
tag,
- showIcon = true,
+ type,
+ badged,
+ dim,
countOnHover,
}: {
tag: string
- showIcon?: boolean
countOnHover?: number
-}) {
+} & EntityLinkExternalProps) {
return (
-
-
- {showIcon &&
- }
-
- {formatTag(tag)}
-
-
- {countOnHover !== undefined &&
-
- {' '}
- {countOnHover}
- }
-
+ }
+ type={type}
+ badged={badged}
+ dim={dim}
+ hoverEntity={countOnHover}
+ />
);
}