w2krepo redesign complete!
Posted in Site Updates, w2krepo March 27th, 2020 by dotcomboom

I started reworking w2krepo’s styling back when I switched subdomains in February; finally I’ve come back to it and finished it up.

That list you see is actually dynamically generated with some PHP code I pulled together from stuff off the net.

<table>
<?php
$fileList = glob('*');
foreach($fileList as $filename){
    //Use the is_dir function to make sure that it is a directory.
    if(is_dir($filename) and ($filename != 'icons') and ($filename != 'blurbs')){
	echo '<tr><td style="min-width: 32px;">';
        echo '<a href="', $filename, '/"><img src="icons/', $filename, '.gif" width="32" height="32"></a>';
	echo '</td><td>';
        echo '<a href="', $filename, '/">', $filename, '</a>';
	echo '<br>', file_get_contents('blurbs/' . $filename . '.txt');
	echo '</td></tr>'; 
    }   
}
?>
</table>
<?php
$fileList = glob('*.7z');
foreach($fileList as $filename){
    //Use the is_file function to make sure that it is not a directory.
    if(is_file($filename)){
        echo '<a href="', $filename, '">', $filename, '</a><br>'; 
    }   
}
?>

The small blurbs I use as category descriptions are all stored in this folder. Those get written out through the script.

As for styling the directory indices, it’s pretty basic. I use a .htaccess file so my web server uses header and footer .html files.

<IfModule mod_autoindex.c>
	Options +Indexes
    	IndexOptions IgnoreCase FancyIndexing FoldersFirst NameWidth=* DescriptionWidth=* SuppressHTMLPreamble
	IndexIgnore header.html footer.html .htaccess index.css vduheader.png
	HeaderName header.html
	ReadmeName footer.html
	
	AddDescription "<span>Executable</span>" .exe
</IfModule>

From there, each folder has a header.html and footer.html file. header.html goes like this:

<!doctype html>
<html>
	<head>
		<title>Productivity</title>
		<link rel="stylesheet" href="http://cdn.jsdelivr.net/gh/kognise/water.css@latest/dist/light.min.css">
	</head>
	<body>
		<h1>Productivity</h1>

And footer.html:

                (I could put a readme here if need be)
	</body>
</html>

Although I would have liked to use one header.html and one footer.html for all of them (using some kind of tags similar to my own project AutoSite) this will work, at least in the interim. Things I could do in the future are adding more file descriptions to the .htaccess or put more information in the footers (possibly contact and contributing information, though that could be a hassle to update for each folder so another time, maybe).

It all also degrades gracefully in older browsers.

Visit here, or here for HTTP.


« « « Leave a comment » » »



RSS feed for these comments. | TrackBack URI