davidedexuno/ihtml-php

iHTML template engine (php version)

dev-master 2021-05-02 11:52 UTC

Requires

• php: >=7.4
• danog/class-finder: ^0.4.8
• erusev/parsedown: ^1.7
• friendsofphp/php-cs-fixer: ^2.18
• illuminate/support: ^8.38
• jbbcode/jbbcode: ^1.4
• masterminds/html5: ^2.7
• react/http: ^1.3
• react/react: ^1.1
• sabberworm/php-css-parser: ^8.3
• subjective-php/spl-types: ^3.0
• symfony/css-selector: ^5.2
• symfony/dom-crawler: ^5.2
• symfony/yaml: ^5.2
• ulrichsg/getopt-php: ^3.4
• webmozart/path-util: ^2.3

GPL-3.0-or-later

• Davide Del Medico

README

iHTML - incremental HTML

A very experimental template engine (written in php so far)

Installation

sudo phar-composer build https://github.com/davidedexuno/ihtml-php.git:dev-master /usr/local/bin/ihtml

Functionalities

• Template engine
• StaticGen (See JAMStack)
• Server

Advantages

• One language for everything (se use cases below)
• consistency with the rest of environment - one language everywhere, JAVASCRIPT, CSS AND HERE
• No need one more (maybe) language, SELECTORS EVERYWHERE, DOM EVERYWHERE
• Layout TOTALLY separated from code, a designer can manage the final html file
• No need to prepare an HTML for integration
• No need to prepare HTML for new block - inheritance is EVERYWHERE, customizability is EVERYWHERE
• Better HTML files, more readable. "Lorem ipsum" is the way.

Use cases

• HTML Inheritance
• Site Structure (pages, sections, etc...)
• Modularization (separate ads, sidebar, ecc...)
• Data compiling and then
• Multilanguage support (site multilanguage structure and labels system)
• Template engines code injection (Twig, Smarty, etc...)
• CMS (title and content, Markdown, BBcode, HTML, text plain, etc...) and again
• Sanitization (removing every not-allowed content in a tag)
• Minify (WTF?!!)

Integration

• SASS/SCSS, to structure your code
• PurgeCSS, to Purge unused content modifications

Getting started

TODO

TODO

• functionalities
  • add CSS vars(--var) function support
  • support for rules: border, margin, padding, wikitext
  • add javascript on* attributes support
    • .element { onclick = "execMe();" }
  • add support for rule attributes: A B, C D
  • add content attribute support
  • add code rule support
• internal selector navigation supports
  • add <style> support
  • add [srcset] support
  • add ld+json navigation support
  • add url parts support (Valid URL attributes - https://www.w3.org/TR/2017/REC-html52-20171214/fullindex.html#attributes-table)
    • link[href],
    • script[src],
    • a[href],
    • img[src],
    • source[src],
    • video[poster]
    • and other URI
• integration
  • add SASS/SCSS example
  • add PurgeCSS integration
• refactor
  • move to a REAL html5 parser (like the Chrome one)
  • add white-space support for inline CSSs and JSs
  • add full website example to be used as unit test
    • add blog posts example
  • add incremental caching (after benchmarks and choice of platform)
  • add dependency tool on project
  • add check @import loop

Usage

Applies ccs on template and outputs to file:

ihtml <template> <ccs> [-o <file>]

Applies code on template and outputs to file:

ihtml <template> -r "<code>" [-o <file>]

Applies stdin on template and outputs to file:

ihtml <template> [-o <file>]
<code>

Compiles the project:

ihtml -p <project> [-o <directory>]

Opens a server on a project:

ihtml -p <project> -s [<PORT>] [-t <static files dir>]

Examples

/*
 *
 * Examples of CCS functions
 * (<SELECTOR> is a valid CSS3 selector)
 *
 */

/* Updates content of a tag with new html */
<SELECTOR> {
  content: "HTML CONTENT EXCLUDED TAGS";
}

/* Removes an element */
<SELECTOR> {
  display: none;
}

/* Replaces an element with new html */
<SELECTOR> {
  display: "<div>HTML CONTENT INCLUDING TAGS</div>";
}

/**/
<SELECTOR> {
  text: "TEXT CONTENT (URL ENTITY ENCODED)";
}

/**/
<SELECTOR> {
  display: '<div>' content '</div>';
}

/**/
<SELECTOR> {
  display: '<div>' display display display '</div>';
}

/**/
@import url(local/file.ccs);

/**/
<SELECTOR> {
  content: url(content.html);
}

/**/
<SELECTOR> {
  content: " \
<div> \
  Content \
</div> \
";
}

/**/
<SELECTOR> {
  /**/
  text-transform: uppercase;
  /**/
  text-transform: lowercase;
  /**/
  text-transform: capitalize;
  /**/
  text-transform: none;
}
/**/
<SELECTOR> {
  /**/
  visibility: vosible;
  /**/
  visibility: hidden;
}
/**/
<SELECTOR> {
  /**/
  white-space: normal;
  /**/
  white-space: nowrap;
  /**/
  white-space: pre;
  /**/
  white-space: pre-line;
  /**/
  white-space: pre-wrap;
}

/**/
<SELECTOR> {
  bbcode: "[b]BB CODE[/b] ENCODED TO [i]HTML[/i]";
}

/**/
<SELECTOR> {
  markdown: url(content.md);
}

/**/
<SELECTOR> {
  attr-<ATTRIBUTE>-content: "STRING";
  /**/
  attr-<ATTRIBUTE>-display: none | "STRING";
  /**/
  attr-<ATTRIBUTE>-visibility: visible | hidden;
  /**/
  attr-<ATTRIBUTE>[-content]: "STRING";
}
/**/
<SELECTOR> {
  style-<RULE>-content: "CSS VALUE STRING";
  /**/
  style-<RULE>-literal: css value literal;
  /**/
  style-<RULE>-display: "<div> Content </div>";
  /**/
  style-<RULE>-visibility: visible | hidden;
  /**/
  style-<RULE>[-literal]: css value literal;
  /**/
  [style-]CSSRULENAME[-literal]: css value literal;
}
/**/
<SELECTOR> {
  class-<CLASSNAME>-visibility: visible | hidden;
  /**/
  class-<CLASSNAME>[-visibility]: visible | hidden;
  /**/
  [class-]GENERICNAME[-visibility]: visible | hidden;
}

See examples/ for other examples.