feat: optimize print mode (export pdf) preview layout (#354)

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 {}

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" />

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

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

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");

src/css/print.css

@@ -0,0 +1,8 @@
+@media print {
+  nav,
+  header,
+  footer,
+  *[data-hide-print] {
+    display: none !important;
+  }
+}