Initial commit

.editorconfig

@@ -0,0 +1,20 @@
+# This file is for unifying the coding style for different editors and IDEs
+# editorconfig.org
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 4
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.php]
+indent_size = 4
+
+[*.md,*.txt]
+trim_trailing_whitespace = false
+insert_final_newline = false
+
+[composer.json]
+indent_size = 4

README.md

@@ -0,0 +1,88 @@
+![GitHub release](https://img.shields.io/github/release/texnixe/kirby3-codepen.svg?maxAge=1800) ![License](https://img.shields.io/github/license/mashape/apistatus.svg) ![Kirby 3 Pluginkit](https://img.shields.io/badge/Pluginkit-YES-cca000.svg)
+
+# Kirby 3 CodePen embed
+
+This plugin provides a shortcode (KirbyTag) for embedding CodePens in your text.
+
+## Commercial Usage
+
+This plugin is free but if you use it in a commercial project please consider
+
+- [making a donation](https://www.paypal.me/texnixe/10) or
+- [buying a Kirby license using this affiliate link](https://a.paddle.com/v2/click/1129/38380?link=1170)
+
+## Installation
+
+
+### Download
+
+[Download the files](https://github.com/texnixe/kirby3-codepen/archive/master.zip) and place them inside `site/plugins/kirby-similar`.
+
+### Git Submodule
+You can add the plugin as a Git submodule.
+
+    $ cd your/project/root
+    $ git submodule add https://github.com/texnixe/kirby3-codepen.git site/plugins/kirby-similar
+    $ git submodule update --init --recursive
+    $ git commit -am "Add Kirby CodePen plugin"
+
+Run these commands to update the plugin:
+
+    $ cd your/project/root
+    $ git submodule foreach git checkout master
+    $ git submodule foreach git pull
+    $ git commit -am "Update submodules"
+    $ git submodule update --init --recursive
+
+### Composer
+
+```
+composer require texnixe/kirby3-codepen
+```
+
+## Usage
+
+The CodePen Id is required.
+
+```
+(codepen: jwGBh)
+```
+
+## Options
+
+### Config options
+
+You can set the following default options in your `config.php`:
+
+```
+'texnixe.codepen.preview'    => true;
+'texnixe.codepen.height'     => 300;
+'texnixe.codepen.themeId'    => 1
+'texnixe.codepen.defaultTab' => 'js,result'
+```
+
+### Tag options
+
+You can overwrite the config options in the KirbyTag, e.g.
+
+```
+(codepen: jwGBh height: 250)
+```
+
+In addition to the above settings, the following options are available:
+
+- `user` : default ''
+- `title`: default ''
+
+## Disclaimer
+
+This plugin is provided "as is" with no guarantee. Use it at your own risk and always test it yourself before using it in a production environment. If you encounter any problem, please [create an issue](https://github.com/texnixe/kirby3-codepen/issues/new).
+
+License
+
+[MIT](https://opensource.org/licenses/MIT)
+
+
+It is discouraged to use this plugin in any project that promotes racism, sexism, homophobia, animal abuse, violence or any other form of hate speech.
+
+

composer.json

@@ -0,0 +1,21 @@
+{
+    "name": "texnixe/kirby3-codepen",
+    "description": "Kirby 3 plugin providing a Kirbytag (shortcode) for CodePen embeds",
+    "version": "0.9.0",
+    "type": "kirby-plugin",
+    "license": "MIT",
+    "authors": [
+        {
+            "name": "Sonja Broda",
+            "email": "[email protected]"
+        }
+    ],
+    "keywords": [
+        "kirby3",
+        "kirby3-cms",
+        "kirby3-plugin"
+    ],
+    "require": {
+        "getkirby/composer-installer": "^1.1"
+    }
+}

index.php

@@ -0,0 +1,53 @@
+<?php
+
+namespace texnixe\codepen;
+
+/**
+ * Kirby 3 CodePen Embeds
+ *
+ * @version   0.9.0
+ * @author    Sonja Broda <[email protected]>
+ * @copyright Sonja Broda <[email protected]>
+ * @link      https://github.com/texnixe/kirby3-codepen
+ * @license   MIT
+ */
+
+\Kirby::plugin('texnixe/codepen', [
+    'snippets' => [
+        'codepen' => __DIR__ . '/snippets/codepen.php'
+    ],
+    'tags' =>  [
+        'codepen' => [
+            'attr' => [
+                'user',
+                'title',
+                'preview',
+                'height',
+                'defaultTab'
+            ],
+            'html' => function($tag) {
+
+                $id         = $tag->value;
+                $user       = $tag->user        ?? '';
+                $title      = $tag->title       ?? '';
+                $preview    = $tag->preview     ?? $tag->kirby()->option('texnixe.codepen.preview', true);
+                $height     = $tag->height      ?? $tag->kirby()->option('texnixe.codepen.height', 300);
+                $defaultTab = $tag->defaultTab ?? $tag->kirby()->option('texnixe.codepen.defaultTab', 'js,result');
+                $themeId    = $tag->kirby()->option('texnixe.codepen.themeId', 1);
+
+                $html = snippet('codepen', [
+                    'id'         => $id,
+                    'user'       => $user,
+                    'title'      => $title,
+                    'preview'    => $preview,
+                    'height'     => $height,
+                    'defaultTab' => $defaultTab,
+                    'themeId'    => $themeId
+                ], true);
+
+              return $html;
+
+            }
+        ]
+    ]
+]);

package.json

@@ -0,0 +1,12 @@
+{
+  "name": "kirby3-codepen",
+  "description": "Kirby 3 plugin providing a Kirbytag (shortcode) for CodePen embeds",
+  "author": "Sonja Broda <[email protected]>",
+  "license": "MIT",
+  "version": "0.9.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/texnixe/kirby3-codepen"
+  },
+  "type": "kirby-plugin"
+}

snippets/codepen.php

@@ -0,0 +1,4 @@
+<div class="codepen-wrapper">
+  <p data-height="<?= $height ?>" data-theme-id="<?= $themeId ?>" data-slug-hash="<?= $id ?>" data-default-tab="<?= $defaultTab ?>" data-user="<?= $user ?>" data-embed-version="2" data-pen-title="<?= $title ?>" data-preview="<?= $preview ?>" class="codepen"><?= $content ?></p>
+</div>
+<script async src="https://static.codepen.io/assets/embed/ei.js"></script>