Feature: improve printing experience (HEIGE-PCloud#1220)

* feat(print): improve print style * feat: expand on print * feat: handle special page * feat: hide comment section on print
Jatin794 · Dec 19, 2024 · cceb619 · cceb619
1 parent d405e53
commit cceb619
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 165 deletions.
diff --git a/assets/css/main.css b/assets/css/main.css
@@ -575,74 +575,24 @@ ul {
   --tw-backdrop-sepia:  ;
 }
 
-.tw-m-1 {
-  margin: 0.25rem;
-}
-
 .tw-my-4 {
   margin-top: 1rem;
   margin-bottom: 1rem;
 }
 
-.tw-mx-1 {
-  margin-left: 0.25rem;
-  margin-right: 0.25rem;
-}
-
 .tw-mr-1 {
   margin-right: 0.25rem;
 }
 
-.tw-translate-y-1 {
-  --tw-translate-y: 0.25rem;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.tw-translate-y-\[-1\] {
-  --tw-translate-y: -1;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-.tw-translate-y-\[-1px\] {
-  --tw-translate-y: -1px;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .tw-border-t-2 {
   border-top-width: 2px;
 }
 
-.tw-border-t {
-  border-top-width: 1px;
-}
-
-.tw-border-\[\] {
-  border-color: ;
-}
-
-.tw-border-\[\$\] {
-  border-color: $;
-}
-
-.tw-border-\[\#\#363636\] {
-  border-color: ##363636;
-}
-
-.tw-border-\[\#363636\] {
-  --tw-border-opacity: 1;
-  border-color: rgb(54 54 54 / var(--tw-border-opacity));
-}
-
 .tw-border-\[\#f0f0f0\] {
   --tw-border-opacity: 1;
   border-color: rgb(240 240 240 / var(--tw-border-opacity));
 }
 
-.tw-bg-white {
-  --tw-bg-opacity: 1;
-  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
-}
-
 .tw-bg-transparent {
   background-color: transparent;
 }
@@ -661,25 +611,11 @@ ul {
   padding-bottom: 0.5rem;
 }
 
-.tw-shadow {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .tw-shadow-black {
   --tw-shadow-color: #000;
   --tw-shadow: var(--tw-shadow-colored);
 }
 
-.tw-outline {
-  outline-style: solid;
-}
-
-.tw-outline-offset-1 {
-  outline-offset: 1px;
-}
-
 .tw-transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
@@ -696,66 +632,17 @@ ul {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\] {
-  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
-}
-
 .hover\:tw-bg-gray-200:hover {
   --tw-bg-opacity: 1;
   background-color: rgb(229 231 235 / var(--tw-bg-opacity));
 }
 
-.hover\:tw-bg-\[\]:hover {
-  background-color: ;
-}
-
-.hover\:tw-bg-\[\#f0f0f0\]:hover {
-  --tw-bg-opacity: 1;
-  background-color: rgb(240 240 240 / var(--tw-bg-opacity));
-}
-
-.hover\:tw-font-semibold:hover {
-  font-weight: 600;
-}
-
-.hover\:tw-font-medium:hover {
-  font-weight: 500;
-}
-
-.hover\:tw-shadow-sm:hover {
-  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:tw-shadow:hover {
-  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:tw-shadow-inner:hover {
-  --tw-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 0.05);
-  --tw-shadow-colored: inset 0 2px 4px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
-.hover\:tw-shadow-xl:hover {
-  --tw-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
-  --tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
-}
-
 .hover\:tw-shadow-md:hover {
   --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 
-.hover\:\[text-shadow\:_0_1px_0_rgb\(0_0_0_\/_40\%\)\]:hover {
-  text-shadow: 0 1px 0 rgb(0 0 0 / 40%);
-}
-
 .aria-selected\:tw-border-b-4[aria-selected="true"] {
   border-bottom-width: 4px;
 }
@@ -774,57 +661,47 @@ ul {
   color: rgb(45 150 189 / var(--tw-text-opacity));
 }
 
-:is(.tw-dark .dark\:tw-border-doit-grey-700) {
-  --tw-border-opacity: 1;
-  border-color: rgb(67 80 91 / var(--tw-border-opacity));
-}
-
-:is(.tw-dark .dark\:tw-border-doit-grey-600) {
-  --tw-border-opacity: 1;
-  border-color: rgb(77 95 109 / var(--tw-border-opacity));
-}
-
-:is(.tw-dark .dark\:tw-border-doit-grey-950) {
-  --tw-border-opacity: 1;
-  border-color: rgb(32 37 43 / var(--tw-border-opacity));
-}
-
-:is(.tw-dark .dark\:tw-border-doit-grey-800) {
-  --tw-border-opacity: 1;
-  border-color: rgb(60 69 78 / var(--tw-border-opacity));
-}
-
 :is(.tw-dark .dark\:tw-border-\[\#363636\]) {
   --tw-border-opacity: 1;
   border-color: rgb(54 54 54 / var(--tw-border-opacity));
 }
 
-:is(.tw-dark .dark\:tw-bg-doit-grey-800) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(60 69 78 / var(--tw-bg-opacity));
-}
-
-:is(.tw-dark .dark\:tw-shadow-white) {
-  --tw-shadow-color: #fff;
-  --tw-shadow: var(--tw-shadow-colored);
-}
-
-:is(.tw-dark .dark\:hover\:tw-bg-gray-800:hover) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(31 41 55 / var(--tw-bg-opacity));
-}
-
 :is(.tw-dark .dark\:hover\:tw-bg-doit-grey-950:hover) {
   --tw-bg-opacity: 1;
   background-color: rgb(32 37 43 / var(--tw-bg-opacity));
 }
 
-:is(.tw-dark .dark\:aria-selected\:tw-bg-doit-grey-950[aria-selected="true"]) {
-  --tw-bg-opacity: 1;
-  background-color: rgb(32 37 43 / var(--tw-bg-opacity));
-}
-
 :is(.tw-dark .dark\:aria-selected\:tw-text-doit-blue-400[aria-selected="true"]) {
   --tw-text-opacity: 1;
   color: rgb(85 189 226 / var(--tw-text-opacity));
 }
+
+@media print {
+  .print\:\!tw-m-0 {
+    margin: 0px !important;
+  }
+
+  .print\:\!tw-block {
+    display: block !important;
+  }
+
+  .print\:\!tw-hidden {
+    display: none !important;
+  }
+
+  .print\:tw-hidden {
+    display: none;
+  }
+
+  .print\:\!tw-w-full {
+    width: 100% !important;
+  }
+
+  .print\:\!tw-max-w-none {
+    max-width: none !important;
+  }
+
+  .print\:\!tw-p-0 {
+    padding: 0px !important;
+  }
+}
diff --git a/assets/js/theme.js b/assets/js/theme.js
@@ -423,6 +423,13 @@ function initDetails () {
       }
       $details.classList.toggle('open')
     }, false)
+    addEventListener("beforeprint", (event) => {
+      if ($details.classList.contains('open')) {
+        return;
+      }
+      $summary.click();
+    });
+
   })
 }
 
@@ -465,6 +472,12 @@ function initHighlight () {
         }
         $chroma.classList.toggle('open')
       }, false)
