From c19e9cc9cd42c6b6a48c8d5463a720a3bdb7beaf Mon Sep 17 00:00:00 2001
From: Innei <tukon479@gmail.com>
Date: Mon, 17 Apr 2023 03:45:02 +0800
Subject: [PATCH] feat: optimize print mode (export pdf) preview layout (#354)

---
 global.d.ts                              | 8 ++++++++
 src/components/common/BlockchainInfo.tsx | 1 +
 src/components/common/Comment.tsx        | 6 +++++-
 src/components/common/Reactions.tsx      | 1 +
 src/css/main.css                         | 1 +
 src/css/print.css                        | 8 ++++++++
 6 files changed, 24 insertions(+), 1 deletion(-)
 create mode 100644 global.d.ts
 create mode 100644 src/css/print.css

diff --git a/global.d.ts b/global.d.ts
new file mode 100644
index 00000000..baea0917
--- /dev/null
+++ b/global.d.ts
@@ -0,0 +1,8 @@
+declare module "react" {
+  export interface HTMLAttributes<T> extends AriaAttributes, DOMAttributes<T> {
+    "data-hide-print"?: boolean
+    "aria-hidden"?: boolean
+  }
+}
+
+export {}
diff --git a/src/components/common/BlockchainInfo.tsx b/src/components/common/BlockchainInfo.tsx
index ffdf05a2..f35794da 100644
--- a/src/components/common/BlockchainInfo.tsx
+++ b/src/components/common/BlockchainInfo.tsx
@@ -21,6 +21,7 @@ export const BlockchainInfo: React.FC<{
             <Disclosure.Button
               className="flex w-full justify-between items-center rounded-lg px-4 py-2 text-left text-gray-900 hover:bg-hover transition-colors md:rounded-xl"
               aria-label="toggle chain info"
+              data-hide-print
             >
               <span className="flex items-center">
                 <BlockchainIcon className="mr-1" />
diff --git a/src/components/common/Comment.tsx b/src/components/common/Comment.tsx
index 34de805a..f38b0bcb 100644
--- a/src/components/common/Comment.tsx
+++ b/src/components/common/Comment.tsx
@@ -16,7 +16,11 @@ export const Comment: React.FC<{
   const { t } = useTranslation("common")
 
   return (
-    <div className={cn("xlog-comment comment", className)} id="comments">
+    <div
+      className={cn("xlog-comment comment", className)}
+      id="comments"
+      data-hide-print
+    >
       <div className="xlog-comment-count border-b pb-2 mb-6">
         <span>
           {comments.isLoading
diff --git a/src/components/common/Reactions.tsx b/src/components/common/Reactions.tsx
index 8c335620..a19ed635 100644
--- a/src/components/common/Reactions.tsx
+++ b/src/components/common/Reactions.tsx
@@ -155,6 +155,7 @@ export const Reactions: React.FC<{
           size === "sm" ? "text-sm space-x-3" : "space-x-6 sm:space-x-10",
           className,
         )}
+        data-hide-print
       >
         <div className={cn("xlog-reactions-like flex items-center sm:mb-0")}>
           <Button
diff --git a/src/css/main.css b/src/css/main.css
index c0f35991..43ee93fb 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -4,5 +4,6 @@
 @import "./code.css";
 @import "./prism-dark.css";
 @import "./css-var.css";
+@import "./print.css";
 
 @import url("https://cdn.jsdelivr.net/npm/katex@0.16.0/dist/katex.min.css");
diff --git a/src/css/print.css b/src/css/print.css
new file mode 100644
index 00000000..0a07e9fa
--- /dev/null
+++ b/src/css/print.css
@@ -0,0 +1,8 @@
+@media print {
+  nav,
+  header,
+  footer,
+  *[data-hide-print] {
+    display: none !important;
+  }
+}