{"id":15059313,"url":"https://github.com/aloskutov/eleventy-plugin-codepen","last_synced_at":"2026-01-31T13:25:46.936Z","repository":{"id":43354810,"uuid":"434161749","full_name":"aloskutov/eleventy-plugin-codepen","owner":"aloskutov","description":"Just another eleventy codepen plugin.","archived":false,"fork":false,"pushed_at":"2026-01-22T03:26:25.000Z","size":394,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-01-22T16:58:52.613Z","etag":null,"topics":["11ty","codepen","eleventy","plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/aloskutov.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2021-12-02T09:41:24.000Z","updated_at":"2026-01-22T03:26:22.000Z","dependencies_parsed_at":"2024-06-19T09:27:16.178Z","dependency_job_id":null,"html_url":"https://github.com/aloskutov/eleventy-plugin-codepen","commit_stats":{"total_commits":102,"total_committers":3,"mean_commits":34.0,"dds":0.02941176470588236,"last_synced_commit":"529dcc5ccba9c3a2a7cffc89691f42fa935003a4"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/aloskutov/eleventy-plugin-codepen","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-codepen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-codepen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-codepen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-codepen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/aloskutov","download_url":"https://codeload.github.com/aloskutov/eleventy-plugin-codepen/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/aloskutov%2Feleventy-plugin-codepen/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28944477,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-31T13:02:32.153Z","status":"ssl_error","status_checked_at":"2026-01-31T13:00:07.528Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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","codepen","eleventy","plugin"],"created_at":"2024-09-24T22:41:05.215Z","updated_at":"2026-01-31T13:25:46.928Z","avatar_url":"https://github.com/aloskutov.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# eleventy-plugin-codepen\n![npm](https://img.shields.io/npm/v/@aloskutov/eleventy-plugin-codepen)\n![npms.io (quality)](https://img.shields.io/npms-io/maintenance-score/@aloskutov/eleventy-plugin-codepen)\n![npms.io (quality)](https://img.shields.io/npms-io/quality-score/@aloskutov/eleventy-plugin-codepen)\n![GitHub](https://img.shields.io/github/license/aloskutov/eleventy-plugin-codepen)\n[![DeepScan grade](https://deepscan.io/api/teams/16410/projects/19673/branches/514386/badge/grade.svg)](https://deepscan.io/dashboard#view=project\u0026tid=16410\u0026pid=19673\u0026bid=514386)\n\n[![DeepSource](https://deepsource.io/gh/aloskutov/eleventy-plugin-codepen.svg/?label=active+issues\u0026show_trend=true\u0026token=QqgB3VzCD1eg8QWoGUFYvV1j)](https://deepsource.io/gh/aloskutov/eleventy-plugin-codepen/?ref=repository-badge)\n[![DeepSource](https://deepsource.io/gh/aloskutov/eleventy-plugin-codepen.svg/?label=resolved+issues\u0026show_trend=true\u0026token=QqgB3VzCD1eg8QWoGUFYvV1j)](https://deepsource.io/gh/aloskutov/eleventy-plugin-codepen/?ref=repository-badge)\n\nJust another eleventy codepen plugin.\n\n## Usage\n\n### Install via npm\n\n```shell\nnpm install @aloskutov/eleventy-plugin-codepen\n```\n\n### Load plugin in `.eleventy.js` as ESM\n\n```js\nimport codepen from \"@aloskutov/eleventy-plugin-codepen\";\n\nexport default function (eleventyConfig) =\u003e {\n    eleventyConfig.addPlugin(codepen);\n};\n```\n\n### Add CodePen js-library\n\nTo add Codepen's javascript code to all pages, paste in the template:\n\n```html\n...\n{% codepen_js %}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nTo optionally add Codepen's javascript code to all pages, paste in the template:\n\n```html\n...\n{% if codepen %}{% codepen_js %}{% endif %}\n    \u003c/body\u003e\n\u003c/html\u003e\n```\n\nIf you use optional, then on the content page, insert in the header `codepen: true`:\n\n```md\n---\ncodepen: true\n...\n---\n\n...\n\n{% codepen \"pen-url\", '{\"option\":\"value\"}' %}\n\n```\n\n\n### Custom options\n\n| Option    | Type    | Default |        |\n|-----------|---------|---------|--------|\n| height    | integer | 450     | Iframe height in pixels |\n| tab       | string  | result  | Active tab. Possible values: `result`, `html`, `css`, `js`. |\n| theme     | string  | dark    | Theme, `dark`, `light` or theme id |\n| class     | string  | none    | CSS class (classes) to add to the iframe |\n\n\n### Codepen custom style\n\nFor example, custom style for resizable block:\n\n```css\n  .codepen-resizable {\n    overflow: hidden;\n    resize: both;\n    background: white;\n    padding-bottom: 10px;\n  }\n\n.codepen-resizable iframe {\n    height: 100% !important;\n}\n```\n\n```md\n{% codepen \"some-pen-url-or-id\", '{\"style\":\"codepen-resizable\"}' %}\n```\n\n### Notes\n\n**Liquid** \u0026 **Nunjucks** template:\n\n```md\n{% codepen \"some-pen-url-or-id\", '{\"height\":500,\"style\":\"codepen-resizable\"}' %}\n\nor option string\n\n{% codepen \"some-pen-url-or-id\", \"height:500,style:codepen-resizable\" %}\n```\n\n**Nunjucks** template:\n\n```md\n{% codepen \"some-pen-url-or-id\", {height:500, style:\"codepen-resizable\"} %}\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloskutov%2Feleventy-plugin-codepen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faloskutov%2Feleventy-plugin-codepen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faloskutov%2Feleventy-plugin-codepen/lists"}