fix(readability): respect origin html charset

Signed-off-by: Innei <i@innei.in>

apps/main/src/lib/readability.ts

@@ -3,16 +3,26 @@ import { name, version } from "@pkg"
 import { parseHTML } from "linkedom"
 import { fetch } from "ofetch"
 
-import { isDev } from "../env"
-
 const userAgents = `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36 ${name}/${version}`
 
 export async function readability(url: string) {
   const documentString = await fetch(url, {
     headers: {
       "User-Agent": userAgents,
+      Accept: "text/html",
     },
-  }).then((res) => res.text())
+  }).then(async (res) => {
+    const contentType = res.headers.get("content-type")
+    // text/html; charset=GBK
+    if (!contentType) return res.text()
+    const charset = contentType.match(/charset=([^;]+)/)?.[1]
+    if (charset) {
+      const blob = await res.blob()
+      const buffer = await blob.arrayBuffer()
+      return new TextDecoder(charset).decode(buffer)
+    }
+    return res.text()
+  })
 
   // FIXME: linkedom does not handle relative addresses in strings. Refer to
   // @see https://github.com/WebReflection/linkedom/issues/153
@@ -31,7 +41,7 @@ export async function readability(url: string) {
   })
 
   const reader = new Readability(document, {
-    debug: isDev,
+    // debug: isDev,
   })
   return reader.parse()
 }

apps/renderer/src/modules/entry-content/index.tsx

@@ -215,7 +215,7 @@ export const EntryContentRender: Component<{
             <article
               data-testid="entry-render"
               onContextMenu={stopPropagation}
-              className="relative m-auto min-w-0 max-w-[550px] @3xl:max-w-[70ch]"
+              className="relative m-auto min-w-0 max-w-[550px] @3xl:max-w-[70ch] @7xl:max-w-[80ch]"
             >
               <EntryTitle entryId={entryId} compact={compact} />
 
@@ -334,7 +334,7 @@ const ReadabilityContent = ({ entryId }: { entryId: string }) => {
   return (
     <div className="grow">
       {result ? (
-        <p className="rounded-xl border p-3 text-sm opacity-80">
+        <p className="mb-4 rounded-xl border p-3 text-sm opacity-80">
           <i className="i-mgc-information-cute-re mr-1 translate-y-[2px]" />
           {t("entry_content.readability_notice")}
         </p>