feat: export page to pdf

close https://github.com/vuejs/vitepress/issues/593

docs/.vitepress/config.ts

@@ -26,6 +26,8 @@ export default defineConfig({
       placement: 'vuejsorg'
     },
 
+    printPDF: true,
+
     nav: [
       { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
       {

package.json

@@ -86,6 +86,7 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^13.0.4",
     "@types/compression": "^1.7.0",
+    "@types/minimist": "^1.2.2",
     "@types/cross-spawn": "^6.0.2",
     "@types/debug": "^4.1.7",
     "@types/fs-extra": "^9.0.11",

pnpm-lock.yaml

@@ -1,4 +1,4 @@
-lockfileVersion: 5.3
+lockfileVersion: 5.4
 
 importers:
 
@@ -20,6 +20,7 @@ importers:
       '@types/lru-cache': ^5.1.0
       '@types/markdown-it': ^12.0.1
       '@types/micromatch': ^4.0.2
+      '@types/minimist': ^1.2.2
       '@types/node': ^15.6.1
       '@types/polka': ^0.5.3
       '@vitejs/plugin-vue': ^2.2.0
@@ -85,6 +86,7 @@ importers:
       '@types/lru-cache': 5.1.1
       '@types/markdown-it': 12.2.1
       '@types/micromatch': 4.0.2
+      '@types/minimist': 1.2.2
       '@types/node': 15.14.9
       '@types/polka': 0.5.3
       chalk: 4.1.2
@@ -105,7 +107,7 @@ importers:
       lint-staged: 11.1.2
       lru-cache: 6.0.0
       markdown-it: 12.3.2
-      markdown-it-anchor: 8.4.1_940cc64b929ea62ef73eba29fd968cec
+      markdown-it-anchor: 8.4.1_sqgmms4st2tc55z6xiu73fum5q
       markdown-it-attrs: 4.1.3_markdown-it@12.3.2
       markdown-it-container: 3.0.0
       markdown-it-emoji: 2.0.0
@@ -118,7 +120,7 @@ importers:
       prettier: 2.4.1
       rimraf: 3.0.2
       rollup: 2.57.0
-      rollup-plugin-esbuild: 4.8.2_esbuild@0.14.3+rollup@2.57.0
+      rollup-plugin-esbuild: 4.8.2_ofyf2sflbd3x5kuhhv7zkdsvfy
       semver: 7.3.5
       sirv: 1.0.17
       typescript: 4.4.3
@@ -2663,7 +2665,7 @@ packages:
     engines: {node: '>=8'}
     dev: true
 
-  /markdown-it-anchor/8.4.1_940cc64b929ea62ef73eba29fd968cec:
+  /markdown-it-anchor/8.4.1_sqgmms4st2tc55z6xiu73fum5q:
     resolution: {integrity: sha512-sLODeRetZ/61KkKLJElaU3NuU2z7MhXf12Ml1WJMSdwpngeofneCRF+JBbat8HiSqhniOMuTemXMrsI7hA6XyA==}
     peerDependencies:
       '@types/markdown-it': '*'
@@ -3285,7 +3287,7 @@ packages:
       glob: 7.2.0
     dev: true
 
-  /rollup-plugin-esbuild/4.8.2_esbuild@0.14.3+rollup@2.57.0:
+  /rollup-plugin-esbuild/4.8.2_ofyf2sflbd3x5kuhhv7zkdsvfy:
     resolution: {integrity: sha512-wsaYNOjzTb6dN1qCIZsMZ7Q0LWiPJklYs2TDI8vJA2LUbvtPUY+17TC8C0vSat3jPMInfR9XWKdA7ttuwkjsGQ==}
     engines: {node: '>=12'}
     peerDependencies:

src/client/app/components/Debug.vue

@@ -72,6 +72,12 @@ watch(open, (value) => {
   font-size: 13px;
 }
 
+@media print {
+  .debug {
+    display: none;
+  }
+}
+
 .block {
   margin: 2px 0 0;
   border-top: 1px solid rgba(255, 255, 255, 0.16);

src/client/shim.d.ts

@@ -2,6 +2,7 @@ declare const __VP_HASH_MAP__: Record<string, string>
 declare const __CARBON__: boolean
 declare const __BSA__: boolean
 declare const __ALGOLIA__: boolean
+declare const __PDF__: boolean
 declare module '*.vue' {
   import { ComponentOptions } from 'vue'
   const comp: ComponentOptions

src/client/theme-default/Layout.vue

@@ -20,6 +20,9 @@ const BuySellAds = __BSA__
 const AlgoliaSearchBox = __ALGOLIA__
   ? defineAsyncComponent(() => import('./components/AlgoliaSearchBox.vue'))
   : NoopComponent
+const PrintPDF = __PDF__
+  ? defineAsyncComponent(() => import('./components/PrintPDF.vue'))
+  : NoopComponent
 
 // generic state
 const route = useRoute()
@@ -91,6 +94,9 @@ const pageClasses = computed(() => {
           />
         </slot>
       </template>
+      <template #print>
+        <PrintPDF v-if="theme.printPDF" />
+      </template>
     </NavBar>
 
     <SideBar :open="openSideBar">

src/client/theme-default/components/NavBar.vue

@@ -19,6 +19,7 @@ defineEmits(['toggle'])
     </div>
 
     <slot name="search" />
+    <slot name="print" />
   </header>
 </template>
 
@@ -44,6 +45,12 @@ defineEmits(['toggle'])
   }
 }
 
+@media print{
+  .nav-bar {
+    display: none;
+  }
+}
+
 .flex-grow {
   flex-grow: 1;
 }

src/client/theme-default/components/NextAndPrevLinks.vue

@@ -31,6 +31,12 @@ const { hasLinks, prev, next } = useNextAndPrevLinks()
   padding-top: 1rem;
 }
 
+@media print {
+  .next-and-prev-link {
+    display: none;
+  }
+}
+
 .container {
   display: flex;
   justify-content: space-between;

src/client/theme-default/components/Page.vue

@@ -34,12 +34,24 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
   }
 }
 
+@media print {
+  .page {
+    padding-top: 0;
+  }
+}
+
 .container {
   margin: 0 auto;
   padding: 0 1.5rem 4rem;
   max-width: 48rem;
 }
 
+@media print {
+  .container {
+    padding-bottom: 0;
+  }
+}
+
 .content {
   padding-bottom: 1.5rem;
 }
@@ -50,4 +62,10 @@ import NextAndPrevLinks from './NextAndPrevLinks.vue'
     clear: both;
   }
 }
+
+@media print {
+  .content {
+    padding-bottom: 0;
+  }
+}
 </style>

src/client/theme-default/components/PrintPDF.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Print from "./icons/Print.vue";
+
+function printPDF() {
+  window.print()
+}
+
+</script>
+
+<template>
+  <button @click="printPDF" type="button" title="Print PDF" aria-label="Print PDF" class="print">
+    <Print class="icon" />
+  </button>
+</template>
+
+<style scoped>
+.print{
+  border: 0;
+  background-color: var(--c-white);
+  color: var(--c-text-light-2);
+  margin-left: 0.8em;
+  width: 2.6em;
+  height: 2.6em;
+  display: none;
+}
+.print:hover{
+  color: var(--vt-c-text-1);
+  transition: color .25s;
+}
+
+@media (min-width: 720px) {
+  .print {
+    display: block;
+  }
+}
+</style>

src/client/theme-default/components/icons/Print.vue

@@ -0,0 +1,13 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    aria-hidden="true"
+    role="img"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 1664 1536"
+  >
+    <path
+      fill="currentColor"
+      d="M384 1408h896v-256H384v256zm0-640h896V384h-160q-40 0-68-28t-28-68V128H384v640zm1152 64q0-26-19-45t-45-19t-45 19t-19 45t19 45t45 19t45-19t19-45zm128 0v416q0 13-9.5 22.5t-22.5 9.5h-224v160q0 40-28 68t-68 28H352q-40 0-68-28t-28-68v-160H32q-13 0-22.5-9.5T0 1248V832q0-79 56.5-135.5T192 640h64V96q0-40 28-68t68-28h672q40 0 88 20t76 48l152 152q28 28 48 76t20 88v256h64q79 0 135.5 56.5T1664 832z" />
+  </svg>
+</template>

src/node/plugin.ts

@@ -91,7 +91,8 @@ export function createVitePressPlugin(
         define: {
           __CARBON__: !!site.themeConfig.carbonAds?.carbon,
           __BSA__: !!site.themeConfig.carbonAds?.custom,
-          __ALGOLIA__: !!site.themeConfig.algolia
+          __ALGOLIA__: !!site.themeConfig.algolia,
+          __PDF__: !!site.themeConfig.printPDF
         },
         optimizeDeps: {
           // force include vue to avoid duplicated copies when linked + optimized

types/default-theme.d.ts

@@ -69,6 +69,8 @@ export namespace DefaultTheme {
       custom?: string
       placement: string
     }
+
+    printPDF?: boolean
   }
 
   // navbar --------------------------------------------------------------------