Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/manustays/eleventy-plugin-codepen-iframe
An 11ty plugin to embed CodePen pens in your posts using iFrame only (no Javascript)
https://github.com/manustays/eleventy-plugin-codepen-iframe
11ty 11ty-plugin eleventy eleventy-plugin
Last synced: 3 days ago
JSON representation
An 11ty plugin to embed CodePen pens in your posts using iFrame only (no Javascript)
- Host: GitHub
- URL: https://github.com/manustays/eleventy-plugin-codepen-iframe
- Owner: manustays
- Created: 2021-01-24T05:55:03.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2021-01-29T16:57:23.000Z (about 4 years ago)
- Last Synced: 2025-01-09T08:43:22.848Z (27 days ago)
- Topics: 11ty, 11ty-plugin, eleventy, eleventy-plugin
- Language: JavaScript
- Homepage: https://abhi.page/notes/11ty-plugin-codepen/
- Size: 8.79 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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](11ty.dev) 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 `` 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:
```bash
npm install --save-dev @manustays/eleventy-plugin-codepen-iframe
```
### STEP 2: Include it in your `.eleventy.js` config file:
```js
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:
```njk
{% 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](https://twitter.com/eleven_ty) for inspirations and learning and to [CodePen.io](https://codepen.io/) for makign this plugin possible!