λ-wiki

λ-wiki :: syntax

www!k! v.20120610

λ-wiki :: éditeur

{div {@ text-align:center; font:bold 4em courier; color:red;} °°{first rest}°° }

{blockquote “It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures.” — [[Alan J. Perlis|http://web.archive.org/web/19990117034445/http://www-pu.informatik.uni-tuebingen.de/users/klaeren/epigrams.html]]}

_h2 1) general form
_p Inspired by the classical LISP s-expressions, the general form of the λ-wiki syntax is :

{div {@ text-align:center; font-size:2em; font-weight:bold; } °°{first rest}°° }
_p where 
_ul {b « first »} is a word,
_ul {b « rest »}  is a sequence of words and/or of {b °°{first rest}°°} forms.

_p Note : Why {b °°{first rest}°°} and not {b (first rest)} ? Because a wiki page contains standard text, not program code, and in standard text it's easy to avoid curly brackets, not round brackets.

_h6 1.1) HTML
_p Used in order to build the HTML page, the expression will be :
{div {@ text-align:center; font-size:1.5em; font-weight:bold; } °°{tag {@ key:value;} rest }°° }
_p where 
_ul {b « °°{@ key:value;}°° »} is an optionnal form defining the attributes of the tag,
_ul {b « rest »}  is a sequence of words and/or of {b °°{first rest}°°} forms.

_h6 1.2) maths
_p Used to play with some mathematics, the expression will be :
{div {@ text-align:center; font-size:1.5em; font-weight:bold; } °°{fn args}°° }
_p where 
_ul {b « fn »} is the name of a function, existing in the parser's core or defined by the user in the wiki page, 
_ul {b « args »}  is a sequence of arguments related to the function.

{h3 2) HTML}
{h5 2.1) example}
{pre {@ white-space:pre-wrap;}°°

// 1) minified text :
{div {@ border:1px solid grey; background:#ffe url('data/fond.jpg') no-repeat center center;}{p {@ color:red;} This is a paragraph with a {b fat word} and a dot.}{p This is another one with an {u {i underlined italic word}}}{div {@ border:2px solid red; width:100px; padding:5px;}{img {@ src:data/amelie_sepia.jpg; height:100;} infobulle }}}

// 2) written in a more writeable and readable way :
{div 
    {@ border:1px solid grey; background:#ffe url('data/fond.jpg') no-repeat center center;}
  {p 
    {@ color:red;} This is a paragraph with a {b fat word} and a dot.}
  {p This is another one with an {u {i underlined italic word}}}
  {div 
      {@ border:2px solid red; width:100px; padding:5px;}
      {img {@ src:data/amelie_sepia.jpg; height:100;} infobulle }
  }
}

// 3) burst in several lines to show the tree structure :
{div 
  {@ 
     border:1px solid grey; 
     background:#ffe url('data/fond.jpg') no-repeat center center ; 
  }
  {p 
     {@ 
        color:red; 
     }

This is a paragraph with a 
     {b 
        fat word
     } and a dot.
  } 
  {p 
     This is another one with an 
     {u 
        {i 
           underlined italic word
        }
     }
  } 
  {div
     {@  
        border:2px solid red; 
        width:100px; 
        padding:5px;
     } 
     {img 
        {@ 
           src:data/amelie_sepia.jpg; 
           height:100; 
        } 
        infotexte 
     }
  }
}
°°}

_h5 2.2) tags list
_p Following the list of the forms actually recognized by the parser. 
{pre °°
// The two syntax {tag {@ ...} ... } and _tag{ {@ ...} ... } are equivalent.
1) 22 basic HTML tags :
-------------------------------------------------------------------------------------
{tag {@ id:ID; class:CLASS; ... css:value;... } sequence of words }
-------------------------------------------------------------------------------------
   where tag is :
       span : a sequence of words inline
        div : a sequence of words between two carriage return
        pre : a sequence of words formated such as it is
     center : a centered sequence of words between two carriage return
 blockquote : a special display between two carriage return
table tr td : a table with rows and celles
         hx : titles with x = 1..6 ( simplified alternative form : _hx ... CR )
          p : paragraph            ( simplified alternative form : _p ... CR )
      b i u : bold, italic and underline
    sup sub : exposant and indice
      br hr : carriages return without and with a line

2) unordered and ordered lists :
-------------------------------------------------------------------------------------
{ulxx sequence of words }          where xx is an integer
{olxx sequence of words }          ( simplified alternative form : _ulxx ... CR )
-------------------------------------------------------------------------------------

3) columns :
-------------------------------------------------------------------------------------
{columnxx sequence of words } where xx is an integer
-------------------------------------------------------------------------------------

4) links :
-------------------------------------------------------------------------------------
{a {@ href:URL;}                website's name }     or [[website's name|URL]]
{a {@ alias:page_name;}         another page name }
{a {@ name:pixar; href:URL#; } 	anchor name}
{a                              wiki page}           or [[wiki page]]
-------------------------------------------------------------------------------------

5) notes :
-------------------------------------------------------------------------------------
{note 	    {@ id:sequence of words;} sequence of words }
{note_start {@ id:ID;} 		      sequence of words }
{note_end   {@ id:ID; css:value; }    sequence of words }
-------------------------------------------------------------------------------------

6) images :
-------------------------------------------------------------------------------------
{img   {@ src:URL; height:integer; css:value; }      sequence of words }
{show  {@ src:URL; height:integer; width:integer; }  sequence of words }
{diapo {@ height:integer; } ... [URL sequence of words] ... }
-------------------------------------------------------------------------------------

