You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
yml2/programming.en.yhtml2

414 lines
16 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

include homepage.en.yhtml2
page "Using YML 2" {
p >>
YML 2 is a smart ¬http://en.wikipedia.org/wiki/Template_processor template language¬ and
¬http://en.wikipedia.org/wiki/Domain-specific_language DSL concept¬. This guide will give
you a feeling, for what it's worth.
>>
h2 id=wiki > Creating a Wiki like language for writing documentation
p >>
Let's say, we want to define a small Wiki system, which should be translated from a Wiki
like language into HTML. This guide is written in one using YML 2. I call it ƒYHTML. You can
view the ¬homepage.en.yhtml2 source code of what you're reading now¬. It's about writing
web pages like that:
>>
Code {
||
page "Hello, world" {
p ¬features#blockquote >>¬
Hello, world! I can link here, say:
||
>
] ¬http://en.wikipedia.org to Wikipedia¬
> \n
||
¬features#blockquote >>¬
p ¬features#blockquote >>¬
||
>
] This is ƒemphasized. And this is «code».
> \n
||
¬features#blockquote >>¬
}
||
}
p >>
Prerequisite: knowing how ¬http://en.wikipedia.org/wiki/Html#Markup HTML¬ works.
>>
h2 id=how > How does that work?
p >>
YML 2 is a template language. That means, you can define ¬http://en.wikipedia.org/wiki/Recursion recursive¬
templates of what's to be generated. This is ¬homepage.en.yhtml2 the code¬; just click on underlined things
to get an explanation:
>>
Code {
||
¬features#quotethrough <¬?xml version="1.0" encoding="UTF-8"?¬features#quotethrough >¬
¬features#quotethrough <¬!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"¬features#quotethrough >¬
¬features#decl decl¬ pageContent ¬features#alias alias¬ body ¬features#defaultbody {¬
a name¬features#named =¬"top";
¬features#including include¬ ¬heading.en.yhtml2 heading.en.yhtml2¬;
div id¬features#named =¬"entries"
¬features#contentfc content¬;
¬features#defaultbody }¬;
¬features#decl decl¬ page(¬features#pointer *title¬, lang¬features#defaultattr =¬"en", xml:lang¬features#defaultattr =¬"en", xmlns¬features#defaultattr =¬"http://www.w3.org/1999/xhtml")
¬features#alias alias¬ html ¬features#defaultbody {¬
head ¬features#subtree {¬
title ¬features#pointer *title¬;
meta http-equiv¬features#named =¬"Content-Type", content¬features#named =¬"text/html;charset=UTF-8";
link rel¬features#named =¬"stylesheet", type¬features#named =¬"text/css", href¬features#named =¬"format.css";
¬features#subtree }¬
pageContent
¬features#contentfc content¬;
¬features#defaultbody }¬;
||
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"¬\s*(.*?)\s+(.*?)\s*¬"</a>
> ¬features#userop as¬ a href¬features#named =¬"%1" ¬features#quote >¬ %2
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"«(.*?)»"</a>
> ¬features#userop as¬ code ¬features#quote >¬ %1
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"ƒ(\S+)"</a>
> ¬features#userop as¬ em ¬features#quote >¬ %1
}
h2 id=details > Details, please!
h3 > Starting with XHTML headers
p >>
Because HTML headers are boring and annoying, I'm copying them from document to document. And at last,
they ended here ;-) If you already have things in angle brackets, you can just add them to your YML 2
document “as is”, because everything which starts with an opening angle bracket will be a “give through”
for the YML 2 toolchain. So our first two lines are:
>>
Code
||
¬features#quotethrough <¬?xml version="1.0" encoding="UTF-8"?¬features#quotethrough >¬
¬features#quotethrough <¬!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"¬features#quotethrough >¬
||
h3 > Defining the document structure
p >>
A Webpage usually has a structure: it has a specific title and content. Beside that, technical things
have to be encoded. A Webpage in XHTML is XML text, setting xmlns to the right name space. That's how we
do that in YML 2:
>>
Code
||
¬features#decl decl¬ page(¬features#pointer *title¬, lang¬features#defaultattr =¬"en", xml:lang¬features#defaultattr =¬"en", xmlns¬features#defaultattr =¬"http://www.w3.org/1999/xhtml")
¬features#alias alias¬ html ¬features#defaultbody {¬
||
p >>
First we ¬features#decl declare¬ the «page» function. It's ¬features#alias aliased to¬ «html», so it will
generate a «html» tag, not a «page» tag.
>>
p >>
The first parameter, «*title», is a placeholder for the title of the document. The content of what we give
here later will be repeated at any place we're putting «*title» into our template. This technique is called
¬features#pointer Pointers¬.
>>
p >>
The two other attributes have ¬features#defaultattr Default Values¬, so they're generated each time the
«page» function will be called.
>>
h3 > The Document content
p >>
The document content is what is in the «{ ... }» block:
>>
Code
||
¬features#defaultbody {¬
head ¬features#subtree {¬
title ¬features#pointer *title¬;
meta http-equiv¬features#named =¬"Content-Type", content¬features#named =¬"text/html;charset=UTF-8";
link rel¬features#named =¬"stylesheet", type¬features#named =¬"text/css", href¬features#named =¬"format.css";
¬features#subtree }¬
pageContent
¬features#contentfc content¬;
¬features#defaultbody }¬;
||
p >>
This reflects, that each HTML document has a «head» and a «body» section. Of course, we insert the «*title»
pointer value in the «title» tag. Then some meta data and a link to a nice
¬http://en.wikipedia.org/wiki/Cascading_Style_Sheets CSS¬ ;-)
>>
p >>
For the «body» section, we have a little helper function, «pageContent». The function named «content» is
a ¬features#contentfc placeholder¬, where the content of the page will be placed, when our «page» function
will be called.
>>
h3 > Generating the «body» with the «pageContent» function
p >>
The «pageContent» function is used for generating the «body» with standard elements; therefore, it's
¬features#alias aliased¬ to «body»:
>>
Code
||
¬features#decl decl¬ pageContent ¬features#alias alias¬ body ¬features#defaultbody {¬
a name¬features#named =¬"top";
¬features#including include¬ ¬heading.en.yhtml2 heading.en.yhtml2¬;
div id¬features#named =¬"entries"
¬features#contentfc content¬;
¬features#defaultbody }¬;
||
p >>
It first sets an HTML anchor, so links can reference the top of the page:
>>
Code | a name¬features#named =¬"top";
p >>
Then a file with heading and navigation (the menu to the right on the page here) is being
¬features#including included¬:
>>
Code | ¬features#including include¬ ¬heading.en.yhtml2 heading.en.yhtml2¬;
p >>
At last, the page content is being put in, surrounded by a «div» named «entries», so it can be referenced
later, too:
>>
Code ||
div id¬features#named =¬"entries"
¬features#contentfc content¬;
||
p >>
If you'll have a look on the included ¬heading.en.yhtml2 heading.en.yhtml2¬ file, then you'll see the
the static head and navigation sections hard coded. With the ¬format.css CSS file¬ everything is brought
to the right place.
>>
h3 > Defining some operators for the Wiki like language
p >>
The trick with a Wiki like language is, that one can write plain text, and adding structural things
to it, like links i.e.
>>
p >>
So we need language constructs, which let us structure. In YML 2 these are called
¬features#userop User defined in-text Operators¬:
>>
Code {
> ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"¬\s*(.*?)\s+(.*?)\s*¬"</a>
> ¬features#userop as¬ a href¬features#named =¬"%1" ¬features#quote >¬ %2
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"«(.*?)»"</a>
> ¬features#userop as¬ code ¬features#quote >¬ %1
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"ƒ(\S+)"</a>
> ¬features#userop as¬ em ¬features#quote >¬ %1
}
p >>
They look somewhat disturbing, if you're not familiar with
¬http://en.wikipedia.org/wiki/Regular_expression Regex¬, so I will explain.
>>
p >>
First we define a link:
>>
Code {
> ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"¬\s*(.*?)\s+(.*?)\s*¬"</a>
> ¬features#userop as¬ a href¬features#named =¬"%1" ¬features#quote >¬ %2
}
p >>
The keyword «define operator» starts the definition. Then there is the Regex:
>>
Code | "¬\s*(.*?)\s+(.*?)\s*¬"
p {
"I decided I want to have the special character " "¬" " surrounding each link like this: "
code ] ¬http://en.wikipedia.org go to Wikipedia¬
". This is just like what ¬http://www.mediawiki.org MediaWiki¬ does with brackets; here the "
"same would read: «[http://en.wikipedia.org go to Wikipedia]»."
}
p >>
I like using such special characters. This is because I'm using a
¬http://www.apple.com/mac/ Mac¬ and ¬http://en.wikipedia.org/wiki/GNU/Linux GNU/Linux¬.
If you're using ¬http://www.microsoft.com/windows/ Windows¬, I really can recommend
¬http://www.autohotkey.com/docs/Hotkeys.htm AutoHotkey¬. It's a great piece of software to expand the
keyboard capabilities of Windows (and much more).
>>
p {
> How does this Regex stuff work? It's a ¬http://en.wikipedia.org/wiki/Pattern_matching pattern matching¬ language consuming characters with each
> command. Well, we want to have the following: The first thing between the
] ¬
> markers shell be the link target URL. All other things shell be the name of the link shown.
>>
For that case, we're first consuming whitespace with «\s*» the «\s» means “an arbitrary whitespace
character” (like blank, newline, etc.). The asterisk «*» means “some of them or none”, so this
consumes all whitespace which is there (and gives no error if there is none).
>>
}
p >>
Second, we open a group with parentheses «( )» This first group we can later reference as «%1»
when substituting.
>>
p >>
Inside this group, we're telling that we want anything in it, no matter what it is. For this case,
we're using a dot «.» which means “any character”, followed by asterisk questionmark «*?», which is
the code for “consume as much as you can, but only up to the next code in the Regex”. The total
«(.*?)» consumes the target URL (without checking it).
>>
p >>
Then we're consuming some whitespace again, this time with «\s+». Using a plus «+» instead of an
asterisk «*» or asterisk questionmark «*?» means: there has to be at least one whitespace character.
And we want whitespace between the URL and the name, right? ;-)
>>
p >>
Now we're consuming the second group. We're consuming whatever is there it's the name of the
link. We're using another «(.*?)» group for it. It will be group 2, and we can reference it with
this in the substitution: «%2».
>>
p {
> At last we're consuming redundant whitespace with «\s*», and our Regex is closed by another
] ¬
> character. And that makes the total Regex:
}
Code ] "¬\s*(.*?)\s+(.*?)\s*¬"
p >>
So what can we do with it? What we want are «<a href="..." />» tags. And that means, we want to
call a function like this: «a href="..." > ...»
>>
p >>
As «href» we want to have the result of group 1,
because this is the link target. After the ¬features#quote Quote operator¬ «>» we want to have
what is the name of the link, that is the result of group 2. That we can write literally:
>>
Code | a href="%1" > %2
p >>
Our first User defined in-text Operator is ready :-)
>>
p >>
Maybe you would prefer using brackets. So just do it ;-) Change the Regex to this, and you
can use brackets for links like in MediaWiki; we have to escape the brackets «[ ]» with a
backslash «\\», because brackets are also codes in Regex, and we don't want the code, we really
want brackets:
>>
Code | "\[\s*(.*?)\s+(.*?)\s*\]"
p >>
The other two operators should now be easy to understand:
>>
Code {
> ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"«(.*?)»"</a>
> ¬features#userop as¬ code ¬features#quote >¬ %1
br; > ¬features#userop define operator¬
] <a href="http://docs.python.org/library/re.html">"ƒ(\S+)"</a>
> ¬features#userop as¬ em ¬features#quote >¬ %1
}
p >>
A tip: the code with an upper case letter S «\S» means, that only non-whitespace characters shell
be consumed.
>>
h2 id=using > Using it
p >>
How to write a new web page with our templates? Here's a ¬hello.en.yhtml2 hello world¬. We can use
¬features#blockquote Block Quotes¬ for entering text, and our new self defined operators:
>>
Code {
||
¬features#including include¬ homepage.en.yhtml2
page "Hello, world" {
p ¬features#blockquote >>¬
Hello, world! I can link here, say:
||
>
] ¬http://en.wikipedia.org to Wikipedia¬
> \n
||
¬features#blockquote >>¬
p ¬features#blockquote >>¬
||
>
] This is ƒemphasized. And this is «code».
> \n
||
¬features#blockquote >>¬
}
||
}
p >>
The result you can ¬hello see here¬:
>>
iframe src="hello", width="100%", height=300 > ¬hello see here¬
div id=bottom {
> ¬index << back to Introduction¬
> ¬#top ^Top^¬
> ¬features >> The Features¬
> ¬programming.en.yhtml2 (source)¬
}
}