From 5a9799f2104b272f30d06062b291cd4f987de0d7 Mon Sep 17 00:00:00 2001
From: Sergey Yarkov <serzh.yarkov@gmail.com>
Date: Thu, 17 Mar 2022 21:28:22 +0300
Subject: [PATCH] feat: rendering article page

---
 handlers.js          | 17 ++++++++++++++---
 middlewares.js       |  2 +-
 preloads/routes.js   |  2 +-
 public/css/style.css | 30 +++++++++++++++++++++++++++---
 views/404.hbs        |  2 +-
 views/500.hbs        |  2 +-
 views/article.hbs    | 20 ++++++++++++++++++++
 views/index.hbs      |  2 +-
 8 files changed, 66 insertions(+), 11 deletions(-)
 create mode 100644 views/article.hbs

diff --git a/handlers.js b/handlers.js
index 2fa5ea0..e5f5761 100644
--- a/handlers.js
+++ b/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
+    );
   }
 };
 
diff --git a/middlewares.js b/middlewares.js
index 946c051..aabeb7a 100644
--- a/middlewares.js
+++ b/middlewares.js
@@ -15,5 +15,5 @@ export const waitMiddleware = async (req, res) => {
     });
   };
 
-  await wait(50);
+  await wait(10);
 };
diff --git a/preloads/routes.js b/preloads/routes.js
index 81828b9..f47826b 100644
--- a/preloads/routes.js
+++ b/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);
diff --git a/public/css/style.css b/public/css/style.css
index 735c381..8a0490f 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -1,8 +1,12 @@
 body {
   font-family: monospace;
   text-align: justify;
-  margin: 75px;
-  max-width: 600px;
+  margin-left: auto;
+  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,
diff --git a/views/404.hbs b/views/404.hbs
index d474659..92e5ece 100644
--- a/views/404.hbs
+++ b/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>
\ No newline at end of file
diff --git a/views/500.hbs b/views/500.hbs
index d474659..92e5ece 100644
--- a/views/500.hbs
+++ b/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>
\ No newline at end of file
diff --git a/views/article.hbs b/views/article.hbs
new file mode 100644
index 0000000..e3f6bd9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/views/index.hbs b/views/index.hbs
index 7ac3183..f4102ad 100644
--- a/views/index.hbs
+++ b/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