{"id":15016594,"url":"https://github.com/kevingimbel/eleventy-plugin-codepen","last_synced_at":"2025-10-03T14:35:46.045Z","repository":{"id":57124510,"uuid":"332308474","full_name":"KevinGimbel/eleventy-plugin-codepen","owner":"KevinGimbel","description":"Plugin that provides a custom shortcode for embedding CodePen.io pens","archived":false,"fork":false,"pushed_at":"2021-01-23T23:01:15.000Z","size":9,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-07-17T15:27:19.322Z","etag":null,"topics":["11ty-plugin","eleventy-plugin"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/@kevingimbel/eleventy-plugin-codepen","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/KevinGimbel.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-01-23T21:10:05.000Z","updated_at":"2022-08-13T15:26:52.000Z","dependencies_parsed_at":"2022-08-31T08:11:41.256Z","dependency_job_id":null,"html_url":"https://github.com/KevinGimbel/eleventy-plugin-codepen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"5t3ph/eleventy-plugin-template","purl":"pkg:github/KevinGimbel/eleventy-plugin-codepen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-codepen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-codepen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-codepen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-codepen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/KevinGimbel","download_url":"https://codeload.github.com/KevinGimbel/eleventy-plugin-codepen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/KevinGimbel%2Feleventy-plugin-codepen/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265866109,"owners_count":23840936,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["11ty-plugin","eleventy-plugin"],"created_at":"2024-09-24T19:49:07.206Z","updated_at":"2025-10-03T14:35:45.965Z","avatar_url":"https://github.com/KevinGimbel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-codepen\n\u003e Embed CodePen.io Pens into your eleventy website\n\n\u003c!-- BEGIN mktoc --\u003e\n- [Usage](#usage)\n  - [Install via npm](#install-via-npm)\n  - [Load the plugin in .eleventy.js](#load-the-plugin-in-eleventyjs)\n  - [Load the CodePen javascript library](#load-the-codepen-javascript-library)\n  - [Use the shortcode!](#use-the-shortcode)\n- [Config Options](#config-options)\n  - [Overwriting options inline](#overwriting-options-inline)\n- [Credits](#credits)\n\u003c!-- END mktoc --\u003e\n\n## Usage\n\n### Install via npm\n\n\n```bash\nnpm install @kevingimbel/eleventy-plugin-codepen --save\n```\n\n### Load the plugin in .eleventy.js\n\nInclude it in your .eleventy.js config file:\n```js\nconst codepenEmbed = require(\"@kevingimbel/eleventy-plugin-codepen\");\n\nmodule.exports = (eleventyConfig) =\u003e {\n  eleventyConfig.addPlugin(codepenEmbed);\n};\n```\n\n### Load the CodePen javascript library\n\nThe embed requires the CodePen JavaScript library to work. For convenience the library can be loaded with a shortcode. This is best done near the closing body tag and only needs to be done once!\n\n```html\n...\n{% codepen_js %}\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Use the shortcode!\n\nThe only required arguments is the CodePen full URL of the Pen or the \"slug\". This is the random letters in the URL, for example the Pen https://codepen.io/kevingimbel/pen/LXxoEL has the slug \"LXxoEL\".\n\nIt is up to you what you want to specify, although the full URL may be more future proof (e.g. if you want to replace this Plugin with a plugin that prints the URL instead of creating an embed.).\n\n```\n{% codepen \"https://codepen.io/kevingimbel/pen/LXxoEL\" %}\n```\n\n## Config Options\n\nAll of these can be set in the `.eleventy.js` config as well as inline (see below).\n\n| Option      | Type | Default       | Comment | \n| ----------- | ---- | ------------- | ------- | \n| height | Number | 256 | The height of the embed iframe | \n| theme | String | dark | Free codepen users can use `light` or `dark`, CodePen Pro users may use additional themes | \n| tabs | String | result | possible values: `html`, `css`, `js`, `result`. Combine with comma like `html,result` |\n| user | String | Captain Anonymous | name of the user who created the pen |\n| title | String | Unknown Pen | The title of the pen, used when embed can't be rendered |\n| preview | Boolean | true | If true, shows a \"run pen\" button instead of automatically running code |\n| editable | Boolean | false | Makes pen editable, requires CodePen Pro |\n\n### Overwriting options inline\n\nAll options can also be overwritten \"inline\" when the shortcode is used. Because 11ty doesn't support names parameters, and there are quite a lot of options, all options are specified in one string. \n\nThe config string is split at each semicolon (`;`) and each colon (`:`) to create key-value pairs, as shown in the following table\n\n| Option String | Parsed object |\n| ------------- | ------------- |\n|`tabs:html,result;title:single-div Link from Legend of Zelda`| `{tabs: \"html,result\", title: \"single-div Link from Legend of Zelda\" }` |\n\nSetting all options looks like:\n\n```\n\"height:256;theme:dark;tabs:result;user:Captain Anonymous;title:Unknown Pen;preview: true;editable: false\"\n```\n\n## Credits\n\n- Huge thanks to [CodePen.io](https://codepen.io/) for providing a great embed script. This plugin is only a wrapper around the existing functionality.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevingimbel%2Feleventy-plugin-codepen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkevingimbel%2Feleventy-plugin-codepen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkevingimbel%2Feleventy-plugin-codepen/lists"}