+      addEventListener("beforeprint", (event) => {
+        if ($chroma.classList.contains('open')) {
+          return;
+        }
+        $title.click();
+      });
       $header.appendChild($title)
       const $ellipses = document.createElement('span')
       $ellipses.insertAdjacentHTML('afterbegin', '<i class="fas fa-ellipsis-h fa-fw"></i>')

diff --git a/themes/DoIt/layouts/_default/baseof.html b/themes/DoIt/layouts/_default/baseof.html
@@ -67,7 +67,7 @@
         {{- partial "footer.html" . -}}
     </div>
 
-    <div id="fixed-buttons">
+    <div id="fixed-buttons" class="print:!tw-hidden">
         {{- /* top button */ -}}
         <a href="#back-to-top" id="back-to-top-button" class="fixed-button" title="{{ T `backToTop` }}">
             <i class="fas fa-arrow-up fa-fw"></i>

diff --git a/themes/DoIt/layouts/_default/single.html b/themes/DoIt/layouts/_default/single.html
@@ -2,7 +2,7 @@
 
 {{- define "content" -}}
     {{- $params := .Scratch.Get "params" -}}
-    <div class="page single special">
+    <div class="page single special print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
         {{- /* Title */ -}}
         <h1 class="single-title animate__animated animate__pulse animate__faster">
             {{- .Title -}}

diff --git a/themes/DoIt/layouts/partials/comment.html b/themes/DoIt/layouts/partials/comment.html
@@ -4,7 +4,7 @@
 {{- $commentConfig := dict -}}
 
 {{- if $comment.enable -}}
