Fix printing pagination

Author: qiangli

README.md

@@ -15,7 +15,10 @@ This is a resume written in Next.js which can be deployed to GitHub Pages as a s
 Build locally
 
 ```bash
+# corepack enable 
+# corepack prepare pnpm@latest --activate         
 pnpm install
+#
 pnpm run format
 pnpm run lint
 pnpm run build

package.json

@@ -63,6 +63,7 @@
     "tailwind"
   ],
   "license": "MIT",
+  "packageManager": "[email protected]+sha512.f0dda8580f0ee9481c5c79a1d927b9164f2c478e90992ad268bbb2465a736984391d6333d2c327913578b2804af33474ca554ba29c04a8b13060a717675ae3ac",
   "scripts": {
     "build": "next build",
     "build:content": "contentlayer2 build",

run.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+pnpm run build
+go run server/main.go
+
+##

src/app/page.tsx

@@ -9,7 +9,7 @@ export const dynamic = 'force-static';
 
 export default function Page(): ReactNode {
   return (
-    <div className="container space-y-12">
+    <div className="container space-y-12 print:text-xs">
       <div className="grid grid-cols-1 gap-12 md:grid-cols-2">
         <AboutMe />
         <ContactInformation />

src/app/styles/globals.css

@@ -5,3 +5,16 @@
 @import './base';
 @import './variants';
 @import './utilities';
+
+@media print {
+  .break-before-page {
+    break-before: page;
+  }
+}
+
+@media print {
+  .container,
+  .container * {
+    font-size: 0.8rem !important;
+  }
+}

src/components/articles/achievements.tsx

@@ -25,7 +25,7 @@ export default function Achievements(): ReactNode {
 
   return (
     <>
-      <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md">
+      <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md print:break-before-page">
         <div className="container space-y-8">
           <SectionHeading
             data-aos="fade-center"

src/components/articles/additional-info.tsx

@@ -15,7 +15,7 @@ export default function AdditionalInfo(): ReactNode {
   });
 
   return (
-    <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md">
+    <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md print:break-before-page">
       <div className="container space-y-8">
         <SectionHeading
           data-aos="fade-center"

src/components/articles/contact-card.tsx

@@ -37,7 +37,9 @@ export default function ContactCard(): ReactNode {
             href="https://www.linkedin.com/in/liqiangsprofile/"
             rel="noreferrer"
           >
-            <span className={styles.linkHead}>https://www.linkedin.com/in/</span>
+            <span className={styles.linkHead}>
+              https://www.linkedin.com/in/
+            </span>
             <span>liqiangsprofile</span>
             <i
               className="fas fa-external-link-alt"

src/components/articles/professional.tsx

@@ -15,7 +15,7 @@ export default function Professional(): ReactNode {
   });
 
   return (
-    <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md">
+    <article className="border-neutral-6 bg-neutral-2 rounded-xl border py-12 shadow-md print:break-before-page">
       <div className="container space-y-8">
         <SectionHeading
           data-aos="fade-center"

src/components/header/download-button.tsx

@@ -0,0 +1,31 @@
+'use client';
+
+import { ReactNode } from 'react';
+import { Button } from 'src/components/button/button';
+
+// https://icons.getbootstrap.com/icons/file-pdf/
+export default function DownloadButton(): ReactNode {
+  return (
+    <Button asChild key="download-pdf-version" size="icon">
+      <a
+        href="/print/pdf"
+        target="_blank"
+        rel="noopener noreferrer"
+        title="Download PDF version"
+        aria-label="Download PDF version"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="16"
+          height="16"
+          fill="currentColor"
+          className="bi bi-file-pdf"
+          viewBox="0 0 16 16"
+        >
+          <path d="M4 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2zm0 1h8a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1" />
+          <path d="M4.603 12.087a.8.8 0 0 1-.438-.42c-.195-.388-.13-.776.08-1.102.198-.307.526-.568.897-.787a7.7 7.7 0 0 1 1.482-.645 20 20 0 0 0 1.062-2.227 7.3 7.3 0 0 1-.43-1.295c-.086-.4-.119-.796-.046-1.136.075-.354.274-.672.65-.823.192-.077.4-.12.602-.077a.7.7 0 0 1 .477.365c.088.164.12.356.127.538.007.187-.012.395-.047.614-.084.51-.27 1.134-.52 1.794a11 11 0 0 0 .98 1.686 5.8 5.8 0 0 1 1.334.05c.364.065.734.195.96.465.12.144.193.32.2.518.007.192-.047.382-.138.563a1.04 1.04 0 0 1-.354.416.86.86 0 0 1-.51.138c-.331-.014-.654-.196-.933-.417a5.7 5.7 0 0 1-.911-.95 11.6 11.6 0 0 0-1.997.406 11.3 11.3 0 0 1-1.021 1.51c-.29.35-.608.655-.926.787a.8.8 0 0 1-.58.029m1.379-1.901q-.25.115-.459.238c-.328.194-.541.383-.647.547-.094.145-.096.25-.04.361q.016.032.026.044l.035-.012c.137-.056.355-.235.635-.572a8 8 0 0 0 .45-.606m1.64-1.33a13 13 0 0 1 1.01-.193 12 12 0 0 1-.51-.858 21 21 0 0 1-.5 1.05zm2.446.45q.226.244.435.41c.24.19.407.253.498.256a.1.1 0 0 0 .07-.015.3.3 0 0 0 .094-.125.44.44 0 0 0 .059-.2.1.1 0 0 0-.026-.063c-.052-.062-.2-.152-.518-.209a4 4 0 0 0-.612-.053zM8.078 5.8a7 7 0 0 0 .2-.828q.046-.282.038-.465a.6.6 0 0 0-.032-.198.5.5 0 0 0-.145.04c-.087.035-.158.106-.196.283-.04.192-.03.469.046.822q.036.167.09.346z" />
+        </svg>
+      </a>
+    </Button>
+  );
+}