feat: add analyze

Signed-off-by: Innei <[email protected]>
Innei · Jul 6, 2023 · aa1891a · aa1891a · vercel · Jul 6, 2023
1 parent f37a427
commit aa1891a
Show file tree

Hide file tree

Showing 8 changed files with 148 additions and 55 deletions.
diff --git a/src/app/analyze.tsx b/src/app/analyze.tsx
@@ -0,0 +1,49 @@
+'use client'
+
+import { useRef } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+
+import { apiClient } from '~/lib/request'
+
+export const Analyze = () => {
+  const onceRef = useRef(false)
+  useServerInsertedHTML(() => {
+    if (onceRef.current) {
+      return
+    }
+
+    onceRef.current = true
+    const apiBase = apiClient.proxy.fn.utils.analyze.toString(true)
+
+    return (
+      <script
+        dangerouslySetInnerHTML={{
+          __html:
+            `var apiBase = "${apiBase}";
+        ${function run() {
+          document.addEventListener('click', async (e) => {
+            const $ = e.target as HTMLElement
+            const event = $.dataset.event
+
+            if (event) {
+              await fetch(apiBase, {
+                method: 'POST',
+                headers: {
+                  'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                  key: 'mx',
+                  event,
+                  type: 'inc',
+                }),
+              })
+            }
+          })
+        }.toString()}\n` + `run();`,
+        }}
+      />
+    )
+  })
+
+  return null
+}
diff --git a/src/app/global-error.tsx b/src/app/global-error.tsx
@@ -8,9 +8,9 @@ import { captureException } from '@sentry/nextjs'
 import { NormalContainer } from '~/components/layout/container/Normal'
 import { StyledButton } from '~/components/ui/button'
 
