├── README.md
├── index.html
├── index.sigvehtml
└── sigvehtml.py


/README.md:
--------------------------------------------------------------------------------
 1 | # Sigvehtml
 2 | 
 3 | Finally a HTML that you can sight-read.
 4 | 
 5 | So how great is it? This is a page written in sigvehtml:
 6 | 
 7 | ```
 8 | 
 9 |      _                 _     _             _ 
10 |     (_)               | |   | |           | |
11 |  ___ _  __ ___   _____| |__ | |_ _ __ ___ | |
12 | / __| |/ _` \ \ / / _ \ '_ \| __| '_ ` _ \| |
13 | \__ \ | (_| |\ V /  __/ | | | |_| | | | | | |
14 | |___/_|\__, | \_/ \___|_| |_|\__|_| |_| |_|_|
15 |         __/ |                                
16 |        |___/   
17 | 
18 | 
19 | #=====================================================================#
20 | |                      ___.-~"~-._   __....__                         |
21 | |                    .'    `    \ ~"~        ``-.                     |
22 | |                  /` _      )  `\              `\                    |
23 | |                 /`  a)    /     |               `\                  |
24 | |                :`        /      |                 \                 |
25 | |           <`-._|`  .-.  (      /   .            `;\\                |
26 | |            `-. `--'_.'-.;\___/'   .      .       | \\               |
27 | |         _     /:--`     |        /     /        .'  \\              |
28 | |        ("\   /`/        |       '     '         /    :`;            |
29 | |        `\'\_/`/         .\     /`~`=-.:        /     ``             |
30 | |          `._.'          /`\    |      `\      /(                    |
31 | |                        /  /\   |        `Y   /  \                   |
32 | |                  jgs  J  /  Y  |         |  /`\  \                  |
33 | |                      /  |   |  |         |  |  |  |                 |
34 | |                     "---"  /___|        /___|  /__|                 |
35 | |                            '"""         '"""  '"""                  |
36 | #=====================================================================#
37 | 
38 | #===================================================# #===============#
39 | | Did you know that any piece of code is likely to  | |               |
40 | | be read over a hundred times more often than it   | | * Home        |
41 | | is written? Most of a developer's time is spent   | | * Download    |
42 | | trying to understand code. Sigvehtml is a HTML    | | * Legal       |
43 | | dialect which focuses on readability and the      | | * About Us    |
44 | | ability to get a quick overview.                  | |               |
45 | |                                                   | |               |
46 | | With sigvehtml, there is no longer any need to    | |               |
47 | | wade trough thickets of nested divs and spans     | |               |
48 | | and what-have-yous to get to a real understanding | |               |
49 | | of what is going on. Throw the boilerplate soup   | |               |
50 | | out of the window, and increase your productivity | |               |
51 | | hundred-fold by re-writing all your code to       | |               |
52 | | sigvehtml. You wont regret it.                    | |               |
53 | |                                                   | |               |
54 | | Remember: you only need to rewrite to sigvehtml   | |               |
55 | | once. And then you can read again and again and   | |               |
56 | | again, each time fully aware of what the finished | |               |
57 | | output is going to look like. The dark ages of    | |               |
58 | | web development is over!                          | |               |
59 | #===================================================# #===============#
60 | ```
61 | 
62 | Here it is rendered in chrome after it has been compiled:
63 | 
64 | ![](http://i.imgur.com/cyJSPUe.png)
65 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html>
 3 |     <head>
 4 |     <title>Sigvehtml</title>
 5 |     <meta charset="utf8" />
 6 |     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 7 |     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 8 |     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 9 |     </head>
10 |     <body>
11 | 
12 |     <header>
13 |     <h1>Sigvehtml</h1>
14 |     </header>
15 | 
16 |     <div class="container">
17 |         <div class="row">
18 |             <img src="elephant.png" />
19 |         </div>
20 | 
21 |         <div class="row">
22 |             <div class="col-xs-9">
23 |                 <p>
24 |                     Did you know that any piece of code is likely to be read over a hundred times more often than is written?
25 |                     Most of a developer's time is spent and trying to understand code.
26 |                     Sigvehtml is a HTML dialect which focuses on readability and the ability to get a quick overview. 
27 |                 </p>
28 | 
29 |                 <p>
30 |                     With sigvehtml, there is no longer any need to wade trough thickets of nested divs and spans and what-have-you's to get to a real understanding of what is going on.
31 |                     Throw the boilerplate soup out of the window, and increase your productivity hundred-fold by re-writing all your code to sigvehtml.
32 |                     You wont regret it.
33 |                 </p>
34 | 
35 |                 <p>
36 |                     Remember: you only need to rewrite to sigvehtml once.
37 |                     And then you can read again and again and again, each time fully aware of what the finished output is going to look like.
38 |                     The dark ages of web development is over!
39 |                 </p>
40 |             </div>
41 |             <div class="col-xs-3">
42 |                 <ul>
43 |                     <li>
44 |                         <a href="home">Home</a>
45 |                     </li>
46 |                     <li>
47 |                         <a href="download">Download</a>
48 |                     </li>
49 |                     <li>
50 |                         <a href="legal">Legal</a>
51 |                     </li>
52 |                     <li>
53 |                         <a href="about-us">About Us</a>
54 |                     </li>
55 |                 </ul>
56 |             </div>
57 |         </div>
58 |     </div>
59 | 
60 |     </body>
61 | </html>
62 | 


--------------------------------------------------------------------------------
/index.sigvehtml:
--------------------------------------------------------------------------------
 1 | 
 2 |      _                 _     _             _ 
 3 |     (_)               | |   | |           | |
 4 |  ___ _  __ ___   _____| |__ | |_ _ __ ___ | |
 5 | / __| |/ _` \ \ / / _ \ '_ \| __| '_ ` _ \| |
 6 | \__ \ | (_| |\ V /  __/ | | | |_| | | | | | |
 7 | |___/_|\__, | \_/ \___|_| |_|\__|_| |_| |_|_|
 8 |         __/ |                                
 9 |        |___/   
10 | 
11 | 
12 | #=====================================================================#
13 | |                      ___.-~"~-._   __....__                         |
14 | |                    .'    `    \ ~"~        ``-.                     |
15 | |                  /` _      )  `\              `\                    |
16 | |                 /`  a)    /     |               `\                  |
17 | |                :`        /      |                 \                 |
18 | |           <`-._|`  .-.  (      /   .            `;\\                |
19 | |            `-. `--'_.'-.;\___/'   .      .       | \\               |
20 | |         _     /:--`     |        /     /        .'  \\              |
21 | |        ("\   /`/        |       '     '         /    :`;            |
22 | |        `\'\_/`/         .\     /`~`=-.:        /     ``             |
23 | |          `._.'          /`\    |      `\      /(                    |
24 | |                        /  /\   |        `Y   /  \                   |
25 | |                  jgs  J  /  Y  |         |  /`\  \                  |
26 | |                      /  |   |  |         |  |  |  |                 |
27 | |                     "---"  /___|        /___|  /__|                 |
28 | |                            '"""         '"""  '"""                  |
29 | #=====================================================================#
30 | 
31 | #===================================================# #===============#
32 | | Did you know that any piece of code is likely to  | |               |
33 | | be read over a hundred times more often than it   | | * Home        |
34 | | is written? Most of a developer's time is spent   | | * Download    |
35 | | trying to understand code. Sigvehtml is a HTML    | | * Legal       |
36 | | dialect which focuses on readability and the      | | * About Us    |
37 | | ability to get a quick overview.                  | |               |
38 | |                                                   | |               |
39 | | With sigvehtml, there is no longer any need to    | |               |
40 | | wade trough thickets of nested divs and spans     | |               |
41 | | and what-have-yous to get to a real understanding | |               |
42 | | of what is going on. Throw the boilerplate soup   | |               |
43 | | out of the window, and increase your productivity | |               |
44 | | hundred-fold by re-writing all your code to       | |               |
45 | | sigvehtml. You wont regret it.                    | |               |
46 | |                                                   | |               |
47 | | Remember: you only need to rewrite to sigvehtml   | |               |
48 | | once. And then you can read again and again and   | |               |
49 | | again, each time fully aware of what the finished | |               |
50 | | output is going to look like. The dark ages of    | |               |
51 | | web development is over!                          | |               |
52 | #===================================================# #===============#
53 | 


--------------------------------------------------------------------------------
/sigvehtml.py:
--------------------------------------------------------------------------------
  1 | import sys
  2 | import re
  3 | 
  4 | 
  5 | def convert(lines):
  6 | 
  7 |     # remove \n
  8 |     lines = [line[:-1] for line in lines]
  9 | 
 10 |     boxes = [[] for i in range(len(lines))]
 11 | 
 12 |     for y, line in enumerate(lines):
 13 |         if '#' in line:
 14 |             for x, letter in enumerate(line):
 15 |                 if letter == '#':
 16 |                     boxes[y].append(x)
 17 | 
 18 |     boxes = filter(lambda x: x[1], enumerate(boxes))
 19 | 
 20 |     output = []
 21 | 
 22 |     for i in range(0, len(boxes), 2):
 23 |         start = boxes[i]
 24 |         end = boxes[i + 1]
 25 | 
 26 |         output.append(row())
 27 | 
 28 |         for j in range(0, len(start[1]), 2):
 29 |             topleft = start[0], start[1][j]
 30 |             topright = start[0], start[1][j + 1]
 31 |             bottomleft = end[0], end[1][j]
 32 |             bottomright = end[0], end[1][j + 1]
 33 | 
 34 |             width = (topright[1] - topleft[1] + 2) / 6
 35 | 
 36 |             output.append(div(width))
 37 | 
 38 |             # do we think it is a picture?
 39 |             picture = True
 40 |             for line in lines[topleft[0] + 1:bottomleft[0]]:
 41 |                 line = line[topleft[1] + 1:topright[1]]
 42 |                 if 'the' in line or 'Download' in line:
 43 |                     picture = False
 44 | 
 45 |             if picture:
 46 |                 image = educated_guess_at_image()
 47 |                 output.append('<img style=width:100%%;margin-bottom:40px;display:block src="%s" />' % image)
 48 |             else:
 49 |                 output.append('<p>\n')
 50 |                 for _line in lines[topleft[0] + 1:bottomleft[0]]:
 51 |                     line = _line[topleft[1] + 1:topright[1]]
 52 |                     if not line.strip():
 53 |                         output.append('</p>\n<p>\n')
 54 |                     else:
 55 |                         if '*' in line:
 56 |                             idx = line.find('*')
 57 |                             text = line[idx+2:].strip()
 58 |                             # yes, we cheat and drop the ul tags
 59 |                             output.append('<li><a href="%s">%s</a></li>' % (re.sub(' ','-', text.lower()), text))
 60 |                         else:
 61 |                             output.append(line)
 62 |                 output.append('</p>\n')
 63 |             output.append(div_end())
 64 |         output.append(row_end())
 65 | 
 66 |     return header() + ''.join(output) + footer()
 67 | 
 68 | 
 69 | def row():
 70 |     return '<div class="row">\n'
 71 | 
 72 | 
 73 | def div(width):
 74 |     return '<div class="col-xs-%s">\n' % str(width)
 75 | 
 76 | def div_end():
 77 |     return '</div>'
 78 | 
 79 | def row_end():
 80 |     return div_end()
 81 | 
 82 | 
 83 | def header():
 84 |     return """
 85 | <!DOCTYPE html>
 86 | <html>
 87 |     <head>
 88 |     <title>Sigvehtml</title>
 89 |     <meta charset="utf8" />
 90 |     <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
 91 |     <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
 92 |     <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
 93 |     </head>
 94 |     <body>
 95 | 
 96 |     <header>
 97 |     <h1>Sigvehtml</h1>
 98 |     </header>
 99 | 
100 |     <div class="container">
101 |     """
102 | 
103 | 
104 | def footer():
105 |     return """
106 |     </div>
107 | 
108 |     </body>
109 | </html>
110 | """
111 | 
112 | def educated_guess_at_image():
113 |     return 'http://pensivetoaster.com/wp-content/uploads/2013/05/elephant-banner.jpg'
114 | 
115 | 
116 | def main():
117 | 
118 |     with open(sys.argv[1], 'r') as f:
119 |         lines = [line for line in f]
120 | 
121 |     output = convert(lines)
122 |     print output
123 | 
124 | 
125 | if __name__ == "__main__":
126 |     main()
127 | 


--------------------------------------------------------------------------------