feat: read mode

.github/workflows/preview-service.yml

@@ -5,6 +5,8 @@ on:
     branches:
       - main
       - hotfix
+      - preview
+      - read_mode
 
 jobs:
   deploy:

packages/web/package.json

@@ -6,10 +6,12 @@
   },
   "dependencies": {
     "@generouted/react-router": "^1.19.6",
+    "@mozilla/readability": "^0.5.0",
     "@tailwindcss/line-clamp": "^0.4.4",
     "react-router-dom": "^6.24.0"
   },
   "devDependencies": {
+    "@tailwindcss/typography": "^0.5.15",
     "@web-archive/shared": "workspace:*"
   }
 }

packages/web/src/components/iframe-page-content.tsx

@@ -0,0 +1,16 @@
+interface IframePageContentProps {
+  pageHtml: string
+}
+
+function IframePageContent({ pageHtml }: IframePageContentProps) {
+  const pageContentUrl = URL.createObjectURL(new Blob([pageHtml], { type: 'text/html' }))
+  return (
+    <iframe
+      src={pageContentUrl}
+      className="w-full h-full bg-current"
+      sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
+    />
+  )
+}
+
+export default IframePageContent

packages/web/src/components/readability-page-content.tsx

@@ -0,0 +1,30 @@
+import { Readability } from '@mozilla/readability'
+import { useEffect, useRef } from 'react'
+
+interface ReadabilityPageContentProps {
+  pageHtml: string
+}
+
+function ReadabilityPageContent({ pageHtml }: ReadabilityPageContentProps) {
+  const article = new Readability(
+    new DOMParser().parseFromString(pageHtml, 'text/html'),
+  ).parse()
+
+  const articleContainerRef = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    if (articleContainerRef.current) {
+      articleContainerRef.current.innerHTML = article?.content || ''
+    }
+  }, [article?.content])
+
+  return (
+    <main className="flex flex-col gap-4 items-center">
+      <h1 className="text-2xl font-bold">{article?.title}</h1>
+      <h3 className="text-sm text-muted-foreground max-w-prose">{article?.excerpt}</h3>
+      <div className="prose dark:prose-invert" ref={articleContainerRef}></div>
+    </main>
+  )
+}
+
+export default ReadabilityPageContent

packages/web/src/index.tsx

@@ -12,12 +12,25 @@ function Routes() {
   const [view, setView] = useLocalStorageState('view', {
     defaultValue: 'card',
   })
+  const [readMode, setReadMode] = useLocalStorageState('readMode', {
+    defaultValue: false,
+  })
   const {
     data: tagCache,
     runAsync: refreshTagCache,
   } = useRequest(getAllTag)
   return (
-    <AppContext.Provider value={useMemo(() => ({ view: view as 'card' | 'list', setView, tagCache, refreshTagCache }), [view, setView, tagCache, refreshTagCache])}>
+    <AppContext.Provider value={
+      useMemo(() => ({
+        view: view as 'card' | 'list',
+        setView,
+        tagCache,
+        refreshTagCache,
+        readMode: readMode as boolean,
+        setReadMode,
+      }), [view, setView, tagCache, refreshTagCache, readMode, setReadMode])
+}
+    >
       <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
         <RouterProvider router={router} />
       </ThemeProvider>

packages/web/src/pages/(layout)/page.[slug].tsx

@@ -1,9 +1,13 @@
 import { Button } from '@web-archive/shared/components/button'
 import { useRequest } from 'ahooks'
 import { ArrowLeft, Trash } from 'lucide-react'
-import { useEffect } from 'react'
+import { useContext, useEffect } from 'react'
+import IframePageContent from '~/components/iframe-page-content'
+import LoadingWrapper from '~/components/loading-wrapper'
+import ReadabilityPageContent from '~/components/readability-page-content'
 import { deletePage, getPageDetail } from '~/data/page'
 import { useNavigate, useParams } from '~/router'
+import AppContext from '~/store/app'
 
 async function getPageContent(pageId: string | undefined) {
   if (!pageId)
@@ -50,8 +54,7 @@ function ArchivePage() {
 
   const { data: pageContentUrl, loading: pageLoading } = useRequest(async () => {
     const pageHtml = await getPageContent(slug)
-    const objectUrl = URL.createObjectURL(new Blob([pageHtml], { type: 'text/html' }))
-    return objectUrl
+    return pageHtml
   })
   useEffect(() => {
     return () => {
@@ -74,13 +77,22 @@ function ArchivePage() {
     goBack()
   }
 
+  const { readMode, setReadMode } = useContext(AppContext)
+
   return (
     <main className="h-screen flex flex-col">
       <nav className="p-2 flex justify-between items-center">
         <Button variant="ghost" size="sm" onClick={goBack}>
           <ArrowLeft className="w-5 h-5" />
         </Button>
         <div className="flex space-x-2">
+          <Button
+            variant="secondary"
+            size="sm"
+            onClick={() => setReadMode(!readMode)}
+          >
+            {readMode ? 'open Iframe mode' : 'open Read mode'}
+          </Button>
           <Button
             variant="destructive"
             size="sm"
@@ -91,22 +103,11 @@ function ArchivePage() {
         </div>
       </nav>
       <div className="flex-1 p-4">
-        {
-          pageLoading
-            ? (
-              <div className="w-full h-full flex flex-col items-center justify-center">
-                <div className="m-b-xl h-8 w-8 animate-spin border-4 border-t-transparent rounded-full border-primary"></div>
-                <div>Loading...</div>
-              </div>
-              )
-            : (
-              <iframe
-                src={pageContentUrl}
-                className="w-full h-full bg-current"
-                sandbox="allow-scripts allow-same-origin allow-popups allow-forms"
-              />
-              )
-        }
+        <LoadingWrapper loading={pageLoading}>
+          {readMode
+            ? <ReadabilityPageContent pageHtml={pageContentUrl || ''} />
+            : <IframePageContent pageHtml={pageContentUrl || ''} />}
+        </LoadingWrapper>
       </div>
     </main>
   )

packages/web/src/store/app.ts

@@ -6,11 +6,15 @@ const AppContext = createContext<{
   setView: (view: 'card' | 'list') => void
   tagCache?: Array<Tag>
   refreshTagCache: () => Promise<Array<Tag>>
+  readMode: boolean
+  setReadMode: (readMode: boolean) => void
 }>({
       view: 'card',
       setView: () => { },
       tagCache: [],
       refreshTagCache: async () => { return [] },
+      readMode: false,
+      setReadMode: (value: boolean) => { },
     })
 
 export default AppContext

packages/web/tailwind.config.js

@@ -1,4 +1,5 @@
 const { fontFamily } = require('tailwindcss/defaultTheme')
+const typography = require('@tailwindcss/typography')
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
@@ -82,5 +83,5 @@ module.exports = {
       },
     },
   },
-  plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/line-clamp'), typography],
 }