Homepage: Front page built by the client; switched to two column layout

The front page is now produced by the client which stitches together the content items served up from various RSS/Atom news feeds. Basic semantic markup has been applied. Also switched to an easier to read / more space efficient two column layout (with responsive one column and page gutter collapsing). Note that at present the content items will appear in a somewhat odd order as the mechanism used for sorting and splitting to two columns is a temporary placeholder.
skyjake · Jul 2, 2013 · 981251b · 981251b
1 parent b7e53f5
commit 981251b
Show file tree

Hide file tree

Showing 8 changed files with 359 additions and 516 deletions.
diff --git a/web/classes/frontcontroller.class.php b/web/classes/frontcontroller.class.php
diff --git a/web/html/validatoricons.html b/web/html/validatoricons.html
diff --git a/web/plugins/masterbrowser/masterbrowser.php b/web/plugins/masterbrowser/masterbrowser.php
@@ -108,7 +108,7 @@ private function mustUpdateServerSummaryHtml()
         $this->db = new MasterServer();
 
         $cacheInfo = new ContentInfo();
-        FrontContrller::contentCache()->info(self::$serverSummaryCacheName, $cacheInfo);
+        FrontController::contentCache()->info(self::$serverSummaryCacheName, $cacheInfo);
         return ($this->db->lastUpdate > $cacheInfo->modifiedTime);
     }
 

diff --git a/web/plugins/z#home/home.php b/web/plugins/z#home/home.php
@@ -58,23 +58,130 @@ public function execute($args=NULL)
 
         includeHTML('latestversion', 'z#home');
 
-?><div class="asideboxgroup"><div id="downloadbox" class="asidebox"><?php
+?><div id="contentbox"><?php
 
