feat: rendering article page

handlers.js

@@ -21,7 +21,11 @@ export const indexPageHandler = async (req, res) => {
     });
   } catch (error) {
     console.error(error);
-    res.render('./views/500.hbs', { title: '500 | Internal server error ' });
+    res.render(
+      './views/500.hbs',
+      { title: '500 | Internal server error ' },
+      500
+    );
   }
 };
 
@@ -51,10 +55,17 @@ export const getArticleHandler = async (req, res) => {
       return;
     }
 
-    res.json({ data: data.rows });
+    res.render('./views/article.hbs', {
+      title: data.rows[0].title,
+      article: data.rows[0],
+    });
   } catch (error) {
     console.error(error);
-    res.render('./views/500.hbs', { title: '500 | Internal server error ' });
+    res.render(
+      './views/500.hbs',
+      { title: '500 | Internal server error ' },
+      500
+    );
   }
 };
 

middlewares.js

@@ -15,5 +15,5 @@ export const waitMiddleware = async (req, res) => {
     });
   };
 
-  await wait(50);
+  await wait(10);
 };

preloads/routes.js

@@ -14,6 +14,6 @@ import {
  */
 import { waitMiddleware } from '../middlewares.js';
 
-router.get('/', indexPageHandler);
+router.get('/', indexPageHandler).middleware([waitMiddleware]);
 router.get('/articles/:id', getArticleHandler).middleware([waitMiddleware]);
 router.post('/articles', createArticleHandler);

public/css/style.css

@@ -1,8 +1,12 @@
 body {
   font-family: monospace;
   text-align: justify;
-  margin: 75px;
+  margin-left: auto;
-  max-width: 600px;
+  margin-right: auto;
+  margin-top: 5rem;
+  max-width: 900px;
+  font-size: 16px;
+  padding: 15px;
 }
 
 .app .app-heading {
@@ -11,8 +15,23 @@ body {
   align-items: center;
 }
 
+.app .app-tag {
+  background-color: #000;
+  color: #fff;
+  padding: 10px;
+  font-weight: bold;
+  border-radius: 2px;
+  font-size: 18px;
+  user-select: none;
+}
+
+.app .article-heading {
+  display: block;
+}
+
 .app .app-body article {
   margin-top: 2rem;
+  line-height: 1.3rem;
 }
 
 .app .app-footer {
@@ -31,9 +50,14 @@ body {
   text-align: left;
 }
 
+.app .app-footer span {
+  display: block;
+  margin-bottom: 1rem;
+}
+
 .app .app-footer img {
   width: 11rem;
-  margin: 0 30px;
+  margin: 10px 30px;
 }
 
 .app .app-footer .nodejs-logo,

views/404.hbs

@@ -2,6 +2,6 @@
   {{> head }}
   <body>
     <h1>{{ title }}</h1>
-    <a href="/">return to home</a>
+    <a href="/">&lt; return to home</a>
   </body>
 </html>

views/500.hbs

@@ -2,6 +2,6 @@
   {{> head }}
   <body>
     <h1>{{ title }}</h1>
-    <a href="/">return to home</a>
+    <a href="/">&lt; return to home</a>
   </body>
 </html>

views/article.hbs

@@ -0,0 +1,20 @@
+<html lang='en'>
+  {{> head }}
+  <body>
+    <main class='app'>
+      <a href="/">&lt; return to home</a>
+      <div class='app-heading article-heading'>
+        <h1>{{ article.title }}</h1>
+        <span>{{ article.created_at }}</span>
+      </div>
+      <div class="app-body">
+        <p>{{ article.description }}</p>
+      <hr />
+        <article>
+          <p>{{ article.body }}</p>
+        </article>
+      </div>
+      {{> footer }}
+    </main>
+  </body>
+</html>

views/index.hbs

@@ -4,7 +4,7 @@
     <main class='app'>
       <div class='app-heading'>
         <h1>Articles (5)</h1>
-        <small>{{title}}</small>
+        <span class="app-tag">{{title}}</span>
       </div>
       <div class='app-description'>
         <p>This app showcases a website built with NodeJS. The site has a set of