This web site

Last updated: April 29th, 2008

This web site is powered by Andromeda CMS, a simple self-made content management system. It's written in valid XHTML and CSS, so modern browsers should have no problems displaying this site. Some features use JavaScript, so that should be enabled for optimal results.

Below are technical details about some of the features of this web site.

External links

You might wonder how external links like this one get that "exit" icon next to them. Well, that's fairly easily done with these four lines of JavaScript:

var anchors = document.getElementByID('content').getElementsByTagName('a');
for(var i = 0; i < anchors.length; i++)
        if(anchors[i].href.indexOf(window.location.hostname) < 0 && anchors[i].href.indexOf('javascript') != 0)
                anchors[i].className = (anchors[i].className) ? anchors[i].className + ' ext' : 'ext';

First, it loads all anchors (<a> tags) in the element with id="content" (which happens to be a <div> containing, not surprisingly, the page content) in an array. Then it walks over all those links, checks whether they point to the current host name or a JavaScript function and if not, assigns (or appends) the class "ext" to them. CSS does the rest.

Highlighting

Source code highlighting is done using Vim. It does require to open a file in Vim, typing a command (that's :runtime syntax/2html.vim) and saving the output, but I've managed to largely automate that process using a call to Vim with a lot of paramters (which you can find by issuing :help 2html and navigating to the end of that section in the help file).

So why going through all the trouble if I could just use some existing dynamic highlighting script to do it all automatically? Well, for three reasons:

I've never seen a more powerful syntax highlighter than Vim's. Those dynamic scripts out there don't even come close to Vim's capabilities.
It spits out plain static files, which contain valid XHTML. That means there's no unnecessary load on the server or the client side.
It's very easy to customize the highlighting as I see fit as it requires no more than editing some HTML. Try that with those dynamic scripts. :-P

Code boxes

All source code is presented in a code box like the example below. Large code boxes have controls above them that allow you to hide and show the box, to toggle line numbers on or off and to load the source code in a window of its own. Scroll bars will, if necessary, appear when a code block is hovered with the mouse.

The color scheme used here is oceandeep because that's the scheme I happen to use in Vim right now.

Example

This is the source code of the home page, highlighted by Vim:

Source code: Home page show/hide source | show/hide line numbers | open in new window

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 3 <head>
 4 
 5 <meta name="generator" content="Andromeda CMS v0.5.3" />
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 7 <link rel="stylesheet" type="text/css" href="/style/main.css" />
 8 <script type="text/javascript" src="/logic/main.js"></script>
 9 
10 <title>Home &bull; MemoryAlpha</title>
11         
12 </head>
13 <body>
14 
15 <div id="wrap">
16 
17 <div id="header">
18 
19 <h1>MemoryAlpha</h1>
20 
21 <p>Colin Helvensteijn's home server</p>
22 
23 </div>
24 
25 <div id="menu">
26 
27 <ul id="main-menu">
28         <li><a class="active" href="/">Home</a></li>
29         <li><a href="/projects/">Projects</a></li>
30         <li><a href="/about/">About</a></li>
31 </ul>
32 
33 </div>
34 
35 <div id="page">
36 
37 <h2>Home</h2>
38 
39 <p id="updated">Last updated: April 6th, 2008</p>
40 
41 <div id="content">
42 
43 <p>Welcome to <a href="/about/memoryalpha/" title="About: MemoryAlpha">MemoryAlpha</a>, home server of Colin Helvensteijn.</p>
44 
45 <p>Since April 5th, 2008, this web site is powered by a beta version of <a href="/about/andromeda/" title="About: Andromeda CMS">Andromeda CMS</a>, a self made content management system written in PHP.</p>
46 
47 <p>I intend to restore all te content of the previous web site that occupied this space in the near future. I also plan to add some new content after that, but I'll have to do some more brainstorming first. I will also create a more visually aesthetic layout, when I'm in a creative mood. :-)</p>
48 
49 </div>
50 
51 </div>
52 
53 </div>
54 
55 <div id="footer">
56 
57 <p><a href="/copyright/" title="Copyright notice">&copy;</a> 2001-2008 Colin Helvensteijn &bull;
58 <a href="http://validator.w3.org/check/referer" title="Check now">Valid XHTML</a> &bull;
59 <a href="http://jigsaw.w3.org/css-validator/check/referer" title="Check now">Valid CSS</a> &bull;
60 Font size: <a href="javascript:smallFont()" title="Use small font">small</a>/<a href="javascript:largeFont()" title="Use large font">large</a> &bull;
61 This web site features a <a href="/blank/" title="This page intentionally left blank">blank page</a>
62 <span class="error" id="nojs"><br />JavaScript appears to be disabled or not supported. Some features won't work!</span></p>
63 
64 </div>
65 
66 </body>
67 </html>
68 <!-- generated in 0.00221 seconds -->
69 <!-- no servers were harmed in the process of generating this page -->

Note how URLs are recognized and made into links (light yellow, underlined). And that's just HTML. Vim will highlight almost any language one could possibly think of. And if it doesn't, one could always teach it by creating new syntax files.