Finalize initial recipe og content draft

src/photo/PhotoHeader.tsx

@@ -151,6 +151,7 @@ export default function PhotoHeader({
                     tag={tag}
                     camera={camera}
                     simulation={simulation}
+                    recipe={recipe}
                     focal={focal}
                     count={count}
                     dateRange={dateRange}

src/photo/form/index.ts

@@ -121,6 +121,8 @@ const FORM_METADATA = (
     label: 'recipe data',
     spellCheck: false,
     capitalize: false,
+    shouldHide: ({ make }) => make !== MAKE_FUJIFILM,
+    shouldNotOverwriteWithNullDataOnSync: true,
     validate: value => {
       let validationMessage = undefined;
       if (value) {
@@ -132,8 +134,6 @@ const FORM_METADATA = (
       }
       return validationMessage;
     },
-    shouldHide: ({ make }) => make !== MAKE_FUJIFILM,
-    shouldNotOverwriteWithNullDataOnSync: true,
   },
   focalLength: { label: 'focal length' },
   focalLengthIn35MmFormat: { label: 'focal length 35mm-equivalent' },

src/recipe/RecipeOGTile.tsx

@@ -0,0 +1,42 @@
+import { Photo, PhotoDateRange } from '@/photo';
+import { absolutePathForRecipeImage, pathForRecipe } from '@/app/paths';
+import OGTile from '@/components/OGTile';
+import { descriptionForRecipePhotos, titleForRecipe } from '.';
+
+export type OGLoadingState = 'unloaded' | 'loading' | 'loaded' | 'failed';
+
+export default function RecipeOGTile({
+  recipe,
+  photos,
+  loadingState: loadingStateExternal,
+  riseOnHover,
+  onLoad,
+  onFail,
+  retryTime,
+  count,
+  dateRange,
+}: {
+  recipe: string
+  photos: Photo[]
+  loadingState?: OGLoadingState
+  onLoad?: () => void
+  onFail?: () => void
+  riseOnHover?: boolean
+  retryTime?: number
+  count?: number
+  dateRange?: PhotoDateRange
+}) {
+  return (
+    <OGTile {...{
+      title: titleForRecipe(recipe, photos, count),
+      description: descriptionForRecipePhotos(photos, true, count, dateRange),
+      path: pathForRecipe(recipe),
+      pathImageAbsolute: absolutePathForRecipeImage(recipe),
+      loadingState: loadingStateExternal,
+      onLoad,
+      onFail,
+      riseOnHover,
+      retryTime,
+    }}/>
+  );
+};

src/recipe/RecipeShareModal.tsx

@@ -0,0 +1,23 @@
+import { absolutePathForRecipe } from '@/app/paths';
+import { PhotoSetAttributes } from '../photo';
+import ShareModal from '@/share/ShareModal';
+import { shareTextForRecipe } from '.';
+import RecipeOGTile from './RecipeOGTile';
+
+export default function RecipeShareModal({
+  recipe,
+  photos,
+  count,
+  dateRange,
+}: {
+  recipe: string
+} & PhotoSetAttributes) {
+  return (
+    <ShareModal
+      pathShare={absolutePathForRecipe(recipe)}
+      socialText={shareTextForRecipe(recipe)}
+    >
+      <RecipeOGTile {...{ recipe, photos, count, dateRange }} />
+    </ShareModal>
+  );
+};

src/recipe/index.ts

@@ -31,6 +31,9 @@ export const titleForRecipe = (
   photoQuantityText(explicitCount ?? photos.length),
 ].join(' ');
 
+export const shareTextForRecipe = (recipe: string) =>
+  `${formatRecipe(recipe)} recipe photos`;
+
 export const descriptionForRecipePhotos = (
   photos: Photo[] = [],
   dateBased?: boolean,

src/share/ShareModals.tsx

@@ -6,6 +6,7 @@ import CameraShareModal from '@/camera/CameraShareModal';
 import FilmSimulationShareModal from '@/simulation/FilmSimulationShareModal';
 import FocalLengthShareModal from '@/focal/FocalLengthShareModal';
 import { useAppState } from '@/state/AppState';
+import RecipeShareModal from '@/recipe/RecipeShareModal';
 
 export default function ShareModals() {
   const { shareModalProps = {} } = useAppState();
@@ -18,6 +19,7 @@ export default function ShareModals() {
     tag,
     camera,
     simulation,
+    recipe,
     focal,
   } = shareModalProps;
 
@@ -33,6 +35,8 @@ export default function ShareModals() {
       return <FilmSimulationShareModal {...{simulation, ...attributes}} />;
     } else if (focal !== undefined) {
       return <FocalLengthShareModal {...{focal, ...attributes}} />;
+    } else if (recipe) {
+      return <RecipeShareModal {...{recipe, ...attributes}} />;
     }
   }
 }