From a973344b66abf7992ba59514679000ccde9dc26e Mon Sep 17 00:00:00 2001
From: Charlton Trezevant <ct@ctis.me>
Date: Sun, 5 Jun 2022 11:43:09 -0400
Subject: [PATCH 1/3] Move loading of pdf.js and CSS styles to a separate
 partial

---
 layouts/partials/embed-pdf-dependencies.html | 51 ++++++++++++++++++++
 1 file changed, 51 insertions(+)
 create mode 100644 layouts/partials/embed-pdf-dependencies.html

diff --git a/layouts/partials/embed-pdf-dependencies.html b/layouts/partials/embed-pdf-dependencies.html
new file mode 100644
index 0000000..4cbf151
--- /dev/null
+++ b/layouts/partials/embed-pdf-dependencies.html
@@ -0,0 +1,51 @@
+    {{ if .HasShortcode "embed-pdf" }}
+    <script type="text/javascript" src='{{"/" | relURL}}/js/pdf-js/build/pdf.js'></script>
+
+    <style>
+        /* PDF embed shortcode */
+        .pdf-canvas {
+          border: 1px solid black;
+          direction: ltr;
+          width: 100%;
+          height: auto;
+          display: none;
+        }
+
+        .pdf-paginator {
+          display: none;
+          text-align: center;
+          margin-top: 10px;
+          margin-bottom: 10px;
+        }
+
+        .pdf-source {
+          margin-left: 10px;
+        }
+
+        .pdf-loadingWrapper {
+          display: none;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 350px;
+        }
+
+        .pdf-loading {
+          display: inline-block;
+          width: 50px;
+          height: 50px;
+          border: 3px solid #d2d0d0;;
+          border-radius: 50%;
+          border-top-color: #383838;
+          animation: pdf-spin 1s ease-in-out infinite;
+          -webkit-animation: spin 1s ease-in-out infinite;
+        }
+
+        @keyframes pdf-spin {
+          to { -webkit-transform: rotate(360deg); }
+        }
+        @-webkit-keyframes pdf-spin {
+          to { -webkit-transform: rotate(360deg); }
+        }
+    </style>
+    {{ end }}

From 6d00f04f9ff4b1ee18c78dea0367263404f075cd Mon Sep 17 00:00:00 2001
From: Charlton Trezevant <ct@ctis.me>
Date: Sun, 5 Jun 2022 11:48:41 -0400
Subject: [PATCH 2/3] Enables multiple PDF embeds by appending a unique ID to
 each shortcode instance's elements.

Migrates JS initialization of the viewer to an IIFE rather than using window.onload.

Moves pagination controls underneath the PDF image and adds a link to the original document. This link will also appear for users with JavaScript disabled.
---
 layouts/shortcodes/embed-pdf.html | 356 +++++++++++++-----------------
 1 file changed, 159 insertions(+), 197 deletions(-)

diff --git a/layouts/shortcodes/embed-pdf.html b/layouts/shortcodes/embed-pdf.html
index e977f03..966b8bf 100644
--- a/layouts/shortcodes/embed-pdf.html
+++ b/layouts/shortcodes/embed-pdf.html
@@ -1,204 +1,166 @@
-<script type="text/javascript" src= '{{"/" | relURL}}/js/pdf-js/build/pdf.js'></script>
-<style>
-#the-canvas {
-  border: 1px solid black;
-  direction: ltr;
-  width: 100%;
-  height: auto;
-  display: none;
-}
-
-#paginator {
-  display: none;
-  text-align: center;
-  margin-bottom: 10px;
-}
-
-#loadingWrapper {
-  display: none;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 350px;
-}
-
-#loading {
-  display: inline-block;
-  width: 50px;
-  height: 50px;
-  border: 3px solid #d2d0d0;;
-  border-radius: 50%;
-  border-top-color: #383838;
-  animation: spin 1s ease-in-out infinite;
-  -webkit-animation: spin 1s ease-in-out infinite;
-}
-
-@keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-@-webkit-keyframes spin {
-  to { -webkit-transform: rotate(360deg); }
-}
-</style>
-
-<div id="paginator">
-    <button id="prev">Previous</button>
-    <button id="next">Next</button>
-    &nbsp; &nbsp;
-    <span>Page: <span id="page_num"></span> / <span id="page_count"></span></span>
-</div>
-<div id="embed-pdf-container">
-    <div id="loadingWrapper">
-      <div id="loading"></div>
+<div class="embed-pdf-container" id="embed-pdf-container-{{ substr (.Get "url" | md5) 0 8 }}">
+    <div class="pdf-loadingWrapper" id="pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}">
+        <div class="pdf-loading" id="pdf-loading-{{ substr (.Get "url" | md5) 0 8 }}"></div>
     </div>
