Adding links to home page. 404 support and releases page updates

DesignyourCode · Nov 26, 2015 · 705e229 · 705e229
1 parent bbbab96
commit 705e229
Show file tree

Hide file tree

Showing 9 changed files with 68 additions and 36 deletions.
diff --git a/public_html/assets/css/main.css b/public_html/assets/css/main.css
@@ -25,6 +25,10 @@ h1 {
     line-height: 90px;
     text-transform: uppercase;
 }
+.page-not-found h1 {
+    margin: 0 0 20px;
+}
+
 h2 {
     font-size: 24px;
     line-height: 30px;
@@ -59,10 +63,18 @@ p {
     margin-bottom: 10px;
 }
 
+ol {
+    margin: 0 0 20px 0;
+    padding: 0 0 0 20px;
+}
 ol li, ul li {
     margin-bottom: 6px;
 }
 
+.links {
+    margin-top: 20px;
+}
+
 /* Sharing links */
 .social-links {
   display: table;
@@ -130,22 +142,21 @@ ol li, ul li {
 }
 
 .btn {
-    background: #CEDCBE;
-    color: #026635;
+    background: #333333;
+    color: #ffffff;
     font-size: 18px;
     display: inline-block;
     padding: 12px 20px;
     text-transform: uppercase;
     text-decoration: none;
-    margin: 10px 0 0 20px;
     -webkit-transition: all .3s ease-in-out;
        -moz-transition: all .3s ease-in-out;
         -ms-transition: all .3s ease-in-out;
          -o-transition: all .3s ease-in-out;
             transition: all .3s ease-in-out;
 }
 .btn:hover {
-    background: #026635;
+    background: #111111;
     color: #ffffff;
 }
 

diff --git a/public_html/assets/img/page-not-found.jpg b/public_html/assets/img/page-not-found.jpg
diff --git a/public_html/assets/img/release-header.jpg b/public_html/assets/img/release-header.jpg
diff --git a/public_html/functions.php b/public_html/functions.php
@@ -3,12 +3,6 @@
 use abeautifulsite\SimpleImage;
 use Slim\Http\Request;
 
-function handle404()
-{
-    $app = \Slim\Slim::getInstance();
-    $app->response->redirect('/not-found', 303);
-}
-
 function getBestImage($width, $height, $person)
 {
 
@@ -136,7 +130,7 @@ function applyFilters($img)
     if(isset($sepia)) {
         $img->sepia();
     }
-    
+
     return $img;
 }
 

diff --git a/public_html/index.php b/public_html/index.php
@@ -66,4 +66,10 @@
         echo $template->render(array());
     });
 
+    // 404
+    $app->notFound(function () use ($app, $twig) {
+        $template = $twig->loadTemplate('views/404.html.twig');
+        echo $template->render(array());
+    });
+
 $app->run();
diff --git a/templates/base.html.twig b/templates/base.html.twig
@@ -41,36 +41,40 @@
 	</head>
 
 	<body>
-        <header>
-            {% block header %}
-                <img src="assets/img/bg.jpg" class="header-img" />
+        {% block header_outer %}
+            <header>
+                {% block header %}
+                    <img src="assets/img/bg.jpg" class="header-img" />
 
-                <div class="content">
-                    <h1>Placing Bad</h1>
-                    <div class="narrow">
-                        <p>This is a placeholder generator for developers to add to their sites, to help with testing. But what developer doesn't like Breaking Bad.</p>
-                        <p class="quote">&ldquo;I am the one who...adds placeholders to my site&rdquo;</p>
+                    <div class="content">
+                        <h1>Placing Bad</h1>
+                        <div class="narrow">
+                            <p>This is a placeholder generator for developers to add to their sites, to help with testing. But what developer doesn't like Breaking Bad.</p>
+                            <p class="quote">&ldquo;I am the one who...adds placeholders to my site&rdquo;</p>
+                        </div>
                     </div>
-                </div>
-            {% endblock %}
-        </header>
+                {% endblock %}
+            </header>
+        {% endblock %}
 
         <main>
             {% block content %}{% endblock %}
 		</main>
 