-    <div id="comments">
+    <div id="comments" class="print:!tw-hidden">
         {{- /* Disqus Comment System */ -}}
         {{- $disqus := $comment.disqus | default dict -}}
         {{- if $disqus.enable -}}

diff --git a/themes/DoIt/layouts/partials/header.html b/themes/DoIt/layouts/partials/header.html
@@ -1,5 +1,5 @@
 {{- /* Desktop header */ -}}
-<header class="desktop" id="header-desktop">
+<header class="desktop print:!tw-hidden" id="header-desktop">
     <div class="header-wrapper">
         <div class="header-title">
             <a href="{{ .Site.Home.RelPermalink }}" title="{{ .Site.Title }}">
@@ -97,7 +97,7 @@
 </header>
 
 {{- /* Mobile header */ -}}
-<header class="mobile" id="header-mobile">
+<header class="mobile print:!tw-hidden" id="header-mobile">
     <div class="header-container">
         <div class="header-wrapper">
             <div class="header-title">

diff --git a/themes/DoIt/layouts/partials/single/footer.html b/themes/DoIt/layouts/partials/single/footer.html
@@ -25,7 +25,7 @@
                 {{- end -}}
             </div>
         </div>
-        <div class="post-info-line">
+        <div class="post-info-line print:!tw-hidden">
             <div class="post-info-md">
                 {{- if  .IsPage -}}
                     {{- $post_info := slice -}}
@@ -81,12 +81,12 @@
                 {{- end -}}
             {{- end -}}
         </section>
-        <section>
+        <section class="print:!tw-hidden">
             <span><a href="javascript:void(0);" onclick="window.history.back();">{{ T "back" }}</a></span>&nbsp;|&nbsp;<span><a href="{{ .Site.Home.RelPermalink }}">{{ T "home" }}</a></span>
         </section>
     </div>
 
-    <div class="post-nav">
+    <div class="post-nav print:tw-hidden">
         {{- if .PrevInSection -}}
             <a href="{{ .PrevInSection.RelPermalink }}" class="prev" rel="prev" title="{{ .PrevInSection.Title }}"><i class="fas fa-angle-left fa-fw"></i>{{ .PrevInSection.Title }}</a>
         {{- end -}}

diff --git a/themes/DoIt/layouts/partials/single/sponsor.html b/themes/DoIt/layouts/partials/single/sponsor.html
@@ -9,7 +9,7 @@
 {{- $authors := .Params.authors -}}
 
 {{- if $enable -}}
-    <div class="sponsor">
+    <div class="sponsor print:tw-hidden">
         <div class="sponsor-avatar">
             {{- if $authors -}}
                 {{- $lang := ( $.Params.lang | default $.Lang ) -}}

diff --git a/themes/DoIt/layouts/posts/single.html b/themes/DoIt/layouts/posts/single.html
@@ -12,7 +12,7 @@
 
     {{- /* Auto TOC */ -}}
     {{- if $toc.enable | and (eq $toc.keepStatic false) -}}
-    <div class="toc" id="toc-auto">
+    <div class="toc print:!tw-hidden" id="toc-auto">
         <h2 class="toc-title">{{ T "contents" }}</h2>
         <div class="toc-content{{ if eq $toc.auto false }} always-active{{ end }}" id="toc-content-auto">
             {{- dict "Content" .TableOfContents "Ruby" $params.ruby "Fraction" $params.fraction "Fontawesome" $params.fontawesome | partial "function/content.html" | safeHTML -}}
@@ -31,7 +31,7 @@ <h2 class="toc-title">{{ T "contents" }}</h2>
         <script>document.getElementsByTagName("main")[0].setAttribute("autoTOC", "false")</script>
     {{- end -}}
 
-    <article class="page single">
+    <article class="page single print:!tw-w-full print:!tw-max-w-none print:!tw-m-0 print:!tw-p-0">
         {{- /* Title */ -}}
         <h1 class="single-title animate__animated animate__flipInX">{{ .Title }}</h1>
 
@@ -183,7 +183,7 @@ <h2 class="single-subtitle">{{ . }}</h2>
 
         {{- /* Static TOC */ -}}
         {{- if $toc.enable -}}
-            <div class="details toc" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
+            <div class="details toc print:!tw-block" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
                 <div class="details-summary toc-title">
                     <span>{{ T "contents" }}</span>
                     <span><i class="details-icon fas fa-angle-right"></i></span>