Skip to content

v1.0.1 - Micro Templating, with meta and groups

Choose a tag to compare

View all tags
@johnaweiss johnaweiss released this 05 Dec 06:18
· 38 commits to main since this release
v1.0.1
70fceab
This commit was created on GitHub.com and signed with GitHub’s verified signature. The key has expired.
GPG key ID: 4AEE18F83AFDEB23
Expired
Verified
Learn about vigilant mode.

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.
Assets 2
Loading