Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save murtuzaalisurti/5fb190095f43076bfcc0ef49ec598118 to your computer and use it in GitHub Desktop.
Save murtuzaalisurti/5fb190095f43076bfcc0ef49ec598118 to your computer and use it in GitHub Desktop.
eleventyConfig.addLiquidShortcode("codepen", function (url) {
const url_array = url.split("/");
const profile_url_array = url_array.filter((string, index) => {
return (index < (url_array.length - 2)) ? true : false
})
const username = profile_url_array[profile_url_array.length - 1];
const user_profile = profile_url_array.join("/");
const data_slug_hash = url_array[url_array.length - 1];
return `<p class="codepen" data-height="600" data-default-tab="result" data-slug-hash="${data_slug_hash}" data-user="${username}" style="height: 571px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
<span><a href="${url}">See the pen</a> (<a href="${user_profile}">@${username}</a>) on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>`;
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment