Templating - sgml/signature GitHub Wiki
The W3 Word Processor Filters page should answer most of these questions. For more details, here some resources on the evolution of separating content from presentation:
- Groff Mission Statement (pdf)
- BBCode Guide
- The Roots of SGML -- A Personal Recollection
- Java FAQ
- Charles Goldfarb — the Godfather of Markup Languages
- Markup Language Family Tree
- Typesetting with Linux
- A Triumph of Simplicity: James Clark on Markup Languages and XML
- Markup and Style: History and Philosophy
- Catalog of compilers, interpreters, and other language tools
- Understanding the Taxonomy of Languages: Chapter 8 - Minilanguages
- SGML: In Memory of William W. Tunnicliffe
- A Companion to Digital Humanities: Allen H. Renear - Text Encoding
- Drawing inferences on the basis of markup
- Rabbit/duck grammars: a validation method for overlapping structures
- Markup Languages and (Non-) Hierarchies
- https://varnish-cache.org/docs/3.0/tutorial/esi.html
- https://symfony.com/doc/current/http_cache/esi.html
- https://www.fastly.com/blog/using-esi-part-1-simple-edge-side-include/
- https://www.w3.org/TR/esi-invp
- https://nanojsx.io/
- https://www.w3.org/TR/edge-arch/
- https://www.npmjs.com/package/xmlpug
- https://www.npmjs.com/package/json-transforms
- https://www.balisage.net/Proceedings/vol19/html/Lumley01/BalisageVol19-Lumley01.html
- http://www.saxonica.com/papers/xmlprague-2018mhk.pdf
- https://doc-snapshots.qt.io/qtivi/template-syntax.html
- https://shripadk.github.io/react/docs/jsx-gotchas.html
- http://blog.vjeux.com/2013/javascript/jsx-e4x-the-good-parts.html
- https://css-tricks.com/render-children-in-react-using-fragment-or-array-components/
- https://github.com/facebook/react/issues/11845
- https://github.com/vuejs/vue/issues/3832
- https://stackoverflow.com/questions/30852751/expected-corresponding-jsx-closing-tag-for-input-reactjs
- https://stackoverflow.com/questions/26354600/how-do-you-make-react-js-output-valid-xml-instead-of-html
- AtomPub vs CMIS
- Freemarker vs Velocity
- OpenCms Documentation | Multilingual websites
Markup and typesetting languages are the earliest examples of templating. Here is the Wikipedia definition:
A markup language is a modern system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts. Examples are typesetting instructions such as those found in troff and LaTeX, or structural markers such as XML tags.
Here is a diagram:
RUNOFF "Generic Coding" "Editorial Structure Tags" (Jerome Saltzer, 1964) (William Tunnicliffe, 1967) (Stanley Rice, pre-1970) | | | | | | TeX roff - nroff - troff |-------------------------------------| (Don Knuth, 1977) (Josef Osanna, 1973) | GML (Charles Goldfarb, 1969) | SCRIBE | (Brian Reid, 1980) | | |--------------------------| SGML (Standard, 1980) | | | | HTML XML (Berners-Lee, 1990) (Standard, 1998)
As far as web site templating, SSI is the mother of them all.
From a security standpoint, JSP scriptlets have vulnerabilities:
There are a handful of objects made available in JSPs which are susceptible to security flaws. Their corresponding Java class functions are used as is in scriptlets. All the same security rules should apply.
For example, one session variable:
<%=session.getAttribute(name)%>
can taint another:
<%
String name = request.getParameter("username");
session.setAttribute("taintedAttribute", name);
%>
and unescaped strings can be dangerous as well:
<style>
<%
String parm = request.getParameter("foobar");
String cssEscaped = Escape.cssString(parm);
%>
a[href *= "<%= cssEscaped %>"] {
background-color: pink!important;
}
</style>
XSLT uses a hierarchy to allow parameters to be redefined:
- the
with-param
value has the highest precedence - the
param
value has the second highest precedence - the
value-of
value has the third highest precedence
For example:
<xsl:template match="/">
<xsl:call-template name="blob">
<xsl:with-param name="par" select="'some-value'"/>
</xsl:call-template>
</xsl:template>
<xsl:template name="blob">
<xsl:param name="par" select="'default-value'"/>
<xsl:value-of select="$param"/>
</xsl:template>
Modes in XSLT allow us to invoke templates based on matching XPath selectors, which is a form of delegation:
<xsl:template match="/">
<!-- Apply templateA -->
<xsl:apply-templates mode="templateA"/>
</xsl:template>
<xsl:template match="someElement" mode="templateA">
<!-- Your templateA logic here -->
</xsl:template>
The for-each
loop control of XSLT uses the position()
method to capture the index, and the current()` method to capture its value.
Enumerate these items:
<items>
<item>Apple</item>
<item>Banana</item>
<item>Cherry</item>
</items>
Using a template:
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:template match="/">
<enumerated-items>
<xsl:for-each select="items/item">
<enumerated-item>
<xsl:number value="position()" />
<xsl:value-of select="current()" />
</enumerated-item>
</xsl:for-each>
</enumerated-items>
</xsl:template>
</xsl:stylesheet>
XSLT will transform it to:
<enumerated-items>
<enumerated-item>1 Apple</enumerated-item>
<enumerated-item>2 Banana</enumerated-item>
<enumerated-item>3 Cherry</enumerated-item>
</enumerated-items>
And now the data is annotated with the index and you can see the total count at a glance.
UIML is an abstraction which can be used to generate XSLT, JSX, or any other tag based language easily using XSLT. Here is 'Hello World':
<uiml>
<part class="HelloWorld">
<content>
<data>
<![CDATA[Hello, World!]]>
</data>
</content>
</part>
</uiml>
- https://docs.rs/uritemplate/0.1.2/uritemplate/
- https://www.javadoc.io/doc/com.damnhandy/handy-uri-templates/latest/com/damnhandy/uri/template/UriTemplate.html
- https://medialize.github.io/URI.js/uri-template.html
- https://godoc.org/google.golang.org/api/internal/third_party/uritemplates#example-Expand
Slots in web components vs XSLT transclusion
<my-component>
<p slot="mySlot">Content to be transcluded</p>
</my-component>
<script>
this.shadowRoot.addEventListener('slotchange', (event) => {
const slotContent = event.target.assignedNodes();
// Handle the slot content as needed
});
</script>
<!-- doc1.xml -->
<chapter>
<title>doc1.xml</title>
<p>First paragraph</p>
<transclusion src="doc2.xml"/>
<p>Last paragraph</p>
</chapter>
<!-- XSLT stylesheet -->
<xsl:template match="transclusion">
<xsl:copy-of select="document(@src)"/>
</xsl:template>
- https://en.wikipedia.org/wiki/Template:Citation_Style_documentation/url
- https://en.wikipedia.org/wiki/Category:Documentation_assistance_templates
- https://www.mediawiki.org/wiki/Help:TemplateData
<h2 id="page-one">foo</h2>
<!-- content block -->
<h2 class="footer">bar</h2>
<h2 id="page-two" class="page-break">baz</h2>
<!-- content block -->
<h2 class="footer">bop</h2>
<h2 id="page-three" class="page-break">buzz</h2>
<!-- content block -->
<h2 class="footer">blip</h2>
<h2 id="page-four" class="page-break">bloop</h2>
<!-- content block -->
<h2 class="footer">blarg</h2>
<h2 id="page-five" class="page-break">blech</h2>
@media print {
#page1, #page2, #page3, #page4, #page5 {
page-break-after: always;
}
#page5 {
page-break-after: auto; /* No page break after the last page */
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Social Network Timeline</title>
<link
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css"
rel="stylesheet"
/>
</head>
<body class="bg-gray-100 p-6">
<div class="max-w-4xl mx-auto">
<h1 class="text-3xl font-bold mb-6">
Timeline of Social Network Domain Launches
</h1>
<div class="space-y-4">
<div class="flex items-center">
<span class="w-40">Friendster (2002)</span>
<meter
value="2002"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">LinkedIn (2003)</span>
<meter
value="2003"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">MySpace (2003)</span>
<meter
value="2003"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">Facebook (2004)</span>
<meter
value="2004"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">Twitter (2006)</span>
<meter
value="2006"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">Instagram (2010)</span>
<meter
value="2010"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">Pinterest (2010)</span>
<meter
value="2010"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">Snapchat (2011)</span>
<meter
value="2011"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
<div class="flex items-center">
<span class="w-40">TikTok (2016)</span>
<meter
value="2016"
min="2000"
max="2022"
class="w-full h-6 bg-gray-200 border-2 border-gray-300 rounded"
></meter>
</div>
</div>
</div>
</body>
</html>
-
Refactoring JSP Scriptlets using JSTL and MVC Architecture | LinkedIn
-
Stealing Session Tokens on Plunker with an Angular Expression Injection
-
How to use EJS Templating in a Node.js Application – freeCodeCamp
-
Markdown – Harp, the static web server with built-in preprocessing
-
reactjs - How to use sideNav of materialize css with react? - Stack Overflow
-
Toby's Brain Dump ...: Sitemesh, my favourite web development companion
-
9.14. Using FreeMarker in a Web Application - Jakarta Commons Cookbook [Book]
-
Docusaurus · Easy to Maintain Open Source Documentation Websites
-
[ES6 in Depth: Template Strings](https://hacks.mozilla.org/2015/05/es6-in-depth-template-strings-2/]
-
Announcing XHP-JS: Building efficient user interface components with Hack, React, and XHP
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Property_accessors
- https://ocramius.github.io/blog/intercepting-public-property-access-in-php/
- https://wiki.php.net/rfc/write_once_properties
- https://www.w3.org/TR/2012/NOTE-xbl-20120524/
- https://www.w3.org/TR/xbl-primer/
- https://www.w3.org/2008/webapps/wiki/XBL
- https://www.w3.org/TR/2001/NOTE-xbl-20010223/
- https://lists.w3.org/Archives/Public/public-appformats/2006Feb/att-0000/XBL-UCs-and-Reqs-2006-02-10-DRAFT.html
- https://wiki.whatwg.org/wiki/Component_Model_Use_Cases