X

An innovative approach to templating

Enclosing

Pulling together the pieces of a document using include pragmas is fine, but blue-phrase goes one further with its innovative enclosure templating.

Enclosures are a way to wrap a portion of your body matter with template-driven framing. This innovative approach to templates opens up new possibilities. Two of the most exciting are:

  • Allowing complex decorations to be applied to elements without cluttering up your main composition.
  • Wrapping the entire body of your composition with headers, footers, and menus.

The mechanism

The blue-phrase enclosure pragma behaves similar to its cousin, the include pragma, but instead of injecting the contents of the template file into your composition, it wraps the template file's contents around a portion of your composition.

The enclosure notation is straightforward: it identifies an element or class of elements as its target, and it specifies where your target matter should be placed within its body.

Example

Here's an enclosure pragma that targets a single element of your composition with an identifier of #story:

!enclosure #story `./enclosures/story.blue`    

Here's an enclosure pragma that targets every element in your composition that has a classname of .team-member:

!enclosure .team-member `./enclosures/team-member.blue`    

A target-matter pragma is added somewhere within each template file, which becomes the point at which your composition's inner content is placed. Here's what a story.blue template file might look like:

html {
head {
meta *charset=UTF-8
meta *name=viewport *content='width=device-width, initial-scale=1'
link `css/standard-styles.css` *rel=stylesheet *type=text/css
script `js/basic-scripts.js`
title $TITLE
}
body {
!target-matter
}
}
story.blue

And here's what a team-member.blue template file might look like:

div#member-frame {
div.top.left
div.top.right
!target-matter
div.bottom.left
div.bottom.right
}
team-member.blue

Compiled results

To continue the example, consider a composition that contains this:

!enclosure #story `./enclosures/story.blue`    
!enclosure .team-member `./enclosures/team-member.blue`
$TITLE="Meet the Team"

div#story {
h1 $TITLE
figure.team-member {
img `allegra.png` *width=300 *height=300
figcaption Allegra
address <<a `mailto:allegra@example.com`>>
}
figure.team-member {
img `arjana.png` *width=300 *height=300
figcaption Arjana
address <<a `mailto:arjana@example.com`>>
}
figure.team-member {
img `antoni.png` *width=300 *height=300
figcaption Antoni
address <<a `mailto:antoni@example.com`>>
}
}
meet-the-team.blue

When compiled, the resulting HTML will be wrapped with the template content from the two enclosures and will look like this:

<html>
<head>
<meta charset=UTF-8 />
<meta name=viewport content='width=device-width, initial-scale=1' />
<link href='css/standard-styles.css' rel=stylesheet type=text/css />
<script src='js/basic-scripts.js'></script>
<title>Meet the Team</title>
</head>
<body>
<div id=story>
<h1>Meet the Team</h1>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='allegra.png' width=300 height=300 />
<figcaption>Allegra</figcaption>
<address><a href='mailto:allegra@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='arjana.png' width=300 height=300 />
<figcaption>Arjana</figcaption>
<address><a href='mailto:arjana@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
<div class=member-frame>
<div class='top left'></div>
<div class='top right'></div>
<figure class=team-member>
<img src='antoni.png' width=300 height=300 />
<figcaption>Antoni</figcaption>
<address><a href='mailto:antoni@example.com'></a></address>
</figure>
<div class='bottom left'></div>
<div class='bottom right'></div>
</div>
</div>
</body>
</html>
meet-the-team.html

With enclosures, you can dramatically simplify your compositions and supercharge your templates!

Further Reading

BLUE-PHRASE Basics Getting started with symbolic endophrasing. Learn how to author documents with many of the commonly used typographic techniques found in word processors, by using BLUE-PHRASE symbolic endophrasing. There are only a few basic rules to learn.

BLUE-PHRASE Essentials A primer for effectively using BLUE-PHRASE. Learn the essentials necessary to effectively use BLUE-PHRASE, and discover techniques to perform commonly occurring tasks with greater ease using shorthand notation.

BLUE-PHRASE + CSS The fundamentals of styling Learn how to style BLUE-PHRASE with Cascading Style Sheets.

BLUE-PHRASE Quick Ref Syntax cheat sheet A quick reference to BLUE-PHRASE syntax.

Related Sites

BLUE-PHRASE HTML templating and blogging. A computer language for solving problems related to reading, writing, and publishing.

RWSERVE Caching HTTP/2 server with dynamic JavaScript plugins. HTTP/2 is all about speed: fewer bytes, reduced latency, longer connections, multiplexing and prioritization.

READ WRITE GROK A different take on a tech blog. Follow along as Tangled Web Services boldly goes where tech has gone before.

Contact Us

Read Write Tools is able to offer free and low-cost software products because it has low overhead and limited staff. We are happy to answer your customer service and technical support questions when our self-service options aren't able to meet your needs.

Many of the most common customer service issues can be resolved without our help. Check the licensing and accounts pages for ways to resolve issues related to registration, customer numbers, passwords and access keys.

Technical support issues can sometimes be resolved using one of the public forums like Stack Overflow, so search for error messages, blue-phrase syntax questions, and technical problems there. For best results include the name of the product in your search, like rwdoc, rwreuse, rwserve, etc.

For problems that you can't resolve yourself, ask for help.

Connections

Twitter @ReadWriteTools Latest announcements from our developer advocate.

Medium @joehonton Using distraction-free tools for better reading, writing and publishing, and loving it!

Copyright

Copyright © 2020 Read Write Tools, All Rights Reserved.

Software Licensing

Read Write Tools Software License Agreement. The ReadWriteView, ReadWriteNote, ReadWriteDoc, and ReadWriteReuse desktop applications; and the ReadWriteServe server software may be used only in conjunction with the purchase of a software license.

BLUE PHRASE Software License Agreement. The Blue-phrase processor and Blue-phrase symbolic endophrasing may be used only in conjunction with the purchase of a software license.

Read Write Tools Open Source Software. Read Write Tools publishes some of its software portfolio under open source licenses, including RWSERVE plugins, web components, CSS style sheets, editor themes, command line build tools, and Node.js libraries. These are covered by two different open source licenses: the MIT license or the Creative Commons CC-BY-NC-ND 4.0 (Attribution-NonCommercial-NoDerivatives 4.0 International). See each individual file or its associated README file to learn which applies.

Privacy Policy

Data We Obtain From You

  • While you are browsing our website, we log all HTTPS requests from your browser and all responses by our servers.
  • Each time you use our software, we verify the authenticity of your license key using the device address of your computer, and the IP address of your computer network. We use this data to prevent piracy, and to block unlicensed use of our software.

Data Retention

  • We store site visitor log data for a minimum of 90 days.
  • We retain your customer number, license keys and purchase history for a minimum of three years.

Obtaining a copy of your data

  • You may login to your account using the customer number we assigned to you, and the password chosen by you, to view and print all of the data we retain about you.

Data sharing

  • When you purchase a license to any of our software products, we forward payment information from you to a PCI DSS compliant payment processing gateway.
  • We do not sell or share any information with third parties for the purpose of marketing.
Refund Policy

Refund Policy Our goal is customer satisfaction. If, in your opinion, we haven't met our goal, we will refund the unused, pro-rated portion of your license fee.

An innovative approach to templating

🔎