improve update-time detection

.hgignore

@@ -2,3 +2,5 @@ mode:regex
 ^_dist/
 ^sites/[^/]+/data/
 ^sites/[^/]+/wwwroot/
+
+^shields_cache/

.hgtags

@@ -0,0 +1,3 @@
+42a17645b5b21d7fe395767de7fa3e26ee999014 release-r54
+0f89ae041c2ee60cc1ea308d047fce816b19c490 release-r64
+d4733a95c3428db8722ce0d0350d17bbbabc8720 release-r72

TODO.txt

@@ -0,0 +1,8 @@
+
+- Merge "written in" and "tags"
+
+- RSS for recent changes
+
+- RSS for all projects
+
+- Switchable CSS (reddit theme, 4chan theme, HN theme)

_dist/README.txt

@@ -14,7 +14,16 @@ Written in PHP, Bash
 
 =CHANGELOG=
 
-2015-04-04: rXX
+2015-04-05: r72
+- Feature: Support redirecting old project names
+- Feature: Add file hash in download URLs to prevent filename collisions
+- Fix an issue generating spritesheets even if no project images are present
+- Don't include `ctime` when estimating project update time
+
+2015-04-05: r64
+- Feature: Support sorting projects
+
+2015-04-04: r54
 - Feature: Support multiple code sites
 - Fix an issue with parallel builds on some versions of windows
 - Fix an issue corrupting URL links with multiple parameters

mkdist.sh

@@ -3,7 +3,7 @@
 set -eu
 
 tar cJvf "codesite-$(date +%s).tar.xz" \
-	rebuild.php rebuild.sh sites/codesite.example.com \
+	rebuild.php rebuild.sh sites/codesite.example.com static_global \
 	--owner=0 --group=0
 
 read -p "Press any key to continue..."

rebuild.php

@@ -3,6 +3,21 @@
 // Code-hosting website
 // ````````````````````
 
