How to Embed PDFs in Blog Posts

This blog post demonstrates how to embed PDF documents directly in your blog posts using the custom PDF viewer component.

Using the PDF Viewer

To add a PDF to your blog post, follow these steps:

1. Place your PDF file in the static/pdfs/ directory
2. Import the PdfViewer component at the top of your MDX file
3. Use the component with the path to your PDF

Example Usage

import PdfViewer from '@site/src/components/PdfViewer';

<PdfViewer
  file="/pdfs/your-document.pdf"
  title="Your Document Title"
/>

Features

The PDF viewer includes:

• Page Navigation: Navigate through multiple pages with Previous/Next buttons
• Zoom Controls: Zoom in, zoom out, or reset to default view
• Download Option: Direct download button for users who want to save the PDF
• Responsive Design: Works on both desktop and mobile devices
• Text Selection: Select and copy text directly from the PDF

Example PDF

Below is an example of how a PDF appears in your blog post. Once you add your own PDF file to static/pdfs/, you can replace this path:

<PdfViewer
  file="/pdfs/sample.pdf"
  title="Sample PDF Document"
/>

tip

To add your own PDFs:

1. Create the directory: static/pdfs/
2. Place your PDF files there (e.g., static/pdfs/my-document.pdf)
3. Reference them in your blog posts as /pdfs/my-document.pdf

Technical Details

This PDF viewer is built using:

• react-pdf: A React wrapper for Mozilla's PDF.js library
• PDF.js: Powerful PDF rendering engine
• Docusaurus MDX: Allows using React components in markdown

The viewer is fully integrated with Docusaurus's theme system, so it automatically adapts to light and dark modes.