-export default function Error({ error, reset }: any) {
+export default function Error({ error }: any) {
   useEffect(() => {
-    console.log(error, reset)
+    console.log(error)
     captureException(error)
   }, [error])
   return (
@@ -20,9 +20,9 @@ export default function Error({ error, reset }: any) {
       </head>
       <body>
         <NormalContainer>
-          <div>Clerk 又挂啦</div>
+          <p>{error?.message || '未知错误'}</p>
           <LazyMotion features={domAnimation}>
-            <StyledButton onClick={reset}>重试</StyledButton>
+            <StyledButton onClick={location.reload}>重试</StyledButton>
           </LazyMotion>
         </NormalContainer>
       </body>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -6,6 +6,7 @@ import type { AggregateRoot } from '@mx-space/api-client'
 
 import { ClerkProvider } from '@clerk/nextjs'
 
+import PKG from '~/../package.json'
 import { appConfig } from '~/app.config'
 import { Root } from '~/components/layout/root/Root'
 import { TocAutoScroll } from '~/components/widgets/toc/TocAutoScroll'
@@ -17,8 +18,10 @@ import { AggregationProvider } from '~/providers/root/aggregation-data-provider'
 import { queries } from '~/queries/definition'
 
 import { Providers } from '../providers/root'
+import { Analyze } from './analyze'
 import { init } from './init'
 
+const { version } = PKG
 init()
 
 let aggregationData: AggregateRoot | null = null
@@ -103,6 +106,36 @@ export default async function RootLayout(props: Props) {
     // <ClerkProvider localization={ClerkZhCN}>
     <ClerkProvider>
       <html lang="zh-CN" className="noise" suppressHydrationWarning>
+        <head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `var version = "${version}";
+              ${function info() {
+                console.log(
+                  `%c Mix Space %c https://github.com/mx-space `,
+                  'color: #fff; margin: 1em 0; padding: 5px 0; background: #2980b9;',
+                  'margin: 1em 0; padding: 5px 0; background: #efefef;',
+                )
+                console.log(
+                  `%c Shiro ${version} %c https://innei.ren `,
+                  'color: #fff; margin: 1em 0; padding: 5px 0; background: #39C5BB;',
+                  'margin: 1em 0; padding: 5px 0; background: #efefef;',
+                )
+
+                const motto = `
+This Personal Space Powered By Mix Space.
+Written by TypeScript, Coding with Love.
+--------
+Stay hungry. Stay foolish. --Steve Jobs
+`
+
+                if (document.firstChild?.nodeType !== Node.COMMENT_NODE) {
+                  document.prepend(document.createComment(motto))
+                }
+              }.toString()}; info()`,
+            }}
+          />
+        </head>
         <body
           className={`${sansFont.variable} ${serifFont.variable} m-0 h-full p-0 font-sans`}
         >
@@ -112,6 +145,7 @@ export default async function RootLayout(props: Props) {
             <Root>{children}</Root>
 
             <TocAutoScroll />
+            <Analyze />
           </Providers>
           <ToastContainer />
         </body>

diff --git a/src/components/layout/header/internal/HeaderContent.tsx b/src/components/layout/header/internal/HeaderContent.tsx
@@ -14,14 +14,10 @@ import type { IHeaderMenu } from '../config'
 
 import { RootPortal } from '~/components/ui/portal'
 import { clsxm } from '~/lib/helper'
-import { usePageScrollDirectionSelector } from '~/providers/root/page-scroll-info-provider'
+import { useScollIsUpAndPageIsOver } from '~/providers/root/page-scroll-info-provider'
 
 import { useHeaderConfig } from './HeaderDataConfigureProvider'
-import {
-  useHeaderBgOpacity,
-  useHeaderHasMetaInfo,
-  useMenuOpacity,
-} from './hooks'
+import { useHeaderHasMetaInfo, useMenuOpacity } from './hooks'
 import { MenuPopover } from './MenuPopover'
 
 export const HeaderContent = () => {
@@ -36,15 +32,9 @@ export const HeaderContent = () => {
 }
 
 const AccessibleMenu: Component = () => {
-  const headerOpacity = useHeaderBgOpacity()
   const hasMetaInfo = useHeaderHasMetaInfo()
 
-  const showShow = usePageScrollDirectionSelector(
-    (d) => {
-      return d === 'up' && headerOpacity > 0.8 && hasMetaInfo
-    },
-    [headerOpacity, hasMetaInfo],
-  )
+  const showShow = useScollIsUpAndPageIsOver(600) && hasMetaInfo
   return (
     <RootPortal>
       <AnimatePresence>

diff --git a/src/components/ui/link-card/LinkCard.tsx b/src/components/ui/link-card/LinkCard.tsx
@@ -51,7 +51,7 @@ const LinkCardImpl: FC<LinkCardProps> = (props) => {
   const peek = usePeek()
   const handleCanPeek = useCallback(
     async (e: SyntheticEvent<any>) => {
-      const success = await peek(fullUrl)
+      const success = peek(fullUrl)
       if (success) preventDefault(e)
     },
     [fullUrl],

diff --git a/src/components/widgets/peek/PeekLink.tsx b/src/components/widgets/peek/PeekLink.tsx
@@ -13,45 +13,49 @@ export const usePeek = () => {
   const isMobile = useIsMobile()
   const { present } = useModalStack()
   return useCallback(
-    async (href: string) => {
+    (href: string) => {
       if (isMobile) return
 
       if (href.startsWith('/notes/')) {
-        const NotePreview = await import('./NotePreview').then(
-          (module) => module.NotePreview,
-        )
-        present({
-          clickOutsideToDismiss: true,
-          title: 'Preview',
-          modalClassName: 'flex justify-center',
-          modalContainerClassName: 'flex justify-center',
-          CustomModalComponent: () => (
-            <PeekModal to={href}>
-              <NotePreview noteId={parseInt(href.split('/').pop()!)} />
-            </PeekModal>
-          ),
-          content: () => null,
+        requestAnimationFrame(async () => {
+          const NotePreview = await import('./NotePreview').then(
+            (module) => module.NotePreview,
+          )
+          present({
+            clickOutsideToDismiss: true,
+            title: 'Preview',
+            modalClassName: 'flex justify-center',
+            modalContainerClassName: 'flex justify-center',
+            CustomModalComponent: () => (
+              <PeekModal to={href}>
+                <NotePreview noteId={parseInt(href.split('/').pop()!)} />
+              </PeekModal>
+            ),
+            content: () => null,
+          })
         })
 
         return true
       } else if (href.startsWith('/posts/')) {
-        const PostPreview = await import('./PostPreview').then(
-          (module) => module.PostPreview,
-        )
-        const splitpath = href.split('/')
-        const slug = splitpath.pop()!
-        const category = splitpath.pop()!
-        present({
-          clickOutsideToDismiss: true,
-          title: 'Preview',
-          modalClassName: 'flex justify-center',
-          modalContainerClassName: 'flex justify-center',
-          CustomModalComponent: () => (
-            <PeekModal to={href}>
-              <PostPreview category={category} slug={slug} />
-            </PeekModal>
-          ),
-          content: () => null,
+        requestAnimationFrame(async () => {
+          const PostPreview = await import('./PostPreview').then(
+            (module) => module.PostPreview,
+          )
+          const splitpath = href.split('/')
+          const slug = splitpath.pop()!
+          const category = splitpath.pop()!
+          present({
+            clickOutsideToDismiss: true,
+            title: 'Preview',
+            modalClassName: 'flex justify-center',
+            modalContainerClassName: 'flex justify-center',
+            CustomModalComponent: () => (
+              <PeekModal to={href}>
+                <PostPreview category={category} slug={slug} />
+              </PeekModal>
+            ),
+            content: () => null,
+          })
         })
         return true
       }
@@ -75,14 +79,14 @@ export const PeekLink: FC<
 
   const handlePeek = useCallback(
     async (e: SyntheticEvent) => {
-      const success = await peek(href)
+      const success = peek(href)
       if (success) preventDefault(e)
     },
     [href, peek],
   )
 
   return (
-    <Link href={href} onClick={handlePeek} {...rest}>
+    <Link href={href} onClick={handlePeek} data-event="peek" {...rest}>
       {children}
     </Link>
   )

diff --git a/src/components/widgets/post/PostRelated.tsx b/src/components/widgets/post/PostRelated.tsx
@@ -22,10 +22,11 @@ export const PostRelated = () => {
       </h3>
       <ul className="list-inside list-disc">
         {related.map((post) => {
+          const href = `/posts/${post.category.slug}/${post.slug}`
           return (
-            <li key={post.id}>
+            <li key={href}>
               <PeekLink
-                href={`/posts/${post.category.slug}/${post.slug}`}
+                href={href}
                 className="underline-current underline-dashed leading-10 underline"
               >
                 {post.title}

diff --git a/src/providers/root/page-scroll-info-provider.tsx b/src/providers/root/page-scroll-info-provider.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { startTransition, useRef } from 'react'
+import { startTransition, useMemo, useRef } from 'react'
 import { useIsomorphicLayoutEffect } from 'foxact/use-isomorphic-layout-effect'
 import { atom, useAtomValue, useSetAtom } from 'jotai'
 import type { FC, PropsWithChildren } from 'react'
@@ -71,9 +71,24 @@ const usePageScrollLocationSelector = createAtomSelector(pageScrollLocationAtom)
 const usePageScrollDirectionSelector = createAtomSelector(
   pageScrollDirectionAtom,
 )
+
+const useScollIsUpAndPageIsOver = (threshold: number) => {
+  return useAtomValue(
+    useMemo(
+      () =>
+        atom((get) => {
+          const scrollLocation = get(pageScrollLocationAtom)
+          const scrollDirection = get(pageScrollDirectionAtom)
+          return scrollLocation > threshold && scrollDirection === 'up'
+        }),
+      [threshold],
+    ),
+  )
+}
 export {
   usePageScrollDirection,
   usePageScrollLocation,
+  useScollIsUpAndPageIsOver,
   usePageScrollLocationSelector,
   usePageScrollDirectionSelector,
 }