feat: export page to pdf

close vuejs#593
kecrily · Apr 25, 2022 · 1ff0cba · 1ff0cba
1 parent 1617a04
commit 1ff0cba
Show file tree

Hide file tree

Showing 13 changed files with 107 additions and 6 deletions.
diff --git 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/' },
       {

diff --git 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",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git 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);

diff --git 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

diff --git 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">

diff --git 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;
 }

diff --git 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;

diff --git 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>
diff --git 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>
diff --git 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>
diff --git 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

diff --git 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 --------------------------------------------------------------------