Skip to content

mikeNickaloff/qhtml

Folders and files

NameName
Last commit message
Last commit date

Latest commit

487b3a5 · May 5, 2024

History

67 Commits
May 5, 2024
May 5, 2024
May 5, 2024
May 5, 2024
May 5, 2024
May 5, 2024
Apr 28, 2024
Apr 28, 2024
Apr 28, 2024
Apr 28, 2024
Mar 7, 2024
Apr 29, 2024
Apr 28, 2024
May 5, 2024
Apr 28, 2024
Apr 28, 2024
Apr 28, 2024
Mar 2, 2024
Apr 28, 2024
Apr 28, 2024
Apr 28, 2024

Introduction to Quick HTML: The Quick Inline HyperText Markup Language

  • qHTML is a simplified, custom representation of HTML designed for ease of reading and maintainence. Its structure and syntax are similar to CSS, but instead of styles, it defines HTML structure and attributes inline.

  • qHTML is a custom component, so there is no boilerplate code or javascript API required.

  • You just place your qHTML within a q-html tag and like magic, it transforms into regular inline HTML automatically.

  • Extending qHTML is super easy as well - just define a new custom component and it will become available along with all of its inline attributes without having to even interact with qHTML.

  • For code editor: click here!

  • For Official API / Documentation / Examples https://www.datafault.net/qhtml/

Basic Structure:

  • Elements: Elements are defined similarly to CSS. A tag name is provided, followed by a pair of curly braces {}. Within the curly braces, the attributes and nested elements are defined.

Example:

  <script src="qhtml.js"></script>
   <q-html>
     div {
          content: "my div"
      }

       p {
           content: "my paragraph"
       }
     </q-html>
  • Attributes: Attributes are defined by specifying the attribute name followed by a colon (:) followed by the value surrrounded in double quotes.

  • The value should be in the same form as traditional inline HTML tags

  • All attributes are supported as long as they are valid attributes for a specific tag.

  • You can also use the content attribute on any tag to set the "textcontent" of that tag. (not the HTML content).

  • other ways to set text content are through the 'contents', 'text', 'textcontents', and 'innertext' keywords.

  • Inline attributes like onclick, onmouseover, etc work as well.

  • Nesting is also supported by simply adding additional tags into existing tags between the { curley braces }

Example:

  <q-html>
       div {
          id: "myDiv"
          class: "container"
          content: "click the button below for a special message"
          button {
              onclick: "alert('hello world')"
              content: "click me!"
           }
       }
  </q-html>

Result:

   <div id="myDiv" class="container">
           click the button below for a special message  
           <button onclick="alert('hello world')">click me!</button>
   </div>

Important Points:

  • The content/text attribute is special in qHTML. It represents the inner text of an element.

  • All properties are surrounded with double-quotes and can have anything within the quotes

  • Place scripts in <script> blocks outside of QHTML (for now until q-script is added)

  • Reference script return values using backticks like this...

     text: myscript() 

Example:

 <q-html>
  p {
        content: "This is a paragraph."
        span {
               content: "And here is how to handle multiple elements... "                   
        } 
       a { 
           href:"#"
          content: "Click here!"
          onclick: "myFunction()"
       }
        span { 
             id: "mySpan"
             content: " and continue learning"
        }
       
     }
      script {

         function myFunction() {  
              document.querySelector("#mySpan").innerText = " " + Math.random() * 65535; 
              alert("clicked!"); 
          }
       }
     
 </q-html>

Simplified Nesting

  • You can nest multiple tags for convenience using a comma

Example:

qHTML:

   <q-html>
     p,center,a {
       href: "https://www.example.com"
       text: "Visit Example"
    }
   </q-html>

Converted to HTML:

        <p><center><a href="https://www.example.com">Visit Example</a></center></p>

q-components:

  q-component {
     slots: "custom-slot1,custom-slot2";
     id: "text-bar";
     div {
	class: "w3-bar w3-blue";
	span {
	    custom-slot1 {

	    }
	}
       div {
	   custom-slot2 {

	   }
       }
    }
  }
	
div {
  text-bar {
      custom-slot1: "slot 1 text";
      custom-slot2: "slot 2 text";
  }
  br { }
  text-bar {
      custom-slot1: "some other text for slot 1";
      custom-slot2: "and the other slot 2 text";
  
  }
}

Result:

<text-bar custom-slot1="slot 1 text" custom-slot2="slot 2 text">
        <div class="w3-bar w3-blue">
       <span>
         <custom-slot1>slot 1 text</custom-slot1>
      </span>
       <div>
       <custom-slot2>slot 2 text</custom-slot2>
  </div>
   </div></text-bar>
   
   <br>
   <text-bar custom-slot1="some other text for slot 1" custom-slot2="and the other slot 2 text">
      <div class="w3-bar w3-blue">
    <span>
           <custom-slot1>some other text for slot 1</custom-slot1>
    </span>
        <div>
       <custom-slot2>and the other slot 2 text</custom-slot2>
    </div>
      </div>
</text-bar>

Currently planned features for later release:

  • q-script
  • extend q-script support to allow for javascript/q-script to be used directly with QHTML for rapid generation
  • q-query language that will allow for the access of QHTML text before rendering it into HTML, allowing it to be manipulated first
  • Additional q-components as well as integration with q-script and q-query

About

github repo for qhtml.js - the new way to write HTML

Resources

License

Code of conduct

Security policy

Stars

Watchers

Forks

Packages

No packages published