WangIt!

//
// Welcome to the WangIt! Markup Language
//
// WangIt! allows people to create inline-styled HTML
// without having to learn HTML or CSS.
//
// This page contains a WangIt! processor written in Javascript
// and examples that explain the language and its intended use.
//
// To use this page, select an example or
// type into the top box for instant WangIt!

// This page is devoid of references to external resources.




// WangIt!
{defe}W WangIt!{/defe}

// Div style
{defe}ds margin:0 auto;text-align:center;{/defe}

// Markup
{defm}w font-size:96px;font-weight:bold;color:red;{/defm}
{defm}b font-weight:bold;{/defm}
{defm}s font-size:small;{/defm}

// Text
{defe}blurb The {b}{W}{/b} Markup Language{/defe}
{defe}vlurb {s}Version 1.0a{/s}{/defe}

// Whole thing
{defe}wd <div style="{ds}">{w}{W}{/w}{^}{blurb}{^}{vlurb}</div>{/defe}

{wd}

Why

WangIt! was created to fill a specific requirement:
{^}{^}
A {user} needed to periodically create snippets of inline-styled HTML,
destined for a template-built HTML document.{^}
The snippets would be a few sentences each, at most a paragraph.
{/}
The text required styling, but this was minimal:{^}
some font sizes and stylings like italic and bold, and a few links, images and entities.
{/}
It was deemed unecessary (and possibly cruel) to force the {user} to learn HTML and CSS.
{/}
It was decided then to create a mini markup language that would offer the {user}
a small set of application-specific and meaningful tags.
{/}
The {operator} would then be able to create whatever tags were needed by {user},{^}
allowing the {user} to get their work done in a simple and meaningful way.

{defe}user     <em>user</em>{/defe}
{defe}operator <em>operator</em>{/defe}
{defe}/ {^}{^}{/defe}

Roles

{big}Success with {W} requires fulfilling two roles: {O} and {user}.{/big}{^^}
The {O} prepares {W} tags for the {user} and therefore must know{^}
the site or application, and of course HTML and CSS.{^^}
The {user} only needs to learn the {W} tags prepared by the {O}.{^^}

{big}{essence}This is the essence of {W}{/essence}{/big}

{^^}

{cheeses}
{cheese} Cheddar {|} {UK} {/cheese}
{cheese} Feta    {|} {GR} {/cheese}
{cheese} Edam    {|} {NL} {/cheese}
{cheese} Brie    {|} {FR} {/cheese}
{/cheeses}

{^}{i}Oops!{/i} It seems the {O} forgot to prepare a {W} tag for {NL}.


{defe}W     WangIt!{/defe}
{defe}O     {i}operator{/i}{/defe}
{defe}user  {i}user{/i}{/defe}
{defm}i     font-style:italic;{/defm}
{defm}big   font-size:larger;{/defm}
{defm}small font-size:smaller;{/defm}

{defe}ts border:1px solid black;{/defe}
{defe}td <td style="{ts}">{/defe}

{defe}cheeses  <table style="border-collapse:collapse;"><caption>Cheeses</caption><thead><tr><th style="{ts}">Cheese</th><th style="{ts}">Provenance</th></tr></thead><tbody>{/defe}
{defe}/cheeses </tbody><tfoot><tr><td colspan="2" style="{ts}">{i}{small}Explore the world of cheese!{/small}{/i}</td></tr></tfoot></table>{/defe}
{defe}cheese   <tr>{td}{/defe}
{defe}/cheese  </td></tr>{/defe}
{defe}|        </td>{td}{/defe}

{defe}UK &#127468;&#127463; England{/defe}
{defe}GR &#127468;&#127479; Greece{/defe}
{defe}FR &#127467;&#127479; France{/defe}

{defm}essence background:-webkit-linear-gradient(left,hsl(5,100%,50%),hsl(250,100%,50%));-webkit-background-clip:text;-webkit-text-fill-color:transparent;{/defm}

{defe}^^ {^}{^}{/defe}

Examples

{centrestage}
{labelbox}
Examples {>}
The examples on this page are meant to show the possibilites of {W} and spark some ideas.{^}
Basic {W} use would most likely involve not more than a handful of markup tags and a few entities.{^}
Some of the examples presented are perhaps going a bit too far.
{/labelbox}
{/centrestage}

