pdf: add ability to display PDF files in pages

[McShelby]

https://github.com/anvithks/hugo-embed-pdf-shortcode seems to be a good start.

Things to keep in mind:

• support configurable ranges
• option to display with paginator or all pages of the range at once
• may be same options by seperatly for print?
• translation
• use Fontawesome icons and visuals similar to images or Mermaid graphs for control buttons

[abhiraj-bibhar]

I feel Embedpdf will be best to use in this case.

<div id="pdf-viewer" style="height: 500px"></div>
<script async type="module">
  import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';

  const EPDFinstance = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: 'https://snippet.embedpdf.com/ebook.pdf'
  }) 
</script>

If user wants to use the default Embedpdf and use their cdn then this can be a single shortcode file embedpdf.html

<div id="pdf-viewer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"></div>

<script async type="module">
  import EmbedPDF from 'https://snippet.embedpdf.com/embedpdf.js';

  const EPDFinstance = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: '{{ .Get "src" | safeJS }}',
    worker: false
  });
</script>

in the markdown files

---
description: "The Elements of Style"
title: " The Elements of Style"
weight: 20

params:
 menuPre: 
---

{{< embedpdf src="/The-Elements-of-Style.pdf" >}}

And if they don't want to depend on cdn they can use the following shortcode but in this they have to keep the js, wasm files from the snippet collection of EmbedPdf in the static folder. If we will distribute it with the theme we have to build it from source. and user has to rebuilt if they want specific UI Modification or Want to disable certain function i.e Download, OpenFiles, Print Options.

<div id="pdf-viewer" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none;"></div>

<script async type="module">
  import EmbedPDF from '{{ "embedpdf/embedpdf.js" | relURL | safeJS }}';

  const EPDFinstance = EmbedPDF.init({
    type: 'container',
    target: document.getElementById('pdf-viewer'),
    src: '{{ .Get "src" | safeJS }}',
    worker: false
  });
</script>

[McShelby]

This is not an easy feature and as I personally don't have this requirement anymore, I will not implement it in the foreseeable future.