# Show a pdf file in a static site based on Hugo


## Target
You published your static site with Jamstack framework, especially with HUGO technology, and now you need to load a pdf reader in a page?

Searching around you will find excellent paid or subscription-required readers, such as the one from [Adobe.com](https://adobe.com), but for my purposes I decided to implement a totally free solution.

## Native method
Modern browsers have potential that would have been unimaginable a few years ago. Today in fact (excluding the old Microsoft Internet Explorer) it is possible to exploit an html tag to allow the browser to automatically download and display a pdf file within a static page.
### Definition of the shortcode
To do this with HUGO technology, just use the **shortcode** component. In practice we have to define an html template for our HUGO compiler to use and load on request in our .md files (further details on the [Official Documentation](https://gohugo.io/content-management/shortcodes/)).

The shortcode must be defined in layouts/shortcodes/pdfReader.html 
```html
<embed src= "{{ .Get 0 }}" width= "100%" height= "1000px" type="application/pdf" >
```
{{< admonition Note "Note" >}}
In this case I have set the width and height in a fixed manner, nothing prevents the use of parameters also for these values, for example with width="{{ .Get 1}}".
{{< /admonition >}}

The src property, which indicates the source of the file, is passed as a parameter of the shortcode. For convenience we can add the file in the same folder as the .md file that will call it, this way we won't have to worry about relative paths.

### Call the shortcode from the page

To recall the "test.pdf" file found in the same folder as the article in markdown .md format, just use the code:

{{< highlight markdown >}}
{{</* pdfReader "prova.pdf" */>}}
{{< /highlight >}}

### Demo
Here is the result:
{{< pdfReader "prova.pdf" >}}

{{< admonition Note "Warning" >}}
Using this approach the file will be easily downloadable for site visitors. In fact, it will be enough to open the developer console of the browser to intercept the download of the file in the "Network" tab.
{{< /admonition >}}


## Google Drive Method
If you need to discourage any download of the file and make the file available for viewing only within the page, you can use the viewer in the "embedded" version of Google Drive.
There's another reason to use Google Drive viewer, because of limitations on the smartphone's browsers that are not able to load native pdf viewer. 

### Upload to Google Drive and Sharing Link
We upload the file to Google Drive and request a sharing link that allows anyone in possession of the link to view the file without changing it.

{{< figure src="google_drive_link.png" >}}

To avoid the possibility of downloading the pdf file it is essential to go to the sharing settings and deselect the last tick:

{{< figure src="google_drive_autorizzazioni.png" >}}

### Definition of the shortcode
The shortcode must be defined in layouts/shortcodes/googlePdfReader.html:

```html
<!DOCTYPE html>
<html>
  <head>
    <title>{{ .Get 1 }}</title>
    <meta charset="UTF-8" />
  </head>
  <body>
    <div id="app">
      <iframe
        src="https://drive.google.com/file/d/{{ .Get 0 }}/preview"
        width="100%"
        height="1000">
      </iframe>
    </div>
  </body>
</html>
```
{{< admonition Note "Note" >}}
In this case I have set the width and height in a fixed way, nothing prevents the use of parameters for these values too, for example with width="{{ .Get 2}}".
{{< /admonition >}}

### Call the shortcode from the page
Using the Google Drive reader it is not necessary to upload the pdf file within the site, as the only link to upload the reader will be the id within the sharing link.

{{< admonition Note "Id of the file" >}}
The file ID must be retrieved from the Google Drive share link. For example, given the link: https://drive.google.com/file/d/**12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl**/view?usp=sharing, the file's id will be **12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl**
{{< /admonition >}}

Within the page in markdown .md format we call the reader in this way:
{{< highlight markdown >}}
{{</* googlePdfReader "id-del-file" "Title" */>}}
{{< /highlight >}}


### Demo
Here is the result:
{{< googlePdfReader "12-yRg6VlVeUrNjioD8rGEybMHh_AMPTl" "Title" >}}

## Conclusions
In this article we have seen 2 fast and free methods to display a pdf file within a static page of a HUGO site. In the native method there will be no need to use a file uploaded to Google Drive, on the other hand however it will easily allow any visitor to download the pdf file and you can have issues opening the page from smartphones. 

## Extra - Display shortcode as source code
While writing this article, I ran into a problem with displaying the shortcode code within the article itself.
Inserting the string {{</* shortcode */>}} in the text or in a source code box of a Hugo page will not have the desired result, as the site compiler will replace the code with the relative declared template. To show the code as it is and inhibit the substitution you will need to insert some characters to comment the shortcode like this:
{{< highlight markdown >}}
{{</*/* googlePdfReader "id-del-file" "Title" */*/>}}
{{< /highlight >}}