{defe}W            WangIt!{/defe}
{defe}labelbox     <fieldset style="width:80%;margin:0 auto;border-radius:0.4em;"><legend style="font-size:larger;">{/defe}
{defe}>            </legend>{/defe}
{defe}/labelbox    </fieldset>{/defe}
{defe}centrestage  <div style="display:grid;grid-template-columns:1fr;justify-content:center;align-items:center;height:100%;">{/defe}
{defe}/centrestage </div>{/defe}

Tags

WangIt! tags work like HTML tags,
except that WangIt! tags use curly braces {}
and HTML tags use angle brackets <>.
{^}
As with HTML, tags can be enclosing (require an end tag)
or non-enclosing ("standalone"), here called entities.

WangIt! Tags

WangIt! starts off with:
{>}
No defined markup tags {-}
Three defined entity tags {!^}, {!~} and {!_} {-}
Four functional tags {!defe}, {!defm}, {!link} and {!image} {-}
One escape {!!
{<}

The functional tags work by dividing their contents into two parts.

{;;}

Basic example:{;}
{example}
{!defe}H Hello there{!/defe}{;}
{^}{_}^^^^^^^^^^^{;}
{|}{_}|- Right part{;}
{|}{;}
{|}- Left part
{/example}

{defe}> <ul><li>{/defe}
{defe}- </li><li>{/defe}
{defe}< </li></ul>{/defe}

{defe}ps background-color:cornsilk;padding:1em;max-width:min-content;{/defe}
{defe}example  <pre style="{ps}">{/defe}
{defe}/example </pre>{/defe}
{defe}6_ {_}{_}{_}{_}{_}{_}{/defe}
{defe};  {^}{/defe}
{defe}^  {6_}^{/defe}
{defe}|  {6_}|{/defe}
{defe};; {;}{;}{/defe}

Entities

// Define an entity with the {defe} tag.
// Left part is entity tag name.
// Right part is replacement text.

{defe}# 1-800-555-1212{/defe}

{defe}CN Call Now{/defe}

{CN}: {#}. Operators are standing by.
That number again is {#} - {CN}!

Markup

// Define markup with the {defm} tag.
// Left part is markup tag name.
// Right part is css.
//
// Markup tags create <span>s.

{defm}big font-size:24px;{/defm}

{defm}red color:red;{/defm}

{big}Hello {red}WangIt!{/red} User{/big}

Links

// Links are created with the {link} tag.
// Left part is url.
// Right part is link text.

{link}httpz://a.site.weeb Surf the Weeb!{/link}

Links 2

// Link tags by default require the user to type a full url.
// Clever {defe}s can simplify linking and avoid potential mistakes.

{defe}site {link}httpz://a.site.weeb/ Main Site{/link}{/defe}

Visit our {site} for more information.

Links 3

// Shortcuts to places in a website.
// Use {defe}s to make a tag that looks and is used like the link tag.

{defe}gosite {link}httpz://a.site.weeb/{/defe}

{defe}/gosite {/link}{/defe}


Visit our {gosite}icheeses International Cheese{/gosite} section for more information.


Join the {gosite}cotm Cheese of the Month Club{/gosite}!

Images

// Images are created with the {image} tag.
// Left part is url.
// Right part is alt text.

{image}httpz://a.site.weeb/image.jpg An image with a broken link{/image}

WangIt! Entities

These entities are pre-defined and may be overrriden.{^}

{!^} &#60;br&#62;{^}
{!_} &#38;nbsp;{^}
{!~} space{^}

Escape

WangIt! tags can be escaped by starting the tag name with an exclamation mark!{^}
The exclamation mark will be removed as a final step in processing.{^}
The exact replacement is {!! → {

{^}{^}

Using these tags:{^}{!defe}A eh{!/defe}{^}{!defm}blue color:blue;{!/defm}

{defe}A eh{/defe}{defm}blue color:blue;{/defm}

{^}{^}

A sentence with the {blue}{!A}{/blue} entity and the {!blue}{A}{!/blue} markup tags.

Nesting and Naming

// Instead of forcing users to nest tags,
// create one tag that combines styling.

// Maybe even give the tag a name
// that has more real-world value
// than a simple markup tag name.

// Instead of

{defm}medium font-size:22px;{/defm}
{defm}orange   color:orange;{/defm}

// And forcing users to learn and type

{medium}{orange}Special this morning: Circular pancakes{/orange}{/medium}

<br><br>

// Try combining styles into a tag with a meaningful name

{defm}breakfast font-size:22px;color:orange;{/defm}

// Then, users can type

{breakfast}Special this morning: Bonus ½ slice of toast{/breakfast}

Lists

// Make list making simple with a few clever {defe}s.

{defe}list  <ul style="list-style-type:disc"><li>{/defe}
{defe}/list </li></ul>{/defe}
{defe}|     </li><li>{/defe}

// Now, users can make a bullet list

{list} A {|} List {|} In {|} WangIt! {/list}

// Make up your own syntax.
// Don't forget the closing tags!

{defe}list:Roman <ul style="list-style-type:upper-roman;"><li>{/defe}
{defe}/list:Roman </li></ul>{/defe}

{defe}Cheeses: <ul style="list-style-type:lao;"><li>{/defe}
{defe}, </li><li>{/defe}
{defe}. </li></ul>{/defe}


{list:Roman} Romans {|} go {|} to {|} house? {/list:Roman}

{Cheeses:} Cheddar {,} Feta {,} Edam {,} Brie {.}

Tables

// To fully reproduce HTML table structure would require
// duplicating HTML table tags as WangIt! tags.
// It's easier to simply use HTML tags in that case.
//
// However, a clever operator might reason that tables,
// from the point of view of the user,
// don't necessarily have to look too much like tables.
// Try for human-readable-ish or something that can be spoken out loud.

{Cheese-prices:}
Cheddar {from} {UK} {@} $2.99 {per} 300g {,}
Feta    {from} {GR} {@} $2.99 {per} 300g {,}
Edam    {from} {NL} {@} $2.99 {per} 300g {,}
Brie    {from} {FR} {@} $2.99 {per} 300g {.}



//{defe}blurb Coming soon: Rotating cheese display.{/defe}
{defe}blurb See our new rotating cheese display!{/defe}

{defe}ts border:1px solid black;{/defe}
{defe}td <td style="{ts}">{/defe}
{defe}th <th style="{ts}">{/defe}

{defe}Cheese-prices:  <table style="border-collapse:collapse;"><caption>Cheese Prices Today</caption><thead><tr>{th}Cheese</th>{th}Provenance</th>{th}Price</th>{th}Per</th></tr></thead><tbody><tr>{td}{/defe}
{defe}.               </td></tr></tbody><tfoot><tr><td colspan="4" style="{ts}">{si}{blurb}{/si}</td></tr></tfoot></table>{/defe}

{defe}from     </td>{td}{/defe}
{defe}@        <td style="{ts}text-align:right;">{/defe}
{defe}per      {@}{/defe}
{defe},        </td></tr><tr>{td}{/defe}

{defe}UK &#127468;&#127463; England{/defe}
{defe}GR &#127468;&#127479; Greece{/defe}
{defe}NL &#127475;&#127473; Netherlands{/defe}
{defe}FR &#127467;&#127479; France{/defe}

{defm}si font-size:smaller;font-style:italic;{/defm}

// Note that all the cheese prices are the same;
// I don't need people getting all bent out of
// shape because their cheese was priced higher
// or lower than some other cheese.

Order

Input is processed in the following order:
{first}Entities{/first}
  {first}{!^} &#60;br&#62;{/first}
  {second}{!_} &#38;nbsp;{/second}
  {last}{!~} space{/last}
{second}Markup{/second}
{third}Links{/third}
{fourth}Images{/fourth}
{last}Escapes {!!{/last}


{defe}li  <li>{/defe}
{defe}/li  </li>{/defe}

{defe}first   <ol>{li}{/defe}
{defe}/first  {/li}{/defe}
{defe}second  {li}{/defe}
{defe}/second {/li}{/defe}
{defe}third   {li}{/defe}
{defe}/third  {/li}{/defe}
{defe}fourth  {li}{/defe}
{defe}/fourth {/li}{/defe}
{defe}last    {li}{/defe}
{defe}/last   {/li}</ol>{/defe}

WangItClean

{wc}
WangItClean is a function that can be used to "clean-up" up text,
the result of which can then be passed to WangIt!.{^}
WangItClean is completely optional.{^}
All the examples on this page are passed through WangItClean
before being passed through WangIt!.
{^}
{^}
WangItClean
{will:} Remove lines beginning with // (comments)
{then}  Trim leading and trailing whitespace
{then}  Collapse all runs of whitespace to single spaces {.}
For whitespace, this is much like how a browser treats HTML.{^}
Using WangItClean (or similar) allows for commenting.
{/wc}


{defe}wc  <div style="max-width:30em;">{/defe}
{defe}/wc </div>{/defe}

{defe}will: will:<ol><li>{/defe}
{defe}then  </li><li>{/defe}
{defe}.     </li></ol>{/defe}

Code and Concept

Take a look at the code: one regexp and some string replacement - it's practically nothing!{^}
{W} can be easily written in any language that has regexps and string replacement.
{^}{^}
{W} is more of an idea{*} than a piece of code, and as mentioned often here,{^}
success comes from the cleverness and creativity of the person setting up the tags.
{^}{^}
An implementor might have ideas about improving or adding functionality to {W}.{^}
The author would be interested to hear of such things.
{^}{^}
{*}{s}The author doesn't think that any of the ideas here are new.{/s}

{defe}W WangIt!{/defe}
{defm}s font-size:small{/defm}
{defe}* &ast;{/defe}

Future and Ideas

{grid}
{2}The author doesn't see any reasons to make WangIt! more than it is.{/2}
{Cell}WangIt! was designed for a simple, specific purpose.{/Cell}{`}
{Cell}The idea could certainly be applied to generating things other than HTML.{/Cell}{`}
{2}Nevertheless it is possible to create large documents with lots of WangIt! tags.{/2}
{4}If a <q>full</q> markup language is needed, there are plenty of good ones to choose from.{/4}
{/grid}
{g}gap:0.5em;{/g}
{c}{cb}grid-column-end:span 4;max-width:max-content;{/c}A {deff} tag (define function) might be interesting.
<pre>{deff}upcase myUpcase{/deff}</pre>
Would be used like:
<pre>... some text {upcase}word{/upcase} other text ...</pre>
The function myUpcase would be called and passed the contents of the {upcase} tag.{^}
The tag and contents would be replaced with the return value from the function.{/cell}
{3}A {defr} tag (define regexp) could arrange the replaced elements differently than do the {!link} or {!image} tags.{/3}
{`}{c}{cb}width:35em;grid-column-end:span 3;max-width:max-content;{/c}This could lead to having a way to "{def}" the language from almost zero.{^}
Tags that are currently built-in, like {!link} and {!image} wouldn't exist but have to be defined,
and markup wouldn't necessarily generate only &#60;span&#62;s.{/cell}
{`}
{/grid}

{defe}g     <div style="margin:1em auto 0;display:grid;grid-template-columns:repeat(4, 1fr);background:repeating-radial-gradient(hsl(0,90%,90%),hsl(0,0%,100%));{/defe}
{defe}/g    ">{/defe}
{defe}grid  {g}{/g}{/defe}
{defe}/grid </div>{/defe}
{defe}c     <div style="padding:0.25em;max-width:14em;{/defe}
{defe}/c    ">{/defe}
{defe}cell  {c}{/c}{/defe}
{defe}/cell </div>{/defe}
{defe}cb    border:1px solid hsl(0,100%,45%);border-radius:0.5em;{/defe}
{defe}Cell  {c}{cb}{/c}{/defe}
{defe}/Cell {/cell}{/defe}
{defe}`     {cell}{/cell}{/defe}

{defe}1  {Cell}{/defe}
{defe}/1 {/Cell}{`}{`}{`}{/defe}
{defe}2  {`}{Cell}{/defe}
{defe}/2 {/Cell}{`}{`}{/defe}
{defe}3  {`}{`}{Cell}{/defe}
{defe}/3 {/Cell}{`}{/defe}
{defe}4  {`}{`}{`}{Cell}{/defe}
{defe}/4 {/Cell}{/defe}

Blank