+function mkshield($left_str, $right_str, $color_str) {
+	$filename = rawurlencode(str_replace('-', '--', $left_str)).'-'.rawurlencode(str_replace('-', '--', $right_str)).'-'.rawurlencode($color_str).'.svg';
+	$cache_path = __DIR__.'/../../shields_cache/'.$filename;
+	
+	if (file_exists($cache_path)) {
+		return file_get_contents($cache_path);
+		
+	} else {
+		$retn = file_get_contents('https://img.shields.io/badge/'.$filename);
+		file_put_contents($cache_path, $retn);
+		return $retn;
+		
+	}
+}
+
 /**
  * Create a thumbnail of an image. It overscales, centers, and crops to fit the
  *   target dimensions.
@@ -116,11 +131,20 @@ function text2html($sz) {
 		
 		$base = preg_replace('~^=+(.+)=+~m', '<strong>\\1</strong>', $base);
 		$base = preg_replace('~(https?://[^ \\r\\n\\t]+)~i', '<a href="\\1">\\1</a>', $base);
+		$base = preg_replace('~\\[b\\](.+?)\\[/b\\]~m', '<strong>\\1</strong>', $base);
+		$base = preg_replace('~\\[i\\](.+?)\\[/i\\]~m', '<i>\\1</i>', $base);
+		$base = preg_replace('~\\[spoiler\\](.+?)\\[/spoiler\\]~m', '<span class="spoiler">\\1</span>', $base);
+		$base = preg_replace('~\\[entry=([^\\]]+?)\\](.+?)\\[/entry\\]~m', '<a href="\\1.html">\\2</a>', $base);
+		$base = preg_replace('~\n- ~ms', "\n&bull; ", $base);
 		
 		$btparts = explode('`', $base);
 		if (count($btparts) > 1 && (count($btparts) % 2)) {
 			for ($i = 1, $e = count($btparts); $i < $e; $i += 2) {
-				$btparts[$i] = '<span class="code">'.$btparts[$i].'</span>';
+				$class = 'code';
+				if (strpos($btparts[$i], "\n") !== false) {
+					$class .= ' code-multiline';
+				}
+				$btparts[$i] = '<span class="'.$class.'">'.$btparts[$i].'</span>';
 			}
 		}
 		
@@ -151,9 +175,12 @@ class CProject {
 	public $projname;
 	public $shortdesc = '(no description)';
 	public $subtag = '';
+	public $lastupdate = 0;
 	private $longdesc = '';
+	private $prefix_html = '';
 	private $images = array();
 	private $downloads = array();
+	private $downloads_hashes = array();
 	public $tags = array();
 	
 	public $homeimage = null;
@@ -165,11 +192,23 @@ class CProject {
 		// Identify resources in folder
 		
 		$ls = scandir($this->dir);
+		$found_real_lastupdate = false;
 		foreach($ls as $file) {
 			if ($file[0] == '.') continue;
 			
 			if ($file == 'README.txt') {
+				
+				// Guess 'last update' time
+				$matches = [];
+				if (preg_match('~\n(\d\d\d\d-\d\d-\d\d)~', $this->longdesc, $matches)) {
+					// Use first date entry (assumed to be a CHANGELOG)
+					$this->lastupdate = strtotime($matches[1]);
+					$found_real_lastupdate = true;
+					
+				}
+				
 				$this->longdesc = file_get_contents($this->dir.'README.txt');
+				
 				$matches = array();
 				if (preg_match('~Written in ([^\\r\\n]+)~', $this->longdesc, $matches)) {
 					$this->subtag = rtrim($matches[1], ' .');
@@ -182,9 +221,37 @@ class CProject {
 				$parts = explode("\n", $this->longdesc);
 				$this->shortdesc = array_shift($parts);
 				$this->shortdesc[0] = strtolower($this->shortdesc[0]); // cosmetic lowercase
+				
+				// Filter longdesc				
+				$this->longdesc = str_replace("\r", "", $this->longdesc); // filter windows CR
+				
+				$prefix_html = '';
+				$this->longdesc = preg_replace_callback('~\r?\nWritten in ([^\\n]+)~ms', function($matches) use (&$prefix_html) {
+					$prefix_html .= (
+						(SHIELDS_PREFIX ? mkshield('build', 'success', 'brightgreen').'&nbsp;' : '').
+						mkshield('written in', $matches[1], 'blue')
+					);
+					return '';
+				}, $this->longdesc);
+				
+				while(strpos($this->longdesc, "\n\n\n") !== false) {
+					$this->longdesc = str_replace("\n\n\n", "\n\n", $this->longdesc);
+				}
+				$this->longdesc = rtrim($this->longdesc, "\n");
+
+				$this->prefix_html = $prefix_html;
+				
 				continue;
 			}
 			
+			if (! $found_real_lastupdate) {
+				$this->lastupdate = max(
+					$this->lastupdate,
+					// filectime($this->dir.$file),
+					($file == 'README.txt' ? filectime($this->dir.$file) : filemtime($this->dir.$file)) // Don't count README updates
+				);
+			}
+						
 			if (is_image($file)) {
 				$this->images[] = $file;
 			} else {
@@ -194,13 +261,19 @@ class CProject {
 		
 		natcasesort($this->downloads);
 		$this->downloads = array_reverse($this->downloads);
+		
+		for($i = 0, $e = count($this->downloads); $i !== $e; ++$i) {
+			$this->downloads_hashes[] = (
+				sha1_file($this->dir.$this->downloads[$i])
+			);
+		}
 	}
 	
 	public function genHomeImage() {		
 		if (count($this->images)) {
 			
 			$this->homeimage = mkthumbnail(
-				$this->dir.$this->images[0], //BASEDIR.'wwwroot/srv/'.$this->projname.'_0.'.str_ext($this->images[0]),
+				$this->dir.$this->images[0],
 				null, // raw handle
 				INDEX_THUMB_W, INDEX_THUMB_H
 			);
@@ -222,7 +295,21 @@ class CProject {
 		// Copy downloads to wwwroot
 		
 		foreach($this->downloads as $idx => $filename) {
-			copy($this->dir.$filename, BASEDIR.'wwwroot/srv/'.$filename);
+			$cmkdir = @mkdir( BASEDIR.'wwwroot/srv/'.$this->downloads_hashes[$idx] );
+			
+			if (! $cmkdir) {
+				fputs(
+					STDOUT,
+					"WARNING: Couldn't create directory ".$this->downloads_hashes[$idx].
+					" for file '${filename}'".
+					" in project '".$this->projname."'!\n"
+				);
+			}
+			
+			copy(
+				$this->dir.$filename, 
+				BASEDIR.'wwwroot/srv/'.$this->downloads_hashes[$idx].'/'.$filename
+			);
 		}
 		
 		// Generate index page
@@ -243,13 +330,17 @@ class CProject {
 	
 	public function index() {
 ?> 
-<h2><?=hesc($this->projname)?></h2>
+<h2><?=hesc(str_replace('_', ' ', $this->projname))?></h2>
 
 <div class="projinfo">
 
 	<div class="projbody projbody_<?=(count($this->images) ? 'half' : 'full')?>w">
 		
-		<strong>ABOUT</strong>
+<?php if (strlen($this->prefix_html)) { ?>
+		<p style="margin-top:0;"><?=$this->prefix_html?></p>
+<?php } ?> 
+		
+		<strong><?=hesc(strtoupper(ARTICLE_HEADER))?></strong>
 		
 		<p><?=text2html($this->longdesc)?></p>
 
@@ -260,11 +351,11 @@ class CProject {
 		<strong>DOWNLOAD</strong>
 		
 		<ul>
-	<?php foreach($this->downloads as $filename) { ?> 
+	<?php foreach($this->downloads as $idx => $filename) { ?> 
 			<li>
-				<a href="srv/<?=hesc(rawurlencode($filename))?>"><?=hesc($filename)?></a>
+				<a href="srv/<?=hesc($this->downloads_hashes[$idx])?>/<?=hesc(rawurlencode($filename))?>"><?=hesc($filename)?></a>
 				<small>
-					<?=hesc(fbytes(filesize(BASEDIR.'wwwroot/srv/'.$filename)))?>
+					<?=hesc(fbytes(filesize(BASEDIR.'wwwroot/srv/'.$this->downloads_hashes[$idx].'/'.$filename)))?>
 				</small>
 			</li>
 	<?php } ?> 
@@ -298,7 +389,7 @@ function template($title, $content) {
 	<head>
 		<meta charset="UTF-8">
 		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" >
-		<meta name="viewport" content="width=768px" >
+		<meta name="viewport" content="width=960" >
 		<link type="text/css" rel="stylesheet" href="normalize.css">
 		<link type="text/css" rel="stylesheet" href="style.css">
 		<script type="text/javascript" src="site.js"></script>
@@ -325,6 +416,7 @@ function listprojects() {
 	$projects = array();
 	foreach($ls as $dirname) {
 		if ($dirname[0] == '.') continue;
+		if (! is_dir(BASEDIR.'data/'.$dirname)) continue;
 		$matches = array();
 
 		if (preg_match('~(?:\d+-)?(.+)~', $dirname, $matches)) {
@@ -360,6 +452,8 @@ function buildcommon() {
 	$handles = array();
 	$handle_lookup = array();
 	
+	$alphasort = [];
+	
 	foreach($projects as $dirname => $projectname) {
 
 		$pr = new CProject($dirname, $projectname);
@@ -373,12 +467,26 @@ function buildcommon() {
 			$handle_lookup[$projectname] = count($handles);
 			$handles[] = $pr->homeimage;
 		}
+		
+		$alphasort[] = [$pr->projname, count($plist)-1];
+	}
+	
+	usort($alphasort, function($a, $b) {
+		return strcasecmp($a[0], $b[0]);
+	});
+	
+	$alphaidx = [];
+	
+	foreach($alphasort as $a) {
+		$alphaidx[ $a[1] ] = count($alphaidx);
 	}
 
 	// Build homepage spritesheet
 	
-	mkspritesheet($handles, BASEDIR.'wwwroot/logos.jpg', INDEX_THUMB_W, INDEX_THUMB_H);
-	array_map('imagedestroy', $handles); // free
+	if (count($handles)) {
+		mkspritesheet($handles, BASEDIR.'wwwroot/logos.jpg', INDEX_THUMB_W, INDEX_THUMB_H);
+		array_map('imagedestroy', $handles); // free
+	}
 	
 	// Build index page
 
@@ -391,16 +499,21 @@ function buildcommon() {
 		<!-- }} --> 
 	<?php } ?> 
 		
-		<table class="projtable">
-	<?php foreach ($plist as $pr) { ?> 
-			<tr class="<?=$pr->getClassAttr()?>">
+		<table id="projtable-main" class="projtable">
+	<?php foreach ($plist as $i => $pr) { ?> 
+			<tr class="<?=$pr->getClassAttr()?>"
+				data-sort-mt="-<?=$pr->lastupdate?>"
+				data-sort-ct="<?=$i?>"
+				data-sort-al="<?=$alphaidx[$i]?>"
+			>
 				<td>
 					<a href="<?=hesc(urlencode($pr->projname))?>.html"><?=(is_null($handle_lookup[$pr->projname]) ? '<div class="no-image"></div>' : '<div class="homeimage homeimage-sprite" style="background-position:0 -'.($handle_lookup[$pr->projname]*INDEX_THUMB_H).'px"></div>')?></a>
 				</td>
 				<td>
-					<strong><?=hesc($pr->projname)?></strong>,
+					<strong><?=hesc(str_replace('_', ' ', $pr->projname))?></strong><?php if (SHOW_BLURBS) { ?>,
 					<?=hesc($pr->shortdesc)?> 
-					<a href="<?=hesc(urlencode($pr->projname))?>.html">more...</a>
+					<?php } ?> 
+					<a href="<?=hesc(urlencode($pr->projname))?>.html" class="article-read-more">more...</a>
 		<?php if (strlen($pr->subtag) || count($pr->tags)) { ?> 
 					<br>
 					<small>
@@ -425,8 +538,20 @@ function buildcommon() {
 	// Done
 }
 
+function buildredirects($redirects) {
+	foreach($redirects as $oldname => $newname) {
+		ob_start();
+?>
+<meta http-equiv="refresh" content="0; url=<?=hesc($newname)?>.html">
+<a href="<?=hesc($newname)?>.html">Moved &raquo;</a>
+<?php
+		$page = ob_get_clean();
+		file_put_contents(BASEDIR.'wwwroot/'.$oldname.'.html', $page);
+	}
+}
+
 function main($args) {
-	$basedir = './'; //$args[0];	
+	$basedir = './';
 	$total   = $args[0];
 	$pos     = $args[1];
 	
@@ -448,11 +573,17 @@ function main($args) {
 	define('PAGE_THUMB_H',  intval($config['codesite']['page_thumb_h']));
 	define('INDEX_THUMB_W', intval($config['codesite']['index_thumb_w']));
 	define('INDEX_THUMB_H', intval($config['codesite']['index_thumb_h']));
+	define('SHOW_BLURBS',   !(isset($config['codesite']['blurbs']) && $config['codesite']['blurbs'] === 'off') );
+	define('ARTICLE_HEADER', (isset($config['codesite']['article_header']) ? $config['codesite']['article_header'] : 'ABOUT') );	
+	define('SHIELDS_PREFIX', isset($config['codesite']['shields_prefix']));
 	
 	// Perform build tasks
 	
 	if ($pos == 0) {
 		buildcommon();
+		if (array_key_exists('redirect', $config)) {
+			buildredirects( $config['redirect'] );
+		}
 	} else {
 		buildprojects($pos, array_decimate(listprojects(), $total, $pos));
 	}
@@ -462,6 +593,7 @@ function main($args) {
 //
 
 ini_set('display_errors', 'On');
+date_default_timezone_set('Etc/UTC');
 error_reporting(E_ALL);
 
 main(array_slice($_SERVER['argv'], 1));

rebuild.sh

@@ -1,12 +1,12 @@
 #!/bin/bash
 
 set -eu
-PHP=/cygdrive/c/bin/php/php.exe
 THREADS=4
 
 buildsite() {
 
-	local rebuild="$(realpath ./rebuild.php)"
+	local basedir="$(realpath .)"
+	local rebuild="${basedir}/rebuild.php"	
 	
 	if [[ "$(uname -o)" == "Cygwin" ]] ; then
 		rebuild="$(cygpath -w "$rebuild")"
@@ -27,6 +27,7 @@ buildsite() {
 	if [[ ! -d static ]] ; then
 		mkdir static
 	fi
+	cp "${basedir}/static_global/"* wwwroot || true
 	cp static/* wwwroot || true
 	
 	for htm in footer header homepage_blurb ; do
@@ -38,7 +39,7 @@ buildsite() {
 	echo "Building pages..."
 
 	for i in $(seq 0 "$THREADS") ; do
-		$PHP "$rebuild" "$THREADS" "$i" &
+		php "$rebuild" "$THREADS" "$i" &
 	done
 	wait
 

sites/code.ivysaur.me/config.ini

@@ -5,4 +5,10 @@ page_thumb_h=60
 index_thumb_w=90
 index_thumb_h=32
 
+shields_prefix=true
+
 ; n.b. Recommend a multiple of the JPEG iDCT block size for index_thumb_h
+
+[redirect]
+; old project name = new project name
+code.ivysaur.me=codesite

sites/code.ivysaur.me/homepage_blurb.htm

@@ -16,5 +16,11 @@
 </p>
 
 <p>
+	<select id="sortorder" style="float:right;">
+		<option value="a">Youngest project first</option>
+		<option value="b">Recent updates first</option>
+		<option value="c">Alphabetical</option>
+	</select>
+	
 	<strong>PROJECTS</strong>
 </p>

sites/code.ivysaur.me/static/style.css

@@ -7,14 +7,15 @@ img {
 	border:0;
 }
 a {
-	color:black;
-	text-decoration:underline;
+	color:#4078c0;
+	text-decoration:none;
 }
 a:hover {
-	color:blue;
 	cursor:pointer;
+	text-decoration:underline;
 }
 h1 a {
+	color:black;
 	text-decoration:none;
 }
 h1 a:hover {
@@ -28,6 +29,11 @@ h1,h2,h3 {
 	font-family:Consolas,monospace;
 	white-space:pre;
 }
+.code-multiline {
+	display:inline-block;
+	padding:8px;
+	border-radius:8px;
+}
 
 /* */
 
