{"id":15208963,"url":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen","last_synced_at":"2025-10-29T12:31:49.429Z","repository":{"id":51122803,"uuid":"354142850","full_name":"5t3ph/eleventy-plugin-open-in-codepen","owner":"5t3ph","description":"An Eleventy shortcode to add \"Open in CodePen\" functionality for code demos.","archived":false,"fork":false,"pushed_at":"2021-05-22T11:52:02.000Z","size":67,"stargazers_count":7,"open_issues_count":0,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-02-02T01:31:49.202Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/5t3ph.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-04-02T22:01:01.000Z","updated_at":"2021-12-27T12:03:57.000Z","dependencies_parsed_at":"2022-08-22T21:40:10.543Z","dependency_job_id":null,"html_url":"https://github.com/5t3ph/eleventy-plugin-open-in-codepen","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":"5t3ph/eleventy-plugin-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-open-in-codepen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-open-in-codepen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-open-in-codepen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/5t3ph%2Feleventy-plugin-open-in-codepen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/5t3ph","download_url":"https://codeload.github.com/5t3ph/eleventy-plugin-open-in-codepen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238825764,"owners_count":19537121,"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":[],"created_at":"2024-09-28T07:05:08.779Z","updated_at":"2025-10-29T12:31:42.400Z","avatar_url":"https://github.com/5t3ph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## Eleventy Plugin: \"Open in Codepen\"\n\n\u003e An Eleventy shortcode to add \"Open in CodePen\" functionality for code demos.\n\n## Usage\n\nFirst, install the package:\n\n```bash\nnpm install @11tyrocks/eleventy-plugin-open-in-codepen\n```\n\nThen, include it in your `.eleventy.js` config file:\n\n```js\nconst openInCodepen = require(\"@11tyrocks/eleventy-plugin-open-in-codepen\");\n\nmodule.exports = (eleventyConfig) =\u003e {\n  eleventyConfig.addPlugin(openInCodepen);\n};\n```\n\nTo use the shortcode, pass the expected properties inclusive of a `title`, `slug`, `css`, and `html`.\n\nWithin the context of a template, the `slug` is equivalent to the Eleventy provided `page.url` variable.\n\nYou can use the templating language abilities to set the variabls for `css` and `html`. For example `{% set css %}[CSS code]{% endset %}` for Nunjucks.\n\n```js\n{% postToCodepen \"Pen Title\", page.url, css, html %}\n```\n\n\u003e **For an extended example** that includes how you might go about setting up the required demo data, review this [11ty Rocks tutorial](/posts/eleventy-templating-static-code-demos/).\n\n## Config Options\n\n| Option          | Type   | Default                      |\n| --------------- | ------ | ---------------------------- |\n| siteUrl         | string | https://codesampledomain.dev |\n| siteTitle       | string | Example Site                 |\n| siteTag         | string | codesampledomain             |\n| buttonText      | string | Open in CodePen              |\n| buttonClass     | string | open-in-codepen-button       |\n| buttonIconClass | string | open-in-codepen-icon         |\n| preDemoCSS      | string | _see below_                  |\n\nThe default `preDemoCSS` is a reduced sample from Andy Bell's [Modern CSS reset](https://piccalil.li/blog/a-modern-css-reset):\n\n```css\n/* Box sizing rules */\n*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n/* Remove default margin */\nbody,\nh1,\nh2,\nh3,\nh4,\np {\n  margin: 0;\n}\n\n/* Set core body defaults */\nbody {\n  min-height: 100vh;\n  text-rendering: optimizeSpeed;\n  line-height: 1.5;\n  font-family: system-ui, sans-serif;\n}\n\n/* Make images easier to work with */\nimg {\n  display: block;\n  max-width: 100%;\n}\n```\n\n## Config Example\n\nHere's an example of adding the plugin with config options set:\n\n```js\neleventyConfig.addPlugin(openInCodepen, {\n  siteUrl: \"YourSite.dev\",\n  siteTitle: \"Your Site\",\n  siteTag: \"yoursite\",\n  buttonClass: \"your-button-class\",\n  buttonIconClass: \"your-button-icon-class\",\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Feleventy-plugin-open-in-codepen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F5t3ph%2Feleventy-plugin-open-in-codepen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F5t3ph%2Feleventy-plugin-open-in-codepen/lists"}