feat: export page to pdf

close https://github.com/vuejs/vitepress/issues/593
3 years ago · 1ff0cba0ad
parent 1617a0438f
commit 1ff0cba0ad
13 changed files with 107 additions and 6 deletions
--- a/docs/.vitepress/config.ts
+++ b/docs/.vitepress/config.ts
@ -26,6 +26,8 @@ export default defineConfig({
      placement: 'vuejsorg'
    },

+    printPDF: true,
+
    nav: [
      { text: 'Guide', link: '/', activeMatch: '^/$|^/guide/' },
      {
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
--- a/src/client/app/components/Debug.vue
+++ b/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);
--- a/src/client/shim.d.ts
+++ b/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
--- a/src/client/theme-default/Layout.vue
+++ b/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">
--- a/src/client/theme-default/components/NavBar.vue
+++ b/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;
 }
--- a/src/client/theme-default/components/NextAndPrevLinks.vue
+++ b/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;
--- a/src/client/theme-default/components/Page.vue
+++ b/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>
--- a/src/client/theme-default/components/PrintPDF.vue
+++ b/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>
--- a/src/client/theme-default/components/icons/Print.vue
+++ b/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>
--- a/src/node/plugin.ts
+++ b/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
--- a/types/default-theme.d.ts
+++ b/types/default-theme.d.ts
@ -69,6 +69,8 @@ export namespace DefaultTheme {
      custom?: string
      placement: string
    }
+
+    printPDF?: boolean
  }

  // navbar --------------------------------------------------------------------