feat: rehypeKunH1ToH2

Author: KUN1007

app/api/utils/markdownToHtml.ts

@@ -7,6 +7,20 @@ import remarkRehype from 'remark-rehype'
 import rehypePrism from 'rehype-prism-plus'
 import { unified } from 'unified'
 
+import { visit } from 'unist-util-visit'
+import type { Plugin } from 'unified'
+// import type { Element } from 'hast'
+
+const rehypeKunH1ToH2: Plugin<[], any> = () => {
+  return (tree) => {
+    visit(tree, 'element', (node: any) => {
+      if (node.tagName === 'h1') {
+        node.tagName = 'h2'
+      }
+    })
+  }
+}
+
 export const markdownToHtml = async (markdown: string) => {
   const htmlVFile = await unified()
     .use(remarkParse)
@@ -15,6 +29,8 @@ export const markdownToHtml = async (markdown: string) => {
     .use(remarkFrontmatter)
     .use(remarkGfm)
     .use(rehypePrism, { ignoreMissing: true })
+    .use(rehypeKunH1ToH2)
+    // @ts-expect-error kun love ren 1314~
     .use(rehypeStringify)
     .process(markdown)
 

components/character/detail/Container.tsx

@@ -3,8 +3,8 @@
 import { Chip, Image, Link } from '@heroui/react'
 import { ROLE_LABELS } from '~/constants/character'
 import { getPreferredLanguageText } from '~/utils/getPreferredLanguageText'
-import type { PatchCharacterDetail } from '~/types/api/character'
 import { cn } from '~/utils/cn'
+import type { PatchCharacterDetail } from '~/types/api/character'
 
 interface InfoboxItem {
   key: string

components/patch/introduction/section/Person.tsx

@@ -1,10 +1,8 @@
 'use client'
 
-import { Image } from '@heroui/react'
-import NextLink from 'next/link'
 import { ROLE_ORDER_PERSON, roleLabel } from '~/constants/character'
+import { PersonCard } from '~/components/person/Card'
 import type { PatchDetail } from '~/types/api/patch'
-import { getPreferredLanguageText } from '~/utils/getPreferredLanguageText'
 
 export const PersonSection = ({ detail }: { detail: PatchDetail }) => {
   if (!detail.person.length) return null
@@ -42,34 +40,7 @@ export const PersonSection = ({ detail }: { detail: PatchDetail }) => {
 
           <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3">
             {(buckets.get(role) || []).map((p) => (
-              <div key={`${role}-${p.id}`} className="flex gap-3">
-                <div className="size-12 sm:size-16 rounded-xl bg-default-100 overflow-hidden flex items-center justify-center">
-                  <Image
-                    src={p.image || '/person.avif'}
-                    alt={getPreferredLanguageText(p.name)}
-                    className="w-full h-full object-cover"
-                  />
-                </div>
-
-                <div>
-                  <h3 className="font-semibold truncate">
-                    <NextLink
-                      href={`/person/${p.id}`}
-                      className="hover:underline"
-                    >
-                      {getPreferredLanguageText(p.name)}
-                    </NextLink>
-                  </h3>
-
-                  <div className="flex flex-wrap gap-2">
-                    {p.roles.slice(0, 3).map((r) => (
-                      <span className="text-sm text-default-500" key={r}>
-                        {roleLabel(r)}
-                      </span>
-                    ))}
-                  </div>
-                </div>
-              </div>
+              <PersonCard key={p.id} person={p} />
             ))}
           </div>
         </div>

components/person/detail/Container.tsx

@@ -2,6 +2,7 @@
 
 import { Chip, Image, Link } from '@heroui/react'
 import { getPreferredLanguageText } from '~/utils/getPreferredLanguageText'
+import { ROLE_LABELS } from '~/constants/character'
 import type { PatchPersonDetail } from '~/types/api/person'
 
 export const PersonDetailContainer = ({
@@ -17,18 +18,20 @@ export const PersonDetailContainer = ({
       <h1 className="text-2xl font-bold mb-4">{displayName}</h1>
       <div className="grid grid-cols-1 md:grid-cols-6 gap-6">
         <aside className="md:col-span-1 space-y-4">
-          <div className="shrink-0 size-48 rounded-xl bg-default-100 overflow-hidden flex items-center justify-center">
-            <Image
-              src={person.image || '/person.avif'}
-              alt={getPreferredLanguageText(person.name)}
-              className="w-full h-full object-cover"
-            />
-          </div>
+          {person.image && (
+            <div className="shrink-0 size-48 rounded-xl bg-default-100 overflow-hidden flex items-center justify-center">
+              <Image
+                src={person.image}
+                alt={getPreferredLanguageText(person.name)}
+                className="w-full h-full object-cover"
+              />
+            </div>
+          )}
 
           <div className="flex flex-wrap gap-2">
             {person.roles.map((r) => (
               <Chip key={r} size="sm" variant="flat">
-                {r}
+                {ROLE_LABELS[r]}
               </Chip>
             ))}
           </div>

styles/prose.css

@@ -1,5 +1,10 @@
 .kun-prose {
-  @apply text-default-800 leading-7 whitespace-pre;
+  @apply text-default-800 leading-7 whitespace-pre-line;
+}
+
+.kun-prose p {
+  @apply py-1;
+  overflow-wrap: break-word;
 }
 
 /* Links */