Seeed-Studio · kashsuks · Oct 20, 2025 · Oct 20, 2025 · Oct 21, 2025 · Oct 22, 2025
diff --git a/assets/index/docsImage.png b/assets/index/docsImage.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -34,6 +34,7 @@
     "chalk": "^5.4.1",
     "clsx": "^1.2.1",
     "docusaurus-plugin-image-zoom": "^0.1.4",
+    "docusaurus-plugin-papersaurus": "^2.0.3",
     "docusaurus-plugin-sass": "^0.2.2",
     "docusaurus-theme-search-typesense": "^0.25.0",
     "moment": "^2.30.1",

diff --git a/src/components/PdfDownloadButton/index.tsx b/src/components/PdfDownloadButton/index.tsx
@@ -0,0 +1,209 @@
+import React from 'react';
+import { useLocation } from '@docusaurus/router';
+import styles from './styles.module.css';
+
+interface PdfDownloadButtonProps {
+  className?: string;
+}
+
+const PdfDownloadButton: React.FC<PdfDownloadButtonProps> = ({ className }) => {
+  const location = useLocation();
+
+  const handleDownloadPdf = async () => {
+    // clean print version for the page
+    const printContent = document.querySelector('article')?.cloneNode(true) as HTMLElement;
+
+    if (!printContent) {
+      console.error('Could not find article content');
+      window.print();
+      return;
+    }
+
+    const pdfButton = printContent.querySelector('.pdfButtonContainer');
+    if (pdfButton) {
+      pdfButton.remove();
+    }
+
+    //get page title
+    const pageTitle = document.querySelector('h1')?.textContent || 
+                     document.querySelector('article h1')?.textContent || 
+                     document.title;
+
+    const currentDate = new Date().toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric'
+    });
+
+    const printWindow = window.open('', '_blank', 'width=800,height=600');
+
+    if (!printWindow) {
+      // FALLBACK: if the popup was blocked
+      window.print();
+      return;
+    }
+
+    const styles = Array.from(document.styleSheets)
+      .map(styleSheet => {
+        try {
+          return Array.from(styleSheet.cssRules)
+            .map(rule => rule.cssText)
+            .join('\n');
+        } catch (e) {
+          return '';
+        }
+      })
+      .join('\n');
+
+    // Load logo as data URL
+    const toDataUrl = async (url: string): Promise<string> => {
+      try {
+        const resp = await fetch(url);
+        if (!resp.ok) return '';
+        const blob = await resp.blob();
+        return await new Promise<string>((resolve, reject) => {
+          const reader = new FileReader();
+          reader.onloadend = () => resolve(reader.result as string);
+          reader.onerror = reject;
+          reader.readAsDataURL(blob);
+        });
+      } catch (err) {
+        return '';
+      }
+    };
+
+    const logoDataUrl = await toDataUrl(`${window.location.origin}/assets/index/docsImage.png`);
+
+    printWindow.document.write(`
+      <!DOCTYPE html>
+      <html>
+        <head>
+          <title>${document.title}</title>
+          <meta charset="utf-8">
+          <style>
+            /* Base styles */
+            * { box-sizing: border-box; }
+            body { 
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+              line-height: 1.6;
+              margin: 0;
+              padding: 20px;
+              color: #333;
+            }
+
+            /* print-specific styles */
+            @media print {
+              body { margin: 0; }
+              img { 
+                max-width: 100% !important; 
+                page-break-inside: avoid !important;
+                break-inside: avoid !important;
+              }
+              h1, h2, h3, h4, h5, h6 { 
+                page-break-after: avoid !important;
+                break-after: avoid !important;
+              }
+              pre, code, .highlight { 
+                page-break-inside: avoid !important;
+                break-inside: avoid !important;
+                white-space: pre-wrap !important;
+              }
+              table { 
+                page-break-inside: avoid !important;
+                break-inside: avoid !important;
+              }
+              a { 
+                color: #0066cc !important;
+                text-decoration: underline !important;
+              }
+              .pdfButtonContainer { display: none !important; }
+            }
+
+            /* Import existing styles */
+            ${styles}
+          </style>
+        </head>
+        <body>
+          <!-- Main Content -->
+          <div class="pdf-content">
+            ${printContent.innerHTML}
+          </div>
+        </body>
+      </html>
+    `);
+
+    printWindow.document.close();
+
+    printWindow.onload = () => {
+      setTimeout(() => {
+        printWindow.focus();
+        printWindow.print();
+        // Close the window after printing (optional)
+        // printWindow.close();
+      }, 500);
+    };
+  };
+
+  return (
+    <button
+      className={`${styles.pdfButton} ${className || ''}`}
+      onClick={handleDownloadPdf}
+      title="Print/Save this page as PDF"
+      aria-label="Print PDF"
+    >
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+        className={styles.pdfIcon}
+      >
+        <path
+          d="M14 2H6C4.9 2 4 2.9 4 4V20C4 21.1 4.9 22 6 22H18C19.1 22 20 21.1 20 20V8L14 2Z"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <polyline
+          points="14,2 14,8 20,8"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <line
+          x1="16"
+          y1="13"
+          x2="8"
+          y2="13"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <line
+          x1="16"
+          y1="17"
+          x2="8"
+          y2="17"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <polyline
+          points="10,9 9,9 8,9"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </svg>
+      <span className={styles.buttonText}>Print PDF</span>
+    </button>
+  );
+};
+
+export default PdfDownloadButton;
diff --git a/src/components/PdfDownloadButton/styles.module.css b/src/components/PdfDownloadButton/styles.module.css
@@ -0,0 +1,55 @@
+.pdfButton {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 16px;
+  background-color: var(--ifm-color-primary);
+  color: white;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  text-decoration: none;
+  margin: 8px 0;
+}
+
+.pdfButton:hover {
+  background-color: var(--ifm-color-primary-dark);
+  transform: translateY(-1px);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.pdfButton:active {
+  transform: translateY(0);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.pdfIcon {
+  flex-shrink: 0;
+}
+
+.buttonText {
+  white-space: nowrap;
+}
+
+[data-theme='dark'] .pdfButton {
+  background-color: var(--ifm-color-primary);
+  color: var(--ifm-color-primary-contrast-background);
+}
+
+[data-theme='dark'] .pdfButton:hover {
+  background-color: var(--ifm-color-primary-light);
+}
+
+@media (max-width: 768px) {
+  .pdfButton {
+    padding: 6px 12px;
+    font-size: 13px;
+  }
+
+  .buttonText {
+    display: none;
+  }
+}
diff --git a/src/css/custom.css b/src/css/custom.css
@@ -4,6 +4,9 @@
  * work well for content-centric websites.
  */
 
+/* Import PDF-specific styles */
+@import './pdf-styles.css';
+
 /* You can override the default Infima variables here. */
 :root {
 	--ifm-color-primary: #2e8555;

diff --git a/src/css/pdf-styles.css b/src/css/pdf-styles.css
@@ -0,0 +1,74 @@
+@media print {
+  @page {
+    margin: 0.75in 0.5in;
+  }
+
+  /* Hide first page completely */
+  @page :first {
+    display: none;
+  }
+
+
+  body {
+    margin: 0 !important;
+    padding: 0 !important;
+  }
+
+  .pdf-content {
+    margin: 0;
+    padding: 20px;
+    page-break-before: avoid;
+  }
+
+  .pdf-content > *:first-child {
+    page-break-before: avoid !important;
+    margin-top: 0 !important;
+    padding-top: 0 !important;
+  }
+
+
+  .pdf-content > * {
+    page-break-inside: avoid;
+  }
+
+  .pdf-content h1:first-child {
+    margin-top: 0;
+  }
+
+  img {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+    display: block;
+    max-width: 100% !important;
+    height: auto !important;
+  }
+
+  .markdown img {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+  }
+
+  a {
+    color: #0066cc !important;
+    text-decoration: underline !important;
+  }
+
+  pre, code {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+  }
+
+  table {
+    page-break-inside: avoid !important;
+    break-inside: avoid !important;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    page-break-after: avoid !important;
+    break-after: avoid !important;
+  }
+
+  .pdfButtonContainer {
+    display: none !important;
+  }
+}
diff --git a/src/theme/DocItem/Layout/index.tsx b/src/theme/DocItem/Layout/index.tsx
@@ -17,6 +17,7 @@ import { useLocation } from '@docusaurus/router';
 import { judgeHomePath } from '../../../utils/jsUtils';
 import TopNav from '../../../components/topNav';
 import Head from '@docusaurus/Head';
+import PdfDownloadButton from '../../../components/PdfDownloadButton';
 
 /**
  * Decide if the toc should be rendered, on mobile or desktop viewports
@@ -38,7 +39,7 @@ function useDocTOC() {
   };
 }
 
-export default function DocItemLayout({ children }: Props): JSX.Element {
+export default function DocItemLayout({ children }: Props): React.JSX.Element {
   const docTOC = useDocTOC();
   const { frontMatter } = useDoc();
 
@@ -69,6 +70,9 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
           <article>
             <DocBreadcrumbs />
             <DocVersionBadge />
+            <div className={styles.pdfButtonContainer}>
+              <PdfDownloadButton />
+            </div>
             {docTOC.mobile}
             <DocItemContent>{children}</DocItemContent>
             <DocItemFooter />
@@ -77,7 +81,7 @@ export default function DocItemLayout({ children }: Props): JSX.Element {
         </div>
         {!hideComment && <Comment />}
       </div>
-      <TopNav></TopNav>
+      <TopNav>{null}</TopNav>
       {docTOC.desktop && <div className="col col--3">{docTOC.desktop}</div>}
     </div>
   );