refactor(watch): allow rich text on watch resources tl;dr (#21)

.eslintrc

@@ -37,6 +37,7 @@
     "unused-imports/no-unused-imports": "error",
     "simple-import-sort/imports": "error",
     "simple-import-sort/exports": "error",
-    "prettier/prettier": 2
+    "prettier/prettier": 2,
+    "tailwindcss/classnames-order": "off"
   }
 }

.prettierignore

@@ -1,4 +1,5 @@
 # Ignore artifacts:
 build
 coverage
-.eslintrc
+.eslintrc
+pnpm-lock.yaml

.prettierrc

@@ -4,6 +4,5 @@
   "trailingComma": "all",
   "bracketSpacing": true,
   "bracketSameLine": false,
-  "plugins": ["prettier-plugin-tailwindcss"],
-  "tailwindFunctions": ["clsx", "tv"]
+  "plugins": ["prettier-plugin-tailwindcss"]
 }

src/app/watch/dto/watchResource.dto.ts

@@ -1,10 +1,12 @@
+import { WatchResource } from '../types'
+
 export const transformWatchResourceToDTO = (resource: any): WatchResource => {
   const { id, properties } = resource
 
   return {
     id,
     title: properties.Name.title?.[0].plain_text,
-    tldr: properties['tl;dr'].rich_text?.[0]?.plain_text,
+    tldr: properties['tl;dr'].rich_text,
     done: properties.Done.checkbox,
     url: properties.URL.url,
     type: properties.Type.select.name,

src/app/watch/types/index.ts

@@ -1,7 +1,9 @@
-type WatchResource = {
+import { RichTextPart } from '@/lib/notion'
+
+export type WatchResource = {
   id: string
   title: string
-  tldr?: string
+  tldr?: RichTextPart[]
   done: boolean
   url: string
   type: string

src/app/watch/watchResource.tsx

@@ -3,6 +3,8 @@ import { tv } from 'tailwind-variants'
 
 import Badge from '@/components/badge/Badge'
 
+import type { WatchResource } from './types'
+
 type Props = {
   resource: WatchResource
   query?: string
@@ -23,6 +25,18 @@ const resourceTldr = tv({
   },
 })
 
+const tldr = tv({
+  variants: {
+    code: {
+      true: 'm-0 whitespace-break-spaces rounded-sm bg-code-light px-1 py-px text-[90%] dark:bg-code',
+    },
+    bold: { true: 'font-bold' },
+    italic: { true: 'italic' },
+    underline: { true: 'underline' },
+    strikethrough: { true: 'line-through' },
+  },
+})
+
 const highlightQuery = (str: string, query: string): ReactNode => {
   if (!query) return str
 
@@ -64,10 +78,37 @@ const ResourceType: FC<{ type: WatchResource['type'] }> = ({ type }) => {
   )
 }
 
+const Tldr: FC<{ parts: WatchResource['tldr']; query?: string }> = ({
+  parts,
+  query,
+}) => {
+  return (
+    <span>
+      {parts?.map((part, index) => {
+        const isLast = index + 1 === parts.length
+        const needsDot = isLast && !part.plain_text.endsWith('.')
+        return (
+          <span
+            key={`${part.plain_text}_${index}`}
+            className={tldr({
+              code: part.annotations.code,
+              bold: part.annotations.bold,
+              italic: part.annotations.italic,
+              underline: part.annotations.underline,
+              strikethrough: part.annotations.strikethrough,
+            })}
+          >
+            {query ? highlightQuery(part.plain_text, query) : part.plain_text}
+            {needsDot && '.'}
+          </span>
+        )
+      })}
+    </span>
+  )
+}
+
 const WatchResource: FC<Props> = ({ resource, query, truncate = true }) => {
   const { title, tldr, source, subSource, url, type } = resource
-  const trimedTldr = tldr?.trim()
-  const tldrWithDot = trimedTldr?.endsWith('.') ? trimedTldr : `${trimedTldr}.`
 
   return (
     <a
@@ -82,7 +123,7 @@ const WatchResource: FC<Props> = ({ resource, query, truncate = true }) => {
         </h5>
         <div className="grid grid-cols-6 gap-4 font-normal text-gray-700 dark:text-gray-400">
           <div className={resourceTldr({ truncate })}>
-            {query ? highlightQuery(tldrWithDot, query) : tldrWithDot}
+            <Tldr parts={tldr} query={query} />
           </div>
         </div>
       </div>

src/lib/notion.ts

@@ -50,3 +50,39 @@ export const searchWatchPage = cache((query: string) => {
     },
   })
 })
+
+type Color =
+  | 'default'
+  | 'gray'
+  | 'brown'
+  | 'orange'
+  | 'yellow'
+  | 'green'
+  | 'blue'
+  | 'purple'
+  | 'pink'
+  | 'red'
+  | 'gray_background'
+  | 'brown_background'
+  | 'orange_background'
+  | 'yellow_background'
+  | 'green_background'
+  | 'blue_background'
+  | 'purple_background'
+  | 'pink_background'
+  | 'red_background'
+
+export type RichTextPart = {
+  type: 'text'
+  text: { content: string; link: null }
+  annotations: {
+    bold: boolean
+    italic: boolean
+    strikethrough: boolean
+    underline: boolean
+    code: boolean
+    color: Color
+  }
+  plain_text: string
+  href: string | null
+}

tailwind.config.ts

@@ -54,6 +54,10 @@ export default {
           DEFAULT: '#153040',
           light: '#ECECEC',
         },
+        code: {
+          DEFAULT: '#6e768166',
+          light: '#e4e4e4',
+        },
       },
       screens: {
         sm: '640px',