-    <canvas id="the-canvas"></canvas>
+    <canvas class="pdf-canvas" id="pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}"></canvas>
+</div>
+
+<div class="pdf-paginator" id="pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}">
+    <button id="pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}">Previous</button>
+    <button id="pdf-next-{{ substr (.Get "url" | md5) 0 8 }}">Next</button> &nbsp; &nbsp;
+    <span>
+      <span class="pdf-pagenum" id="pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}"></span> / <span class="pdf-pagecount" id="pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}"></span>
+    </span>
+    <a class="pdf-source" id="pdf-source-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">[pdf]</a>
 </div>
 
+<noscript>
+View the PDF file <a class="pdf-source" id="pdf-source-noscript-{{ substr (.Get "url" | md5) 0 8 }}" href="{{ .Get "url" }}">here</a>.
+</noscript>
+
 <script type="text/javascript">
-window.onload = function() {
-// If absolute URL from the remote server is provided, configure the CORS
-// header on that server.
-var url = "{{.Site.BaseURL}}" + '{{ .Get "url" }}';
-
-var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
-var hideLoader = "{{ .Get "hideLoader" }}" === "true";
-var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
-
-// Loaded via <script> tag, create shortcut to access PDF.js exports.
-var pdfjsLib = window['pdfjs-dist/build/pdf'];
-
-// The workerSrc property shall be specified.
-pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + '/js/pdf-js/build/pdf.worker.js';
-
-// Change the Scale value for lower or higher resolution.
-var pdfDoc = null,
-    pageNum = selectedPageNum,
-    pageRendering = false,
-    pageNumPending = null,
-    scale = 3,
-    canvas = document.getElementById('the-canvas'),
-    ctx = canvas.getContext('2d'),
-    paginator = document.getElementById("paginator"),
-    loadingWrapper = document.getElementById('loadingWrapper');
-
-
-// Attempt to show paginator and loader if enabled
-showPaginator();
-showLoader();
-
-/**
- * Get page info from document, resize canvas accordingly, and render page.
- * @param num Page number.
- */
-function renderPage(num) {
-  pageRendering = true;
-  // Using promise to fetch the page
-  pdfDoc.getPage(num).then(function(page) {
-    var viewport = page.getViewport({scale: scale});
-    canvas.height = viewport.height;
-    canvas.width = viewport.width;
-
-    // Render PDF page into canvas context
-    var renderContext = {
-      canvasContext: ctx,
-      viewport: viewport
-    };
-    var renderTask = page.render(renderContext);
-
-    // Wait for rendering to finish
-    renderTask.promise.then(function() {
-      pageRendering = false;
-      showContent();
-      
-      if (pageNumPending !== null) {
-        // New page rendering is pending
-        renderPage(pageNumPending);
-        pageNumPending = null;
+    (function(){
+    var url = '{{ .Get "url" }}';
+
+    var hidePaginator = "{{ .Get "hidePaginator" }}" === "true";
+    var hideLoader = "{{ .Get "hideLoader" }}" === "true";
+    var selectedPageNum = parseInt("{{ .Get "renderPageNum" }}") || 1;
+
+    // Loaded via <script> tag, create shortcut to access PDF.js exports.
+    var pdfjsLib = window['pdfjs-dist/build/pdf'];
+
+    // The workerSrc property shall be specified.
+    if(pdfjsLib.GlobalWorkerOptions.workerSrc == '')
+      pdfjsLib.GlobalWorkerOptions.workerSrc = "{{.Site.BaseURL}}" + '/pub/js/pdfjs/build/pdf.worker.js';
+
+    // Change the Scale value for lower or higher resolution.
+    var pdfDoc = null,
+        pageNum = selectedPageNum,
+        pageRendering = false,
+        pageNumPending = null,
+        scale = 3,
+        canvas = document.getElementById('pdf-canvas-{{ substr (.Get "url" | md5) 0 8 }}'),
+        ctx = canvas.getContext('2d'),
+        paginator = document.getElementById("pdf-paginator-{{ substr (.Get "url" | md5) 0 8 }}"),
+        loadingWrapper = document.getElementById('pdf-loadingWrapper-{{ substr (.Get "url" | md5) 0 8 }}');
+
+
+    // Attempt to show paginator and loader if enabled
+    showPaginator();
+    showLoader();
+
+    /**
+     * Get page info from document, resize canvas accordingly, and render page.
+     * @param num Page number.
+     */
+    function renderPage(num) {
+      pageRendering = true;
+      // Using promise to fetch the page
+      pdfDoc.getPage(num).then(function(page) {
+        var viewport = page.getViewport({scale: scale});
+        canvas.height = viewport.height;
+        canvas.width = viewport.width;
+
+        // Render PDF page into canvas context
+        var renderContext = {
+          canvasContext: ctx,
+          viewport: viewport
+        };
+        var renderTask = page.render(renderContext);
+
+        // Wait for rendering to finish
+        renderTask.promise.then(function() {
+          pageRendering = false;
+          showContent();
+
+          if (pageNumPending !== null) {
+            // New page rendering is pending
+            renderPage(pageNumPending);
+            pageNumPending = null;
+          }
+        });
+      });
+
+      // Update page counters
+      document.getElementById('pdf-pagenum-{{ substr (.Get "url" | md5) 0 8 }}').textContent = num;
+    }
+
+    /**
+     * Hides loader and shows canvas
+     */
+    function showContent() {
+      loadingWrapper.style.display = 'none';
+      canvas.style.display = 'block';
+    }
+
+    /**
+     * If we haven't disabled the loader, show loader and hide canvas
+     */
+    function showLoader() {
+      if(hideLoader) return
+      loadingWrapper.style.display = 'flex';
+      canvas.style.display = 'none';
+    }
+
+    /**
+     * If we haven't disabled the paginator, show paginator
+     */
+    function showPaginator() {
+      if(hidePaginator) return
+      paginator.style.display = 'block';
+    }
+
+    /**
+     * If another page rendering in progress, waits until the rendering is
+     * finished. Otherwise, executes rendering immediately.
+     */
+    function queueRenderPage(num) {
+      if (pageRendering) {
+        pageNumPending = num;
+      } else {
+        renderPage(num);
+      }
+    }
+
+    /**
+     * Displays previous page.
+     */
+    function onPrevPage() {
+      if (pageNum <= 1) {
+        return;
+      }
+      pageNum--;
+      queueRenderPage(pageNum);
+    }
+    document.getElementById('pdf-prev-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onPrevPage);
+
+    /**
+     * Displays next page.
+     */
+    function onNextPage() {
+      if (pageNum >= pdfDoc.numPages) {
+        return;
+      }
+      pageNum++;
+      queueRenderPage(pageNum);
+    }
+    document.getElementById('pdf-next-{{ substr (.Get "url" | md5) 0 8 }}').addEventListener('click', onNextPage);
+
+    /**
+     * Asynchronously downloads PDF.
+     */
+    pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
+      pdfDoc = pdfDoc_;
+      var numPages = pdfDoc.numPages;
+      document.getElementById('pdf-pagecount-{{ substr (.Get "url" | md5) 0 8 }}').textContent = numPages;
+
+      // If the user passed in a number that is out of range, render the last page.
+      if(pageNum > numPages) {
+        pageNum = numPages
       }
-    });
-  });
-
-  // Update page counters
-  document.getElementById('page_num').textContent = num;
-}
-
-/**
- * Hides loader and shows canvas
- */
-function showContent() {
-  loadingWrapper.style.display = 'none';
-  canvas.style.display = 'block';
-}
-
-/**
- * If we haven't disabled the loader, show loader and hide canvas
- */
-function showLoader() {
-  if(hideLoader) return
-  loadingWrapper.style.display = 'flex';
-  canvas.style.display = 'none';
-}
-
-/**
- * If we haven't disabled the paginator, show paginator
- */
-function showPaginator() {
-  if(hidePaginator) return
-  paginator.style.display = 'block';
-}
-
-/**
- * If another page rendering in progress, waits until the rendering is
- * finished. Otherwise, executes rendering immediately.
- */
-function queueRenderPage(num) {
-  if (pageRendering) {
-    pageNumPending = num;
-  } else {
-    renderPage(num);
-  }
-}
-
-/**
- * Displays previous page.
- */
-function onPrevPage() {
-  if (pageNum <= 1) {
-    return;
-  }
-  pageNum--;
-  queueRenderPage(pageNum);
-}
-document.getElementById('prev').addEventListener('click', onPrevPage);
-
-/**
- * Displays next page.
- */
-function onNextPage() {
-  if (pageNum >= pdfDoc.numPages) {
-    return;
-  }
-  pageNum++;
-  queueRenderPage(pageNum);
-}
-document.getElementById('next').addEventListener('click', onNextPage);
-
-/**
- * Asynchronously downloads PDF.
- */
-pdfjsLib.getDocument(url).promise.then(function(pdfDoc_) {
-  pdfDoc = pdfDoc_;
-  var numPages = pdfDoc.numPages;
-  document.getElementById('page_count').textContent = numPages;
-  
-  // If the user passed in a number that is out of range, render the last page.
-  if(pageNum > numPages) {
-    pageNum = numPages
-  }
-
-  // Initial/first page rendering
-  renderPage(pageNum);
-});
-}
 
+      // Initial/first page rendering
+      renderPage(pageNum);
+    });
+    })();
 </script>

