-
Notifications
You must be signed in to change notification settings - Fork 0
HTML in MyDef
Writing HTML by hand is very painful. The HTML or XML in general are not really designed for human readability; they are designed to be a language between computers software, but in text form. With MyDef, we will attempt to make it human readable.
To demonstrate, let's just use this original wiki homepage as example. If you "view source" in your browser, you will obtain the source code in HTML. Now let's rename it into a def file and put it into a page block:
page: gitwiki
htmlcode: main
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# githubog: http://ogp.me/ns/fb/githubog#">
# 690 lines of original html source codeJust run mydef_make.pl(use php as module type) and make, you will reproduce the exact html source code.
Now it is in MyDef, we can start rearrange the code to make it easier to read.
page: gitwiki
htmlcode: main
<!DOCTYPE html>
<html>
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# githubog: http://ogp.me/ns/fb/githubog#">
$call meta
</head>
<body class="logged_in windows vis-public env-production " data-blob-contribs-enabled="yes">
<div id="header" class="true clearfix">
$call header
</div>
<div class="site">
<div class="container">
$call container
</div>
<!-- footer -->
<div id="footer" >
$call footer
</div><!-- /#footer -->
$call keyboard_shortcuts_pane
$call markdown_help
</div>
$call ajax_error_message
$call server_response_time
</body>
</html>
subcode: meta
# 34 lines of original code
subcode: header
# 63 lines of original code
subcode: container
# 130 lines of original code
subcode: footer
# 77 lines of original code
subcode: keyboard_shortcuts_pane
# 246 lines of original code
subcode: markdown_help
# 100 lines of original code
subcode: ajax_error_message
# 3 lines of original code
subcode: server_response_time
# 1 line of original codeNow it is much easier to read. So far, this is similar to the "fold" feature available in most modern editors. However, with MyDef, it provides a persistent presentation -- you write and read in the form matches your mind rather than let the editor to decide or need adjustment each time.
But we don't have to stop here, let's address some of the readability issues. For the frame code, we can write it in this form:
# With a custom syntax highligher for MyDef, it should look much better. Unfortunately I don't know it is possible with this wiki. Here I used perl highlighter, bear in mind that some coloring doesn't make sense here
page: gitwiki
title: Home · hzhou/MyDef Wiki
htmlcode: main
<!DOCTYPE html>
$html
$head prefix:"og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# githubog: http://ogp.me/ns/fb/githubog#"
# DUMP_STUB is a placeholder so we can define part of the code that belongs here somewhere else where it makes sense
# In html, meta is where stuffs like title, stylesheet will fall in
DUMP_STUB meta
$call meta
$body "logged_in windows vis-public env-production " data-blob-contribs-enabled:"yes"
$call header
$div site
$call container
# If some styles are local, then define it locally. All CSS will be moved to meta block at compile time
CSS: div#footer {border: 1px solid blue}
$div #footer
$call footer
#$call keyboard_shortcuts_pane
#$call markdown_help
$call ajax_error_message
$call server_response_timeSee how the indentation marked blocks are more suitable for us to read and write than those opening tags and closing tags? And also see that once we factorized the code into subcodes, how we can easily commenting out certain blocks during debugging sessions? And all these subcodes can accept parameters and put into libraries and they can be over written.
Certainly we could continue refactor the subcodes. Here is the top search block:
htmlcode: top_search_form
$form id:top_search_form, action:/search, method:get
BLOCK
<input type="hidden" name="type" value="Everything" />
<input type="hidden" name="repo" value="" />
<input type="hidden" name="langOverride" value="" />
<input type="hidden" name="start_value" value="1" />
htmlcode: top_search_form_q
$input id:global-search-field, type:text, class:"search my_repos_autocompleter", name:q, results:5, spellcheck:false, autocomplete:off, data-autocomplete:my-repos-autocomplete
htmlcode: top_search_form_button
<input type="submit" value="Search" class="button">
# -- What we are doing here is to separate the semantic part of the form from the presentation part --
# -- When PHP is used, we could move above subcodes to where the form processing code is defined --
# -- The following code accepts a parameter so we can easily replace forms from the frame code without --
# -- affecting the presentations. These types of refactoring are only enabled by the macro system. --
htmlcode: topsearch(searchform)
$div topsearch
&call $(searchform)
$a href:/search, class:"advanced-search tooltipped downwards", title:"Advanced Search"
Advanced Search
$div "search placeholder-field js-placeholder-field"
$label class:placeholder, for:global-search-field
Search
$call $(searchform)_q
$div autocomplete-results, #my-repos-autocomplete
$ul js-navigation-container, /
$call $(searchform)_button
$ul top-nav
$li explore
$a href:https://github.com/explore
Explore
$li
$a href:https://gist.github.com
Gist
$li
$a href:/blog
Blog
$li
$a href:http://help.github.com
HelpAnd bear in mind, that are simply refactoring. Even though it looks dramatically different in MyDef now, it still compiles to the same original HTML code. Now it is refactored, we can move on to modify it.