feat: improve print mode

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

Hide file tree

Showing 10 changed files with 28 additions and 13 deletions.
diff --git a/global.d.ts b/global.d.ts
@@ -29,14 +29,12 @@ declare global {
     updateCallbackDone: () => void
     skipTransition(): void
   }
+}
 
-  declare module 'react' {
-    export interface HTMLAttributes<T>
-      extends AriaAttributes,
-        DOMAttributes<T> {
-      'data-hide-print'?: boolean
-      'data-testid'?: string
-    }
+declare module 'react' {
+  export interface AriaAttributes {
+    'data-hide-print'?: boolean
+    'data-testid'?: string
   }
 }
 

diff --git a/src/app/(page-detail)/[slug]/pageExtra.tsx b/src/app/(page-detail)/[slug]/pageExtra.tsx
@@ -97,7 +97,10 @@ export const PagePaginator = () => {
   const hasNext = indexInPages + 1 < n
   const hasPrev = indexInPages - 1 >= 0
   return (
-    <div className="relative mt-8 grid h-20 select-none grid-cols-2">
+    <div
+      className="relative mt-8 grid h-20 select-none grid-cols-2"
+      data-hide-print
+    >
       <div className="justify-start">
         {hasPrev && (
           <Fragment>

diff --git a/src/components/common/Lazyload.tsx b/src/components/common/Lazyload.tsx
@@ -25,7 +25,9 @@ export const LazyLoad: FC<PropsWithChildren & LazyLoadProps> = (props) => {
 
   return (
     <>
-      {!isLoaded && <span data-testid="lazyload-indicator" ref={ref} />}
+      {!isLoaded && (
+        <span data-hide-print data-testid="lazyload-indicator" ref={ref} />
+      )}
       {!inView ? placeholder : props.children}
     </>
   )

diff --git a/src/components/layout/footer/Footer.tsx b/src/components/layout/footer/Footer.tsx
@@ -4,7 +4,10 @@ import { FooterInfo } from './FooterInfo'
 
 export const Footer = () => {
   return (
-    <footer className="relative z-[1] mt-32 border-t border-x-uk-separator-opaque-light bg-slate-50 py-6 text-base-content/80 dark:border-uk-separator-opaque-dark dark:bg-neutral-900">
+    <footer
+      data-hide-print
+      className="relative z-[1] mt-32 border-t border-x-uk-separator-opaque-light bg-slate-50 py-6 text-base-content/80 dark:border-uk-separator-opaque-dark dark:bg-neutral-900"
+    >
       <div className="px-4 sm:px-8">
         <div className="relative mx-auto max-w-7xl lg:px-8">
           <FooterInfo />

diff --git a/src/components/layout/header/internal/HeaderWithShadow.tsx b/src/components/layout/header/internal/HeaderWithShadow.tsx
@@ -13,6 +13,7 @@ export const HeaderWithShadow: Component = ({ children }) => {
   )
   return (
     <header
+      data-hide-print
       className={clsx(
         'fixed left-0 right-0 top-0 z-[9] h-[4.5rem] overflow-hidden transition-shadow duration-200',
         showShadow &&

diff --git a/src/components/ui/loading/index.tsx b/src/components/ui/loading/index.tsx
@@ -18,6 +18,7 @@ export const Loading: Component<LoadingProps> = ({
     : loadingText
   return (
     <div
+      data-hide-print
       className={clsxm(
         'my-20 flex flex-col items-center justify-start',
         className,

diff --git a/src/components/widgets/comment/CommentBox/Root.tsx b/src/components/widgets/comment/CommentBox/Root.tsx
@@ -28,7 +28,7 @@ export const CommentBoxRoot: FC<CommentBaseProps> = (props) => {
 
   return (
     <CommentBoxProvider refId={refId}>
-      <div className="group relative w-full min-w-0">
+      <div className="group relative w-full min-w-0" data-hide-print>
         <SwitchCommentMode />
 
         <div className="relative w-full">

diff --git a/src/components/widgets/subscribe/SubscribeBell.tsx b/src/components/widgets/subscribe/SubscribeBell.tsx
@@ -21,7 +21,10 @@ export const SubscribeBell: FC<SubscribeBellProps> = (props) => {
   }
 
   return (
-    <div className="mb-6 flex flex-col items-center justify-center p-4">
+    <div
+      className="mb-6 flex flex-col items-center justify-center p-4"
+      data-hide-print
+    >
       <p className="text-gray-1 leading-8 opacity-80">
         站点已开启邮件订阅，点亮小铃铛，订阅最新文章哦~
       </p>

diff --git a/src/components/widgets/xlog/XLogInfo.tsx b/src/components/widgets/xlog/XLogInfo.tsx
@@ -82,7 +82,10 @@ const XLogInfoBase: FC<{
   }
 
   return (
-    <div className="my-6 select-none text-sm [&_h4]:font-medium [&_section]:my-2">
+    <div
+      className="my-6 select-none text-sm [&_h4]:font-medium [&_section]:my-2"
+      data-hide-print
+    >
       <div
         role="button"
         tabIndex={0}

diff --git a/src/components/widgets/xlog/XLogSummary.tsx b/src/components/widgets/xlog/XLogSummary.tsx
@@ -36,6 +36,7 @@ const XLogSummary: FC<{
 
   let Inner: ReactNode = (
     <div
+      data-hide-print
       className={clsxm(
         `space-y-2 rounded-xl border border-slate-200 p-4 dark:border-neutral-800`,
         props.className,