@@ -41,14 +47,15 @@ html, body {
 	
 	/* cosmetic */
 	font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
-	font-size:12px;
-	background:#DDD url('pixel_weave.png');	/* thanks subtlepatterns.com ! */
+	font-size:13px;
+	line-height:1.4;
+	background:#DDD url('greyzz.png');	/* thanks subtlepatterns.com ! */
 	color:#333;
 }
 
 #container {
 	margin:0 auto;
-	width:768px;
+	width:960px;
 	position:relative;
 	
 	height:auto !important;
@@ -119,7 +126,7 @@ html, body {
 }
 .projbody_halfw {
 	float:left;
-	width: 678px; /* 740px full - 60px rhs column - 2px border */
+	width: 860px; /* 740px full - 60px rhs column - 2px border */
 }
 .projbody_fullw {
 	
@@ -131,6 +138,24 @@ html, body {
 
 /* */
 
+@media screen and (max-width:960px) {
+	
+	#container {
+		width:100%;
+	}
+	.projimg {
+		float:clear;
+		width:100%;
+	}
+	.projbody_halfw {
+		float:clear;
+		width:100%;
+	}
+	
+}
+
+/* */
+
 #ivylogo {
 	background:transparent url('ivysaur24.png') no-repeat 0 0;
 	width:24px;

sites/codesite.example.com/config.ini

@@ -6,3 +6,8 @@ index_thumb_w=90
 index_thumb_h=32
 
 ; n.b. Recommend a multiple of the JPEG iDCT block size for index_thumb_h
+
+[redirect]
+; old project name = new project name
+old-project-name=example-project
+

sites/codesite.example.com/homepage_blurb.htm

@@ -4,5 +4,11 @@
 </p>
 
 <p>
+	<select id="sortorder" style="float:right;">
+		<option value="a">Youngest project first</option>
+		<option value="b">Recent updates first</option>
+		<option value="c">Alphabetical</option>
+	</select>
+	
 	<strong>PROJECTS</strong>
 </p>

sites/codesite.example.com/static/normalize.css

@@ -1,406 +0,0 @@
-/*! normalize.css v2.1.3 | MIT License | git.io/normalize */
-
-/* ==========================================================================
-   HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Correct `block` display not defined in IE 8/9.
- */
-
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-nav,
-section,
-summary {
-    display: block;
-}
-
-/**
- * Correct `inline-block` display not defined in IE 8/9.
- */
-
-audio,
-canvas,
-video {
-    display: inline-block;
-}
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-
-audio:not([controls]) {
-    display: none;
-    height: 0;
-}
-
-/**
- * Address `[hidden]` styling not present in IE 8/9.
- * Hide the `template` element in IE, Safari, and Firefox < 22.
- */
-
-[hidden],
-template {
-    display: none;
-}
-
-/* ==========================================================================
-   Base
-   ========================================================================== */
-
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-
-html {
-    font-family: sans-serif; /* 1 */
-    -ms-text-size-adjust: 100%; /* 2 */
-    -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove default margin.
- */
-
-body {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Links
-   ========================================================================== */
-
-/**
- * Remove the gray background color from active links in IE 10.
- */
-
-a {
-    background: transparent;
-}
-
-/**
- * Address `outline` inconsistency between Chrome and other browsers.
- */
-
-a:focus {
-    outline: thin dotted;
-}
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-
-a:active,
-a:hover {
-    outline: 0;
-}
-
-/* ==========================================================================
-   Typography
-   ========================================================================== */
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari 5, and Chrome.
- */
-
-h1 {
-    font-size: 2em;
-    margin: 0.67em 0;
-}
-
-/**
- * Address styling not present in IE 8/9, Safari 5, and Chrome.
- */
-
-abbr[title] {
-    border-bottom: 1px dotted;
-}
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
- */
-
-b,
-strong {
-    font-weight: bold;
-}
-
-/**
- * Address styling not present in Safari 5 and Chrome.
- */
-
-dfn {
-    font-style: italic;
-}
-
-/**
- * Address differences between Firefox and other browsers.
- */
-
-hr {
-    -moz-box-sizing: content-box;
-    box-sizing: content-box;
-    height: 0;
-}
-
-/**
- * Address styling not present in IE 8/9.
- */
-
-mark {
-    background: #ff0;
-    color: #000;
-}
-
-/**
- * Correct font family set oddly in Safari 5 and Chrome.
- */
-
-code,
-kbd,
-pre,
-samp {
-    font-family: monospace, serif;
-    font-size: 1em;
-}
-
-/**
- * Improve readability of pre-formatted text in all browsers.
- */
-
-pre {
-    white-space: pre-wrap;
-}
-
-/**
- * Set consistent quote types.
- */
-
-q {
-    quotes: "\201C" "\201D" "\2018" "\2019";
-}
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-
-small {
-    font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-
-sub,
-sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-}
-
-sup {
-    top: -0.5em;
-}
-
-sub {
-    bottom: -0.25em;
-}
-
-/* ==========================================================================
-   Embedded content
-   ========================================================================== */
-
-/**
- * Remove border when inside `a` element in IE 8/9.
- */
-
-img {
-    border: 0;
-}
-
-/**
- * Correct overflow displayed oddly in IE 9.
- */
-
-svg:not(:root) {
-    overflow: hidden;
-}
-
-/* ==========================================================================
-   Figures
-   ========================================================================== */
-
-/**
- * Address margin not present in IE 8/9 and Safari 5.
- */
-
-figure {
-    margin: 0;
-}
-
-/* ==========================================================================
-   Forms
-   ========================================================================== */
-
-/**
- * Define consistent border, margin, and padding.
- */
-
-fieldset {
-    border: 1px solid #c0c0c0;
-    margin: 0 2px;
-    padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-
-legend {
-    border: 0; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
- * 1. Correct font family not being inherited in all browsers.
- * 2. Correct font size not being inherited in all browsers.
- * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
- */
-
-button,
-input,
-select,
-textarea {
-    font-family: inherit; /* 1 */
-    font-size: 100%; /* 2 */
-    margin: 0; /* 3 */
-}
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-
-button,
-input {
-    line-height: normal;
-}
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
- * Correct `select` style inheritance in Firefox 4+ and Opera.
- */
-
-button,
-select {
-    text-transform: none;
-}
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-
-button,
-html input[type="button"], /* 1 */
-input[type="reset"],
-input[type="submit"] {
-    -webkit-appearance: button; /* 2 */
-    cursor: pointer; /* 3 */
-}
-
-/**
- * Re-set default cursor for disabled elements.
- */
-
-button[disabled],
-html input[disabled] {
-    cursor: default;
-}
-
-/**
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-
-input[type="checkbox"],
-input[type="radio"] {
-    box-sizing: border-box; /* 1 */
-    padding: 0; /* 2 */
-}
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
- *    (include `-moz` to future-proof).
- */
-
-input[type="search"] {
-    -webkit-appearance: textfield; /* 1 */
-    -moz-box-sizing: content-box;
-    -webkit-box-sizing: content-box; /* 2 */
-    box-sizing: content-box;
-}
-
-/**
- * Remove inner padding and search cancel button in Safari 5 and Chrome
- * on OS X.
- */
-
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-    -webkit-appearance: none;
-}
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-    border: 0;
-    padding: 0;
-}
-
-/**
- * 1. Remove default vertical scrollbar in IE 8/9.
- * 2. Improve readability and alignment in all browsers.
- */
-
-textarea {
-    overflow: auto; /* 1 */
-    vertical-align: top; /* 2 */
-}
-
-/* ==========================================================================
-   Tables
-   ========================================================================== */
-
-/**
- * Remove most spacing between table cells.
- */
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}

sites/codesite.example.com/static/site.js

@@ -1,46 +0,0 @@
-(function() {
-	"use strict";
-
-	var show_all = function() {
-		var tr = document.querySelectorAll(".projtable tr");
-		for (var i = 0, e = tr.length; i !== e; ++i) {
-			tr[i].style.display = "table-row";
-		}
-		
-		var warn = document.querySelector(".tag-filter-warn");
-		warn.parentNode.removeChild(warn);
-	};
-	
-	var show_tag = function(tag) {
-		if (document.querySelector(".tag-filter-warn") !== null) {
-			show_all();
-		}
-	
-		var tr = document.querySelectorAll(".projtable tr");
-		for (var i = 0, e = tr.length; i !== e; ++i) {
-			tr[i].style.display = (tr[i].className.split(" ").indexOf("taggedWith-"+tag) === -1) ? "none" : "table-row";
-		}
-		
-		var div = document.createElement("div");
-		div.className = "tag-filter-warn";
-		div.innerHTML = "Filtering by tag. <a>reset</a>";
-		document.body.appendChild(div);
-		
-		document.querySelector(".tag-filter-warn a").addEventListener('click', function() {
-			show_all();
-			return false;
-		});
-	};
-
-	var get_show_tag = function(tag) {
-		return function() { show_tag(tag); return false; };
-	};
-
-	window.addEventListener('load', function() {
-		var taglinks = document.querySelectorAll(".tag-link");
-		for (var i = 0, e = taglinks.length; i !== e; ++i) {
-			var tag = taglinks[i].getAttribute("data-tag");
-			taglinks[i].addEventListener('click', get_show_tag(tag));
-		}
-	});
-})();

sites/storytime.ivysaur.me/config.ini

@@ -0,0 +1,11 @@
+[codesite]
+title=storytime.ivysaur.me
+page_thumb_w=60
+page_thumb_h=60
+index_thumb_w=90
+index_thumb_h=32
+
+blurbs=off
+article_header=ARTICLE
+
+; n.b. Recommend a multiple of the JPEG iDCT block size for index_thumb_h

sites/storytime.ivysaur.me/footer.htm

@@ -0,0 +1,10 @@
+<p>
+	<strong>CONTACT</strong>
+</p>
+<p>
+	<a
+		href="http://www.google.com/recaptcha/mailhide/d?k=01GuAWzMc9JjSdooo-2KCMQA==&amp;c=kgR3dBrP39yhPIy8FvLFbuBLmWqorQBDc_Zjbw6NAmU="
+		onclick="window.open('http://www.google.com/recaptcha/mailhide/d?k\07501GuAWzMc9JjSdooo-2KCMQA\75\75\46c\75kgR3dBrP39yhPIy8FvLFbuBLmWqorQBDc_Zjbw6NAmU\075', '', 'toolbar=0,scrollbars=0,location=0,statusbar=0,menubar=0,resizable=0,width=500,height=300'); return false;"
+		title="Reveal this e-mail address"
+	>Click here</a> to email me.
+</p>

sites/storytime.ivysaur.me/header.htm

@@ -0,0 +1 @@
+<h1><a href="index.html"><div id="ivylogo"></div>storytime.ivysaur.me</a></h1>

sites/storytime.ivysaur.me/homepage_blurb.htm

@@ -0,0 +1,12 @@
+<p>
+	The stories and information posted here are artistic works of fiction and falsehood. Only a fool would take anything posted here as fact.
+</p>
+<p>
+	<strong>LICENSE</strong>
+</p>
+<p>
+	Please consider all articles on this page to be under the <a rel="license" href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA 4.0 International license</a> unless otherwise specified.
+</p>
+<p>
+	<strong>ARTICLES</strong>
+</p>

sites/storytime.ivysaur.me/static/style.css

@@ -0,0 +1,187 @@
+/* style.css */
+
+html {
+	overflow-y:scroll; /* always display scrollbar to prevent horizontal lurch */
+}
+img {
+	border:0;
+}
+a {
+	color:black;
+	text-decoration:underline;
+}
+a:hover {
+	color:blue;
+	cursor:pointer;
+}
+h1 a {
+	text-decoration:none;
+}
+h1 a:hover {
+	color:black;
+}
+h1,h2,h3 {
+	margin-top:0;
+}
+.code {
+	background: #F8F8F8;
+	font-family:Consolas,monospace;
+	white-space:pre;
+}
+
+/* */
+
+html, body {
+	/* structural */
+	height:100%;
+	min-height:100%;
+	margin:0;
+	border:0;
+	padding:0;
+	
+	/* cosmetic */
+	font-family:"Helvetica Neue","Segoe UI",Arial,sans-serif;
+	font-size:12px;
+	background:#DDD url('pixel_weave.png');	/* thanks subtlepatterns.com ! */
+	color:#333;
+}
+
+#container {
+	margin:0 auto;
+	width:768px;
+	position:relative;
+	
+	height:auto !important;
+	height:100%; /* oldIE */
+	min-height:100%;
+	
+	/* cosmetic */
+	background:white;
+}
+
+#content {
+	padding:14px;
+	background:white;
+}
+
+/* */
+
+.tag::before {
+	content:"";
+		
+	display:inline-block;
+	width:7px;
+	height:7px;
+	
+	margin-right:2px;
+	
+	background:transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAZUlEQVQI12P4//8/Awyrqqp6KSkp/QdhFRWV7cgS+kDBN0B8RVlZuRikACahB+T8ger6BMTXwJJAiTwg4xvMOCj+ART3ZwCa3YYm8QcopgsyEWasDVT3W5AVMHcgO6gViNORXQ8A84NToxbSsJcAAAAASUVORK5CYII=') no-repeat 0 0;
+}
+
+.tag-filter-warn {
+	position:fixed;
+	top:0;
+	right:0;
+	
+	padding:4px;
+	
+	background:lightyellow;
+	border-bottom: 1px solid #888;
+	border-left:1px solid #888;
+}
+
+/* */
+
+.projtable {
+	border-collapse: collapse;
+	width:100%;
+}
+.projtable tr {	
+	transition:0.2s linear;
+}
+.projtable tr:hover {
+	background:#F8F8F8;
+}
+.projtable td {
+	padding: 2px 4px;
+}
+.projtable small {
+	color:grey;
+	font-style:italic;
+}
+.projtable tr td:first-child {
+	width:95px;
+}
+
+.projinfo {
+}
+.projbody {	
+}
+.projbody_halfw {
+	float:left;
+	width: 678px; /* 740px full - 60px rhs column - 2px border */
+}
+.projbody_fullw {
+	
+}
+.projimg {
+	float:right;
+	width:62px;	/* 60px + 2px border */
+}
+
+/* */
+
+#ivylogo {
+	background:transparent url('ivysaur24.png') no-repeat 0 0;
+	width:24px;
+	height:24px;
+	display:inline-block;
+	*display:block;
+	*zoom:1;
+	margin-right:4px;
+	position:relative;
+	top:4px;
+}
+
+/* */
+
+.homeimage {
+	width:90px;
+	height:32px;
+}
+
+.homeimage-sprite {
+	background: white url('logos.jpg') no-repeat 0 0;
+}
+
+.thumbimage {
+	width:60px;
+	height:60px;
+	opacity: 0.8;
+	transition:0.2s opacity;
+	border:1px solid lightgrey;
+}
+.thumbimage:hover {
+	opacity:1.0;
+}
+
+.no-image {
+	width:90px;
+	height:32px;
+	display:block;
+	background: white url('no_image.png') no-repeat 0 0;
+}
+
+/* */
+
+.spoiler {
+	color:black;
+	background:black;
+}
+.spoiler:hover {
+	color:white;
+}
+
+.article-read-more {
+	display:none;
+}