-        includeHTML('getitnow', 'z#home');
+        //includeHTML('introduction', 'z#home');
+
+?><script type="text/javascript" >
+(function (e) {
+    e.fn.interpretFeed = function (t) {
+        var n = {
+            feedUri: "http://rss.cnn.com/rss/edition.rss",
+            maxItems: 5,
+            maxContentChars: 0,
+            showContent: true,
+            showPubDate: true,
+            generateItemHtml: 0
+        };
+        if (t) {
+            e.extend(n, t);
+        }
+        var r = e(this).attr("id");
+        var i;
+        //e("#" + r).empty().append('<div style="padding:3px;"><img src="images/loader.gif" /></div>');
+        e.ajax({
+            url: "http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=" + n.maxItems + "&output=json&q=" + encodeURIComponent(n.feedUri) + "&hl=en&callback=?",
+            dataType: "json",
+            success: function (t) {
+                //e("#" + r).empty();
+                var html = "";
+                e.each(t.responseData.feed.entries, function (e, t) {
+                    html += '<li>' + n.generateItemHtml(n, t) + '</li>';
+                });
+                e("#" + r).append('<ol style="list-style-type: none;">' + html + "</ol>");
+            }
+        })
+    }
+})(jQuery)
+
+$(document).ready(function () {
+    $('#column1').interpretFeed({
+        feedUri: 'http://dengine.net/forums/rss.php?mode=news',
+        maxItems: 3,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block newspost"><header><h1><a href="' + t.link + '" title="Discuss &#39;' + t.title + '&#39; in the user forum">' + t.title + '</a></h1>';
+            if (n.showPubDate) {
+                var d = new Date(t.publishedDate);
+                var niceDate = $.datepicker.formatDate('MM d, yy', d);
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                /*if (n.DescCharacterLimit > 0 && t.content.length > n.DescCharacterLimit) {
+                    html += '<div>' + t.content.substr(0, n.DescCharacterLimit) + "...</div>";
+                }
+                else*/ {
+                    html += t.content;
+                }
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+
+    $('#column1').interpretFeed({
+        feedUri: 'http://dl.dropboxusercontent.com/u/11948701/builds/events.rss',
+        maxItems: 3,
+        showContent: true,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block buildevent"><header><h1><a href="' + t.link + '" title="Read more about ' + t.title + ' in the repository">' + t.title + '</a></h1>';
+            var d = new Date(t.publishedDate);
+            var niceDate = $.datepicker.formatDate('MM d, yy', d);
+            if (n.showPubDate) {
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                html += 'Build report for ' + t.title.toLowerCase() + ' started on ' + niceDate + '.';
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+
+    $('#column2').interpretFeed({
+        feedUri: 'http://dengine.net/forums/rss.php?f=24',
+        maxItems: 3,
+        generateItemHtml: function (n, t) {
+            var html = '<article class="block blogpost"><header><h1><a href="' + t.link + '" title="Discuss &#39;' + t.title + '&#39; in the user forum">' + t.title + '</a></h1>';
+            if (n.showPubDate) {
+                var d = new Date(t.publishedDate);
+                var niceDate = $.datepicker.formatDate('MM d, yy', d);
+                html += '<p><time datetime="' + d.toISOString() + '" pubdate>' + niceDate + '</time></p>';
+            }
+            html += '</header>';
+            if (n.showContent) {
+                /*if (n.DescCharacterLimit > 0 && t.content.length > n.DescCharacterLimit) {
+                    html += '<div>' + t.content.substr(0, n.DescCharacterLimit) + "...</div>";
+                }
+                else*/ {
+                    html += t.content;
+                }
+            }
+            html += '</article>';
+            return html;
+        }
+    });
+});
+
+</script>
+<div id="column1" class="twocolumn"></div>
+<div id="column2" class="twocolumn"></div>
+<div class="clear"></div>
+</div>
+<?php
 
-?></div><?php
+?><div><div id="downloadbox" class="asidebox"><?php
 
-?><div id="socialbookmarkbox" class="asidebox"><?php
-
-        includeHTML('socialbookmarks', 'z#home');
+        includeHTML('getitnow', 'z#home');
 
 ?></div><?php
 
-?><div id="contentbox"><?php
+?><div id="socialbookmarkbox" class="asidebox"><?php
 
-        includeHTML('introduction', 'z#home');
+       includeHTML('socialbookmarks', 'z#home');
 
-?></div><?php
+?></div></div><?php
 
         $fc->endPage();
     }

diff --git a/web/plugins/z#home/html/getitnow.html b/web/plugins/z#home/html/getitnow.html
@@ -4,7 +4,7 @@
 <li><a href="/windows" class="platform_icon windows_icon" title="Doomsday for Windows"><span class="hidden">Download Doomsday Engine for Windows</span></a></li><li><a href="/mac_os" class="platform_icon macos_icon" title="Doomsday for Mac OS X"><span class="hidden">Download Doomsday Engine for Mac OS</span></a></li><li><a href="/ubuntu" class="platform_icon ubuntu_icon" title="Doomsday for Ubuntu"><span class="hidden">Download Doomsday Engine for Ubuntu</span></a></li><li><a href="/linux" class="platform_icon linux_icon" title="Doomsday for Linux"><span class="hidden">Download Doomsday Engine for Linux</span></a></li>
 </ul>
 </div>
-<div class="project_links">
+<div class="project_links hnav">
 <ul>
 <li><a href="/builds" title="Browse the Build Repository (automated builds)">Build Repository</a></li>
 <li><a href="http://sourceforge.net/tracker/?group_id=74815&amp;atid=542099" title="Deng project bug tracker: sourceforge.net">Report Bugs</a></li>

diff --git a/web/plugins/z#home/html/latestversion.html b/web/plugins/z#home/html/latestversion.html
@@ -1,4 +1,4 @@
-<div id="latestversion"><h1></h1></div>
+<div id="latestversion"></div>
 <script type="text/javascript">
 // We'll take the version info from the latest stable Doomsday for Windows package.
 task = new Array();
@@ -12,11 +12,12 @@
     url: task['request'],
     data: task['data'],
     success: function(json){
-        var element = document.getElementById('latestversion');
-        if(element)
+        var ob = $('#latestversion');
+        if(ob)
         {
-            element = element.firstChild; // Move to the heading.
-            element.textContent = json.version;
+            ob.empty();
+            var html = '<h1><a href="http://sourceforge.net/project/platformdownload.php?group_id=74815" title="Download Doomsday Engine ' + json.version + ' (latest stable) for my platform">' + json.version + '</a></h1>';
+            ob.append(html);
         }
     }
 });

diff --git a/web/plugins/z#home/html/socialbookmarks.html b/web/plugins/z#home/html/socialbookmarks.html
@@ -1,28 +1,26 @@
-<div class="socialbookmark_buttons">
-<!--<div id="fb-root"></div>-->
+<div class="socialbookmark_buttons hnav">
+<ul>
+<li><div><a href="https://twitter.com/dengteam" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @dengteam</a>
+<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></li>
+<li><!--<div id="fb-root"></div>-->
 <script type="text/javascript">(function(d, s, id) {
   var js, fjs = d.getElementsByTagName(s)[0];
   if (d.getElementById(id)) {return;}
   js = d.createElement(s); js.id = id;
   js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
   fjs.parentNode.insertBefore(js, fjs);
 }(document, 'script', 'facebook-jssdk'));</script>
-<div class="fb-like" data-href="http://www.facebook.com/doomsday.engine" data-send="false" data-width="268" data-show-faces="false" data-font="verdana"></div>
-</div>
-<div class="google-plusone">
+<div class="fb-like" data-href="http://www.facebook.com/doomsday.engine" data-send="false" data-width="300" data-show-faces="false" data-font="verdana"></div>
+</li>
+<li><div class="ohloh-button"><script type="text/javascript" src="http://www.ohloh.net/p/7201/widgets/project_users_logo.js"></script></div></li>
+<li><div class="google-plusone">
 <!-- Place this tag in your head or just before your close body tag -->
 <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
   {lang: 'en-GB', parsetags: 'explicit'}
 </script>
 <div class="g-plusone" data-size="medium" data-annotation="inline" data-href="http://dengine.net"></div>
 <script type="text/javascript">gapi.plusone.go();</script>
-</div>
-<div class="hnav">
-<ul>
-<li><div><a href="https://twitter.com/dengteam" class="twitter-follow-button" data-show-count="false" data-show-screen-name="false">Follow @dengteam</a>
-<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script></div></li>
+</div></li>
 <li><div class="sf-button"><a href="http://sourceforge.net/projects/deng" title="Explore the Deng project at SourceForge"><img src="http://sflogo.sourceforge.net/sflogo.php?group_id=74815&amp;type=9" width="80" height="15" alt="Get Doomsday Engine at SourceForge.net. Fast, secure and Free Open Source software downloads" /></a></div></li>
 </ul>
-</div>
-<div class="ohloh-button"><script type="text/javascript" src="http://www.ohloh.net/p/7201/widgets/project_users_logo.js"></script></div>
 </div>