aseemk · January 9, 2013 23:47 · mikz · Oct 31, 2014
diff --git a/500.html b/500.html
 ---
 title: 500 Internal Server Error
 ---

 <article>
    <h1>500 Internal Server Error</h1>
    <p>
        Sorry, something’s gone wrong on our end.
        We apologize for the inconvenience.
    </p>
    <p>
        <!--
            an empty href value means the current page, which is what we want
            normally. but on Heroku, this page is served within an iframe.
            we can't query its location directly since it's cross-domain, but
            we it'll be this page's referrer, so we can derive it from that.
            we do that with javascript below, and set it to open up top.
            until then, we add an onclick handler to reload the current page
            in the current frame –– don't move this page to the outer frame.
            https://developer.mozilla.org/en/DOM/window.location#Methods
        -->
        You could try
        <a id="reload-link" href="" onclick="location.reload(true); return false;">
            reloading the page</a> and see if that fixes it.
        If the problem persists,
        <a href="mailto:[email protected]">let us know</a>
        and we’ll try our best to help.
    </p>
 </article>

 <script>
    // if we aren't the top frame, we need to derive the outer frame's URL,
    // and set the reload link to that. note that jQuery isn't loaded yet!
    if (top !== self) {
        var reloadLink = document.getElementById('reload-link');
        reloadLink.href = document.referrer;
        reloadLink.target = "_top";
        reloadLink.onclick = null;
    }
 </script>
diff --git a/503.html b/503.html
 ---
 title: Be Right Back
 ---

 <article>
    <h1>Be Right Back</h1>
    <p>
        We’re performing some quick maintenance on the site, but
        we’ll be back as soon as we’re done.
    </p>
    <p>
        In fact, this page will auto-refresh itself every minute,
        but you can
        <!--
            an empty href value means the current page, which is what we want
            normally. but on Heroku, this page is served within an iframe.
            we can't query its location directly since it's cross-domain, but
            we it'll be this page's referrer, so we can derive it from that.
            we do that with javascript below, and set it to open up top.
            until then, we add an onclick handler to reload the current page
            in the current frame –– don't move this page to the outer frame.
            https://developer.mozilla.org/en/DOM/window.location#Methods
        -->
        <a id="reload-link" href="" onclick="location.reload(true); return false;">
            give it a nudge</a> if you like.
    </p>
 </article>

 <script>
    // if we aren't the top frame, we need to derive the outer frame's URL,
    // and set the reload link to that. note that jQuery isn't loaded yet!
    // either way, also set a timeout to auto-reload the page in a minute.
    if (top !== self) {
        var reloadLink = document.getElementById('reload-link');
        reloadLink.href = document.referrer;
        reloadLink.target = "_top";
        reloadLink.onclick = null;

        setTimeout(function () {
            // can't use top.location.reload() across domains!
            top.location = document.referrer;
        }, 1000 * 60);
    } else {
        setTimeout(function () {
            location.reload(true);
        }, 1000 * 60);
    }
 </script>