static_global/site.js

@@ -33,7 +33,52 @@
 	};
 
 	var get_show_tag = function(tag) {
-		return function() { show_tag(tag); return false; };
+		return function() {
+			show_tag(tag);
+			return false;
+		};
+	};
+
+	var sort_rows = function(cb) {
+		var tr = document.querySelectorAll(".projtable tr");
+		var items = [];
+		for (var i = 0, e = tr.length; i !== e; ++i) {
+			items.push([i, cb(tr[i])]);
+		}
+		items.sort(function(a, b) {
+			return (a[1] - b[1]);
+		});
+		for (var i = 0, e = items.length; i !== e; ++i) {
+			var el = tr[items[i][0]];
+			var parent = el.parentElement;
+			parent.removeChild(el);
+			parent.appendChild(el);
+		}
+	};
+	
+	var sort_update = function() {
+		var cb;
+		switch(document.getElementById('sortorder').value) {
+			case 'a':
+			default: {
+				cb = function(el) {
+					return el.getAttribute('data-sort-ct');
+				};
+			} break;
+			
+			case 'b': {
+				cb = function(el) {
+					return el.getAttribute('data-sort-mt');
+				}
+			} break;
+			
+			case 'c': {
+				cb = function(el) {
+					return el.getAttribute('data-sort-al');
+				}
+			} break;
+		};
+		sort_rows(cb);
 	};
 	
 	window.addEventListener('load', function() {
@@ -42,5 +87,11 @@
 			var tag = taglinks[i].getAttribute("data-tag");
 			taglinks[i].addEventListener('click', get_show_tag(tag));
 		}
+		
+		var so = document.getElementById('sortorder');
+		if (so) {
+			so.addEventListener('change', sort_update);
+			sort_update();
+		}
 	});
 })();