feat(show): use show description as meta description

This patch updates the show page description to use the show description
if it exists, and revert back to the Vogue inspired description if it
does not.

This patch also adds some XSS support that may be somewhat premature,
but was easy enough to add that it felt it wouldn't hurt.

Closes: NC-666

app/routes/shows.$seasonYear.$seasonName.($sex).$brandSlug/route.tsx

@@ -9,6 +9,7 @@ import { type SitemapFunction } from 'remix-sitemap'
 import { prisma } from 'db.server'
 import { log } from 'log.server'
 import { type Handle } from 'root'
+import { sanitize } from 'sanitize.server'
 import { invert } from 'utils'
 import { cn } from 'utils/cn'
 import { getScores } from 'utils/scores.server'
@@ -40,7 +41,9 @@ export const meta: V2_MetaFunction<typeof loader> = ({ data }) => {
     { title: `${data.name} Collection | Nicholas Chiang` },
     {
       name: 'description',
-      content: `${data.name} collection, runway looks, beauty, models, and reviews.`,
+      content:
+        data.description ? sanitize(data.description, { allowedTags: [] }) :
+        `${data.name} collection, runway looks, beauty, models, and reviews.`,
     },
     { name: 'keywords', content: keywords },
     { name: 'news_keywords', content: keywords },
@@ -108,10 +111,24 @@ export async function loader({ request, params }: LoaderArgs) {
   })
   if (show == null) throw miss
   log.debug('got show %o', show)
+
+  // Sanitize HTML (perhaps this should be in a separate helper function).
+  show.reviews.forEach((review) => {
+    review.content = sanitize(review.content)
+  })
+  show.description = sanitize(show.description)
+  show.collections.forEach((collection) => {
+    collection.designers.forEach((designer) => {
+      designer.description = sanitize(designer.description)
+    })
+  })
+
+  // Derive the show's scores and get the current user's review of it.
   const [scores, review] = await Promise.all([
     getScores(show.id),
     getReview(show.id, request),
   ])
+
   return { ...show, scores, review }
 }
 

app/sanitize.server.ts

@@ -0,0 +1,8 @@
+import sanitizeHtml from 'sanitize-html'
+
+export function sanitize(html: string, options?: sanitizeHtml.IOptions): string
+export function sanitize(html: null, options?: sanitizeHtml.IOptions): null
+export function sanitize(html: string | null, options?: sanitizeHtml.IOptions): string | null
+export function sanitize(html: string | null, options?: sanitizeHtml.IOptions) {
+  return html ? sanitizeHtml(html, options) : html
+}

package.json

@@ -86,6 +86,7 @@
     "react-hotkeys-hook": "^4.4.1",
     "remix-sitemap": "^2.2.0",
     "rfdc": "^1.3.0",
+    "sanitize-html": "^2.11.0",
     "schema-dts": "^1.1.2",
     "sharp": "^0.32.4",
     "tailwind-merge": "^1.14.0",
@@ -125,6 +126,7 @@
     "@types/progress": "^2.0.5",
     "@types/react": "^18.2.16",
     "@types/react-dom": "^18.2.7",
+    "@types/sanitize-html": "^2.9.0",
     "@types/sharp": "^0.31.1",
     "@types/user-agents": "^1.0.2",
     "@typescript-eslint/eslint-plugin": "^5.62.0",