<h1>Fossil Cookbook</h1>
The <cite>Fossil</cite> Cookbook is a collection of task-oriented instructions for intermediate users who wish to do more than basic operations with their <cite>Fossil</cite> repositories.  The [Tutorial|tutorial] is a more suitable place for newcomers trying to learn the basic concepts to go first before tackling these recipes.

<h2>Index</h2>
<ul>
  <li> Server recipes:
    <ul>
      <li>  <a href="#CGI">Using <cite>Fossil</cite>'s Built-In CGI</a>
    </ul>
  <li> <a href="#env">Using Environment variables</a>
  <li> <a href="#css">Example CSS</a>
  <li> <a href="#source-hilight">Source highlighting</a>
  <li> <a href="#win32dev">Fossil Win32 Development Machine setup</a>
  <li> <a href="#wysiwig">Javascript HTML WYSIWYG editor control</a>
    <ul>
      <li> <a href="#tinymce">TinyMCE</a>
      <li> <a href="#markitup">markitup!</a>
    </ul>
</ul>

<h2><a name="CGI">Using <cite>Fossil</cite>'s Built-In CGI</a></h2>
<h3>Motivation</h3>
  *  You want to share a repository through your existing web infrastructure.
  *  You want to share more than one repository at the same time.

<h4>Visual Studio Express 2008+WiX</h4>
<h5>Setup TCL</h5>
<h5>Setup VS2008</h5>
<h5>Getting WiX Windows MSI tool </h5>
<h5>Getting Fossil source code</h5>
<h5>Build the code with Makefile.win32</h5>

<a name="wysiwig"><h2>Javascript HTML WYSIWYG editor control</h2></a>
<h3>Motivation</h3>
  *  You want to edit the wiki pages with a nice editor component, instead of using plain HTML.

<h3>Problem</h3>
Fossil by itself doesn't support it.

<h3>Solution</h3>
There are pure javascript editor components that can be used for this task.
The source for the editor component is added to the repository. The html header or footer is prepared to include a javascript file and/or a CSS.
<br>
These two tips are from the mailing list:
Rene de Zwart 30. Oct. 2009

<a name="tinymce"></a>
<h4>TinyMCE</h4>
<p>
Source: <a href="http://tinymce.moxiecode.com/"> TinyMCE </a>
</p>
<h5> Example</h5>
<pre class="verbatim">
    mkdir tiny
    mkdir tiny/javascript
    fossil new tinymce.fsl
    fossil ui tinymce.fsl {configure the project)
    download tinymce
    unzip in tiny/javascript
    cd tiny
    fossil open ../tinymce/fsl
    fossil add javascript
    fossil commit -m "added timymce to the project"
    fossil ui
</pre>
Select admin/headers add after the &lt;/link&gt;
<pre class="verbatim">
   &lt;script type="text/javascript"
     src="/doc/tip/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js"&gt;
   &lt;/script&gt;
</pre>
and save
select admin/footer add above the first line
<pre class="verbatim">
 &lt;script type='text/javascript'&gt;
  var m = document.getElementsByTagName('textarea')
  var l = m.length
  var n
  for(var i=0 ;i &lt; l;i++){
    n = m[i].name
    if( 'header' != n && 'footer' != n && 'css' != n){
        tinyMCE.init({ mode : 'exact' , elements : n, theme: 'advanced'
        ,width : '90%' } );
    }
  }
 &lt;/script&gt;
</pre>


<a name="markitup"></a>
<h3>markitup!</h3>
<p>
Source: <a href="http://markitup.jaysalvat.com/home/"> Markitup </a>
</p>
<h5> Example</h5>
<pre class="verbatim">
    mkdir markitup
    mkdir markitup/javascript
    fossil new markitup.fsl
    fossil ui markitup.fsl {configure the project)
    download markitup and jquery
    unzip in markitup/javascript, cd latest, mv * .., rmdir latest
    copy jquery-....js to javascript/jquery.js
    cd markitup
    fossil open ../markitup.fsl
    fossil add javascript
    fossil commit -m "added markitup an jquery to the project"
    fossil ui
