Initial commit

CreunaFI · Apr 18, 2018 · 4635ac6 · 4635ac6
commit 4635ac6
Show file tree

Hide file tree

Showing 29 changed files with 854 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,18 @@
+# HTML Markup Indenter
+
+Don't you just hate it when your beautiful HTML markup is mutilated due to a templating language? (I'm looking at you, [Timber](https://www.upstatement.com/timber/))
+
+Use this plugin to indent the HTML markup output by WordPress using the [Dindent](https://github.com/gajus/dindent) library. Only does its thing when you are not logged in.
+
+## Installation
+
+### Composer (with [Bedrock](https://roots.io/bedrock/))
+
+```sh
+composer require joppuyo/html-markup-indenter
+```
+
+### Classic
+
+1. Upload the plugin folder to the /wp-content/plugins/ directory
+2. Activate the plugin through the **Plugins** menu in WordPress
diff --git a/composer.json b/composer.json
@@ -0,0 +1,6 @@
+{
+    "name": "joppuyo/html-markup-indenter",
+    "type": "wordpress-plugin",
+    "description": "Indents the HTML markup output by WordPress",
+    "license": "GPL-3.0-or-later"
+}
diff --git a/html-markup-indenter.php b/html-markup-indenter.php
@@ -0,0 +1,33 @@
+<?php
+/*
+Plugin Name: HTML Markup Indenter
+Plugin URI: https://github.com/joppuyo/html-markup-cleaner
+Description: Indents the HTML markup output by WordPress
+Version: 1.0.0
+Author: Johannes Siipola
+Author URI: https://siipo.la
+*/
+
+defined('ABSPATH') or die();
+
+require 'library/dindent/src/Indenter.php';
+
+// Thanks to
+// https://stackoverflow.com/questions/772510/wordpress-filter-to-modify-final-html-output/22818089#22818089
+
+add_action('plugins_loaded', function () {
+    ob_start();
+});
+
+add_action('shutdown', function () {
+    if (!is_admin() && !is_admin_bar_showing() && !is_user_logged_in()) {
+        $final = '';
+        $levels = ob_get_level();
+        for ($i = 0; $i < $levels; $i++) {
+            $final = $final . ob_get_clean();
+        }
+        $indenter = new \Gajus\Dindent\Indenter();
+        echo $indenter->indent($final);
+    }
+}, 0);
+
diff --git a/library/dindent/CHANGELOG b/library/dindent/CHANGELOG
@@ -0,0 +1,3 @@
+0.0.1 / 2014-02-22
+
+* Rewritten the engine.
diff --git a/library/dindent/LICENSE b/library/dindent/LICENSE
@@ -0,0 +1,24 @@
+Copyright (c) 2013-2014, Anuary (http://anuary.com/)
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+    * Redistributions of source code must retain the above copyright
+      notice, this list of conditions and the following disclaimer.
+    * Redistributions in binary form must reproduce the above copyright
+      notice, this list of conditions and the following disclaimer in the
+      documentation and/or other materials provided with the distribution.
+    * Neither the name of the Anuary (http://anuary.com/) nor the
+      names of its contributors may be used to endorse or promote products
+      derived from this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND
+ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED
+WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL ANUARY BE LIABLE FOR ANY
+DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+(INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
+ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+(INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
diff --git a/library/dindent/README.md b/library/dindent/README.md
@@ -0,0 +1,212 @@
+# Dindent
+
+[![Build Status](https://travis-ci.org/gajus/dindent.png?branch=master)](https://travis-ci.org/gajus/dindent)
+[![Coverage Status](https://coveralls.io/repos/gajus/dindent/badge.png?branch=master)](https://coveralls.io/r/gajus/dindent?branch=master)
+[![Latest Stable Version](https://poser.pugx.org/gajus/dindent/version.png)](https://packagist.org/packages/gajus/dindent)
+[![License](https://poser.pugx.org/gajus/dindent/license.png)](https://packagist.org/packages/gajus/dindent)
+
+Dindent (aka., "HTML beautifier") will indent HTML for development and testing. Dedicated for those who suffer from reading a template engine produced markup.
+
+## Abuse Case
+
+Dindent will not sanitize or otherwise manipulate your output beyond indentation.
+
+If you are looking to remove malicious code or make sure that your document is standards compliant, consider the following alternatives:
+
+* [HTML Purifier](https://github.com/Exercise/HTMLPurifierBundle)
+* [DOMDocument::$formatOutput](http://www.php.net/manual/en/class.domdocument.php)
+* [Tidy](http://www.php.net/manual/en/book.tidy.php)
+
+If you need to indent your code in the development environment, beware that earlier mentioned libraries will attempt to fix your markup (that's their primary purpose; indentation is a by-product).
+
+## Regex
+
+There is a [good reason not to use regular expression to parse HTML](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags/1732454#1732454). However, DOM parser will rebuild the whole HTML document. It will add missing tags, close open block tags, or remove anything that's not a valid HTML. This is what Tidy does, DOM, etc. This behavior is undesirable when debugging HTML output. Regex based parser will not rebuild the document. Dindent will only add indentation, without otherwise affecting the markup.
+
+The above is also the reason why [Chrome DevTools](https://developers.google.com/chrome-developer-tools/) is not a direct replacement for Dindent.
+
+## Use
+
+```php
+$indenter = new \Gajus\Dindent\Indenter();
+$indenter->indent('[..]');
+```
+
+In the above example, `[..]` is a placeholder for:
+
+```html
+<!DOCTYPE html>
+<html>
+<head></head>
+<body>
+    <script>
+    console.log('te> <st');
+    function () {
+        test; <!-- <a> -->
+    }
+    </script>
+    <div>
+    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+    <div><table border="1" style="background-color: red;"><tr><td>A cell    test!</td>
+<td colspan="2" rowspan="2"><table border="1" style="background-color: green;"><tr> <td>Cell</td><td colspan="2" rowspan="2"></td></tr><tr>
+        <td><input><input><input></td></tr><tr><td>Cell</td><td>Cell</td><td>Ce
+            ll</td></tr></table></td></tr><tr><td>Test <span>Ce       ll</span></td></tr><tr><td>Cell</td><td>Cell</td><td>Cell</td></tr></table></div></div>
+</body>
+</html>
+```
+
+Dindent will convert it to:
+
+```HTML
+<!DOCTYPE html>
+<html>
+    <head></head>
+    <body>
+        <script>
+    console.log('te> <st');
+    function () {
+        test; <!-- <a> -->
+    }
+    </script>
+        <div>
+            <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+            <div>
+                <table border="1" style="background-color: red;">
+                    <tr>
+                        <td>A cell test!</td>
+                        <td colspan="2" rowspan="2">
+                            <table border="1" style="background-color: green;">
+                                <tr>
+                                    <td>Cell</td>
+                                    <td colspan="2" rowspan="2"></td>
+                                </tr>
+                                <tr>
+                                    <td>
+                                        <input>
+                                        <input>
+                                        <input>
+                                    </td>
+                                </tr>
+                                <tr>
+                                    <td>Cell</td>
+                                    <td>Cell</td>
+                                    <td>Ce ll</td>
+                                </tr>
+                            </table>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>Test <span>Ce ll</span></td>
+                    </tr>
+                    <tr>
+                        <td>Cell</td>
+                        <td>Cell</td>
+                        <td>Cell</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    </body>
+</html>
+```
+
+## Options
+
+`Indenter` constructor accepts the following options that control indentation:
+
+|Name|Description|
+|---|---|
+|`indentation_character`|Character(s) used for indentation. Defaults to 4 whitespace characters.|
+
+### Set element type
+
+HTML elements are either "inline" elements or "block-level" elements.
+
+An inline element occupies only the space bounded by the tags that define the inline element. The following example demonstrates the inline element's influence:
+
+```html
+<p>This is an <span>inline</span> element within a block element.</p>
+```
+
+A block-level element occupies the entire space of its parent element (container), thereby creating a "block." Browsers typically display the block-level element with a new line both before and after the element. The following example demonstrates the block-level element's influence:
+
+```html
+<div>
+    <p>This is a block element within a block element.</p>
+</div>
+```
+
+Dindent identifies the following elements as "inline":
+
+* b, big, i, small, tt
+* abbr, acronym, cite, code, dfn, em, kbd, strong, samp, var
+* a, bdo, br, img, span, sub, sup
+
+This is a subset of the inline elements defined in the [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Inline_elemente).
+
+All other elements are treated as block.
+
+You can set element type to either block or inline using `setElementType` method:
+
+```php
+$indenter = new \Gajus\Dindent\Indenter();
+/**
+ * @param string $element_name Element name, e.g. "b".
+ * @param ELEMENT_TYPE_BLOCK|ELEMENT_TYPE_INLINE $type
+ * @return null
+ */
+$indenter->setElementType('foo', \Gajus\Dindent\Indenter::ELEMENT_TYPE_BLOCK);
+$indenter->setElementType('bar', \Gajus\Dindent\Indenter::ELEMENT_TYPE_INLINE);
+```
+
+# CLI
+
+Dindent can be used via the CLI script `./bin/dindent.php`.
+
+```sh
+php ./bin/dindent.php
+
+Indent HTML.
+
+Options:
+    --input=./input_file.html
+        Input file
+    --indentation_character="    "
+        Character(s) used for indentation. Defaults to 4 whitespace characters.
+    --inline
+        A list of comma separated "inline" element names.
+    --block
+        A list of comma separated "block" element names.
+
+Examples:
+    ./dindent.php --input="./input.html"
+        Indent "input.html" file and print the output to STDOUT.
+
+    ./dindent.php --input="./input.html" | tee ./output.html
+        Indent "input.html" file and dump the output to "output.html".
+
+    ./dindent.php --input="./input.html" --indentation_character="\t"
+        Indent "input.html" file using tab to indent the markup.
+
+    ./dindent.php --input="./input.html" --inline="div,p"
+        Indent "input.html" file treating <div> and <p> elements as inline.
+
+    ./dindent.php --input="./input.html" --block="span,em"
+        Indent "input.html" file treating <span> and <em> elements as block.
+```
+
+## Known issues
+
+* Does not treat comments nicely and IE conditional blocks.
+
+## Installation
+
+The recommended way to use Dindent is through [Composer](https://getcomposer.org/).
+
+```json
+{
+    "require": {
+        "gajus/dindent": "2.0.*"
+    }
+}
+```
diff --git a/library/dindent/bin/dindent.php b/library/dindent/bin/dindent.php
@@ -0,0 +1,67 @@
+<?php
+require __DIR__ . '/../vendor/autoload.php';
+
+function error ($error) {
+    echo $error;
+    exit(1);
+}
+
+$options = getopt(null, array('input:', 'indentation_character:', 'inline:', 'block:'));
+
+if (!isset($_SERVER['argv'][1])) {
+    echo '
+Indent HTML.
+
+Options:
+    --input=./input_file.html
+        Input file
+    --indentation_character="    "
+        Character(s) used for indentation. Defaults to 4 whitespace characters.
+    --inline=""
+        A list of comma separated "inline" element names.
+    --block=""
+        A list of comma separated "block" element names.
+
+Examples:
+    ./dindent.php --input="./input.html"
+        Indent "input.html" file and print the output to STDOUT.
+
+    ./dindent.php --input="./input.html" | tee ./output.html
+        Indent "input.html" file and dump the output to "output.html".
+
+    ./dindent.php --input="./input.html" --indentation_character="\t"
+        Indent "input.html" file using tab to indent the markup.
+
+    ./dindent.php --input="./input.html" --inline="div,p"
+        Indent "input.html" file treating <div> and <p> elements as inline.
+
+    ./dindent.php --input="./input.html" --block="span,em"
+        Indent "input.html" file treating <span> and <em> elements as block.
+';
+
+exit;
+}
+
+if (!isset($options['input'])) {
+    error('Missing "input" parameter.');
+} else if (!file_exists($options['input'])) {
+    error('"input" file does not exist.');
+}
+
+$indenter = new \Gajus\Dindent\Indenter(isset($options['indentation_character']) ? array('indentation_character' => $options['indentation_character']) : array());
+
+if (isset($options['inline'])) {
+    foreach (explode(',', $options['inline']) as $element_name) {
+        $indenter->setElementType($element_name, \Gajus\Dindent\Indenter::ELEMENT_TYPE_INLINE);
+    }
+}
+
+if (isset($options['block'])) {
+    foreach (explode(',', $options['block']) as $element_name) {
+        $indenter->setElementType($element_name, \Gajus\Dindent\Indenter::ELEMENT_TYPE_BLOCK);
+    }
+}
+
+$output = $indenter->indent(file_get_contents($options['input']));
+
+echo $output;