Serverless rendering of a single 11ty page using Wordpress API data
MIT License
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).
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.wordpress-to-github
(Coming soon) or similiar tool for deploying Wordpress content to an 11ty project.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/
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
---
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);
//...
}
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
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.
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": ""
}
}
}
This package is available on NPM at https://www.npmjs.com/package/@cagov/11ty-serverless-preview-mode