From 195431ffd7a45341595537a63039076c85ba6a50 Mon Sep 17 00:00:00 2001
From: Charlton Trezevant <ct@ctis.me>
Date: Sun, 5 Jun 2022 11:49:01 -0400
Subject: [PATCH 3/3] Update README with instructions on how to install the
 dependencies partial

---
 README.md | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 0cec7ca..39f060e 100644
--- a/README.md
+++ b/README.md
@@ -44,7 +44,23 @@ cp ./layouts/shortcodes/embed-pdf.html /path/to/your/hugo/website/layouts/shortc
 ```  
 <br />
 
-3. Copy the pdf.js library files from `./static/js/pdf-js` to `./static/js` in your Hugo website directory.  
+3. Copy the file `./layouts/partials/embed-pdf-dependencies.html` to  `./layouts/partials` in your Hugo website directory.
+<br />
+
+```shell
+cp ./layouts/partials/embed-pdf-dependencies.html /path/to/your/hugo/website/layouts/partials
+```
+<br />
+
+4. Add the `embed-pdf-dependencies.html` partial to your theme.
+
+You'll want to add the following line to a layout in your `partials` directory responsible for generating the `<head>` section of your blog. This will include the JavaScript dependencies and CSS styles for the `hugo-embed-pdf` shortcode exactly once on pages that use it.
+
+```
+{{ partial "embed-pdf-dependencies.html" . }}
+```
+
+5. Copy the pdf.js library files from `./static/js/pdf-js` to `./static/js` in your Hugo website directory.
 <br />
 
 **Note:** If you do not have a `./static/js` directory you can create it.