Contents1 Repository Publishing2 Introducing Eiffel-View3 Part II to follow4 Features4.1 Repository Statistics4.2 Dependency checking4.3 Synchronization4.4 Note field markdown rendering4.5 All relative paths4.6 Source Bookmarking Link4.7 Prism Syntax Highlighting4.8 Client Example Links5 Configuration file5.1 doc-config/config.pyx6 Eiffel-View Markdown Summary6.1 Highlighted sections6.2 Bold words6.3 Code blocks6.4 Hyper links6.5 Relative source links7 Tool Source Code8 Tool Download9 Tool Usage10 Source View Template11 Main TemplateRepository Publishing If you have published your Eiffel code in a source repository like Github or Source Forge you will know that this is not the most ideal way to browse and explore Eiffel source code. There are a number of problems:Browsing in github requires endless drilling down into a deep directory structure and there is a noticeable delay for pages to load. What is preferable is a less granular view of the directory structure that will eliminate a lot of drilling down.If a class contains useful note documentation, you won't know about it's existence unless you actually open the class. Most times you will open the class and will discover there is no useful documentation. A wasted page load! What is need is a way to present any useful class notes on the same page as the link to the source code. If only some of the classes in a directory have useful notes, these should be listed first.Class notes are viewable only in source code form. If they contain any useful formatting information, there is no possibility to see it rendered in HTML.Once you open the source view, you will find that in github the indentation tabs are too large, so often the code does not fit nicely into the available browser space. Three spaces per tab is a much better default.If you want to see an example of how a library class is used, be prepared to spend a lot of time looking for an example.If you are only interested to read the code, the line number margin is a waste of space.Introducing Eiffel-View Eiffel-View is a new repository publishing tool that provides a solution to the code browsing problems identified in the introduction. However it does not manage the code, so you still need github or similar. It has been used to publish all the source code for the Eiffel-Loop repository which you can see here: www.eiffel-loop.com.Part II to follow This article is in two parts. In a follow up article I will be outlining some further improvements that could be made to make the tool more universally useful.Features Repository Statistics A short summary of the repository contents is placed at the top of the home page. As for example:Repository Statistics1784 Eiffel classes containing 435288 words* of code. Total source code: 4.2 mb.* Code words include keywords, identifier words and quoted strings, but exclude comments and indexing notes.Dependency checking A CRC-32 digest of each source code file is placed as a meta-tag of the corresponding html page. Eiffel-View is smart enough to work out the dependencies of every generated html page. Only pages that need rewriting are rewritten on subsequent runs.Synchronization Automatically synchronizes contents with the hosting site by ftp.Note field markdown rendering Eiffel-View renders as html markdown used in the class description field. The markdown used is similar to Github markdown but there are some differences.All relative paths All links to image files, style sheets etc, use relative paths. This means the website can be browsed locally in a directory folder.Source Bookmarking Link Each source code html page has a book mark link at the top. However it links to an anchor in the index page, not the source file itself.Prism Syntax Highlighting Eiffel-View makes use of the Prism js/css tool for syntax highlighting the Eiffel source code.Client Example Links Eiffel-View provides links to usage examples (maximum of 20) for any classes in the library folder. In Eiffel-Loop the usage examples are found in either the example, tool or test directories. For an example see class EL_MODULE_EVOLICITY_TEMPLATESConfiguration file A configuration file allows you specify a list of named directories that will appear in the home page sitemap. This is a more granular approach then using ECF files to specify the repository contents.doc-config/config.pyx The file is written in Pyxis format. The ftp-site section is optional. Eiffel-View Markdown Summary Highlighted sections Words quoted with a grave accent ( ` ) to open and an apostrophe (') to close are `highlighted'. This follows an established Eiffel convention used in source comments for quoting routine names. See class EL_REMOTE_ROUTINE_CALL_REQUEST_HANDLER for an example.Bold words This is the same as Github markdown. Use two asterisk on either side of the **words you** want to make boldCode blocks Consecutive lines in the description which have an indent of 3 or more tabs are highlighted as a quoted code block with a fixed size font. See class EIFFEL_FEATURE_EDITOR_APP for an example.Hyper links Hyper links use the same convention as mediawiki-formatting as for example:[http://website.com See here]Relative source links There is a specialized link that allows you reference other source code files in a class description. You write the link as though you were referencing the other Eiffel source file and then you change the .e extension to .html. For example:note description: "[ See class [../../eiffel-dev/class-edit/support/feature_constants.html FEATURE_CONSTANTS]. ]"See class EIFFEL_FEATURE_EDITOR_APP for an actual example.Note that if you want to reference a class in the same directory you need to precede the page name with ./ as in this example for class EL_C_CALLABLE.Tool Source Code The source code for Eiffel-view can be viewed in directory eiffel-dev/library/publish.Tool Download A binary for the tool is available on Github as part of the 1.4.0 release of Eiffel-Loop:el_toolkit-1.1.20The build is for Linux Mint 17 which is based on Ubuntu 14.04. It might work on other versions of Ubuntu but I haven't tested.Tool Usage The following script found in the Eiffel-Loop root directory shows how to use the tool# File: build_doc.shexport EIFFEL_LOOP=$(pwd)export EIFFEL_LOOP_DOC=$EIFFEL_LOOP/docread -p 'Enter a version number: ' versionel_toolkit -publish_repository -config doc-config/config.pyx -version $versionSource View Template The following is the Evolicity html template for the html source code pages. Evolicity is a text substitution language that can output Eiffel objects into text. It is part of Eiffel-Loop.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="digest" content="$crc_digest"/> <meta name="Description" content="Source code for class $name"/> <link href="$top_dir/css/prism.css" rel="stylesheet" /> <title>$source_path</title> </head> <body> <script src="$top_dir/js/prism.js"></script> <p>class <a href="$index_dir/class-index.html#$name" title="Link to class index">$name</a></p>#if $is_library then #if $client_examples.count > 0 then <p class="black"><b>Client examples:</b> #across $client_examples as $example loop #if $example.cursor_index > 1 then ; #end <a href="$top_dir/$example.item.relative_dir/${example.item.name_as_lower}.html">$example.item.name</a> #end </p> #end#end <pre><CODE class="language-eiffel">$code_text</CODE></pre> </body></html>Main Template The following is the main Evolicity html template is for eiffel-loop.com for all index pages and the home page sitemap.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <meta name="Author" content="Finnian Reilly"/> <meta name="Audience" content="all"/> <meta name="Content-Language" content="english"> #if $is_index_page then <meta name="Description" content="Eiffel-Loop is a collection of tools and software components for Eiffel developers"/> #else <meta name="Description" content="Source code for Eiffel $category: $name"/> #end <meta name="Keywords" content="Eiffel language, Eiffel library, Eiffel programming, Eiffel developer , Eiffel coder, Eiffel code, Eiffel source code, Eiffel source, Eiffel open source"/> <meta name="ROBOTS" content="Index, FOLLOW"> <title>$title</title> <style type="text/css"> @import "$top_dir/css/default.css"; </style> </head> <body> <a name="top"></a> <div id="centered"> <a href="$top_dir/index.html" title="Eiffel-Loop Home"><img src="$top_dir/images/banner-logo.png"></a> <div id="download"> <p><a href="$github_url" target="_blank">Github</a></p> <p>Download latest: <a href="$github_url/archive/${version}.zip">Windows</a> or <a href="$github_url/archive/${version}.tar.gz">Linux</a> </p> </div> <div id="text"> #if $is_index_page then <h2>Repository Statistics</h2> <p> <b>$stats.class_count</b> Eiffel classes containing <b>$stats.word_count</b> words of code*. Total source code: <b>$stats.mega_bytes mb</b>. </p> <p> <small>* Code words include keywords and identifier words but exclude comments and indexing notes. </small> </p> #across $category_list as $category loop <h2>$category.item.name</h2> #across $category.item.page_list as $page loop <p><a href="$page.item.relative_file_path">$page.item.name</a></p> #end #end #else <h1>$category: $name</h
