https://github.com/5t3ph/eleventy-plugin-open-in-codepen
An Eleventy shortcode to add "Open in CodePen" functionality for code demos.
https://github.com/5t3ph/eleventy-plugin-open-in-codepen
Last synced: 9 months ago
JSON representation
An Eleventy shortcode to add "Open in CodePen" functionality for code demos.
- Host: GitHub
- URL: https://github.com/5t3ph/eleventy-plugin-open-in-codepen
- Owner: 5t3ph
- Created: 2021-04-02T22:01:01.000Z (over 5 years ago)
- Default Branch: main
- Last Pushed: 2021-05-22T11:52:02.000Z (about 5 years ago)
- Last Synced: 2025-02-02T01:31:49.202Z (over 1 year ago)
- Language: JavaScript
- Size: 65.4 KB
- Stars: 7
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Eleventy Plugin: "Open in Codepen"
> An Eleventy shortcode to add "Open in CodePen" functionality for code demos.
## Usage
First, install the package:
```bash
npm install @11tyrocks/eleventy-plugin-open-in-codepen
```
Then, include it in your `.eleventy.js` config file:
```js
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.
```js
{% 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](/posts/eleventy-templating-static-code-demos/).
## 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](https://piccalil.li/blog/a-modern-css-reset):
```css
/* 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:
```js
eleventyConfig.addPlugin(openInCodepen, {
siteUrl: "YourSite.dev",
siteTitle: "Your Site",
siteTag: "yoursite",
buttonClass: "your-button-class",
buttonIconClass: "your-button-icon-class",
});
```