Abbreviate Apple to symbol on core pages

src/photo/PhotoLarge.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { pathForPhoto, pathForPhotoShare } from '@/site/paths';
 import PhotoTags from '@/tag/PhotoTags';
 import ShareButton from '@/components/ShareButton';
+import PhotoMakeModel from './PhotoMakeModel';
 
 export default function PhotoLarge({
   photo,
@@ -63,9 +64,7 @@ export default function PhotoLarge({
               {tagsToShow.length > 0 &&
                 <PhotoTags tags={tagsToShow} />}
             </div>
-            <div className="uppercase">
+            <PhotoMakeModel photo={photo} />
-              {photo.make} {photo.model}
-            </div>
           </>)}
           {renderMiniGrid(<>
             <ul className={cc(

src/photo/PhotoMakeModel.tsx

@@ -0,0 +1,22 @@
+import { Photo } from '.';
+import { AiFillApple } from 'react-icons/ai';
+import { cc } from '@/utility/css';
+
+export default function PhotoMakeModel({
+  photo,
+}: {
+  photo: Photo
+}) {
+  return (
+    <div className={cc(
+      'inline-flex items-center self-start',
+      'uppercase',
+    )}>
+      {photo.make === 'Apple'
+        ? <AiFillApple className="translate-y-[-0.5px]" />
+        : photo.make}
+      &nbsp;
+      {photo.model}
+    </div>
+  );
+}