@manustays/eleventy-plugin-codepen-iframe

2.0.1 • Public • Published

Eleventy Plugin to Embed CodePen.io Pens (using iFrame)

Embed CodePen.io Pens into your 11ty website by using a ShortCode. It directly embeds an iFrame for efficiency (without loading CodePen's Javascript).

Yet another 11ty plugin to embed CodePens into you pages. The other plugins that I had seen use CodePen's preferred Javascript based embeds. It requires loading an external Javascript (though, a small one) into your page. The Javascript finally creates an <iframe> anyway!

I wanted a more efficient solution for my blog by directly embedding the Pen's iFrame; therefore this plugin.

Usage

STEP 1: Install the plugin:

npm install --save-dev @manustays/eleventy-plugin-codepen-iframe

STEP 2: Include it in your .eleventy.js config file:

const embedCodePen = require("@manustays/eleventy-plugin-codepen-iframe");

module.exports = (eleventyConfig) => {
	eleventyConfig.addPlugin(embedCodePen, {
		tabs: "js,result",
		user: "manustays"
	});
};

STEP 3 – Use it in your templates:

{% CodePen "pen-url" %}

Config Options

These options set the default values for embedded Pens. They can be overridden while embedding individual Pens.

Option Type Default Description
tabs string "result" Default comma-separated string of the tabs of the codepen to display
height number 300 Default height of Pen iFrames
width string "100%" Default width of Pen iFrames
theme string "dark" Default theme for all Pens
user string "" CodePen user-id to use if only Pen-id is provided
class string "codepen" CSS classes to add to the iFrame

Credits

Huge shout-out to the awesome 11ty community for inspirations and learning and to CodePen.io for makign this plugin possible!

Package Sidebar

Install

npm i @manustays/eleventy-plugin-codepen-iframe

Weekly Downloads

4

Version

2.0.1

License

ISC

Unpacked Size

4.91 kB

Total Files

3

Last publish

Collaborators

  • manustays