CSS styles for pdf print (#30)

* Add tailwindcss media print modifier

* Restructure layout during print

* Wrap code blocks during print

* Hide next/previous buttons on print

* Fix next/prev pages bug for home page

* Filter out draft pages for next/prev links

Author: d0rich

assets/css/prose.css

@@ -15,8 +15,9 @@
  */
 
 .gevamu-prose {
-  @apply prose
+  @apply prose print:max-w-[100ch]
     prose-headings:no-underline
+    print:prose-pre:whitespace-normal
     marker:prose-ul:text-accent-200 marker:prose-ol:text-accent-700;
 }
 

layouts/docs.vue

@@ -18,13 +18,13 @@
   <div class="grid min-h-screen grid-rows-[1fr_auto]">
     <EpLayoutHeader
       v-model:show-content-tree="showContentTree"
-      class="fixed z-30"
+      class="fixed z-30 print:hidden"
     />
     <div
-      class="pt-24 flex mx-auto w-fit flex-col-reverse md:grid md:max-w-screen-xl md:w-full md:grid-cols-[1fr_auto] lg:grid-cols-[auto_1fr_auto]"
+      class="pt-24 print:pt-0 flex mx-auto w-fit print:w-full flex-col-reverse md:grid md:max-w-screen-xl md:w-full md:grid-cols-[1fr_auto] lg:grid-cols-[auto_1fr_auto] print:block"
     >
       <aside
-        class="w-72 px-3 fixed z-20 h-full bg-neutral-50 top-0 transition-all lg:h-auto lg:relative lg:bg-inherit lg:left-0"
+        class="w-72 px-3 fixed z-20 h-full bg-neutral-50 top-0 transition-all lg:h-auto lg:relative lg:bg-inherit lg:left-0 print:hidden"
         :class="{
           '-left-72': !showContentTree,
           'left-0': showContentTree
@@ -55,7 +55,7 @@
         </LazyClientOnly>
         <slot />
       </main>
-      <aside class="px-4 md:px-0 md:w-72">
+      <aside class="px-4 md:px-0 md:w-72 print:hidden">
         <nav v-if="toc" class="md:sticky md:z-0 md:top-32 md:overflow-hidden">
           <h1 v-if="toc.links.length" class="text-neutral-500 mb-2">
             On this page:
@@ -65,7 +65,7 @@
         <hr class="mt-5 md:hidden" />
       </aside>
     </div>
-    <EpLayoutFooter />
+    <EpLayoutFooter class="print:hidden" />
   </div>
 </template>
 

pages/[...slug].vue

@@ -17,12 +17,12 @@
 <template>
   <EpPageMeta :doc="doc" />
   <NuxtLayout>
-    <div class="px-4 mt-10 mb-96">
+    <div class="px-4 print:px-8 mt-10 mb-96 print:mb-0">
       <article class="mb-10">
         <ContentRenderer v-if="doc && doc._type === 'markdown'" :value="doc">
           <ContentRendererMarkdown :value="doc" class="gevamu-prose" />
           <nav
-            class="justify-center grid sm:grid-cols-2 gap-8 items-start mt-32"
+            class="justify-center grid sm:grid-cols-2 gap-8 items-start mt-32 print:hidden"
           >
             <EpLayoutSurroundDocCard
               v-if="doc.before"
@@ -41,7 +41,7 @@
           <!-- TODO: Generate index page -->
         </div>
       </article>
-      <EpLayoutGithubActions v-if="doc" :doc="doc" />
+      <EpLayoutGithubActions v-if="doc" :doc="doc" class="print:hidden" />
     </div>
   </NuxtLayout>
 </template>
@@ -52,16 +52,13 @@ import {
   MarkdownParsedContent
 } from '@nuxt/content/dist/runtime/types'
 
+import { withoutTrailingSlash } from 'ufo'
+
 // TODO: check how to use native type instead of DocParsedContent
 interface DocParsedContent extends MarkdownParsedContent {
   _dir: { title: string }
 }
-function removeTrailingSlash(path: string) {
-  if (path.endsWith('/')) {
-    return path.slice(0, -1)
-  }
-  return path
-}
+
 export default defineComponent({
   name: 'ContentPage',
   setup() {
@@ -73,9 +70,9 @@ export default defineComponent({
     const { data: doc } = useAsyncData('page-data' + route.path, async () => {
       const docPromise = queryContent<DocParsedContent>(route.path).findOne()
       const surroundPromise = queryContent()
-        .only(['_path', 'title', 'description', '_partial'])
-        .where({ _partial: false })
-        .findSurround(removeTrailingSlash(route.path), {
+        .only(['_path', '_draft', 'title', 'description', '_partial'])
+        .where({ _partial: false, _draft: false })
+        .findSurround(withoutTrailingSlash(route.path), {
           before: 1,
           after: 1
         })

tailwind.config.js

@@ -23,6 +23,9 @@ module.exports = {
   darkMode: 'class',
   theme: {
     extend: {
+      screens: {
+        print: { raw: 'print' }
+      },
       fontFamily: {
         sans: ['"Open Sans"', ...defaultTheme.fontFamily.sans]
       },