-        <footer>
-            <p>Built by<br />
-                <a href="http://designyourcode.io" target="_blank" onclick="ga('send', 'event', 'External Link', 'DesignyourCode Site');"><img class="logo" src="assets/img/designyourcode.png" alt="designyourcode.io"></a>
-            </p>
-            <p><a href="https://github.com/DesignyourCode/placing-bad" onclick="ga('send', 'event', 'External Link', 'Placing Bad's Github');">Visit the project on Github<br /><i class="fa fa-github"></i></a></p>
-
-            <div class="support">
-                <p><strong>A special thanks goes to the contributors on this project.</strong><br />
-                    <a href="https://github.com/DesignyourCode/placing-bad/graphs/contributors" target="_blank" onclick="ga('send', 'event', 'External Link', 'Contributors');">Visit the Github contributions page</a>
+        {% block footer %}
+            <footer>
+                <p>Built by<br />
+                    <a href="http://designyourcode.io" target="_blank" onclick="ga('send', 'event', 'External Link', 'DesignyourCode Site');"><img class="logo" src="assets/img/designyourcode.png" alt="designyourcode.io"></a>
                 </p>
-            </div>
-        </footer>
+                <p><a href="https://github.com/DesignyourCode/placing-bad" onclick="ga('send', 'event', 'External Link', 'Placing Bad's Github');">Visit the project on Github<br /><i class="fa fa-github"></i></a></p>
+
+                <div class="support">
+                    <p><strong>A special thanks goes to the contributors on this project.</strong><br />
+                        <a href="https://github.com/DesignyourCode/placing-bad/graphs/contributors" target="_blank" onclick="ga('send', 'event', 'External Link', 'Contributors');">Visit the Github contributions page</a>
+                    </p>
+                </div>
+            </footer>
+        {% endblock %}
 
         <script>
             (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

diff --git a/templates/views/404.html.twig b/templates/views/404.html.twig
@@ -0,0 +1,16 @@
+{% extends "base.html.twig" %}
+
+{% block header_outer %}{% endblock %}
+
+{% block content %}
+    <img src="assets/img/page-not-found.jpg" />
+
+    <div class="section white-bg page-not-found">
+        <div class="content">
+            <h1>404 Page Not Found</h1>
+            <h2>The page you are looking for could not be found.</h2>
+            <p>Check the address bar to ensure your URL is spelled correctly. If all else fails, you can visit our home page at the link below.</p>
+            <p><a href="/" class="btn">Visit the Home Page</a>
+        </div>
+    </div>
+{% endblock %}
diff --git a/templates/views/home.html.twig b/templates/views/home.html.twig
@@ -38,8 +38,7 @@
 &lt;!--'All' will let you get any image from any category--&gt;
 &lt;img src=&quot;{{ currenturl }}width/height/<strong>all</strong>&quot; /&gt;</code></pre>
 
-
-                <p><a href="/attribution" class="inline-link dark" onclick="ga('send', 'event', 'Internal Link', 'Image Attributions');"><i class="fa fa-link"></i> Image attributions</a></p>
+                <p class="links"><a href="/attribution" class="inline-link dark" onclick="ga('send', 'event', 'Internal Link', 'Image Attributions');"><i class="fa fa-link"></i> Image attributions</a><a href="/releases" class="inline-link dark right" onclick="ga('send', 'event', 'Internal Link', 'Changelogs - Quickstart');"><i class="fa fa-repeat"></i> View the changelogs</a></p>
             </div>
         </div>
     </div>
@@ -98,6 +97,8 @@ sepia (this does not accept any values)</code></pre>
 
                 <pre>
 <code class="language-html">&lt;img src=&quot;{{ currenturl }}width/height<strong>?random</strong>&quot; /&gt;</code></pre>
+
+                <p class="links"><a href="/releases" class="inline-link dark" onclick="ga('send', 'event', 'Internal Link', 'Changelogs - Customisation');"><i class="fa fa-repeat"></i> View the changelogs</a></p>
             </div>
 
             <div class="right third">

diff --git a/templates/views/releases.html.twig b/templates/views/releases.html.twig
@@ -18,7 +18,7 @@
             <ul>
                 <li>Using URL parameter on home page no longer breaks images</li>
                 <li>Image load times have been dramatically improved (caching added)</li>
-                <li></li>
+                <li>404 Page added to help with url errors</li>
             </ul>
 
             <h3><i class="fa fa-check"></i> Features</h3>