Skip to content

Instantly share code, notes, and snippets.

@SummittDweller

SummittDweller/Wieting-Guild-in-Eleventy.md

Created February 19, 2023 04:14
Show Gist options
  • Save SummittDweller/eb67aa53b3ec3c1d78e1d47d04399ee5 to your computer and use it in GitHub Desktop.
Save SummittDweller/eb67aa53b3ec3c1d78e1d47d04399ee5 to your computer and use it in GitHub Desktop.
Download ZIP
Part 3 of Wietring-Guild.TamaToledo.com development
Raw
Wieting-Guild-in-Eleventy.md

wieting-guild-pages

Resources used in the creation of this site can be found in a OneTab at https://www.one-tab.com/page/iyQVdlpSRICO67Mue7Cb_Q. In particular, I found A Deep Dive Into Eleventy Static Site Generator to be especially helpful!

Changing Smol Eleventy Starter Content to wieting-guild-pages

The Smol Eleventy Starter project already has a collection of pages, and this site will initially need 4 such pages. Those 4 pages of content currently reside in https://github.com/SummittDweller/wieting-one-click-hugo-cms/tree/main/site/content/guild, and the pages are:

  • _index.md
  • 501c(3).md
  • assignments.md, and
  • guild.md

For starters I copied those four files into the ./src/pages/ directory here.

Note that the four original pages were written for Hugo layouts, so some template conversion will be necessary to post them in Eleventy.

Displaying Embedded PDFs

Notice that some of the new pages are intended to display .pdf content. The old shortcode responsible for that feature will need to be ported from wieting-one-click-hugo-cms and made to function in Eleventy.

Time for some research into how PDF's can be best embedded into Eleventy content... I found this:

The template content used to embed a PDF then looks like this:

{% pdfembed 'https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea-Brochure.pdf' %}

Properly Adding a Plugin to .eleventy.js

So, the initial contents of my .eleventy.js file was:

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/css/");
  eleventyConfig.addWatchTarget("./src/css/");

  eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);

  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

And I needed to add this:

const pluginPDFEmbed = require('eleventy-plugin-pdfembed');
module.exports = (eleventyConfig) => {
	// more stuff here
	eleventyConfig.addPlugin(pluginPDFEmbed, {
		key: '<YOUR CREDENTIAL KEY>'
	});
}

But, how and where? After a little research I tried this:

const pluginPDFEmbed = require('eleventy-plugin-pdfembed');

module.exports = function (eleventyConfig) {
  eleventyConfig.addPassthroughCopy("./src/css/");
  eleventyConfig.addWatchTarget("./src/css/");
  eleventyConfig.addShortcode("year", () => `${new Date().getFullYear()}`);
  eleventyConfig.addPlugin(pluginPDFEmbed, { key: '<YOUR CREDENTIAL KEY>' });

  return {
    dir: {
      input: "src",
      output: "public",
    },
  };
};

Woohoo! That syntax looks right, but of course I didn't get any PDF to display because my PDF path is all wrong AND I have yet to replace <YOUR CREDENTIAL KEY> above. It's late so that can wait until tomorrow.

How to Restart An Eleventy Site

So, I returned to this project today after a git add ., git commit ..., git push sequence last evening. Now my pdfembed plug-in isn't working locally. I wonder why that is? Probably because I didn't properly commit the effects of last night's npm i eleventy-plugin-pdfembed. So, how should I be doing that?

A quick search of the web turned up evidence of a --save option on the npm install command. The resource I found was What is the --save option for npm install. The explanation there makes perfect sense, so I'm going to run npm i eleventy-plugin-pdfembed --save now to see what happens...

╭─mark@Marks-Mac-Mini ~/GitHub/wieting-guild-pages ‹main*› 
╰─$ npm i eleventy-plugin-pdfembed --save

up to date, audited 354 packages in 613ms

19 packages are looking for funding
  run `npm fund` for details

7 vulnerabilities (2 moderate, 3 high, 2 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

Hmmm, there was no change in my package.json file, and when I look there I see that the pdfembed dependency was already there. I guess the missing link here is that I didn't npm run build yet? Bingo! That did the trick. So, my proper "restart" of the local site must include TWO commands:

  • npm run build
  • npm run start

Now, back to the problem at hand...

Resolving the PDF Path and Display

The pdfembed plug-in was written to take a full URL pointer to the PDF file, but I'd like to know if it works "locally" as well. So, Eleventy configuration also supports the notion of a passthrough directory as you can see in this line gleaned from our .eleventy.js file:

  eleventyConfig.addPassthroughCopy("./src/css/");

So, I think what I'll do is create a dedicated passthrough directory at ./src/static -- I chose this path because static is the default "passthrough" directory in Hugo -- and put my PDFs in a subdirectory there. To do this I'll add two more lines to our .eleventy.js file:

  eleventyConfig.addPassthroughCopy("./src/static/");
  eleventyConfig.addWatchTarget("./src/static/");

The second line above instructs the project to "keep watch" for changes in the contents of ./src/static, and rebuild the project when any changes are detected there.

Next, I'll create the ./src/static directory and a /pdfs directory beneath it, place copies of all my PDF files there, and experiment with pdfembed shortcode calls like this:

{% pdfembed '/pdfs/wieting-501c3.pdf' %}
{% pdfembed './pdfs/wieting-501c3.pdf' %}
{% pdfembed './static/pdfs/wieting-501c3.pdf' %}

Duh, none of this works. So, I did some inspection of the local site and found this:

This application domain (http://localhost:8080) is not authorized to use the provided PDF Embed API Client ID.

Well, of course, I haven't supplied a valid key for the .eleventy.js config line that reads eleventyConfig.addPlugin(pluginPDFEmbed, { key: '<YOUR CREDENTIAL KEY>' });!

The instructions in Eleventy Plugin: PDFEmbed leads to a free set of credentials link to set that up.

I setup an Adobe Developer account, created credentials, and tried again. Unfortunately, Adobe is telling me that the viewer needs to be updated, so I opened this GitHub issue to document my approach.

The package author very quickly addressed the issue and produced an updated main within just a couple of hours... AWESOME! So, based on guidance I found in Install NPM Packages from GitHub, I did npm i https://github.com/cfjedimaster/eleventy-plugin-pdfembed to update things locally and then gave it a test. It works! Beautimous!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment