npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@cagov/11ty-serverless-preview-mode

v1.0.12

Published

Serverless rendering of a single 11ty page using Wordpress API data

Downloads

15

Readme

Eleventy serverless preview mode

Render a single 11ty page using data from your Wordpress API endpoint.

If you have content in Wordpress for your Eleventy (11ty) site, you can create a Function as a Service (FaaS) function that will render Wordpress content without having to save it anywhere (serverless).

Features

  • Single-page 11ty rendering of content retrieved from your Wordpress API data source.
  • Digest page for all pages that match a specific Wordpress tag ID.
  • Easy Azure FaaS integration

User experience

  1. Content editor edits and saves a Wordpress post.
  2. Content editor navigates to the preview mode endpoint.
  3. Content editor selects a post from the list of preview ready posts.
  4. Content editor views fully rendered content.

Sample navigation

  • https://[my-function-url]/ - Digest page. Display a list of the most recently updates posts (up to 100). Can also be set to filter for a specific tag (ex preview).
  • https://[my-function-url]/myfile.jpg - Resource request. Will download and then make available by proxy content from the main site (https://[real-url]/myfile.jpg). This allows for CSS and other content can be sent to the browser as relative links.
  • https://[my-function-url]/my-slug - Render requests. Will render the page using 11ty with Wordpress content from post that matches the slug.

Assumptions

  • End users are using Wordpress to edit content.
  • Your project is using wordpress-to-github (Coming soon) or similiar tool for deploying Wordpress content to an 11ty project.

Eleventy setup

Use your existing 11ty build to provide all the template work required to render your preview.

This package requires functionality available in Eleventy v1.0.0 - https://www.11ty.dev/docs/plugins/serverless/

Preview mode page template

Define a page in your 11ty input templates to customize how your pages are rendered.

Add this to your 11ty input folder (ex. pages) with the .njk extention (ex. previewModePage.njk).

pages\previewModePage.njk

---js
require("@cagov/11ty-serverless-preview-mode").previewModeNjkHeader
---

Connecting to the 11ty configuration

Connect the 11ty build to the handler service. At build time, an auto generated folder called preview-mode-auto-generated will be created.

.eleventy.js

const { addPreviewModeToEleventy } = require("@cagov/11ty-serverless-preview-mode");

/**
 * @type {import('@cagov/11ty-serverless-preview-mode').WordpressSettingFunction}
 */
const itemSetterCallback = (item, jsonData) => {
  let featuredMedia = jsonData._embedded["wp:featuredmedia"];

  //Customize for your templates
  item.data.layout = 'page.njk';
  item.data.tags = ['news'];
  item.data.addtositemap = false;
  item.data.title = jsonData.title.rendered;
  item.data.publishdate = jsonData.date.split('T')[0]; //new Date(jsonData.modified_gmt)
  item.data.meta = jsonData.excerpt.rendered;
  item.data.description = jsonData.excerpt.rendered;
  item.data.lead = jsonData.excerpt.rendered;
  item.data.author = jsonData._embedded.author[0].name;
  item.data.previewimage = featuredMedia ? featuredMedia[0].source_url : "img/thumb/APIs-Blog-Postman-Screenshot-1.jpg";

  item.template.frontMatter.content += jsonData.content.rendered;
}

module.exports = function(eleventyConfig) {
  addPreviewModeToEleventy(eleventyConfig, itemSetterCallback);
  //...
}

Git ignore

When your run your 11ty build locally, you don't want to save the generated output (preview-mode-auto-generated) to your repo.

.gitignore

# 11ty serverless generated folder
/preview-mode-auto-generated

Setting up with Azure Function as a Service (FaaS)

Using Azure FaaS, the service can render posts from remote content, while redirecting all other resource requests (.css, .png, etc) back to the real web server. Any request without ?postid= will be considered a forwarded resource request. Requests without any path will render a digest page showing all the available preview pages that match a tag id.

Azure function source

The package has a complete handler for Azure FaaS - azureFunctionHandler. Include the url for your live web site to allow resource request forwarding.

yourFunction\index.js

const { azureFunctionHandler } = require("@cagov/11ty-serverless-preview-mode");

/** @type {import('@cagov/11ty-serverless-preview-mode').WordpressSettings} */
const wordpressSettings = {
  wordPressSite: "https://live-odi-content-api.pantheonsite.io", //Wordpress endpoint
  resourceUrl: "https://digital.ca.gov", //host for resource content redirects
  previewWordPressTagSlug: 'preview-mode' // optional filter for digest list of preview in Wordpress
}

module.exports = async function (context) {
  await azureFunctionHandler(context, wordpressSettings);
}

yourFunction\function.json

Trap ALL routes for your functions to support resource forwarding. Set route like this...

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": [
        "get"
      ],
      "route": "{*routes}"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

host.json

Set routePrefix to blank in the host.json file in your Azure function project root.

{
  "extensions": {
      "http": {
          "routePrefix": ""
      }
  }
}

References

This package is available on NPM at https://www.npmjs.com/package/@cagov/11ty-serverless-preview-mode