@11tyrocks/eleventy-plugin-open-in-codepen

    1.0.0 • Public • Published

    Eleventy Plugin: "Open in Codepen"

    An Eleventy shortcode to add "Open in CodePen" functionality for code demos.

    Usage

    First, install the package:

    npm install @11tyrocks/eleventy-plugin-open-in-codepen

    Then, include it in your .eleventy.js config file:

    const openInCodepen = require("@11tyrocks/eleventy-plugin-open-in-codepen");
    
    module.exports = (eleventyConfig) => {
      eleventyConfig.addPlugin(openInCodepen);
    };

    To use the shortcode, pass the expected properties inclusive of a title, slug, css, and html.

    Within the context of a template, the slug is equivalent to the Eleventy provided page.url variable.

    You can use the templating language abilities to set the variabls for css and html. For example {% set css %}[CSS code]{% endset %} for Nunjucks.

    {% postToCodepen "Pen Title", page.url, css, html %}

    For an extended example that includes how you might go about setting up the required demo data, review this 11ty Rocks tutorial.

    Config Options

    Option Type Default
    siteUrl string https://codesampledomain.dev
    siteTitle string Example Site
    siteTag string codesampledomain
    buttonText string Open in CodePen
    buttonClass string open-in-codepen-button
    buttonIconClass string open-in-codepen-icon
    preDemoCSS string see below

    The default preDemoCSS is a reduced sample from Andy Bell's Modern CSS reset:

    /* Box sizing rules */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }
    
    /* Remove default margin */
    body,
    h1,
    h2,
    h3,
    h4,
    p {
      margin: 0;
    }
    
    /* Set core body defaults */
    body {
      min-height: 100vh;
      text-rendering: optimizeSpeed;
      line-height: 1.5;
      font-family: system-ui, sans-serif;
    }
    
    /* Make images easier to work with */
    img {
      display: block;
      max-width: 100%;
    }

    Config Example

    Here's an example of adding the plugin with config options set:

    eleventyConfig.addPlugin(openInCodepen, {
      siteUrl: "YourSite.dev",
      siteTitle: "Your Site",
      siteTag: "yoursite",
      buttonClass: "your-button-class",
      buttonIconClass: "your-button-icon-class",
    });

    Install

    npm i @11tyrocks/eleventy-plugin-open-in-codepen

    DownloadsWeekly Downloads

    0

    Version

    1.0.0

    License

    ISC

    Unpacked Size

    7.11 kB

    Total Files

    3

    Last publish

    Collaborators

    • 5t3ph