feat: add designer section to show page

This patch adds a designer description to our Prisma schema and uses it
to add the designer section to the show page.

This patch also includes the corresponding updates to my import scripts.

Closes: NC-626
Closes: NC-640

app/routes/shows.$showId/designers.tsx

@@ -0,0 +1,54 @@
+import { useLoaderData } from '@remix-run/react'
+
+import { Avatar } from 'components/avatar'
+import { Empty } from 'components/empty'
+import { ExternalLink } from 'components/external-link'
+
+import { type loader } from './route'
+import { Section } from './section'
+
+export function Designers() {
+  const show = useLoaderData<typeof loader>()
+  const designers = show.collections.flatMap((c) => c.designers)
+  return (
+    <Section
+      header={designers.length === 1 ? 'Designer' : 'Designers'}
+      id='designers'
+    >
+      {designers.length === 0 && (
+        <Empty className='mt-2'>
+          No designers have claimed this show yet. Please check back later.
+        </Empty>
+      )}
+      {designers.length > 0 && (
+        <ul className='mt-2 grid gap-2'>
+          {designers.map((designer) => (
+            <li key={designer.id}>
+              <Avatar src={designer} />
+              <h3 className='flex items-center group gap-1'>
+                {designer.name}
+                {designer.url != null && (
+                  <ExternalLink
+                    className='group-hover:opacity-100 opacity-0 transition-opacity text-gray-400 dark:text-gray-600'
+                    href={designer.url}
+                  />
+                )}
+              </h3>
+              {designer.description != null && (
+                <article
+                  className='prose prose-sm dark:prose-invert'
+                  dangerouslySetInnerHTML={{ __html: designer.description }}
+                />
+              )}
+              {designer.description == null && (
+                <Empty>
+                  No designer description to show yet. Please check back later.
+                </Empty>
+              )}
+            </li>
+          ))}
+        </ul>
+      )}
+    </Section>
+  )
+}

app/routes/shows.$showId/route.tsx

@@ -8,6 +8,7 @@ import { cn } from 'utils/cn'
 
 import { ConsumerReviews } from './consumer-reviews'
 import { CriticReviews } from './critic-reviews'
+import { Designers } from './designers'
 import { RateAndReview, getReview } from './rate-and-review'
 import { ScoresHeader, getScores } from './scores-header'
 import { ShowInfo } from './show-info'
@@ -36,7 +37,10 @@ export async function loader({ request, params }: LoaderArgs) {
         season: true,
         brands: true,
         collections: {
-          include: { links: { include: { brand: true, retailer: true } } },
+          include: {
+            links: { include: { brand: true, retailer: true } },
+            designers: true,
+          },
         },
         reviews: {
           include: { author: true, publication: true },
@@ -89,6 +93,7 @@ function About({ className }: { className: string }) {
     <div className={cn('overflow-auto', className)}>
       <ScoresHeader />
       <WhatToKnow />
+      <Designers />
       <WhereToBuy />
       <RateAndReview />
       <ConsumerReviews />

app/routes/shows.$showId/where-to-buy.tsx

@@ -11,7 +11,7 @@ import { Section } from './section'
 
 export function WhereToBuy() {
   const show = useLoaderData<typeof loader>()
-  const links = show.collections.map((collection) => collection.links).flat()
+  const links = show.collections.flatMap((collection) => collection.links)
   const brands = show.brands.filter((brand) => brand.url)
   return (
     <Section header='Where to buy' id='where-to-buy'>

prisma/migrations/20230724000908_add_user_descriptions/migration.sql

@@ -0,0 +1,2 @@
+-- AlterTable
+ALTER TABLE "User" ADD COLUMN     "description" TEXT;

prisma/schema.prisma

@@ -18,6 +18,9 @@ model User {
   // @todo there may be multiple users with the same name...
   name String @unique
 
+  // The user's description (e.g. a designer biography).
+  description String?
+
   // The user's publicly visible username, as designated by the user.
   username String? @unique
 

scripts/node/save/shows/hermes.ts

@@ -32,6 +32,48 @@ const looks = Array(NUM_LOOKS)
     }
     return look
   })
+const designer: Prisma.UserCreateInput = {
+  name: 'Véronique Nichanian',
+  url: 'https://fr.wikipedia.org/wiki/V%C3%A9ronique_Nichanian',
+  avatar: 'https://static.nicholas.engineering/designers/veronique-nichanian/avatar.jpg',
+  description: `
+<p>Véronique Nichanian was born on May 3, 1954 in Boulogne-Billancourt.</p>
+<p>
+  In 1976, she graduated from the Ecole de la Chambre Syndicale de la Couture
+  Parisienne. She started as
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://en.wikipedia.org/wiki/Nino_Cerruti"
+    >Nino Cerruti</a
+  >'s assistant for men's fashion. At 22, she left to take care of the
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://en.wikipedia.org/wiki/Cerruti_1881"
+    >Cerruti</a
+  >
+  license in Japan. Twelve years later, she was co-responsible for the Cerruti
+  men's collections.
+</p>
+<p>
+  Since 1988, she has been artistic director of menswear at
+  <a
+    target="_blank"
+    rel="noopener noreferrer"
+    href="https://en.wikipedia.org/wiki/Herm%C3%A8s"
+    >Hermès</a
+  >. The former boss of Hermès, Jean-Louis Dumas welcomed her with these words:
+  “Run it like your small business. You have carte blanche”. She is the one who
+  dresses the demanding Jean-Louis Dumas.
+</p>
+<p>
+  From her very first collection, she was awarded the prize for young designer.
+  She has no ambition to open her own house. “It wouldn't change my expression.
+  And I don't have an ego problem.”
+</p>
+`,
+}
 const vogue: Prisma.PublicationCreateInput = {
   name: 'Vogue',
   avatar: 'https://www.vogue.com/verso/static/vogue/assets/us/logo.svg',
@@ -59,11 +101,11 @@ const fashionotography: Prisma.PublicationCreateInput = {
   name: 'Fashionotography',
 }
 // Scores assigned by gpt-3.5-turbo via the ChatGPT and the following prompt:
-// Assign a sentiment score (on a five-star scale) to the following review. Air 
-// on the side of a lower score (very few reviews should ever receive or come 
-// close to receiving a 5/5). Often, if a review is simply neutral or is vague 
-// in its compliments, it should be assigned a 1/5 or 2/5. If a review seems 
-// energetically positive, assign a 3/5. Only if a review is resoundingly 
+// Assign a sentiment score (on a five-star scale) to the following review. Air
+// on the side of a lower score (very few reviews should ever receive or come
+// close to receiving a 5/5). Often, if a review is simply neutral or is vague
+// in its compliments, it should be assigned a 1/5 or 2/5. If a review seems
+// energetically positive, assign a 3/5. Only if a review is resoundingly
 // enthusiastically positive should you assign a 4/5. Never assign a 5/5.
 const reviews: Prisma.ReviewCreateWithoutShowInput[] = [
   {
@@ -534,6 +576,9 @@ const collection: Prisma.CollectionCreateInput = {
       create: season,
     },
   },
+  designers: {
+    connectOrCreate: { where: { name: designer.name }, create: designer },
+  },
   links: { connectOrCreate: { where: { url: link.url }, create: link } },
 }
 export const show: Prisma.ShowCreateInput = {

scripts/node/save/shows/isabel-marant.ts

@@ -32,6 +32,32 @@ const looks = Array(NUM_LOOKS)
     }
     return look
   })
+const designer: Prisma.UserCreateInput = {
+  name: 'Isabel Marant',
+  url: 'https://en.wikipedia.org/wiki/Isabel_Marant',
+  avatar:
+    'https://static.nicholas.engineering/designers/isabel-marant/avatar.jpg',
+  description: `
+<p>
+  Isabel Marant (born 12 April 1967) is a French fashion designer, owner of the
+  eponymous fashion brand.
+</p>
+<p>
+  She won the Award de la Mode (1997), the Whirlpool Award for best female
+  designer (1998), Fashion Designer of the Year at British Glamour's Women of
+  the Year Awards (2012). She was named Contemporary Designer of the Year at the
+  Elle Style Awards in 2014.
+</p>
+<p>
+  Her collaboration with H&M in 2013 was so successful that company's website
+  crashed under the demand and the collection was sold out within 45 minutes.
+</p>
+<p>
+  Celebrities wearing Marant's designs include Alexa Chung, Katie Holmes,
+  Victoria Beckham, Kate Moss, Sienna Miller, Kate Bosworth, and Rachel Weisz.
+</p>
+`,
+}
 const vogue: Prisma.PublicationCreateInput = {
   name: 'Vogue',
   avatar: 'https://www.vogue.com/verso/static/vogue/assets/us/logo.svg',
@@ -203,6 +229,9 @@ const collection: Prisma.CollectionCreateInput = {
       create: season,
     },
   },
+  designers: {
+    connectOrCreate: { where: { name: designer.name }, create: designer },
+  },
 }
 export const show: Prisma.ShowCreateInput = {
   name: 'Isabel Marant Fall-Winter 2023',