feat: read indicator

Signed-off-by: Innei <[email protected]>

Author: Innei

src/app.config.json

@@ -0,0 +1,132 @@
+{
+  "// example app config": "",
+  "footer": {
+    "otherInfo": {
+      "date": "2020-{{now}}"
+    },
+    "linkSections": [
+      {
+        "name": "关于",
+        "links": [
+          {
+            "name": "关于本站",
+            "href": "/about-site"
+          },
+          {
+            "name": "关于我",
+            "href": "/about-me"
+          },
+          {
+            "name": "关于此项目",
+            "href": "https://github.com/innei/Shiro",
+            "external": true
+          }
+        ]
+      },
+      {
+        "name": "更多",
+        "links": [
+          {
+            "name": "时间线",
+            "href": "/timeline"
+          },
+          {
+            "name": "友链",
+            "href": "/friends"
+          },
+          {
+            "name": "监控",
+            "href": "https://status.shizuri.net/status/main",
+            "external": true
+          }
+        ]
+      },
+      {
+        "name": "联系",
+        "links": [
+          {
+            "name": "写留言",
+            "href": "/message"
+          },
+          {
+            "name": "发邮件",
+            "href": "mailto:[email protected]",
+            "external": true
+          },
+          {
+            "name": "GitHub",
+            "href": "https://github.com/innei",
+            "external": true
+          }
+        ]
+      }
+    ]
+  },
+  "config": {
+    "bg": [
+      "https://github.com/Innei/static/blob/master/images/F0q8mwwaIAEtird.jpeg?raw=true",
+      "https://github.com/Innei/static/blob/master/images/IMG_2111.jpeg.webp.jpg?raw=true"
+    ],
+    "custom": {
+      "css": [],
+      "styles": [],
+      "js": [],
+      "scripts": []
+    },
+    "site": {
+      "favicon": "/innei.svg"
+    },
+    "hero": {
+      "title": {
+        "template": [
+          {
+            "type": "h1",
+            "text": "Hi, I'm ",
+            "class": "font-light text-4xl"
+          },
+          {
+            "type": "h1",
+            "text": "Innei",
+            "class": "font-medium mx-2 text-4xl"
+          },
+          {
+            "type": "h1",
+            "text": "👋。",
+            "class": "font-light text-4xl"
+          },
+          {
+            "type": "br"
+          },
+          {
+            "type": "h1",
+            "text": "A NodeJS Full Stack ",
+            "class": "font-light text-4xl"
+          },
+          {
+            "type": "code",
+            "text": "<Developer />",
+            "class": "font-medium mx-2 text-3xl rounded p-1 bg-gray-200 dark:bg-gray-800/0 hover:dark:bg-gray-800/100 bg-opacity-0 hover:bg-opacity-100 transition-background duration-200"
+          },
+          {
+            "type": "span",
+            "class": "inline-block w-[1px] h-8 -bottom-2 relative bg-gray-800/80 dark:bg-gray-200/80 opacity-0 group-hover:opacity-100 transition-opacity duration-200 group-hover:animation-blink"
+          }
+        ]
+      },
+      "description": "An independent developer coding with love."
+    },
+    "module": {
+      "donate": {
+        "enable": true,
+        "link": "https://afdian.net/@Innei",
+        "qrcode": [
+          "https://cdn.jsdelivr.net/gh/Innei/img-bed@master/20191211132347.png",
+          "https://cdn.innei.ren/bed/2023/0424213144.png"
+        ]
+      },
+      "bilibili": {
+        "liveId": 1434499
+      }
+    }
+  }
+}

src/app.config.ts

@@ -76,14 +76,3 @@ export interface FooterConfig {
   linkSections: LinkSection[]
   otherInfo: OtherInfo
 }
-
-// export const footerConfig = {
-//   linkSections,
-//   otherInfo: {
-//     date: '2020-{{now}}',
-//     // icp: {
-//     //   text: '浙 ICP 备 20028356 号',
-//     //   link: 'http://www.beian.miit.gov.cn/',
-//     // }
-//   } as OtherInfo,
-// }

src/components/layout/footer/config.ts

@@ -1,7 +1,7 @@
 'use client'
 
 import { useDeferredValue } from 'react'
-import clsx from 'clsx'
+import { useInView } from 'react-intersection-observer'
 import type { ElementType } from 'react'
 
 import { useIsMobile } from '~/atoms'
@@ -17,25 +17,30 @@ export const ReadIndicator: Component<{
 }> = ({ className, as }) => {
   const readPercent = useDebounceValue(useReadPercent(), 200)
   const As = as || 'span'
+
+  const { ref, inView } = useInView()
+
   return (
-    <As className={clsxm('text-gray-800 dark:text-neutral-300', className)}>
+    <As
+      className={clsxm('text-gray-800 dark:text-neutral-300', className)}
+      ref={ref}
+    >
       <NumberSmoothTransition>{readPercent}</NumberSmoothTransition>%
+      {!inView && <ReadIndicatorVertical className="right-[10px]" />}
     </As>
   )
 }
 
-export const ReadIndicatorForMobile: Component<{}> = () => {
+const ReadIndicatorVertical: Component = ({ className }) => {
   const readPercent = useDeferredValue(useReadPercent())
   const isEOA = useIsEOWrappedElement()
-  const isMobile = useIsMobile()
-  if (!isMobile) return null
-
   return (
     <RootPortal>
       <div
-        className={clsx(
+        className={clsxm(
           'fixed bottom-0 right-0 top-0 z-[99] w-[1px] transition-opacity duration-200 ease-in-out',
           isEOA ? 'opacity-0' : 'opacity-100',
+          className,
         )}
       >
         <div
@@ -48,3 +53,9 @@ export const ReadIndicatorForMobile: Component<{}> = () => {
     </RootPortal>
   )
 }
+export const ReadIndicatorForMobile: Component<{}> = () => {
+  const isMobile = useIsMobile()
+  if (!isMobile) return null
+
+  return <ReadIndicatorVertical />
+}