7) iframe, embed and canvas :
-------------------------------------------------------------------------------------
{iframe {@ src:URL; height:integer; width:integer; css:value; }}
{embed  {@ src:URL; height:integer; width:integer; css:value; autoplay:true|false; }}
{canvas {@ id:ID;   height:integer; width:integer; css:value; } sequence of words }
-------------------------------------------------------------------------------------

8) input and submit buttons, eval function
-------------------------------------------------------------------------------------
{input  {@ id:ID; code:code; value:sequence of words;; width:integer; css:value; }}				
{submit {@ id:ID; code:code; value:sequence of words; }}					
{eval  a valid mathematical expression }
-------------------------------------------------------------------------------------

9) other tags
-------------------------------------------------------------------------------------
{mailto valid e-mail }
{back sequence of words }
{post pseudo date }
{drag}  parent div must have defined position, top and left
{? ... } unknown tag
{@ key:value; } the special form for embedding "key:value;" attributes
-------------------------------------------------------------------------------------

10) comments, code display and inline block editing
-------------------------------------------------------------------------------------
••• comment •••      where • is for °
•• code display ••   where • is for °
§xx                  where xx is an integer
sequence of words
§
-------------------------------------------------------------------------------------

°°}

_h2 3) some maths
_h5 3.1) using javascript code and eval() function
_p Today it is possible to write Javascript code in a wiki page, define some functions and use them with buttons "input" and "submit" like this :
_ul 1) write the code in a div identified by an id:code;

{pre {@ id:code;}°°
// 1) defining the function :
function hypotenuse ( a, b ) { return Math.sqrt( a*a + b*b );}
// 2) setting the relations :
$('result').innerHTML = hypotenuse( $('A').value, $('B').value );
°°}

_p 2) call the result with this code :

{pre °°
{div {@ text-align:center; border:1px solid grey;} 
  Edit the two arguments to display the result :
  hypotenuse(
    {input {@ id:A; code:code; value:3; width:20px;}},
    {input {@ id:B; code:code; value:4; width:20px;}}
  ) = {span {@ id:result; }}
}
°°}

{div {@ text-align:center; border:1px solid grey;} 
  Edit the two arguments to display the result :
  hypotenuse(
    {input {@ id:A; code:code; value:3; width:20px;}},
    {input {@ id:B; code:code; value:4; width:20px;}}
  ) = {span {@ id:result; } }}

_p More interesting examples can be seen in some pages of this wiki. But it could be better, isnt'it ?

_h5 3.2) here come the functions !
_p {span {@ color:red;} A big step for me, a little step for humanity !} : coming with the last parser inline (12/06/2012) it's now possible {b in a wiki page} to do maths using a nano-LISP syntax. 
_p More can be seen in pages > [[functions]] and so on...

_h2 4) the parser
_p The parser's code can be analyzed [[here|meca/parser.js]]. This is an overview of the heart :

{pre °°
// BUILDING THE REGEXP :	
/*
/	        start of the regexp
\{	        opening curly bracket
(?:		no capture
([\w\d@]+)	at least one set a-z0-9_@ captured in first
(?: |\uFFFF)+	zero or several spaces or CRs not captured
([^{}]*)	zero or several characters except {} captured in rest
)?	        first and rest can be empty and {} will be captured
\}	        closing curly bracket
/g		end of the regexp with option g
*/
var loop_rex 	= /\{(?:([\w\d@]+)(?: |\uFFFF)*([^{}]*))?\}/;
var first = '', rest = '', attributes = '', html = [];

// THE LOOP	: 
// Remove Nested Patterns with One Line of JavaScript
// from http://blog.stevenlevithan.com/archives/reverse-recursive-pattern

var do_loop = function ( str ) {
   while (str != (str = str.replace( loop_rex, dispatch ))); 
   return str;		
}

// for every tag matched the dispatch() function calls 
// a function build in the html[] array

var dispatch = function ( m, f, r ) {
   first = (f != undefined)? f : '';
   rest  = (r != undefined)? r : '';
   for (var i in html) {
      if (first.match( i ))
	return html[i]();
   }
   return no_html();
}

//   for instance, this is the way the basic HTML tags are built :
//   input : {tag {@ id:ID; class:CLASS; ... css:value;... } infobulle}
//   output : < tag id="" class="" styles="" > sequence of words < /tag >

var tags_rex = /^(div|span|pre|table|tr|td|h[1-6]|p|b|i|u|center|blockquote|sup|sub|br|hr)$/;
html[tags_rex] = function () {  	
  var myId = '', myClass = '', myStyles = '';
  if ( setAttributes() ) {
     myId     = getValueFromKey( 'id' );    // gets the id value and builds id="ID value"
     myClass  = getValueFromKey( 'class' ); // gets the class value and builds class="class value"
     myStyles = getStyles();                // extracts the sequence of css "key:value;" 
                                            // and build styles=" ... key:value; ... "
  }
  return '< ' + first + myStyles + myId + myClass + ' >' + rest + '< /' + first + ' >';
                                            // where first is one of the 17 HTML tags
};

// setAttributes(), getValueFromKey() and getStyles() are low-level functions 
// called for extracting attibutes, key-values and style-values.

°°}

_p See you soon.