From f37a4276f141b109c150b79e871653e27d23cef0 Mon Sep 17 00:00:00 2001
From: Innei <i@innei.in>
Date: Thu, 6 Jul 2023 12:05:50 +0800
Subject: [PATCH] feat: improve print mode

Signed-off-by: Innei <i@innei.in>
---
 global.d.ts                                          | 12 +++++-------
 src/app/(page-detail)/[slug]/pageExtra.tsx           |  5 ++++-
 src/components/common/Lazyload.tsx                   |  4 +++-
 src/components/layout/footer/Footer.tsx              |  5 ++++-
 .../layout/header/internal/HeaderWithShadow.tsx      |  1 +
 src/components/ui/loading/index.tsx                  |  1 +
 src/components/widgets/comment/CommentBox/Root.tsx   |  2 +-
 src/components/widgets/subscribe/SubscribeBell.tsx   |  5 ++++-
 src/components/widgets/xlog/XLogInfo.tsx             |  5 ++++-
 src/components/widgets/xlog/XLogSummary.tsx          |  1 +
 10 files changed, 28 insertions(+), 13 deletions(-)

diff --git a/global.d.ts b/global.d.ts
index 9d4a98dafe..7b7d3e8aa4 100644
--- 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
index c60279b1f4..f6bb577df7 100644
--- 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
index a6e18b1fda..d3b70b7b85 100644
--- 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
index fb060bae11..90e9436ca6 100644
--- 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
index a33a567483..0971e3c482 100644
--- 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
index 47d04e86cf..3860bc9d0a 100644
--- 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
index 6cf69e7a57..22671d94a9 100644
--- 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
index 7bf81004a4..12d1b42d4f 100644
--- 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
index 66a6adf60f..d1eb8dcd14 100644
--- 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
index 83f97c399e..1e848da4cf 100644
--- 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,