@manustays/eleventy-plugin-codepen-iframe

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

Usage no npm install needed!

<script type="module">
  import manustaysEleventyPluginCodepenIframe from 'https://cdn.skypack.dev/@manustays/eleventy-plugin-codepen-iframe';
</script>

README

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!