Version 2.2

Various improvements.

Version 2.1 Single-Field and tweaks

To reduce keystrokes, where the dataset contains only one field, we now support single line-feeds between records. For example:

<mt-recordsets hidden>
	<mt-fields id="banana-fields">
		FILENAME
	</mt-fields>

	<mt-records id="bananas" mt-fields="banana-fields">
		bananas-1974958-1665026.png
		592d4adf13867b4948f86b89c2e1768b.png
		Banana.png
		482px-Banana_Bunch_-_2D_art.png
		Banana2.png
		banana_1f34c.png
		banana-microsoft.png
		1f34c.png
	</mt-records>
</mt-recordsets>

Also bug-fixes, and improved comments, variable-names, and function-names.
Improved logic for singlet vs collection views.

Version 2.0.0: Collections

This new major version can still render single-recordset data. The container syntax is changed to use the mt-container tag (instead of a span or div):

<mt-container mt-records="curators" mt-template="person"></mt-container>

This version simplifies syntax for header containers, and adds support for collections of related recordsets. For example, data may be structured like this (this shows structure only, not how the records would be typed into the page):

Advisers (collection)
- Product Management (recordset)
  - Joe Smith
  - Sue Green
  - Doc Brown
- Engineering (recordset)
  - Fred Banes
- Graphic Design (recordset)
  - Sally Bree
  - Jeff Ward

Team (collection)
- Managers (recordset)
  - Jack Waters
  - Dave Cutterhand
  - Missy Elliot
- Designers (recordset)
  - Sam Spade
  - Jeff Winger

As shown above, the new system supports multiple collections, in this case "Advisers" and "Team". Each collection can use totally different templates.

A collection may be rendered similar to the following, where each recordset within the collection can be rendered with it's own HTML header, as this image shows:

The placeholder inside the page body will be written as follows. This container can produce the entire page of multiple recordsets, each with a separate header.

<mt-container mt-collection="advisers" mt-template="people"></mt-container>

mt.js knows this is a collection of recordsets, rather than a single recordset, by the presence of the mt-collection attribute. The recordsets are indicated by the mt-collection attribute. The header template is given in the mt-template attribute.

The dev would create two templates: a header template and a record template. The header template contains a placeholder to the record template.

<mt-templates>

	<!-- HEADER TEMPLATE -->
	<template id="people">			
		<h2>[[TITLE]]</h2>
		<!-- PLACEHOLDER FOR RECORD TEMPLATE -->
		<mt-container mt-records="[[id]]" mt-template="person"></mt-container>
	</template>	

	<!-- RECORD TEMPLATE -->
	<template id="person">		
		<h3>Person: {{NAME}}</h3>
		<a href="{{LINK}}">{{LINK}}</a>
	</template>
		
</mt-templates>

As seen above, the header can display meta information about the recordset, eg [[TITLE]]. Double-square brackets indicate meta info about the recordset. As with the previous version of this tool, double-curly braces indicate per-record data.

Records would be stored similar to the following. To minimize typing, the field-names are stated only once, instead of being repeated on every recordset. A collection of related recordsets are grouped inside a collection tag. The collection tag indicates which field-schema to use for all the recordsets inside the collection.

<mt-recordsets hidden>
	
	<!-- SCHEMA -->
	<mt-fields id="team-member-fields">
		NAME
		TITLE
		IMG
	</mt-fields>
		
	<!-- COLLECTION -->
	<mt-collection id="advisers" mt-fields="team-member-fields">
			
		<!-- RECORDSET -->
		<mt-records id="product" mt-meta="TITLE: Product Management">
			Lana Hogue
			Supply Chain Guru
			lana-hogue.jpg

			Faran Thomason
			Videogame Producer
			faran.jpg
		</mt-records>

		<!-- RECORDSET -->
		<mt-records id="lab" mt-meta="TITLE: Mobile Lab">
			Eugene Korsunskiy
			Education Engineer
			eugene-crop-sm.jpg

			Jason Martin
			STEM Entrepreneur
			jason-martin.jpg
		</mt-records>
	</mt-collection>			
</mt-recordsets>

v1.0.1 - Micro Templating, with meta and groups

Easier Data-Entry

• Implemented vertical datasets, delimited by newline only. A single record is entered on consecutive lines, for clearer, easier manual data-entry. For example:

	<mt-records hidden id="tattooists">
		NAME
		LINK
		DESCRIPTION

		Genevieve Dupre
		https://www.genevievetattoos.com
		This isn't what you expected.

		Joey Armstrong
		https://thunderhandtattoo.com
		The most amazing.
	</mt-records>

Mix-and-Match

• You can use the same machinery to display the following different groups:
  • different dataset, same HTML template. For example:
    • HTML Template: Artists:
      • Dataset: Tattooists
      • Dataset: Painters
  • or, different dataset with different HTML.
  • or, same dataset with different HTML.
  • or, same dataset, same HTML, different CSS. In all cases, same or different CSS.

Group Headers

• Added grouping feature. Enables to create a consistent HTML header-template to display above each of group.
• Added metadata in group container-element attributes. Meta used to display different header content in each group header. Metadata are simply inserted into the header HTML template according to our standard placeholders.
• For example:

<body>
        <!--		GROUP CONTAINER: Mech Engineers 		 -->
        
        <span mt-header="engineers" mt-meta="
	        TITLE: Engineers
	        SUBTITLE: Mechanical Engineers
	        RECORDS: mech-engineers
	        ">
        </span>  
        
        
        <!--		GROUP CONTAINER: Electrical Engineers 		 -->
        
        <span mt-header="engineers" mt-meta="
	        TITLE: More Engineers
	        SUBTITLE: Electrical Engineers
	        RECORDS: elect-engineers
	        ">
        </span>  
</body>


<mt-templates>
		<!--		GROUP-HEADER TEMPLATE: Engineers		 -->

		<template id="engineers">
			<H3>[[TITLE]]</H3>
			<H4>[[SUBTITLE]]</H4>

			<!-- CONTAINER FOR ITEMS. USES SINGLET TEMPLATE SYNTAX, INSTEAD OF GROUP SYNTAX. -->
			<span mt-template="engineer" mt-records="[[RECORDS]]" class="engineers"></span>
		</template>


		<!--		HTML SINGLET TEMPLATE: Engineer		 -->

		<template id="engineer">
			<span class="engineer">
				<div class="title">An Engineer</div>				
				<a target="_blank" href="http://[[LINK]]">
					<img src="https://tinyurl.com/2mv3jtzh/[[IMG]]" alt="">
					<div class="caption">[[NAME]]</div>
				</a>
			</span>
		</template>

</mt-templates>

Code and files

• Added global constants to customize delimiters and prefix for custom attributes.
• Renamed js to hyphenated lowercase.
• Converted records.html to newline-delimited data, for easier manual entry.

Groups with Metadata

see next release for details.

v 0.0.0

Try out this lightweight templating system for nodes within a page. It clean, easy, and quick.

I believe it's stable and production ready, but i'd appreciate if folks would test it out.

Thx!

(ignore directory named "From git")