Kirbytext Codepen tag

readme.md

Codepen extension for Kirbytext

This extension for Kirbytext will make it possible to use

(codepen: http://codepen.io/CBeghin/pen/HeuiF)

Installation

Put kirbytext.extended.php in your site/plugins folder (or edit it)

Usage

In your content text files you can now use the new codepen tag:

(codepen: http://codepen.io/CBeghin/pen/HeuiF)

Parameters

(codepen: codepen_path height: xxx type: xxx)

Feel free to change the $defaults array in kirbytext.extended.php to add the values which fit best to your project.

// customize this:

	$defaults = array(
		'height'	=> '300',
		'type'		=> 'result'
	);

Those defaults will make it possible to use the codepen tag without specifying all the attributes.

kirbytext.extended.php

<?php 

class kirbytextExtended extends kirbytext {
  
  function __construct($text, $markdown=true) {
    
    parent::__construct($text, $markdown);

    $this->addTags('codepen');
    $this->addAttributes('type'); 

  }  


        function codepen($params) {

		// http://codepen.io/CBeghin/pen/BJrmq
		$source = $params['codepen'];

		if( !preg_match('!codepen.io\/([a-z0-9A-Z_-]+)\/pen\/([a-z0-9_-]+)!i', $source, $array ) ) {
			return false;      
		}

		// define default values for attributes
		$defaults = array(
			'height'	=> '300',
			'type'		=> 'result'
		);

		// merge the given parameters with the default values
		$options = array_merge($defaults, $params);

		$availableTypes = array('result', 'html', 'css', 'js');
		$defaultType = 'result';

		if( !in_array($options['type'], $availableTypes) ){
			$options['type'] = $defaultType;
		}

		return '<div class="code-container"><pre class="codepen" data-height="'.$options['height'].'" data-type="'.$options['type'].'" data-href="'.$array[2].'" data-user="'.$array[1].'" data-safe="false"><code></code></pre><script async src="http://codepen.io/assets/embed/ei.js"></script></div>';

	}
  
}

?>

Amazing! Great work and thanks for sharing. ♥