</pre>
select admin/headers add after the </link> put
<pre class="verbatim">
    &lt;link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/skins/markitup/style.css" /&gt;
    &lt;link rel="stylesheet" type="text/css" href="/doc/tip/javascript/markitup/sets/default/style.css" /&gt;

    &lt;script type="text/javascript" src="/doc/tip/javascript/jquery.js"&gt;
    &lt;/script&gt;
    &lt;script type="text/javascript" src="/doc/tip/javascript/markitup/jquery.markitup.js"&gt;
    &lt;/script&gt;
</pre>

and save
select admin/footer add above the first line

<pre class="verbatim">
    &lt;script type='text/javascript'&gt;
      var m = document.getElementsByTagName('textarea')
      var l = m.length
      var n
      var mySettings = {
	nameSpace:       "html", // Useful to prevent multi-instances CSS conflict
	onShiftEnter:    {keepDefault:false, replaceWith:'&lt;br /&gt;\n'},
	onCtrlEnter:     {keepDefault:false, openWith:'\n&lt;p&gt;', closeWith:'&lt;/p&gt;\n'},
	onTab:           {keepDefault:false, openWith:'     '},
	markupSet:  [
	    {name:'Heading 1', key:'1', openWith:'&lt;h1(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h1&gt;', placeHolder:'Your title here...' },
	    {name:'Heading 2', key:'2', openWith:'&lt;h2(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h2&gt;', placeHolder:'Your title here...' },
	    {name:'Heading 3', key:'3', openWith:'&lt;h3(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h3&gt;', placeHolder:'Your title here...' },
	    {name:'Heading 4', key:'4', openWith:'&lt;h4(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h4&gt;', placeHolder:'Your title here...' },
	    {name:'Heading 5', key:'5', openWith:'&lt;h5(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h5&gt;', placeHolder:'Your title here...' },
	    {name:'Heading 6', key:'6', openWith:'&lt;h6(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/h6&gt;', placeHolder:'Your title here...' },
	    {name:'Paragraph', openWith:'&lt;p(!( class="[![Class]!]")!)&gt;', closeWith:'&lt;/p&gt;'  },
	    {separator:'---------------' },
	    {name:'Bold', key:'B', openWith:'&lt;strong&gt;', closeWith:'&lt;/strong&gt;' },
	    {name:'Italic', key:'I', openWith:'&lt;em&gt;', closeWith:'&lt;/em&gt;'  },
	    {name:'Stroke through', key:'S', openWith:'&lt;del&gt;', closeWith:'&lt;/del&gt;' },
	    {separator:'---------------' },
	    {name:'Ul', openWith:'&lt;ul&gt;\n', closeWith:'&lt;/ul&gt;\n' },
	    {name:'Ol', openWith:'&lt;ol&gt;\n', closeWith:'&lt;/ol&gt;\n' },
	    {name:'Li', openWith:'&lt;li&gt;', closeWith:'&lt;/li&gt;' },
	    {separator:'---------------' },
	    {name:'Picture', key:'P', replaceWith:'&lt;img src="[![Source:!:http://]!]" alt="[![Alternative text]!]" /&gt;' },
	    {name:'Link', key:'L', openWith:'&lt;a href="[![Link:!:http://]!]"(!( title="[![Title]!]")!)&gt;', closeWith:'&lt;/a&gt;', placeHolder:'Your text to link...' },
	    {separator:'---------------' },
	    {name:'Clean', replaceWith:function(h) { return h.selection.replace(/&lt;(.*?)&gt;/g, "") } },
	    {name:'Preview', call:'preview', className:'preview' }
	]
      }
      for(var i=0 ;i < l;i++){
	n = m[i].name
	if( 'comment' == n || 'cmappnd' == n || "w"  == n){
	    m[i].id = n
	    $(document).ready(function() {
	      $("#" + n).markItUp(mySettings);
	    });
	}
      }
    &lt;/script&gt;
 </pre>