diff --git a/layout.html b/layout.html
 <!doctype html>
 <!-- This markup is based on the excellent H5BP: http://html5boilerplate.com/ -->
 <!-- Note the needed xmlns and xmlns:fb attributes are required for FBML! https://developers.facebook.com/docs/reference/javascript/ -->
 <!--[if lt IE 7 ]> <html class="no-js ie6" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
 <!--[if IE 7 ]>    <html class="no-js ie7" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
 <!--[if IE 8 ]>    <html class="no-js ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
 <!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <!--<![endif]-->
 <head>

    <meta charset="utf-8">

    <!--
        Heroku error pages are shown in an iframe, so we make sure to open all
        site links in the outer top-most frame. We also need to make sure all
        such site links are absolute, since this page won't be on the same
        domain. But we don't set a base href since we *do* want our script and
        stylesheet links to be relative; they *need* to be on the same domain.
    -->
    <base target="_top">
    {% assign BASE = "http://www.thethingdom.com" %}    <!-- no trailing slash -->

    <!-- TODO viewport ultimately for iphone, etc. when we have mobile css -->

    <title>{{ page.title }} – The Thingdom</title>

    <!-- TODO dynamic descriptions -->
    <meta name="description" content="The Thingdom is a place for people who love the things in their lives. Share what you have and want, and see what your friends have and want.">

    <!-- TODO would be great to automatically combine+minifiy scripts on the server -->
    <link rel="stylesheet" href="/styles/h5bp-base.css">
    <link rel="stylesheet" href="/styles/uikit.css">    <!-- for nice alerts/dialogs everywhere -->
    <link rel="stylesheet" href="/styles/tipsy.css">    <!-- for nice, dynamic tooltips -->
    <link rel="stylesheet" href="/styles/common.css">
    <link rel="stylesheet" href="/styles/content.css">  <!-- for error pages -->
    <!-- TODO page stylesheets? -->

    <script>
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-21558026-3']);
        _gaq.push(['_setDomainName', '.thethingdom.com']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

    <!-- this is needed before body to enable HTML5 elements in IE8 -->
    <script src="/scripts/modernizr-1.7.min.js"></script>

    <!-- workaround for IE9 not using IE8 conditional comments even in IE8 mode: -->
    <script>
        if (document.documentMode) {
            document.documentElement.className += ' ie' + document.documentMode + ' ';
        }
    </script>

 </head>
 <body>

    <header>
        <div id="logo">
            <a href="{{ BASE }}/">
                <img src="/images/logo-239x34.png" width="239" height="34" alt="The Thingdom">
            </a>
        </div>

        <nav id="top-navigation">
            <!--
                Normally, this top nav shows a login/logout link, and other
                links  if you're logged in, but we have no way of knowing
                whether you're logged in or not here, I think. TODO Do we?
                XXX So for now, we just show the logged-out state.
                For the login link, we link to The Thingdom's login *page*
                instead of Janrain's actual login endpoint, since, when the
                site is up, that page will auto-redirect if already logged in.
                XXX We also assume that signups are closed; no "Join" label.
            -->
            <ul><!--
             --><li><a class="login" href="{{ BASE }}/login">Login</a></li><!--
         --></ul>
        </nav>

        <nav id="global-navigation">
            <!--
                This nav also varies based on whether you're logged in or not.
                XXX Again we show the logged-out state for now.
            -->
            <ul><!--
             --><li><a href="{{ BASE }}/about">About</a></li><!--
             --><li><a href="{{ BASE }}/people">People</a></li><!--
             --><li><a href="{{ BASE }}/things">Things</a></li><!--
        --></ul>
        </nav>
    </header>

    {{ content }}

    <footer>
        <div class="meta">
            <!-- XXX the dot separators should probably be done via css -->
            <a href="{{ BASE }}/about">About</a> ·
            <a href="http://blog.thethingdom.com">Blog</a> ·
            <a href="mailto:[email protected]">Contact</a> ·
            <a href="mailto:[email protected]">Feedback</a> ·
            <a href="mailto:[email protected]">Support</a> ·
            <a href="http://twitter.com/TheThingdom">@TheThingdom</a> ·
            © 2011
        </div>
    </footer>

    <!-- ASYNC SCRIPTS FIRST: -->

    <!-- UserVoice widget -->
    <script>
        (function() {
            // this widget doesn’t work when third-party cookies are disabled.
            // this is most prominently the default case on iOS, so:
            // XXX approximate for iOS by detecting touch, and eventually
            // TODO investigate if we can detect the root cause somehow.
            if (Modernizr.touch) {
                return;
            }

            var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
            uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/vdr1KZDgLW1cyMxPs1dyag';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
        })();
    </script>

    <!-- THEN SYNC ONES: -->
    <!-- TODO use a script loader eventually so that everything can be async, -->
    <!-- while still giving us the ability to execute stuff on script load. -->

    <!-- jQuery -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script>window.jQuery || document.write('<script src="/scripts/jquery-1.5.1.min.js">\x3C/script>')</script>

    <!-- Other common dependencies -->
    <script src='/scripts/jquery.placeholder.min.js'></script>
    <script src="/scripts/uikit.js"></script>
    <script src="/scripts/jquery.tipsy.js"></script>
    <script src="/scripts/common.js"></script>

    <!-- TODO Page scripts? -->

 </body>
 </html>
	---
	title: 500 Internal Server Error
	---

	<article>
	<h1>500 Internal Server Error</h1>
	<p>
	Sorry, something’s gone wrong on our end.
	We apologize for the inconvenience.
	</p>
	<p>
	<!--
	an empty href value means the current page, which is what we want
	normally. but on Heroku, this page is served within an iframe.
	we can't query its location directly since it's cross-domain, but
	we it'll be this page's referrer, so we can derive it from that.
	we do that with javascript below, and set it to open up top.
	until then, we add an onclick handler to reload the current page
	in the current frame –– don't move this page to the outer frame.
	https://developer.mozilla.org/en/DOM/window.location#Methods
	-->
	You could try
	<a id="reload-link" href="" onclick="location.reload(true); return false;">
	reloading the page</a> and see if that fixes it.
	If the problem persists,
	<a href="mailto:[email protected]">let us know</a>
	and we’ll try our best to help.
	</p>
	</article>

	<script>
	// if we aren't the top frame, we need to derive the outer frame's URL,
	// and set the reload link to that. note that jQuery isn't loaded yet!
	if (top !== self) {
	var reloadLink = document.getElementById('reload-link');
	reloadLink.href = document.referrer;
	reloadLink.target = "_top";
	reloadLink.onclick = null;
	}
	</script>
	---
	title: Be Right Back
	---

	<article>
	<h1>Be Right Back</h1>
	<p>
	We’re performing some quick maintenance on the site, but
	we’ll be back as soon as we’re done.
	</p>
	<p>
	In fact, this page will auto-refresh itself every minute,
	but you can
	<!--
	an empty href value means the current page, which is what we want
	normally. but on Heroku, this page is served within an iframe.
	we can't query its location directly since it's cross-domain, but
	we it'll be this page's referrer, so we can derive it from that.
	we do that with javascript below, and set it to open up top.
	until then, we add an onclick handler to reload the current page
	in the current frame –– don't move this page to the outer frame.
	https://developer.mozilla.org/en/DOM/window.location#Methods
	-->
	<a id="reload-link" href="" onclick="location.reload(true); return false;">
	give it a nudge</a> if you like.
	</p>
	</article>

	<script>
	// if we aren't the top frame, we need to derive the outer frame's URL,
	// and set the reload link to that. note that jQuery isn't loaded yet!
	// either way, also set a timeout to auto-reload the page in a minute.
	if (top !== self) {
	var reloadLink = document.getElementById('reload-link');
	reloadLink.href = document.referrer;
	reloadLink.target = "_top";
	reloadLink.onclick = null;

	setTimeout(function () {
	// can't use top.location.reload() across domains!
	top.location = document.referrer;
	}, 1000 * 60);
	} else {
	setTimeout(function () {
	location.reload(true);
	}, 1000 * 60);
	}
	</script>
	<!doctype html>
	<!-- This markup is based on the excellent H5BP: http://html5boilerplate.com/ -->
	<!-- Note the needed xmlns and xmlns:fb attributes are required for FBML! https://developers.facebook.com/docs/reference/javascript/ -->
	<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
	<!--[if IE 7 ]> <html class="no-js ie7" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
	<!--[if IE 8 ]> <html class="no-js ie8" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <![endif]-->
	<!--[if (gte IE 9)\|!(IE)]><!--> <html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="https://www.facebook.com/2008/fbml" xmlns:thingdom="http://ns.thethingdom.com/2011"> <!--<![endif]-->
	<head>

	<meta charset="utf-8">

	<!--
	Heroku error pages are shown in an iframe, so we make sure to open all
	site links in the outer top-most frame. We also need to make sure all
	such site links are absolute, since this page won't be on the same
	domain. But we don't set a base href since we do want our script and
	stylesheet links to be relative; they need to be on the same domain.
	-->
	<base target="_top">
	{% assign BASE = "http://www.thethingdom.com" %} <!-- no trailing slash -->

	<!-- TODO viewport ultimately for iphone, etc. when we have mobile css -->

	<title>{{ page.title }} – The Thingdom</title>

	<!-- TODO dynamic descriptions -->
	<meta name="description" content="The Thingdom is a place for people who love the things in their lives. Share what you have and want, and see what your friends have and want.">

	<!-- TODO would be great to automatically combine+minifiy scripts on the server -->
	<link rel="stylesheet" href="/styles/h5bp-base.css">
	<link rel="stylesheet" href="/styles/uikit.css"> <!-- for nice alerts/dialogs everywhere -->
	<link rel="stylesheet" href="/styles/tipsy.css"> <!-- for nice, dynamic tooltips -->
	<link rel="stylesheet" href="/styles/common.css">
	<link rel="stylesheet" href="/styles/content.css"> <!-- for error pages -->
	<!-- TODO page stylesheets? -->

	<script>
	var _gaq = _gaq \|\| [];
	_gaq.push(['_setAccount', 'UA-21558026-3']);
	_gaq.push(['_setDomainName', '.thethingdom.com']);
	_gaq.push(['_trackPageview']);

	(function() {
	var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	})();
	</script>

	<!-- this is needed before body to enable HTML5 elements in IE8 -->
	<script src="/scripts/modernizr-1.7.min.js"></script>

	<!-- workaround for IE9 not using IE8 conditional comments even in IE8 mode: -->
	<script>
	if (document.documentMode) {
	document.documentElement.className += ' ie' + document.documentMode + ' ';
	}
	</script>

	</head>
	<body>

	<header>
	<div id="logo">
	<a href="{{ BASE }}/">
	<img src="/images/logo-239x34.png" width="239" height="34" alt="The Thingdom">
	</a>
	</div>

	<nav id="top-navigation">
	<!--
	Normally, this top nav shows a login/logout link, and other
	links if you're logged in, but we have no way of knowing
	whether you're logged in or not here, I think. TODO Do we?
	XXX So for now, we just show the logged-out state.
	For the login link, we link to The Thingdom's login page
	instead of Janrain's actual login endpoint, since, when the
	site is up, that page will auto-redirect if already logged in.
	XXX We also assume that signups are closed; no "Join" label.
	-->
	<ul><!--
	--><li><a class="login" href="{{ BASE }}/login">Login</a></li><!--
	--></ul>
	</nav>

	<nav id="global-navigation">
	<!--
	This nav also varies based on whether you're logged in or not.
	XXX Again we show the logged-out state for now.
	-->
	<ul><!--
	--><li><a href="{{ BASE }}/about">About</a></li><!--
	--><li><a href="{{ BASE }}/people">People</a></li><!--
	--><li><a href="{{ BASE }}/things">Things</a></li><!--
	--></ul>
	</nav>
	</header>

	{{ content }}

	<footer>
	<div class="meta">
	<!-- XXX the dot separators should probably be done via css -->
	<a href="{{ BASE }}/about">About</a> ·
	<a href="http://blog.thethingdom.com">Blog</a> ·
	<a href="mailto:[email protected]">Contact</a> ·
	<a href="mailto:[email protected]">Feedback</a> ·
	<a href="mailto:[email protected]">Support</a> ·
	<a href="http://twitter.com/TheThingdom">@TheThingdom</a> ·
	© 2011
	</div>
	</footer>

	<!-- ASYNC SCRIPTS FIRST: -->

	<!-- UserVoice widget -->
	<script>
	(function() {
	// this widget doesn’t work when third-party cookies are disabled.
	// this is most prominently the default case on iOS, so:
	// XXX approximate for iOS by detecting touch, and eventually
	// TODO investigate if we can detect the root cause somehow.
	if (Modernizr.touch) {
	return;
	}

	var uv = document.createElement('script'); uv.type = 'text/javascript'; uv.async = true;
	uv.src = ('https:' == document.location.protocol ? 'https://' : 'http://') + 'widget.uservoice.com/vdr1KZDgLW1cyMxPs1dyag';
	var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(uv, s);
	})();
	</script>

	<!-- THEN SYNC ONES: -->
	<!-- TODO use a script loader eventually so that everything can be async, -->
	<!-- while still giving us the ability to execute stuff on script load. -->

	<!-- jQuery -->
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
	<script>window.jQuery \|\| document.write('<script src="/scripts/jquery-1.5.1.min.js">\x3C/script>')</script>

	<!-- Other common dependencies -->
	<script src='/scripts/jquery.placeholder.min.js'></script>
	<script src="/scripts/uikit.js"></script>
	<script src="/scripts/jquery.tipsy.js"></script>
	<script src="/scripts/common.js"></script>

	<!-- TODO Page scripts? -->

	</body>
	</html>