From 478afab3b43e85c986cc689c38f5cbb12bc6f376 Mon Sep 17 00:00:00 2001 From: Bigi Lui Date: Sun, 9 Apr 2017 22:36:45 -0700 Subject: [PATCH] First check in, Pico UI Card plugin, and readme. --- PicoUICard.php | 165 +++++++++++++++++++++++++++++++++++++++++++++++++ README.md | 78 ++++++++++++++++++++++- 2 files changed, 241 insertions(+), 2 deletions(-) create mode 100644 PicoUICard.php diff --git a/PicoUICard.php b/PicoUICard.php new file mode 100644 index 0000000..4cab1d7 --- /dev/null +++ b/PicoUICard.php @@ -0,0 +1,165 @@ +config['loadBootstrap'] = false; + $this->config['cardPosition'] = 'col-md-4 col-sm-6 col-xs-6'; + $this->config['cardTitle'] = ''; + $this->config['cardText'] = ''; + // load custom config if needed + if (isset($config['PicoUICard.loadBootstrap'])) { + $this->config['loadBootstrap'] = $config['PicoUICard.loadBootstrap']; + } + if (isset($config['PicoUICard.cssClass.cardPosition'])) { + $this->config['cardPosition'] = $config['PicoUICard.cssClass.cardPosition']; + } + if (isset($config['PicoUICard.cssClass.cardTitle'])) { + $this->config['cardTitle'] = $config['PicoUICard.cssClass.cardTitle']; + } + if (isset($config['PicoUICard.cssClass.cardText'])) { + $this->config['cardText'] = $config['PicoUICard.cssClass.cardText']; + } + } + + /** + * Triggered after Pico has prepared the raw file contents for parsing + * + * @see Pico::parseFileContent() + * @see DummyPlugin::onContentParsed() + * @param string &$content prepared file contents for parsing + * @return void + */ + public function onContentPrepared(&$content) + { + // we only do any processing at all if the page contains our tag, so we save time + if (strpos($content, '[ui.card') !== false) { + // below is our comprehensive regex to detect for the full [ui.card] tag, + // which includes the tag and its attributes, and the [title] and [text] subtags. + $config = $this->config; + $content = preg_replace_callback( + '/\[ui\.card((\s+[a-z]+\=[\'\"][^\'\"]*[\'\"])*)\s*\]\s*((\[[a-z]+\][^\[]*\[\/[a-z]+\]\s*)*)\[\/ui\.card\s*\]/', + function ($matches) use ($config) { + // $matches[1] contain the list of attributes + // $matches[3] contain the list of subtags + preg_match_all('/\s*([a-z]+)\=[\'\"]([^\'\"]*)[\'\"]/', $matches[1], $attributes); + preg_match_all('/\[([a-z]+)\]([^\[]*)\[\/([a-z]+)\]\s*/', $matches[3], $subtags); + // look for what we want from attributes and subtags + $uicard = array('href' => '', 'img' => '', 'title' => '', 'text' => ''); + for ($i = 0; $i < count($attributes[0]); $i++) { + $uicard[ $attributes[1][$i] ] = $attributes[2][$i]; + } + for ($i = 0; $i < count($subtags[0]); $i++) { + if ($subtags[1][$i] != $subtags[3][$i]) { + continue; // closing subtag must match in order to be valid + } + $uicard[ $subtags[1][$i] ] = $subtags[2][$i]; + } + $result = '
'; + $result .= ''; + $result .= '
'; + $result .= '
'; + $result .= '
'; + $result .= $uicard['title']; + $result .= '
'; + $result .= '
'; + $result .= '
'; + $result .= ''; + $result .= $uicard['text']; + $result .= ''; + $result .= ''; + $result .= '
'; + return $result; + }, + $content); + // now properly combine continous ui cards into same row div + $content = preg_replace('/\<\/div\>\<\!\-\-CLOSE_PICO_UI_CARD\-\-\>\s*\<\!\-\-OPEN_PICO_UI_CARD\-\-\>\
/', "\n\n", $content); + // now remove the extra comment tags that acted as our search string + $content = preg_replace('/\<\!\-\-(OPEN|CLOSE)_PICO_UI_CARD\-\-\>/', '', $content); + } + } + + /** + * Triggered after Pico has rendered the page + * + * @param string &$output contents which will be sent to the user + * @return void + */ + public function onPageRendered(&$output) + { + // regular pages + $output = str_replace('', ($this->buildExtraHeaders() . ''), $output); + } + + /** + * Add some extra header tags for our styling. + */ + private function buildExtraHeaders() { + $headers = ''; + // if set to true, load from bootstrap cdn + if ($this->config['loadBootstrap'] === true) { + $headers .= PHP_EOL.''; + $headers .= PHP_EOL.''; + } + // now set up card css classes + $headers .= ' + +'; + return $headers; + } +} diff --git a/README.md b/README.md index e5b152e..ada9b57 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,76 @@ -# PicoUI -Various UI-related plugins for Pico CMS +# Pico UI + +This repositoru contains various UI-related plugins for Pico CMS. + +## Why use these + +Pico CMS is a great, simple CMS and there are a lot of themes and templates available. It is however +still primarily designed for text content sites. + +Most themes can provide some sort of neatly designed homepage, that primarily uses the auto menu +(`pages` array generated by Pico). + +If you actually maintain a blog-like content site with featured content and want to manually maintain +your featured articles on the homepage, this becomes a challenge -- you have to create manual HTML/CSS +for your featured links. + +Worse yet, if you have a moderately-sized site with hundreds of pages, loading the pages array slow +down Pico a lot, and you may have to use something like my [TooManyPages](https://github.com/bigicoin/PicoTooManyPages) +plugin to keep your site running fast, and you won't get the `pages` array populated at all for the +auto-menus on most themes. + +# Pico UI: Card + +Create a card (with a hyperlink) such as this: + +![image](https://cloud.githubusercontent.com/assets/5854176/24847145/fc8b6728-1d73-11e7-9f25-11b93a3ae564.png) + +Using code that looks like below in your markdown file: + +``` +[ui.card href="https://google.com" img="http://i.imgur.com/TkTgq3L.jpg"] +[title]Cute Dog[/title] +[text]This page is about this cute dog.[/text] +[/ui.card] +``` + +## Installation + +Installation is simple. Simply drop the `PicoUICard.php` file into the `plugins` directory of your Pico installation. + +## Configuration + +The plugin will not be enabled by default, so simply add the following line to your +`config/config.php` file to enable it: + +``` +$config[ 'PicoUICard.enabled' ] = true; +``` + +*Bootstrap*: Bootstrap is a CSS and JS framework used commonly on many web sites. Pico UI Card relies on +some Bootstrap CSS elements to style and position cards properly. + +If your theme already includes Bootstrap, you are good. Default config will not include an extra copy of it. + +If you don't, you can enable this setting to load Bootstrap from their official CDN. + +``` +$config[ 'PicoUICard.loadBootstrap' ] = true; +``` + +*Card size and positioning*: Pico UI Cards are wrapped within a `row` class (Bootstrap), and so each card +has a definition of column size. (See [Bootstrap: Grid System](http://getbootstrap.com/css/#grid)) + +Use the following config to change it. The default value is: `col-md-4 col-sm-6 col-xs-6`. + +``` +$config[ 'PicoUICard.cssClass.cardPosition' ] = 'col-md-4 col-sm-6 col-xs-6'; +``` + +*Title text and description text*: You can define your own CSS classes for the title text and description text. +Typically the use case for this would be customizing font sizes, colors, etc. + +``` +$config[ 'PicoUICard.cssClass.cardTitle' ] = 'my-title-class'; +$config[ 'PicoUICard.cssClass.cardText' ] = 'my-description-class'; +```