From 6f8bd722bc640b18a719702a6e7e154330d918d1 Mon Sep 17 00:00:00 2001
From: Ethan Goh <7086cmd@gmail.com>
Date: Sun, 14 Jul 2024 20:42:45 +0800
Subject: [PATCH] feat: add an option for removing extra when printing

---
 src/client/theme-default/components/VPDocFooter.vue |  9 ++++++++-
 src/client/theme-default/components/VPLocalNav.vue  |  2 +-
 src/client/theme-default/components/VPNav.vue       | 11 +++++++++--
 src/client/theme-default/styles/base.css            |  3 +++
 types/default-theme.d.ts                            |  9 +++++++++
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/client/theme-default/components/VPDocFooter.vue b/src/client/theme-default/components/VPDocFooter.vue
index 1514dbe0..5671de77 100644
--- a/src/client/theme-default/components/VPDocFooter.vue
+++ b/src/client/theme-default/components/VPDocFooter.vue
@@ -22,10 +22,17 @@ const showFooter = computed(
     control.value.prev ||
     control.value.next
 )
+
+const classes = computed(() => {
+  return {
+    VPDocFooter: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <footer v-if="showFooter" class="VPDocFooter hidden-print">
+  <footer v-if="showFooter" :class="classes">
     <slot name="doc-footer-before" />
 
     <div v-if="hasEditLink || hasLastUpdated" class="edit-info">
diff --git a/src/client/theme-default/components/VPLocalNav.vue b/src/client/theme-default/components/VPLocalNav.vue
index fa16ec5a..70dcb7fd 100644
--- a/src/client/theme-default/components/VPLocalNav.vue
+++ b/src/client/theme-default/components/VPLocalNav.vue
@@ -46,7 +46,7 @@ const emptyAndNoSidebar = computed(() => {
 const classes = computed(() => {
   return {
     VPLocalNav: true,
-    'hidden-print': true,
+    'hidden-print': theme.value.removeExtraElementsInPrint,
     'has-sidebar': hasSidebar.value,
     empty: empty.value,
     fixed: emptyAndNoSidebar.value
diff --git a/src/client/theme-default/components/VPNav.vue b/src/client/theme-default/components/VPNav.vue
index 85670110..d9ae8430 100644
--- a/src/client/theme-default/components/VPNav.vue
+++ b/src/client/theme-default/components/VPNav.vue
@@ -7,7 +7,7 @@ import VPNavBar from './VPNavBar.vue'
 import VPNavScreen from './VPNavScreen.vue'
 
 const { isScreenOpen, closeScreen, toggleScreen } = useNav()
-const { frontmatter } = useData()
+const { frontmatter, theme } = useData()
 
 const hasNavbar = computed(() => {
   return frontmatter.value.navbar !== false
@@ -20,10 +20,17 @@ watchEffect(() => {
     document.documentElement.classList.toggle('hide-nav', !hasNavbar.value)
   }
 })
+
+const classes = computed(() => {
+  return {
+    VPNav: true,
+    'hidden-print': theme.value.removeExtraElementsInPrint
+  }
+})
 </script>
 
 <template>
-  <header v-if="hasNavbar" class="VPNav hidden-print">
+  <header v-if="hasNavbar" :class="classes">
     <VPNavBar :is-screen-open="isScreenOpen" @toggle-screen="toggleScreen">
       <template #nav-bar-title-before><slot name="nav-bar-title-before" /></template>
       <template #nav-bar-title-after><slot name="nav-bar-title-after" /></template>
diff --git a/src/client/theme-default/styles/base.css b/src/client/theme-default/styles/base.css
index 8041b6bc..be3d06c6 100644
--- a/src/client/theme-default/styles/base.css
+++ b/src/client/theme-default/styles/base.css
@@ -43,6 +43,9 @@ body {
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  page-break-inside: avoid;
+  page-break-after: avoid;
+  page-break-before: avoid;
 }
 
 main {
diff --git a/types/default-theme.d.ts b/types/default-theme.d.ts
index 37be5bab..92b165b1 100644
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@@ -119,6 +119,15 @@ export namespace DefaultTheme {
      */
     returnToTopLabel?: string
 
+    /**
+     * @default false
+     *
+     * Remove extraneous elements when printing, such as
+     * the sidebar, navbar, and footer. It can clean print pages, and focus on
+     * the main content.
+     */
+    removeExtraElementsInPrint?: boolean
+
     /**
      * Set custom `aria-label` for language menu button.
      *